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

ไอเดียหลัก ๆ ของการทำ chaining ก็คือ การทำให้มันสามารถเรียกต่อกันได้เป็นทอด ๆ นั่นเอง ยกตัวอย่างใน jQuery ซึ่งมีคุณสมบัติที่เรียกว่า chainability อยู่ ทำให้เราสามารถเรียกคำสั่งได้แบบนี้

$("#submenu").addClass("whitemenu").show("slow");

จะเห็นได้ว่า เราสามารถเรียก .show ต่อเนื่องได้เลย นี่เองที่ทำให้เกิดการเรียกอย่างต่อเนื่อง หรือ การทำ Method chaining นั่นเอง

ใน PHP เราสามารถทำให้ object มีคุณสมบัติเดียวกันนี้ได้เช่นกัน เพียงแต่น่าเสียดายที่คุณสมบัตินี้ มีอยู่ใน PHP ตั้งแต่เวอร์ชั่น 5 ขึ้นไปเท่านั้น สำหรับคนที่ยังใช้ PHP4 อยู่ ผมต้องขอแสดงความเสียใจด้วยครับ ฮ่า ๆ และคาดว่าเหตุนี้เองที่ทำให้ kohana สามารถใช้งานได้กับ PHP5 ขึ้นไปเท่านั้น

หลักการง่าย ๆ ที่ทำให้เราสามารถทำ Method chaining ได้ก็คือ การเขียน class และทำการคืนค่าของ object มันเองกลับออกมาหลังจากที่จบ method ทำนองเดียวกับใน jQuery ตอนที่เขียน plugin

ตอนจบ เราก็จะทำการ return jQuery object กลับออกมาให้เช่นเดียวกัน

ลองมาดูตัวอย่างใน PHP กันดีกว่าครับ

// php5 only
class Database
{
	private $link;

	private $table;
	private $field;
	private $condition;
	private $order;
	private $result;

	// connection functions
	function __construct($config)
	{
		$this->flush();
		$this->link = null;
		$this->connect($config["hostname"],
				$config["username"],
				$config["password"],
				$config["database"]);
	}

	function __destruct()
	{
		$this->disconnect();
	}

	function connect($host = "",
				$user = "",
				$password = "",
				$db = "")
	{
		if ($this->link !== null)
			$this->disconnect();

		$this->link = mysql_connect($host, $user, $password);

		if ($this->link === FALSE)
		{
			echo $this->err();
		}
		else
		{
			if ($db !== "")
			{
				return $this->db($db);
			}
		}
		return $this;
	}

	function disconnect()
	{	// break chain
		if ($this->link !== null)
			mysql_close($this->link);
		$this->link = null;
	}

	function db($db)
	{
		if (mysql_select_db($db, $this->link) === FALSE)
			echo $this->err();
		return $this;
	}

	function errno()
	{
		return mysql_errno($this->link);
	}

	function ok()
	{
		return ($this->errno() == 0);
	}

	function err()
	{	// break chain
		return mysql_error($this->link);
	}

	function execute($sql)
	{
		$this->result = mysql_query($sql, $this->link);
		return $this;
	}

	function records()
	{
		$result = array();
		if ($this->result !== FALSE)
		{
			while (($row = mysql_fetch_assoc($this->result)) !== FALSE)
			{
				$result[] = $row;
			}
		}
		return $result;
	}

	function flush()
	{
		$this->table = "";
		$this->field = "";
		$this->condition = "";
		$this->order = "";
		$this->result = null;
		return $this;
	}

	function safe($value)
	{
		if (!get_magic_quotes_gpc())
		{
			$value = addslashes($value);
		}
		return "'$value'";
	}

	function table($table)
	{
		$this->table = $table;
		return $this;
	}

	function field($field)
	{
		$this->field = $field;
		return $this;
	}

	function condition($condition)
	{
		if (is_array($condition))
		{
			$cond = array();
			foreach ($condition as $f => $v)
			{
				$cond[] = "($f = " . $this->safe($v) . ")";
			}
			$condition = implode(" AND ", $cond);
		}
		$this->condition = $condition;
		return $this;
	}

