jQuery: แนะนำปลั๊กอิน ptags (Pines Tags)

Pines Tags เป็นปลั๊กอินของ jQuery ที่เพิ่มลูกเล่นให้กับการเพิ่ม/แก้ไข tags ที่มักจะเห็นกันบนเว็บที่เป็น blog หรือเว็บที่ต้องการให้ผู้ใช้เพิ่มคำสำคัญที่เกี่ยวกับบทความหรือสินค้า ดูตัวอย่างดีกว่าครับ เดี๋ยวจะงง ^^

introduce-ptagsมาดูวิธีการติดตั้งและการนำไปใช้งานกันครับ

  1. ดาวน์โหลดไฟล์ได้จาก Pines Tags
  2. แตกไฟล์ (unzip) จะมีไฟล์ที่ต้องใช้คือ
    • jquery.ptags.js หรือ jquery.ptags.min.js (เวอร์ชั่นที่ minified)
    • jquery.ptags.css
  3. เพิ่มโค้ดไปที่แท็ก head จะเห็นว่ามี jquery-ui.css อยู่ ซึ่งปลั๊กอิน ptags นี้ใช้ themes จาก jQuery UI ครับ
    ...	<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
    	<link href="jquery.ptags.css" rel="stylesheet" type="text/css" /><script type="textjavascript" src="jquery.js"></script><script type="textjavascript" src="jquery.ptags.min.js"></script>
  4. เรียกใช้งาน
    $(function(){
    $('#tags').ptags();
    });

ตัวอย่างโค้ดทั้งหมดครับ

ตัวอย่างการใช้งาน Pines Tags
		<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
		<link href="jquery.ptags.css" rel="stylesheet" type="text/css" /><script type="textjavascript" src="jquery.js"></script><script type="textjavascript" src="jquery.ptags.min.js"></script>
<script type="text/javascript">// <![CDATA[
	$(function(){
		$('#tags').ptags();
	});

// ]]></script>

 Tags: <input id="tags" type="text" name="tags" value="" />

หากต้องการเปลี่ยนสีก็เข้าไปเลือกธีมได้ที่ jQuery UI ThemeRoller พอเลือกธีมได้แล้วก็เอาชื่อมาเปลี่ยนกับ smoothess ครับ เช่น เลือกธีม Cupertino ก็จะต้องเปลี่ยนเป็น

	<link href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" />

เรียบร้อยครับ ^^