BBCode เราเรียกได้ว่าเป็น lightweighted markup language ใช้สำหรับจัดรูปแบบข้อความตามเว็บบอร์ดต่าง ๆ ครับ มีลักษณะของแท็กอยู่ในเครื่องหมายก้ามปู เช่น [b]ตัวหนา[/b] ครับ เจ้าตัว BBCode นี่เว็บบราวเซอร์มันไม่รู้จักครับ ต้องทำการแปลไปเป็น markup language ที่ใช้ทั่ว ๆ ไปก่อนครับ นั่นก็คือ HTML หรือ XHTML ครับ เช่น จาก [b]ตัวหนา[/b] จะถูกแปลงไปเป็น <b>ตัวหนา</b> แล้วค่อยนำไปแสดงผลครับ

จุดประสงค์หลัก ๆ ของ BBCode คือ เพื่อให้ผู้ใช้สามารถจัดรูปแบบข้อความได้ง่ายขึ้น รวมไปถึงเพื่อความปลอดภัยของการแสดงผลข้อความที่โพสโดยผู้ใช้ด้วยครับ เช่น การควบคุมการใช้งาน javascript การควบคุมให้ใช้ tag ภายในข้อกำหนด เป็นต้น

เจ้าตัว BBCode เนี่ย มันไม่มีข้อกำหนดเป็นมาตรฐาน เพียงแค่มีการใช้งานโดยทั่วไปตามเว็บบอร์ดเวอร์ชั่นใหม่ ๆ ทั่วไปครับ รายละเอียดรูปแบบคำสั่ง สามารถตามไปดูในหัวข้ออ้างอิงท้ายบทความได้เลยครับ

ทีนี้มาดูกันว่าปลั๊กอินตัวนี้จะทำงานยังไงครับ

ง่าย ๆ ครับ แค่เรียก $(<selector>).bbcode(); เท่านั้นครับ เช่น

$("div").bbcode();

ไอเดียของปลั๊กอินตัวนี้ผมได้มาจากตอนเขียนแก้บักการแสดงผล BBCode ให้เก็บเว็บไซต์หนึ่งครับ ปกติแล้วการ render จาก BBCode ไปเป็น HTML นั้น มักจะทำที่ Server และส่ง HTML ที่ได้มาให้บราวเซอร์แสดงผล แต่ผมต้องการที่จะลดโหลดฝั่ง Server ลง โดยจะย้ายการทำงานจากฝั่ง Server มาทำที่บราวเซอร์แทน

หลักการทำงานก็ไม่มีอะไรมากครับ ผมใช้วิธีการกำหนดค่า Pattern ในรูปแบบ Regular Expression และใช้ Regular Expression Engine ของ JavaScript ในการแสดงผลให้ถูกต้องเท่านั้นครับ

ลองไปดูที่ LIVE DEMO กันเลยครับ

อ้างอิง

• http://en.wikipedia.org/wiki/BBCode

วิธีการใช้งาน ก็ง่ายอย่างที่คิดนั่นแหละครับ

$.multicheck();  // ใช้สั่งให้ selector ที่เลือกใช้งาน shift+click ได้
$.checkall();    // เลือกทั้งหมด
$.checknone();   // ไม่เลือกเลย
$.invertcheck();   // สลับที่เลือก

ลองดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

ส่วน source code ที่เป็น minified ก็ดาวน์โหลดได้จากที่นี่เลยครับ

หลังจากนั้น ก็มาถึงสิ่งที่ผมอยากให้ plugin ตัวนี้มี นั่นก็คือ การกำหนดความกว้าง หรือความสูงสูงสุด นั่นคือ ถ้าผมกำหนดให้ความกว้างที่มากที่สุดมีค่าเป็น 200 pixels และภาพต้นฉบับมีความกว้างเป็น 1024 pixels ภาพที่ย่อแล้ว จะเหลือความกว้างเป็น 200 pixels นั่นเอง

รูปแบบการใช้งาน

$.imgrescale(options);

โดยที่ options ในตอนนี้มีแค่ตัวเดียวครับ คือ maxsize ดังนั้นถ้าต้องการกำหนดค่า maxsize ก็จะเรียกแบบนี้ครับ

$.imgrescale({maxsize:200});

ลองดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

สำหรับ source code ที่เป็น minified ก็ดาวน์โหลดได้จากที่นี่เลยครับ

ใช้ดีอย่าลืม feedback แล้วบอกต่อนะครับ

อ้างอิง

• Aspect Ratio: http://en.wikipedia.org/wiki/Aspect_ratio_(image)

ส่วนผสมของผม หลีกหนีไม่พ้น jQuery ครับ ร่วมกับการเขียน plugin โดยมีคอนเซปท์ว่า จับอะไรก็ได้ บนเว็บ เอามาทำเป็น  floating layer ได้หมด แล้วก็เลื่อนตาม scrollbar ได้ด้วย คิดไปคิดมาต่อยอดได้อีกว่า จะให้มันอยู่ตรงไหนของหน้าจอก็ได้ snap ซ้าย snap ขวา หรือจะอยู่มันตรงกลาง บนล่าง ได้หมด โอ้ว ชักน่าตื่นเต้นแล้วสิ