	function top($num = 1)
	{
		$field = $this->field;
		if ($field == "") $field = "*";
		$sql = "SELECT {$field} FROM {$this->table}";
		if ($this->condition !== "")
			$sql .= " WHERE {$this->condition}";
		if ($this->order !== "")
			$sql .= " ORDER BY {$this->order}";
		$sql .= " LIMIT 0, {$num}";
		return $this->execute($sql)->records();
	}

	function all()
	{
		$field = $this->field;
		if ($field == "") $field = "*";
		$sql = "SELECT {$field} FROM {$this->table}";
		if ($this->condition !== "")
			$sql .= " WHERE {$this->condition}";
		if ($this->order !== "")
			$sql .= " ORDER BY {$this->order}";
		return $this->execute($sql)->records();
	}

	function order($order)
	{
		$this->order = $order;
		return $this;
	}
}

code ด้านบนนี้ เป็น code ที่ผมทดสอบ โดยทำเป็นไอเดียเริ่มต้นง่าย ๆ สำหรับการทำ query builder จะเห็นได้ว่า หลาย ๆ method จะมีการ return ตัว object มันเอง ($this) ไอเดียหลักในการกำหนดว่า method ไหนที่ผม return หรือไม่ return $this ก็คือ มีความจำเป็นในการเรียก method ต่อจากนี้หรือไม่นั่นเอง

การใช้งานก็ไม่ได้ยุ่งยากอะไร

$dbconf = array(
	"hostname" => "localhost",
	"username" => "root",
	"password" => "123456",
	"database" => "test"
);
$db = new Database($dbconf);
$rows = $db->table("products")
		->field("product_id, product_name")
		->condition(array(
				"product_group"=>"tyre",
				"product_model"=>"Eagle"))
		->top();
print_r($rows);

จากตัวอย่างด้านบน เป็นการ select หา product จาก table products โดยกำหนด criteria ในการค้นหาเป็น product_group = ‘tyre’ และ product_model = ‘Eagle’ โดยจะเลือกเอาเฉพาะ record แรกสุดเท่านั้น

เห็นมั๊ยครับ หลักการง่าย ๆ แค่ return $this เองครับ ที่สำคัญ อย่าลืมนะครับ PHP5 ขึ้นไปนะครับ

ขอให้สนุกกับการเขียนโปรแกรมครับ

หลังจากนั้น ก็มาถึงสิ่งที่ผมอยากให้ 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/

1. APC ย่อมาจาก Alternative PHP Cache ครับ ซึ่งจะมี library ที่ผมต้องการ นั่นคือ apc_fetch() ครับ Server ที่เราใช้จะต้องสนับสนุน APC ครับ ซึ่งเป็น PECL เข้าไปดาวน์โหลดได้จาก http://pecl.php.net/package/apc ครับ
2. Ajax ในที่นี้ ผมใช้ Ajax ควบคู่กับ JSON ครับ
3. Upload form ก็จะเป็น Form Upload ธรรมดานี่แหละครับ กำหนด enctypemultipart/form-data ให้เรียบร้อย และ method เป็น POST ให้เรียบร้อยเช่นกันครับ

สำหรับไฟล์ที่จำเป็นในการทำ Upload Progress ด้วยวิธีนี้ ก็จะมี 3 ส่วนเช่นกัน ง่าย ๆ ตามนี้เลยครับ

1. Upload Form จะเป็นหน้า Page ที่ User เห็นครับ เอาไว้สำหรับให้ User Browse File และกด Submit ครับ
2. Upload จะเป็นหน้า Page ที่เอาไว้สำหรับ Upload เลยครับ ในหน้านี้ ให้ทำการอัพโหลดเหมือนปกติครับ คือมีการ move_uploaded_file() อะไรเหมือนปกติืืทุกอย่างครับ
3. Progress จะเป็นส่วนที่เอาไว้สำหรับให้หน้า Form Upload มา poll ค่า status ของการ Upload ครับ ส่วนนี้แหละครับ ที่จะเป็นตัว return กลับไปว่า อัพโหลดอะไรได้ยังไงเท่าไหร่แล้วครับ

Upload Form

