Pines Tags เป็นปลั๊กอินของ jQuery ที่เพิ่มลูกเล่นให้กับการเพิ่ม/แก้ไข tags ที่มักจะเห็นกันบนเว็บที่เป็น blog หรือเว็บที่ต้องการให้ผู้ใช้เพิ่มคำสำคัญที่เกี่ยวกับบทความหรือสินค้า ดูตัวอย่างดีกว่าครับ เดี๋ยวจะงง ^^
มาดูวิธีการติดตั้งและการนำไปใช้งานกันครับ
- ดาวน์โหลดไฟล์ได้จาก Pines Tags
- แตกไฟล์ (unzip) จะมีไฟล์ที่ต้องใช้คือ
- jquery.ptags.js หรือ jquery.ptags.min.js (เวอร์ชั่นที่ minified)
- jquery.ptags.css
- เพิ่มโค้ดไปที่แท็ก 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>
- เรียกใช้งาน
$(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" />
เรียบร้อยครับ ^^