ในที่สุด ผมก็ลองทดสอบตัว prototype ของผมกับเว็บของผู้ว่าจ้างทันทีครับ (http://www.brendabence.com/media-room/) เออ พอใช้ได้แฮะ หลังจากนั้นก็เอามานั่งพัฒนาต่อยอดตามที่ตั้งใจไว้จนออกมาให้ได้ใช้งานกัน เสร็จแล้วก็ตั้งชื่อให้มันว่า scrollads plugin สำหรับ jQuery ครับ

รูปแบบการใช้งาน

$.scrollads(options);

โดยที่ options เนี่ย จะใส่หรือไม่ใส่ก็ได้ครับ ถ้าใส่ก็จะเขียนอยู่ในรูปแบบ JSON โดยที่มี key ตามนี้เลยครับ

closer เป็น selector ที่ระบุปุ่มที่ใช้ปิดตัว layer นี้
hsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวนอน มีค่าเป็น

• left ชิดซ้าย
• center อยู่ตรงกลาง
• right ชิดขวา
• custom อยู่ตำแหน่งที่ระบุไว้ใน left
• none อยู่ตำแหน่งตาม html

vsnap เป็นตัวบอกว่า layer จะอยู่ตำแหน่งไหนในแนวตั้ง มีค่าเป็น

• top ชิดด้านบน
• middle อยู่ตรงกลาง
• bottom ชิดด้านล่าง
• custom อยู่ตำแหน่งที่ระบุไว้ใน top
• none อยู่ตำแหน่งตาม html

เช่น

$("#floatme").scrollads();
$("#floatme").scrollads({closer:".close"});
$("#floatme").scrollads({closer:".close",hsnap:"center"});

ลองไปดู LIVE DEMO กันดีกว่าครับ

สำหรับ source code ตัวที่เป็น minified สามารถดาวน์โหลดได้จากที่นี่ครับ

ใช้ดีอย่าลืมมา feedback แล้วบอกต่อนะครับ

อัพเดท วันที่ 6 สิงหาคม 2552
+ ผมได้เพิ่ม option smooth ลงไปครับ เพื่อให้ scroll ได้ smooth ขึ้นครับ ถ้าไม่ใส่มันก็จะเลื่อนปึ๊ด ๆ แบบเดิม แต่ถ้าใส่ แล้วกำหนดเป็น “true” มันก็จะหยอด effect ลงไปหน่อย ทำให้เลื่อนแล้วดูเนียน ๆ ครับ ลองดูได้ครับ ขอบคุณครับ

ขั้นแรก ผมจะกำหนด data ที่จะใช้งานก่อนครับ

var data = {
    id: 4,
    name: "User List",
    table: [
        {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'},
        {id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'},
        {id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'},
        {id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'},
        {id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'}
    ],
    toString: function() {
        return this.name.bold() + ' (count: ' + this.table.length + ')';
    }
};

เสร็จแล้วก็มากำหนด Template

{#template MAIN}
<div id="header">{$T.name}</div>
<table>
{#foreach $T.table as r}
    {#include row root=$T.r}
{#/for}
</table>
{#/template MAIN}

{#template row}
<tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
    <td>{$T.name.bold()}</td>
    <td>{$T.age}</td>
    <td>{$T.mail.link('mailto:'+$T.mail)}</td>
</tr>
{#/template row}

ที่เหลือก็แค่เรียกใช้งาน plugin ตัวนี้เท่านั้นเองครับ ง่าย ๆ

$("#result").setTemplate($("textarea").text()).processTemplate(data);

ลองไปดูตัวอย่างที่ LIVE DEMO ได้เลยครับ

แหล่งอ้างอิงและ API

• http://jtemplates.tpython.com/
• http://www.jquerytips.com/2008/12/07/jtemplate-template-engine-in-javascript/

อุปกรณ์ที่จำเป็น แน่นอนก็คือ jQuery และอุปกรณ์เสริมคือ dimension สำหรับ jQuery ที่เหลือคือ ทำ Plugin สำหรับ jQuery ขึ้นมาตัวนึง เพื่อตอบโจทย์ดังนี้

1. สามารถแสดงภาพ Panorama แบบไม่ต้องวนได้
2. การเลื่อนภาพ ให้มีปุ่ม เมื่อเอาเมาส์ไปวาง ภาพจะเลื่อนอัตโนมัติ

หลังจากที่ได้โจทย์ ก็เลยทำการเพิ่มโจทย์ให้กับตัวเองลงไปอีกนิด เพื่อเพิ่มดีกรีัความมันส์

1. ใน 1 หน้า ต้องสามารถวาง Panorama ได้หลายภาพ
2. ปุ่ม 1 ปุ่ม จะ Control ภาพ Panorama ได้กี่ภาพก็ได้
3. ปุ่มหลาย ๆ ปุ่ม จะ Control ภาพ Panorama ภาพเดียวก็ได้
4. ปุ่ม จะเป็นอะไรก็ได้ จะเป็น Text หรือ รูปภาพก็ได้

งานนี้ dimension ช่วยลดภาระได้มาก ที่เหลือก็เป็นเรื่องของการเปลี่ยนแปลง stylesheet ตอน runtime เท่านั้น งานเลยออกมาอย่างที่แสดงใน LIVE DEMO

ใครสนใจ View Source แล้ว Copy Code ไปใช้ได้เลยครับ ไม่หวง ผมทำ JSPack ไว้ เอาไปแกะเองนะครับ