ทีนี้ เมื่อเรามีทุกอย่างพร้อม เราก็จะทำการกำหนด key สำหรับ Upload session เพื่อให้การ Poll ถามข้อมูลนั้นทำได้ถูกต้องครับ การกำหนดเราทำได้โดยการใส่ input hidden ที่ชื่อ APC_UPLOAD_PROGRESS ให้มีค่าเป็น key ที่เราต้องการครับ ผมสมมติให้มีค่าเป็น “abcd” ดังนั้น form ที่เราได้ควรจะมีหน้าตาประมาณแบบนี้ครับ (ชื่อ APC_UPLOAD_PROGRESS เราสามารถเปลี่ยนได้ใน php.ini ครับ)

<form enctype="multipart/form-data" action="upload.php" method="post">
    <input type="hidden" name="APC_UPLOAD_PROGRESS" value="abcd">
    <input name="upfile" type="file"></span>
    <input type="submit" value="Upload">
</form>

Upload

ในส่วนนี้ผมไม่พูดถึงนะครับ ทำการอัพโหลดไฟล์ตามปกติเลยครับ ในกรณีที่ไฟล์ใหญ่มาก อย่าลืม set ให้ไม่ต้องมี timeout ด้วย function set_time_limit(0) ด้วยนะครับ

Progress

สำหรับ Progress ไฟล์นั้น จะมีหน้าตาประมาณนี้ครับ

<?php
header("content-type:application/json");
$stat = apc_fetch('upload_abcd');
if ($stat)
{
    if (!isset($stat["total"])) $stat["total"] = 0;
    if (!isset($stat["current"])) $stat["current"] = 0;
    if (!isset($stat["rate"])) $stat["rate"] = 0;
    if (!isset($stat["cancel_upload"])) $stat["cancel_upload"] = 0;
    if (!isset($stat["done"])) $stat["done"] = 0;
    f (!isset($stat["filename"])) $stat["filename"] = "";
    printf("[%0d,%0d,%0d,%0d,%0d,\"%s\"]",
    $stat["total"] ,
    $stat["current"] ,
    $stat["rate"] ,
    $stat["cancel_upload"] ,
    $stat["done"],
    addslashes($stat["filename"]));
}
else
{
    echo "null";
}
?>

สิ่งที่เราต้องทำคือ ทำการ poll ข้อมูลการอัพโหลดของ key “abcd” จาก server เราก็ทำได้โดยเรียก function apc_fetch และกำหนด parameter เป็น string ขึ้นต้นด้วย “upload_” และตามด้วย key ของเรา คือ “abcd”

ค่าที่ return มาจาก apc_fetch จะได้เป็น associative array โดยมี key ที่เราจะเอามาใช้งานคือ

• total เป็นขนาดไฟล์
• current เป็นขนาดไฟล์ที่อัพโหลดได้แล้ว
• rate คือความเร็วในการอัพโหลดครับ
• filename เป็นชื่อไฟล์ในเครื่องเราครับ (เช่น C:\Download\file.txt)

คราวนี้ เราก็แค่ใช้ ajax มา poll ค่าเหล่านี้ออกไปแสดงเท่านั้นเองครับ ทีนี้ต้องพึ่งฝีมือ dhtml กับ graphic ของคุณเองแล้วล่ะครับ ว่าจะทำ progress bar ออกมาได้สวยแค่ไหน

บทความนี้ ผมไม่มี LIVE DEMO แต่มีตัวอย่างให้ลองดาวน์โหลดไปทดสอบกันได้ครับ ดาวน์โหลด กับเว็บที่ผมทำให้เอาไปใช้งานจริงครับ แวะลองไปทดสอบและใช้บริการกันได้ที่ http://www.zidoupload.com ครับ

ทีนี้เราจะมาดู Document ของ jQuery กันครับ ผมจะอ้างเฉพาะเวอร์ชั่น 1.3.x นะครับ จะได้ทันสมัยหน่อย

• Windows Help File (CHM): http://charupload.wordpress.com/2007/12/07/jquery-documentation-chm/
• API Browser: http://api.jquery.com/
• Official Documentation: http://docs.jquery.com/Main_Page

เท่าที่แสดงในเว็บของ jQuery เองมีเท่านี้ครับ ผมเพิ่งโหลด CHM มาใช้คู่กับ Cheat Sheet (jQuery 1.2) สะดวกอยู่ไม่น้อยเลยทีเดียวครับ

ใครมีที่อื่นแนะนำก็บอกกันได้ครับ

หลาย ๆ คนคงรู้แล้วว่า jQuery ออกเวอร์ัชั่นใหม่มาเป็น 1.3.2 แล้ว วันนี้เราถือโอกาสมาคุยส่วนที่ปรับปรุงเพิ่มขึ้นจากเวอร์ชั่นในซีรี่ส์ 1.2.x กันดีกว่าครับ

จากเวอร์ชั่น 1.2.6 เปลี่ยนมาเป็นเวอร์ชั่นในซีรี่ส์ใหม่ คือ 1.3.x มีการเปลี่ยนแปลงที่โดดเด่นตามนี้เลยครับ

1. ความเร็วหยั่งกับติดเทอร์โบของ Selector

ทางทีมพัฒนา jQuery อ้างว่า Selector ของ jQuery ในเวอร์ชั่นนี้ เร็วขึ้นกว่าเดิมถึง 49% นับว่าเป็นการพัฒนาที่น่าชื่นใจจริง ๆ ครับ แหม่…ประทับใจ ๆ [อ้างอิง:http://docs.jquery.com/Release:jQuery_1.3#Sizzle_Selector_Engine]

2. Live Events

การเปลี่ยนแปลงนี้ก็ยอดเยี่ยมครับ live() เป็นเทคนิคการ bind event ที่ไม่ได้แค่ bind กับ element ที่มีอยู่ในเว็บเราตอนนี้เท่านั้น แต่ยังสามารถ auto bind event กับ element ที่จะเกิดขึ้นใหม่ได้อีกด้วย สุดยอดมาก ๆ ครับ ผมยกตัวอย่างว่าเว็บของผมมีการกำหนดให้ <span name=’myspan’> มี class เป็น hoverme เมื่อตอนผมเอา mouseover และให้เอา hoverme ออกตอน mouseout ตาม code ด้านล่างนี้

$(“span[name=myspan]“).mouseover(function(){ $(this).addClass(“hoverme”); }).mouseout(function(){ $(this).removeClass(“hoverme”); });

เดิมทีในเวอร์ชั่นก่อน ๆ นี้ ถ้าเรามีการเพิ่ม <span name=”myspan”> เข้าไปทีหลังจากที่เราเรียกคำสั่งด้านบน มันจะมีปัญหาว่า <span name=”myspan”> อันใหม่จะไม่ bind event ที่เราระบุ ทำให้เราต้องเรียกใหม่ทุกครั้ง

และ live นี่เอง ที่เป็นตัวเปลี่ยนแปลงทุกอย่างครับ ดู code ด้านล่างนี้นะครับ

$(“span[name=myspan]“).live(“mouseover”,function(){ $(this).addClass(“hoverme”); }).live(“mouseout”,function(){ $(this).removeClass(“hoverme”); });

คำัสั่งด้านบนนี้สั่งแค่ครั้งเดียวครับ ถึงแม้ว่าเราจะมี <span name=”myspan”> เพิ่มขึ้นมาใหม่ ๆ ในอนาคต เราก็ไม่ต้อง bind ใหม่แ้ล้วครับ สบ๊ายสบาย…

3. ยกเครื่องการทำ HTML Injection ใหม่

คำสั่งพวก append, prepend, before และ after มีการรื้อเขียนใหม่ เร็วขึ้นโคตร ๆ ครับ 6 เท่า!! ใช่ครับ 6 เท่า หรือ 600% นั่นเอง [อ้างอิง: http://docs.jquery.com/Release:jQuery_1.3#HTML_Injection_Rewrite]

จริง ๆ แล้วมีเยอะกว่านี้อีกเยอะ ใครสนใจเข้าไปติดตามอ่านได้ที่ http://docs.jquery.com/Release:jQuery_1.3 ได้เลยครับ

นอกเหนือจากนั้น

ในการอัพเดทครั้งนี้ ยังมีการเปลี่ยนแปลงที่ก่อให้เกิด Backward Incompatibility นั่นหมายถึงว่า เราไม่สามารถใช้ code เก่าที่เราเขียนไว้แล้วกับ jQuery 1.3.x ได้นี่เองครับ

ยกตัวอย่างเช่น การใช้ @ ในส่วนของ Selector ครับ เช่น $(“[@name=color]“) ที่หมายถึง attribute ชื่อว่า name มีค่าเป็น color ใน 1.3.x เราต้องไม่ใส่ @ แล้วครับ (ถ้าใส่แล้วจะใช้ไม่ได้ ซึ่งต่างจาก 1.2.6 ที่ใส่หรือไม่ใส่ก็ได้) หรือ jQuery.browser ที่ไม่สามารถใช้กับ Safari 2 ได้อีกต่อไป คุณสามารถอ่านรายละเอียดเพิ่มเติมได้จาก http://docs.jquery.com/Release:jQuery_1.3#Performance

วันนี้ไว้เท่านี้ก่อนครับ ว่าง ๆ จะเข้ามาอัพเดทใหม่ครับ

function get_selected(path)
{
    return $(path + " option:selected");
}

function remove_selected(path)
{
    $(path + " option:selected").remove();
}

function append_item(path, value, text)
{
    $(path).append("<option value='" + value + "'>" + text + "</option>");
}

function select_first(path)
{
    $(path + " option:first-child").attr("selected","selected");
}

function select_last(path)
{
    $(path + " option:last-child").attr("selected","selected");
}

function remove_all(path)
{
    $(path).empty();
}

function select_by_value(path, value)
{
    $(path + " option[value=" + value + "]").attr("selected","selected");
}

function remove_by_value(path, value)
{
    $(path + " option[value=" + value + "]").remove();
}

Code ของตัวอย่างด้านบน จะใช้สำหรับการทำงานที่พบได้บ่อย ไม่ว่าจะเป็นการเพิ่ม element OPTION ลงใน select หรือการกำหนดค่า select box ให้เลือกไปที่ option ใด ๆ

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

และวันนี้เราจะมาคุยเรื่องการเอา jQuery มาใช้ร่วมกับ JavaScript Framework ตัวอื่น ๆ

ยกตัวอย่างที่เห็นได้ชัด สำหรับคนที่เคยใช้ prototype.js มาก่อน คงจะเคยเห็น function $() ที่เอาไว้สำหรับดึง Element ที่มี id ตามที่ระบุ และ jQuery ก็เช่นกัน มีการกำหนดให้ $ เป็นการเรียก jQuery Object อย่างย่อ ๆ ทำให้ถ้าเราประกาศใช้ prototype.js และ jQuery พร้อม ๆ กันอาจจะเกิดปัญหาได้

วิธีการแก้ไขทางหนึ่งคือ การเรียกฟังก์ชั่น jQuery.noConflict() ให้ทำงานหลังจาก Framework ของ jQuery และ Framework ที่เราจะนำมาใช้ร่วมกันโหลดเสร็จแล้ว วิธีนี้จะทำให้ $ ไม่เป็นการเรียก jQuery Object อย่างย่ออีกต่อไป เวลาเราจะเรียกใช้ jQuery Object เราก็จะต้องเรียกเป็น jQuery แล้วตามด้วยเครื่องหมายจุด (.) และตามด้วย Method หรือ Attribute ที่ต้องการเรียกใช้ เช่น

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function()
    {
      jQuery("span").html("Hello world");
    }
  );

  $("myid").hide(); // เรียกใช้ $ ของ prototype.js
</script>

หรือถ้าเรายังต้องการให้เรียก jQuery Object แบบสั้น ๆ อยู่ เราก็ยังสามารถกำหนด jQuery Object ให้กับตัวแปรชื่อสั้น ๆ ได้ เช่น

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $j = jQuery.noConflict();
  $j(document).ready(function()
    {
      $j("span").html("Hello world");
    }
  );

  $("myid").hide(); // เรียกใช้ $ ของ prototype.js
</script>

นอกจากนี้แล้ว เรายังสามารถใช้ $ แทน jQuery Object ได้โดยการรับพารามิเตอร์ jQuery Object เข้ามาด้วยในฟังก์ชั่นครับ เช่น

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
  jQuery(document).ready(function($)
    {
      $("span").html("Hello world");
    }
  );

  $("myid").hide(); // เรียกใช้ $ ของ prototype.js
</script>

แต่วิธีนี้จะทำให้เราไม่สามารถเรียก $ ของ prototype ในนั้นได้ครับ เพราะว่ามันชนกันครับ

Tips!

ถ้าไม่อยากใส่ jQuery.noConflict() ให้ทำการ include jquery.js ก่อน Framework ตัวอื่นครับ

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

• http://docs.jquery.com/Using_jQuery_with_Other_Libraries