jQueryTips by Tee++; » Plugins http://www.jquerytips.com Coding is fun. Sun, 25 Apr 2010 11:30:33 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 jQuery Validation ครบทุกเม็ดในการ validate http://www.jquerytips.com/2009/04/30/jquery-validation-plugin/ http://www.jquerytips.com/2009/04/30/jquery-validation-plugin/#comments Wed, 29 Apr 2009 18:05:25 +0000 Tee++; http://www.jquerytips.com/?p=407 ใจจริงนั้น วันนี้ขี้เกียจอัพเดทมากๆ แต่นี่ก็ใกล้จะหมดเดือน เมษาแล้ว และถ้าอัพบทความนี้สำเร็จ ก็จะกลายเป็นเดือน ที่มีบทความอัพเดทมากที่สุด นั่นก็คือ “11 บทความ” เรียกว่าเป็นการทำลายสถิติ ตัวเอง นั่นเอง 555+

นานมาแล้วครั้งนึงผมเคยแนะนำ plugin ของ jQuery ที่ชื่อว่า Really Simple Validation ซึ่งก็เอาไว้ใช้ทำงาน validate ข้อมูลจาก Form เป็นตัวที่ค่อนข้างจะใช้งานง่ายมากเลยทีเดียว

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

สำหรับ validation plugin ตัวนี้นั้น สามารถที่จะ ตรวจเช็ค ข้อมูลได้หลาย แบบมากๆ เรียกว่าทุกแบบเลยดีกว่า เพราะมันเขียน condition เติมเองได้ รวมไปถึงการ remote เพื่อใช้ตรวจสอบ พวกชื่อ username, email, captcha ได้โดยไม่ต้อง มีการเปลี่ยน page แต่อย่างใด

ทั้งยัง config การแสดง valid, invalid ข้อความ ได้อย่างสวยงาม แต่ว่า ผมคงไม่อธิบายหมดหรอก มันเยอะจัดเลย เหนื่อยนะ เอาแค่พอใช้งาน ได้ไปศึกษาต่อได้ก็พอแล้วล่ะ มาเริ่มกันเลยดีกว่า เริ่มจะง่วงนิดๆ ละ…

Head:

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  2. <script src="jquery.validate.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4.         $(function() {
  5.  
  6.                 $(‘#demo’).validate({
  7.                         rules: {
  8.                                 name: "required",
  9.                                 gender: "required"
  10.                         },
  11.                         errorPlacement: function(error, element) {
  12.                                 if (element.is(‘:radio’) || element.is(‘:checkbox’))
  13.                                         error.appendTo( element.parent().parent().next() );
  14.                                 else
  15.                                         error.appendTo( element.parent().next() );
  16.                         },
  17.                         success: function(label) {
  18.                                 label.html(‘ok’).addClass(’success’);
  19.                         }
  20.                 });
  21.  
  22.         });
  23. </script>

ส่วนนี้เป็นการเรียกใช้งาน plugin ครับ โดยที่ผมให้ validation เงื่อนไข
field:name, gender จำเป็นต้องต้องกรอก

ส่วนตรง errorPlacemanet นั้น ผมบังครับให้ข้อความ Error ต้องแสดงนะจุดไหน (จริงๆ ถ้าไม่ serious ก็ไม่ต้องก็ได้ มันจะไปแสดงหลัง input)

ตรง success นั้นผม ก็บอกว่า ถ้าผ่านจะให้ มันทำอะไรกับช่วง message error แทน ที่ผมทำคือ แสดง message “ok” แล้วก็เปลี่ยน class สีมันซะหน่อย

นอกจากนี้มันยัง config ได้อีกเยอะเลย เช่น

  1. rules: {
  2.   username: {
  3.     required: true,
  4.     minlength: 5,
  5.     remote: check.php
  6.   },
  7.   email: {
  8.     required: true,
  9.     email: true,
  10.   },
  11.   emailconfirm: {
  12.     equalTo: ‘#email’
  13.   }
  14. },
  15. messages: {
  16.   username: {
  17.     required: ‘กรอกด้วยๆ’,
  18.     remote: ‘user นี้มีคนใช้อยู่’
  19.   }
  20. }

แบบนี้จะเป็นการ ระบุ validate แบบเต็มๆ รวมทั้งแก้ default message บางตัวด้วย ยังไง ตรงนี้ผมขอฝากให้อ่าน manual เอาเองละกัน มันค่อนข้างจะเยอะ จริงๆ

HTML:

  1. <form method="post" name="demo" id="demo" action="#">
  2. <fieldset>
  3.         <legend>jQueryTips Demo</legend>
  4.         <table>
  5.         <tr>
  6.                 <th>Name</th>
  7.                 <td><input type="text" name="name" id="cname" value="" class="txt" /></td>
  8.                 <td class="form-message"></td>
  9.         </tr>
  10.         <tr>
  11.                 <th>Gender</th>
  12.                 <td>
  13.                         <label><input type="radio" name="gender" value="1" /> Male</label>
  14.                         <label><input type="radio" name="gender" value="2" /> Female</label>
  15.                 </td>
  16.                 <td class="form-message"></td>
  17.         </tr>
  18.         <tr>
  19.                 <td></td>
  20.                 <td colspan="2"><input type="submit" value="Submit" /></td>
  21.         </tr>
  22.         </table>
  23. </fieldset>
  24. </form>

ส่วนนี่เป็นตัว อย่าง HTML ครับ

และเพื่อไม่ให้เสียเวลา และสร้างความเข้าใจมากขึ้น ผมได้เขียนตัวอย่างขึ้นมาไฟล์นึง พร้อมทั้งให้ Download ไปลองแกะกันดู ที่นี่ครับ

Sample

คิดว่าหลังจากได้ดูตัวอย่างและลอง view source ก็น่าจะเข้าใจได้ไม่ยากครับ แต่ว่าลูกเล่น ของ plugin ตัวนี้ นี่มีอีกเพียบเลย ครับ ยังไง ลอง ดูที่ Official Site เอาเลย

]]> http://www.jquerytips.com/2009/04/30/jquery-validation-plugin/feed/ 4 เปลี่ยน Font เน่าๆ ให้ดูสวยงามด้วย jQuery + sIFR http://www.jquerytips.com/2009/04/22/jquery-sifr/ http://www.jquerytips.com/2009/04/22/jquery-sifr/#comments Wed, 22 Apr 2009 16:00:51 +0000 Tee++; http://www.jquerytips.com/?p=398 บทความนี้มันมีที่มาครับ เนื่องจาก วันก่อน เห็น K.Non และ K.Golf คุยกันใน Twitter ว่า “เว็บไซด์ thairath ใช้ sIFR ด้วย” ก็เลยทำให้เกิดความสงสัยครับ ว่า ไอ้ sIFR เนี่ย มันคืออะไรหว่า?

และก็ไม่รอช้า ถามพี่ Google ในทันที และก็ไม่ผิดหวัง สุดท้ายก็ได้คำตอบมาว่า

ไอ้ sIFR เนี่มันคือโปรเจคของ พี่ Mike Davidson ซึ่งมีหน้าที่คือ นำ Flash มาแทนที่ตัวอักษรภายใน Element ที่ระบุ โดยที่เราสามารถ ใช้ Font จากที่ไหนก็ได้

แล้วก็ลองทำดูได้หน้าตาออกมาแบบนี้ Online Demo (ลอง view Source ดูประกอบ)

หลักการของมันมีอยู่นิดเดียวเองครับ
1. ใช้ js ในการส่งค่า ระบุ พารามิเตอร์ให้กับ Flash รวมไปถึงการดึง text ภายใน element ที่ระบุ ส่งค่าให้กับ flash
2. Flash (swf) ทำการ Render กลับมา

แค่นี้เองครับ แต่ว่านอกจากนี้มันยังสามารถระบุ parameters ได้อีกจำนวนนึง เช่น สี font, สี link, ขนาด, padding, etc.

และที่สำคัญมัน support SEO เต็มตรีนเลย เพราะมันไม่ได้ embed มาทันที แต่อาศัยความสามารถของ js ในการ create object on the fly มา ฉะนั้น ก็ให้ Bot อ่าน Source Code เดิมๆ กันต่อไป

จากนั้นผมก็ลองเอามาเล่นพักนึง เห็นการเรียก element แบบนี้แล้วมันทำให้นึกถึง jQuery แฮะ เลยเดาเอาว่า ต้องมี เทพๆ เขียน plugin ให้กรู ใช้เป็นแน่แท้ และก็…..

มีจริงๆ ครับ jQuery sIFR Plugin

พอได้แบบนี้แล้วทำให้วิธีการใช้งานสะดวกมากขึ้นเลย ทีนี้เรามาเริ่มต้นใช้งานมันดูกัน

ก่อนอื่นก็ไปโหลด plugin ซึ่งจะประกอบไปด้วย 3 ไฟล์ ดังนี้
1. jQuery Sifr Plugin v1.5
มีหน้าที่ในการเขียน syntax js เอาไปติดต่อกับ flash ซึ่งถือเป็นหัวใจเลยครับ

2. jQuery
อันนี้ก็รู้ๆ กันอยู่ jQuery Core นั่นเอง

3. jQuery Flash Plugin v1.0.1
อันนี้จะถูกเรียกใช้ใน plugin อีกทีเพื่อทำการ embed flash โดยที่เราไม่ต้องมากังวลว่า มันจะต้องใช้ embed หรือ object ในการใช้งาน flash และความสามารถอื่นๆ

4. Fonts
อันนี้ผมเอาบางส่วนของชาวบ้านมาให้ใช้ทดสอบ
*** ขอขอบคุณ Font ภาษาไทย จาก f0nt.com ***

เริ่มต้นการใช้งานก็เรียกไฟล์ js แบบนี้ครับ

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  2. <script src="jquery.flash.min.js" type="text/javascript"></script>
  3. <script src="jquery.sifr.min.js" type="text/javascript"></script>

ต่อจากนั้นเรียกใช้งาน plugin และทำการ define ของ element ที่จะถูกเปลี่ยนแปลงค่า

  1. <script type="text/javascript">
  2.         $(document).ready(function(){
  3.                 $.sifr({
  4.                         path: ‘resources/’,
  5.                         fontSize: 30,
  6.                         color: ‘#FF3300′,
  7.                         save: true
  8.                 });
  9.  
  10.                 $(‘h1′).sifr({ font: ‘iannnnnvcdlight’ });
  11.                 $(‘h2′).sifr({ font: ‘AvantGarde Md BT’ });
  12.                 $(‘h3′).sifr({ font: ‘Medici Text’ });
  13.         });
  14. </script>

ในที่นี้จุดที่สำคัญๆ ก็คือ

path: ‘resources/’ เป็นการระบุไปยังตำแหน่งจัดเก็บ fonts ของเรา

$(‘h1′).sifr({ font: ‘iannnnnvcdlight’ }); เป็นการเลือก font จาก folder path และระบุให้ element h1 ทั้งหมด ถูกเปลี่ยนค่า

สำหรับ parameters อื่นๆ ดูได้ ที่นี่ ครับ

HTML Code

  1. <h1>Test ทดสอบระบบ สวัสดีครับ</h1>

text ทั้งหมดใน element h1 จะถูก แทนที่ด้วย flash พร้อมกับ font ที่เราระบุไป ลองดูตัวอย่างที่นี่ครับ
Online Demo

All source code and example available to download here

โอ้ว พระเจ้า มันยอดมากจริงๆ เลยใช่มั้ยล่ะครับ!!!

เพิ่มเติมอีกนิดครับ สำหรับวิธีการทำ Font ใช้งานเอง ผมไปเห็นบทความ ภาษาไทยของท่านนึง เขียนได้ดีแล้ว เลยขอนำมาอ้างอิง โดยไม่เขียนใหม่ ลองดูกันได้ที่ link ทางด้านล่างครับ
http://itshee.exteen.com/20090219/jquery-sifr

ไม่ก็ใช้วิธี Convert online เอา สำหรับคนที่ไม่มี โปรแกรม Flash
http://www.sifrgenerator.com/wizard.html
http://www.ianpurton.com/sifr/

ปัญหาที่พบ
1. ไม่สามารถตัดคำในภาษาไทยได้ ต้องอาศัยการเคาะวรรคเอง
2. วรรณยุกต์ลอย

Ps. ตอนนี้เค้าแก้ วรรณยุกต์ลอยกันได้แล้วนะเออ ลองไปหาคำตอบ ที่นี่ ครับ

]]> http://www.jquerytips.com/2009/04/22/jquery-sifr/feed/ 5 mcDropDown ปลั๊กอินที่หน้าตาคล้ายๆ ปุ่ม Start ของ Windows http://www.jquerytips.com/2009/03/21/mcdropdown-jquery/ http://www.jquerytips.com/2009/03/21/mcdropdown-jquery/#comments Fri, 20 Mar 2009 18:22:32 +0000 Tee++; http://www.jquerytips.com/?p=276 ลองสังเกตุ กันบ้างมั้ยครับ เว็บสมัยนี้ พยายามกันอย่างหนักที่จะ ทำยังไงก็ได้ ให้มีเนื้อหาที่ครบถ้วนสมบูรณ์ โดยที่ไม่ทำให้ layout เสีย และ ใช้พื้นที่น้อยที่สุด โดยการทำดังนี้ ผมก็เห็นมาค่อนข้างจะหลายเทคนิควิธี อาทิ เช่น

Tabs – การแสดงผล โดยแบ่งออกเป็น tab ด้านบน แล้วค่อยๆคลิกเปลี่ยนไป

Fade – การแสดงผล โดยการค่อยๆ Fade Content เข้ามา โดยอาจจะมีปุ่ม Next/Back ให้ด้วย

Slide, Toggle – การแสดงผลโดย ซ่อน Content เอาไว้ก่อนจนกว่า user จะคลิกแสดงมันออกมา

แล้วก็ยังอื่นๆ อีกมากที่นิยมกัน…

เอาล่ะเข้าเรื่องๆ วันนี้ผมเองก็เห็น plugin ตัวนึงซึ่งช่วยในการทำงานแบบนี้ได้ดี โดยเป็น plugin ที่ทำงานกับ Input:text

ลองไปดูรูปหน้าตามันกัน

mcdropdown_preview

ครับ มันเป็น plugin ที่ช่วยในเรื่องของการ Select Data แบบเป็นลำดับชั้นนั่นเอง โดยจะอาศัยการทำงาน ด้วย Tag  Ul, Li เป็นลำดับชั้น

plugin ตัวนี้ชื่อว่า mcDropDown ซึ่งติดอยู่ในส่วน Popular plugins ในเวบ jQuery เองด้วย

ซึ่งวิธีใช้งานผมไม่ขออธิบายซ้ำนะครับ เพราะว่า เว็บไซด์ของทางผู้พัฒนา เขียนไว้ค่อนข้างละเอียด และผมลองดูก็ยังไม่เจอปัญหาอะไร ใช้งานค่อนข้างง่ายเลยทีเดียว

]]> http://www.jquerytips.com/2009/03/21/mcdropdown-jquery/feed/ 0 มา Translate กันเถอะ พี่ GG เค้าจัดมาแล้ว http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/ http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/#comments Fri, 06 Mar 2009 16:36:05 +0000 Tee++; http://www.jquerytips.com/?p=261 Google Translate

ว้าว ขณะที่ Post ข้อความอยู่นี้ เชื่อมั้ยครับว่าผมเขียนบทความ ลงใน jQueryTips นี้ทั้งหมดกี่บทความแล้ว 80 !!!!! ใช่แล้วตั้ง 80 แน่ะ รวมบทความนี้ก็จะเป็นบทความที่ 81 ไม่น่าเชื่อเลย ว่าตัวเองจะเขียนได้มาไกลถึงขนาดนี้ 555++

ตอนแรกก็กะเขียนเล่นๆ คิดว่า วัน สองวันตัวเอง คงเบื่อ ไปๆมาๆ นี่เขียนกันเป็นปีเลย อืมม์ คิดๆแล้วก็ ภูมิใจแฮะ วันนี้เดี๋ยว export มา backup ซะหน่อยดีกว่า ^^

เอาล่ะๆ มาเข้าเรื่องที่จะเขียนวันนี้กันเลยดีกว่า “ภาษาอังกฤษ” -*- เชื่อแน่ๆ เลยครับว่าปัญหาเรื่อง ภาษา ไม่แข็งแรงนั้น สั่งสมอยู่กับคนไทย มานานแสนนาน ทำให้เราขาดโอกาส และการเรียนรู้ที่ดีๆ จาก international website, e-book หรือสื่อ ภาษาต่างประเทศ อะไรต่อมิอะไรไปไม่ใช่น้อย

แต่ผมคิดว่า ต่อไปนี้ปัญหาอาจจะเบาบางลง ด้วยท่านเทพแห่งโลกไซเบอร์อย่างพี่ Big Google เพราะตอนนี้ ท่านได้ออก Language Service ชุดของการ Translate ใน version th -> en, en -> th หรือ ภาษาอื่นๆ อีกเยอะแยะมาแล้ว

จะแปลทั้งเวบ หรือจะแปลเป็นประโยค ก็สะดวกสบาย รวดเร็ว ไปลองกันดูได้ ที่นี่ Google Translate

เห็นมั้ย เจ๋งโครต แต่ถ้าคิดว่าวันนี้ ผมจะมาแนะนำ Service แค่นี้ล่ะก็ ผิดถนัดครับ ผมมีอะไรๆ ทีเด็ดกว่านี้เยอะรอให้ไปอ่านกันอยู่แล้ว……

รู้มั้ยครับว่า Google AJAX Language ก็มี API ด้วย ซึ่งการใช้งานก็โครตจะง่าย เพราะมันถูก plug เข้ามาอยู่ในชุดของ Google JS API แล้ว ทำให้เราเรียกโหลดมาจาก Google ได้เลย โดยไม่จำเป็นต้องมา include อะไรวุ่นวาย

ไม่เชื่อเอาโคดชุดนี้ไปรันดู

  1. <html>
  2.   <head>
  3.                 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4.     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  5.     <script type="text/javascript">
  6.  
  7.     google.load("language", "1");
  8.  
  9.     function translate() {
  10.       var text = document.getElementById("text").innerHTML;
  11.       google.language.detect(text, function(result) {
  12.         if (!result.error && result.language) {
  13.           google.language.translate(text, result.language, "en",
  14.                                     function(result) {
  15.             var translated = document.getElementById("translation");
  16.             if (result.translation) {
  17.               translated.innerHTML = result.translation;
  18.             }
  19.           });
  20.         }
  21.       });
  22.     }
  23.  
  24.     </script>
  25.   </head>
  26.   <body>
  27.     <div><span id="text">สวัสดี ชาวโลก</span><input type="button" value="translate" onclick="translate()" /></div>
  28.     <div id="translation"></div>
  29.   </body>
  30. </html>

ซึ่งใน API ชุดนี้ของ GG จะประกอบไปด้วย สองส่วนหลักๆก็คือ
1. Detect language
ตัวนี้เป็นตัวตรวจสอบภาษาที่จะแปลครับ ว่าเป็นภาษาอะไร โดยเราไม่จำเป็นต้องบอก GG ว่าเรากำลังจะแปลจาก ภาษาอะไรเป็นภาษาอะไร โดยแค่เราส่ง กลุ่มที่จะแปลเข้าไป GG จะบอกมาเองว่าเรากำลังทำงานกับภาษาอะไร จะคืนค่าเป็น th, en, jp หรือ ภาษาอื่นๆ

2. Translate
แน่นอนอีกตัวคือหัวใจครับ ตัวแปลนั่นเอง โดยตัวแปลนี้เราสามารถส่ง text เข้าไปแปล โดยต้องระบุ

text = ประโยคที่จะทำการแปล
source = แปลจากภาษาอะไร เช่น en (ตรงนี้เราจะสามารถใช้ api ชุด detect lang ทำงานแทนได้)
destination = แปลมาเป็นภาษาอะไร เช่น th

ซึ่งจากที่ผมเอา Firebug จับมา การทำงานของ API Google ชุดนี้ก็คือ JSONP นั่นเอง

  1. http://www.google.com/uds/Gtranslate?callback=google.language.callbacks.id101&context=22&q=สวัสดีชาวโลก&langpair=th|en&key=notsupplied&v=1.0

เอาล่ะๆ ไอ้ที่บอกมาทั้งหมด มันแค่เกริ่นเท่านั้นเองอ่ะ ที่เป็นบทความวันนี้จริงๆ มันต้องเป็น jQuery แน่นอนอยู่แล้ว นี่ครับ

Sunday Morning jQuery Google Translate API

ซึ่งหน้าตาโดยรวมแล้ว ให้ 9/10 ครับ สวยงามน่าใช้ แถมใช้งานง่ายด้วย สามารถแปลแบบ กลุ่มคำ หรือแบบ คำเดี่ยวก็ได้ ใช้เป็น Dict ภายในเวบเลยก็ยังได้

ยังไงก็ลองไปเล่นกันดูนะครับ ผมคงไม่เขียนอธิบายวิธีใช้ เพราะเค้าเขียนไว้หมดแล้ว ไม่เข้าใจยังไง view source ดูกันเอาก็น่าจะพอเข้าใจอยู่ ตัวนี้ส่วนตัวผมถือว่าเป็น Plugin น้ำดี ตัวนึงเลยทีเดียว

อันนี้เป็นตัวอย่างที่ผมลองเอามาเขียนเล่นๆครับ

  1. http://www.jQueryTips.com/example/GTranslate/

เอ แต่ถ้าอ่าน เว็บเค้าแล้วไม่เข้าใจ ก็ลองอย่าลืมใช้ Google Translate มาเป็นภาษาแม่ เราดูนะครับ 555++

วันนี้ลาไปก่อนแค่นี้ล่ะ จะไปแรดข้างนอกละ ^^

]]> http://www.jquerytips.com/2009/03/06/jquery-with-gogole-translate/feed/ 4 jWYSIWYG เปลี่ยน Textarea เชยๆ ให้ดูหรูหรามีระดับ http://www.jquerytips.com/2009/03/04/jwysiwyg/ http://www.jquerytips.com/2009/03/04/jwysiwyg/#comments Wed, 04 Mar 2009 13:32:20 +0000 Tee++; http://www.jquerytips.com/?p=259 หวัดดีครับ สาวก jQuery ทั้งหลาย ^^

วันนี้ผมมี Plug in น่ารักๆ อีกตัวมาแนะนำกันอีกแล้ว จำได้มั้ยครับ เมื่อนานมาแล้วผมเคยเอา MarkItUp ซึ่งเป็น jQuery Editor Plugin มาแนะนำกันไป

มาวันนี้ผมก็มีของคล้ายๆกันมาให้ชมกันอีกแล้ว จะต่างกันก็เพียงตัวที่ผมจะแนะนำในวันนี้มันเป็นการ แสดงผลแบบ WYSIWYG (What You See It What You Get) เท่านั้น

ลองไปดู Demo ที่ เวบไซด์ผู้พัฒนากันเอาเองเลยดีกว่า

Plugin ตัวนี้มีชื่อว่า jWYSIWYG ครับ ความสามารถโดยสรุปก็คือ เปลี่ยนช่อง Textarea ที่จืดชืด ให้มีสีสัน และ Tools เล็กๆ น้อยๆ มาให้พอหอมปากหอมคอกัน

แต่ว่ามันก็ยังมีลูกเล่นเพิ่มเติมคือเราสามารถเขียน Exec Function เข้าไปได้เองอีกด้วย ใน Demo จะเรียกว่า Add custom controls ครับ

สรุปแล้ว ผมว่า plugin ตัวนี้เป็นของเล่นเล็กๆ ที่ดูน่าสนุกดีทีเดียวครับ ลองไปเล่นดูกัน

]]> http://www.jquerytips.com/2009/03/04/jwysiwyg/feed/ 0 Firefox’s Plugins ที่ผมเลือกใช้ http://www.jquerytips.com/2009/02/04/firefox-plugins-for-developer/ http://www.jquerytips.com/2009/02/04/firefox-plugins-for-developer/#comments Wed, 04 Feb 2009 04:52:36 +0000 Tee++; http://www.jquerytips.com/?p=244 วันนี้ไม่ได้มีบทความอะไรมาแนะนำ ไม่ได้หมดมุขนะครับ แต่พอดีอยากจะเขียนบทความนี้ก่อน นั่นก็คือเรื่องของ plugin ใน Firefox ในมุมมองของ Developer ที่ ตัวผมเองคิดว่า มันมีประโยชน์เอามากๆ เลยทีเดียว พวกนี้เป็น plugin ที่ผมจะต้องลงก่อนเสมอ หลังจาก Format เครื่อง ลองมาดูกันครับ ว่าผมใช้อะไรบ้าง

ColorZilla
ตัวนี้ผมเอาไว้จับสีในเวบของชาวบ้าน โดยเฉพาะ มันมี Eyedropper เหมือนพวกโปรแกรมแต่งภาพนั่นแหละ

Dafizilla ViewSourceWith
ตัวนี้เอาไว้ View Source Code กับ Editor ที่เราเลือกไว้ โดยส่วนตัวผมเอามา View ใน Editplus

Delicious Bookmarks
ตัวนี้เป็น plugin เสริมของ online bookmark ชื่อดังที่มี Yahoo Inc. เป็นเจ้าของ มีหน้าที่เอาไว้ Bookmark เวบที่ผมชอบ

Firebug
ตัวนี้คงไม่ต้องบรรยายอะไร plugin เทพๆ แบบนี้ เอาไว้ทำงานทุกอย่าง ทั้งจับ Request, Inspect DOM, Edit Css, etc ตัวนี้เทพมาก ทำได้ทุกอย่างที่ผมต้องการเลย

Greasemonkey
ไอ้นี่ก็สุดยอดครับ เอาไว้เขียน JS ทดสอบในเวบเราเอง หรือเวบชาวบ้านก็ได้ ที่สำคัญ Ajax ของ Plugin ตัวนี้ Cross Domain ได้ด้วย

Html Validator
อันนี้เอาไว้ Validate HTML แบบ Realtime

IE Netrender
ตัวนี้เอาไว้ Render หน้าเวบใน Engine Version ต่างๆ ของ Browser เจ้าปัญหา IE นั่นเอง โดยมันมีตั้งแต่ IE5.5 – IE8 Beta แต่ขอบอก มันไม่ Work อย่างที่คิด มีติดๆ ไว้งั้นแหละ

IE Tab
ตัวนี้เอาไว้ Switch ใช้ Engine ของ IE ในหน้าของ Firefox สะดวกดีนะ

Library Detector
อันนี้เอาไว้ Detect เวบชาวบ้าน ว่าใช้ JS Framework อะไร ถึงออกมาหะรูหะรา แบบนั้น

MeasureIT
ตัวนี้เอาไว้ วัด Size ในหน้าเวบเพจ

SearchStatus
เอาไว้เช็คเรื่อง SEO พวก PR, Index, Alexa

TinyUrl Creator
สร้าง URL แบบสั้นๆ ผ่าน Service ของ TinyUrl

Web Developer
ตัวนี้ก็ของเทพ ชัดๆ การทำงานบางตัวก็ ซ้ำกับ Firebug ส่วนมากผมจะเอาไว้ ดู Element ต่างๆ รวมไปถึง header, cookie ที่สำคัญ ผมเอาไว้ Generate Source Code ที่ผ่าน JS Function มาแล้ว รวมไปถึงปิด คำสั่งบางตัว บางโอกาส เพื่อทำการ Test, Debug

Yslow
เป็นตัวเสริมของ Firebug เอาไว้ Test Performace ของ เวบ

นี่ล่ะครับ Plugins ที่ผมเลือกใช้ เพื่อนๆล่ะ มีตัวไหนมาแนะนำผมกันบ้าง ^^

ไว้ครั้งหน้าจะมาจบเรื่อง CI แล้วก็จะกลับมาสู่ Version ปกติของ jQueryTips กันนะครับ รับรองไม่ผิดหวัง เพราะว่า ผมไปสะสม เทคนิคต่างๆ รวมไปถึง ผึกยุทธ์ เพิ่มขึ้น พอจะมีเรื่องมาเล่าแล้วล่ะ

]]> http://www.jquerytips.com/2009/02/04/firefox-plugins-for-developer/feed/ 6 มาดูวิธีการเขียน Select Boxes Multi Level แบบ Line:Line http://www.jquerytips.com/2008/12/01/plugin-select-boxes-multilevel/ http://www.jquerytips.com/2008/12/01/plugin-select-boxes-multilevel/#comments Mon, 01 Dec 2008 05:37:05 +0000 Tee++; http://www.jquerytips.com/?p=183 จังหวัด -> อำเถอ -> ตำบล แต่ลักษณะการทำงานของ Plugin ตัวนี้ไม่ได้ทำการ จอง Array หรือ [...]]]> วันนี้จะมาพูดถึงเรื่อง jQuery’s Plugin กันอีกแล้ว พักหลังๆ ถ้าสังเกตุกัน จะเห็นได้ว่า ผมมักจะเขียนแต่เรื่องนี้ เพราะว่ามันอัพเดทง่ายดี ไม่เปลืองสมอง ไม่เปลืองแรง 555++

แต่เอาล่ะ เดี๋ยวหลายๆ คนจะรู้สึกว่า เข้ามาอ่าน Blog นี้ไม่ได้อะไรกลับไปเลย วันนี้ก็เลยจะมาเปลี่ยนแนวซะหน่อย ก็คือ แนะนำ Plugin แต่จะเอา Code มาตีแผ่กัน เป็น บรรทัด ไป ดังนั้น เลยต้องเลือก plugin ที่มันสั้นๆ แต่มีประโยชน์กันหน่อย ก็คือตัวนี้ครับ

Select-Chain: Select boxes multilevel ประโยชน์ของมันก็คือการสร้าง input select แบบที่ Related กันหลายระดับ ถ้านึกไม่ออก ก็นึกภาพ

ประเทศ -> จังหวัด -> อำเถอ -> ตำบล

แต่ลักษณะการทำงานของ Plugin ตัวนี้ไม่ได้ทำการ จอง Array หรือ Object ไว้ก่อน แต่เป็นการ เรียกค่า JSON ผ่าน Ajax เป็นยังไง ลองไปดูกัน

และนี่คือ ไฟล์ Plugin เต็มๆ

  1.  
  2. (function ($) {
  3.     $.fn.selectChain = function (options) {
  4.         var defaults = {
  5.             key: "id",
  6.             value: "label"
  7.         };
  8.        
  9.         var settings = $.extend({}, defaults, options);
  10.        
  11.         return this.each(function () {
  12.             var $$ = $(this);
  13.            
  14.             $$.change(function () {
  15.                 var data = null;
  16.                 if (typeof settings.data == ’string’) {
  17.                     data = settings.data + ‘&’ + this.name + ‘=’ + $$.val();
  18.                 } else if (typeof settings.data == ‘object’) {
  19.                     data = settings.data;
  20.                     data[this.name] = $$.val();
  21.                 }
  22.                
  23.                 settings.target.empty();
  24.                
  25.                 $.ajax({
  26.                     url: settings.url,
  27.                     data: data,
  28.                     type: (settings.type || ‘get’),
  29.                     dataType: ‘json’,
  30.                     success: function (j) {
  31.                         var options = [], i = 0, o = null;
  32.                        
  33.                         for (i = 0; i < j.length; i++) {
  34.                            
  35.                             o = document.createElement("OPTION");
  36.                             o.value = typeof j[i] == ‘object’ ? j[i][settings.key] : j[i];
  37.                             o.text = typeof j[i] == ‘object’ ? j[i][settings.value] : j[i];
  38.                             settings.target.get(0).options[i] = o;
  39.                         }
  40.  
  41.                         setTimeout(function () {
  42.                             settings.target
  43.                                 .find(‘option:first’)
  44.                                 .attr(’selected’, ’selected’)
  45.                                 .parent(’select’)
  46.                                 .trigger(‘change’);
  47.                         }, 0);
  48.                     },
  49.                     error: function (xhr, desc, er) {
  50.                         alert("an error occurred");
  51.                     }
  52.                 });
  53.             });
  54.         });
  55.     };
  56. })(jQuery);
  57.  

ทีนี้เราลองมาแยกส่วนประกอบของ plugin ตัวนี้กัน ส่วนการส่งค่าจาก Server Side Script และวิธีใช้งาน ผมจะกล่าวถึงภายหลังนะครับ

  1. (function ($) {
  2. $.fn.selectChain = function (options) {
  3.   var defaults = {
  4.     key: "id",
  5.     value: "label",
  6.     url: ‘xxx.php’,
  7.     type: ‘get’,
  8.     data: ‘{ ajax: true, another: ‘anotherValue‘ }’
  9.   };
  10.   var settings = $.extend({}, defaults, options);
  11. })(jQuery)

1. ตรงนี้คือส่วนของการสร้าง plugin ที่มีชื่อว่า selectChain และมีค่า default ซึ่งสามารถ set ได้ เป็น
key = ค่า key ที่ server จะคืนมา
value = ค่า value ที่ server จะคืนมา
ตรงนี้ ถ้าเราใช้ php ค่าที่จะต้องส่งคืนมาคือ

  1. $row[‘id’] = 1;
  2. $row[‘value’] = "Thailand";
  3. $row[‘id’] = 2;
  4. $row[‘value’] = "USA";
  5. echo json_encode($row);

——————

  1. return this.each(function ()

2. ตรงนี้คือส่วนที่ จะจะค้นหา node ที่ match กับ ที่เราเรียกไว้ทั้งหมด

  1. var $$ = $(this);

3. เอาตัวแปร $$ มาเก็บค่า this

  1. // [No 1]
  2. $$.change(function () {
  3.                 var data = null;
  4.                // [No 2]
  5.                 if (typeof settings.data == ’string’) {
  6.                     data = settings.data + ‘&’ + this.name + ‘=’ + $$.val();
  7.                 } else if (typeof settings.data == ‘object’) {
  8.                     data = settings.data;
  9.                     data[this.name] = $$.val();
  10.                 }
  11.                 // [No 3]
  12.                 settings.target.empty();
  13.                 // [No 4]
  14.                 $.ajax({
  15.                     url: settings.url,
  16.                     data: data,
  17.                     type: (settings.type || ‘get’),
  18.                     dataType: ‘json’,
  19.                     success: function (j) {
  20.                         var options = [], i = 0, o = null;
  21.                        
  22.                         for (i = 0; i < j.length; i++) {
  23.                             o = document.createElement("OPTION");
  24.                             o.value = typeof j[i] == ‘object’ ? j[i][settings.key] : j[i];
  25.                             o.text = typeof j[i] == ‘object’ ? j[i][settings.value] : j[i];
  26.                             settings.target.get(0).options[i] = o;
  27.                         }
  28.                        // [No 5]
  29.                         setTimeout(function () {
  30.                             settings.target
  31.                                 .find(‘option:first’)
  32.                                 .attr(’selected’, ’selected’)
  33.                                 .parent(’select’)
  34.                                 .trigger(‘change’);
  35.                         }, 0);
  36.                     },
  37.                    // [No 6]
  38.                     error: function (xhr, desc, er) {
  39.                         alert("an error occurred");
  40.                     }
  41.                 });
  42.             }

ตรงนี้ขอ รวดเดียวจบเลยละกันครับ มันเกี่ยวเนื่องกัน เริ่มตั้งแต่ ….
1. ถ้า มี event onchange gกิดขึ้นกับ element เมื่อไหร่ ให้ทำงาน
2. จัดการกับค่าตัวแปร ที่จะถูกส่งให้กับ Server Side Script
3. เคลียร์ค่า ให้กับ Target ที่ จะเอา option ไปใส่
4. เริ่มส่งค่าให้ Ajax จากนั้นรับ Return ค่ารวมทั้ง สร้าง element options วนลูปค่าลงไป แล้วส่งให้ Element ที่เป็น target
5. เรียกตัว target เพื่อทำการ add attribute selected ให้พร้อมทั้งส่ง Trigger ว่า Target ต้องทำ event onchange อีกที เพื่อตรวจสอบว่า select ตัวถัดไปต้องเปลี่ยนค่ามั้ย
6. ทำการ Debug Error

วิธีใช้งานและตัวอย่างดูได้ที่เวบไซด์ เจ้าของ Plugin เลยครับ
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

จบแล้วครับ สำหรับ บทความในวันนี้ ที่อยากจะให้เพื่อนๆ Focus กันก็คือคำสั่ง Trigger ครับ คำสั่งนี้เป็น ลักษณะ ของการจัดการ event ในรูปแบบ หนึ่งที่น่าสนใจทีเดียวครับ การทำงานก็จะเป็นการสร้าง trigger (อธิบาย ยากแฮะ) เช่น

เมื่อมีการ Click ที่ ปุ่มที่ 1 แต่ผมอยากจะให้ ปุ่มที่ 2 คลิกตามไปด้วย ผมก็จะใช้ Trigger นี่แหละครับ เป็นตัวบอก เช่นแบบนี้ครับ

  1. $(‘#b2′).click(function() {
  2.   alert(‘I am B2′);
  3. });
  4.  
  5. $(‘#b1′).click(function() {
  6.   alert(‘I am B1′);
  7.   $(‘#b2′).trigger(‘click’);
  8. });
]]> http://www.jquerytips.com/2008/12/01/plugin-select-boxes-multilevel/feed/ 1 ทำ Preload Images ใน CSS สุดยอดแล้วโลกนี้ http://www.jquerytips.com/2008/11/23/preload-css-images/ http://www.jquerytips.com/2008/11/23/preload-css-images/#comments Sat, 22 Nov 2008 18:50:24 +0000 Tee++; http://www.jquerytips.com/?p=180 คงไม่มีใครปฎิเสธว่า ยุดนี้การเขียนเวบด้วย Stylesheet นั้นมาแรงเพียงไหน เวบเทพๆ ของโลกมองไปแทบจะไม่เจอ table เลยแม้สักตารางนิ้วเดียว เพราะว่าประโยชน์ของมันนั้น มีมากมาย ไม่ว่าจะเป็น การเข้าถึงที่รวดเร็ว, รองรับ SEO เต็มขั้น, อ้างอิง พาธ ได้ง่าย และอีกสารพัดจะ บรรยาย

วันนี้ผมเลยมี plugin ที่แสนวิเศษ จะมาแนะนำ…

คิดว่าหลายๆ คนที่เขียนเวบมาคงรู้จักกับคำว่า Preload Images นั้นก็คือการโหลด image ขึ้นมาเป็น bg process ในระหว่างที่ users กำลังนั่งอ่านข้อมูล เราก็โหลดถาพ ขึ้นมาพลางๆ เพื่อไม่ให้เป็นการเสียเวลา แต่ที่ผมจะมาแนะนำใน วันนี้ มันไม่ใช่!

มันไม่ใช่การทำ Preload images แบบธรรมดา แต่มันคือการทำ Preload จาก external css ลองคิดดูกันเอาเองว่ามันจะวิเศษขนาดไหน

เท่าที่ไปลองแงะดู หลักการก็คือวิ่งเข้าไปหาไฟล์ .css จาก Doc เราจากนั้นมันก็จะวิ่งไปหา นามสกุลไฟล์ gif|jpg|jpeg|png แล้วมาเข้าสู่ การทำ Preload ตามปกติ นั่นเองครับ ซึ่งเราไม่ต้องไปทำความเข้าใจมากมาย มาดูวิธีใช้อันแสนง่ายของมันเลยดีกว่า…

  1. $(document).ready(function(){
  2.   $.preloadCssImages();
  3. });

เท่านี้จริงๆครับ ไม่ได้โกหก เพียงแค่ include jQuery กับตัว preloadCssImages มาก็ใช้งานได้แล้ว

เอาล่ะครับ ถ้าสนใจหาข้อมูลเพิ่มเติมยังไง ไปดูกันได้ ที่นี่เลยครับ
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

ของเค้าดีจริงๆ ไม่งั้นไม่เอามาแนะนให้เสียชื่อ jQurtyTips แน่ๆ ยังไงลองไปเล่นดูกันนะครับ

]]> http://www.jquerytips.com/2008/11/23/preload-css-images/feed/ 3 Really Simple Validation http://www.jquerytips.com/2008/11/21/really-simple-validation/ http://www.jquerytips.com/2008/11/21/really-simple-validation/#comments Fri, 21 Nov 2008 16:04:37 +0000 Tee++; http://www.jquerytips.com/?p=173 หลายๆคนคงเคยเขียน validation ผ่าน js ซึ่งตามปกติแล้ว เรามักจะเขียน Rule ที่ละตัวๆ แล้วก็เขียนมันซ้ำไปซ้ำมาอยู่นั่นล่ะ เรียกว่าเป็นงาน Routine ที่น่าเบื่อสุดๆ ไปเลย ไหนจะ E-mail, ตัวเลข, ค่าว่าง, ภาษา, custom และอีกมากมายตามแต่จะรังสรรค์กันมา

ถามหน่อยเหอะ “ไม่เบื่อเหรอ” ถ้าคำตอบว่า เบื่อ ลองมาดูการ validate ผ่าน jQuery plugin กันหน่อยเป็นไง ซึ่งตามที่ผมลองเล่นมา jQuery จะมี plugin ประเภทนี้ อยู่เพียบเลย แต่ผมให้แค่ 3 ตัว ก็คือ

bassistance.de
- ตัวนี้ดีมากครับ ครบเครื่อง validate ได้ทุกรูปบบ ใช้ in-line code ได้ด้วย แต่ config ยากนิดนึง ต้องใช้เวลาในการทำความเข้าใจ

Consulenza-web.com
- ตัวนี้ใช้ง่ายที่สุดใน 3 ตัว ไม่ต้องศึกษาอะไรเลย แต่ข้อเสียคือ มันเป็นการ validation แบบ Type Watch คือ มันจะไม่มีตัวอะไรปรากฏ ถ้าเราทำการพิมพ์ไม่ถูกตาม Rule

Really Simple Validation (RSV)
- ตัวนี้ค่อนข้างครบเครื่อง ใช้งานง่าย Custom Function ได้ แต่เสียดายที่มันมีการเขียนโคด แบบ in-line เราต้องระบุ Rule ให้ครบก่อน

*** รูปแบบการเขียน in-line คือระบุเข้าไปใน input ตรงๆ เช่น

  1. <input id="cemail" name="email" class="{required:true, email:true, messages:{required:’Please enter your email address’, email:’Please enter a valid email address’}}"/>

เอาล่ะๆ แต่ตัวที่จะมาพูดถึงวันนี้ก็คือตัวที่ 3 นั่น เอง ที่มีชื่อว่า Really Simple Validation (RSV) ซึ่งตัวนี้จะเป็น validation plugin ที่มีความสารถครบ ที่สำคญยังสารถ custom rule ได้เองอีก นับว่าเป็น plugin ที่มีประโยชน์ทีเดียว และเพื่อไม่ให้เกิดการ Duplicate Content เอาเป็นว่าไปดู Demo ที่เวบมันเอาเองเลยละกัน 555
Demostration Page

ซึ่งการใช้งานจะเป็นรูปแบบที่เราจะต้องทำการ Define Rules และ Messages เตรียมไว้ให้ input ก่อน ตัวอย่างเช่น (copy มา)

  1. $(document).ready(function() {
  2.         $("#demo_form1").RSV({
  3.           onCompleteHandler: myOnComplete,
  4.                 rules: [
  5.                         "required,first_name,Please enter your first name.",
  6.                         "required,last_name,Please enter your last name.",
  7.                         "required,email,Please enter your email address.",
  8.                         "valid_email,email,Please enter a valid email address.",
  9.                         "required,any_integer,Please enter your age.",
  10.                         "digits_only,any_integer,The age field may only contain digits.",
  11.                         "required,marital_status,Please enter your marital status."
  12.                 ]
  13.         });
  14. });

ซึ่งโดย default จะเป็นการ Alert ธรรมดาๆ แต่ถ้าอยากให้มัน Display มาที่หน้าแทนการ alert ก็แค่เพิ่ม option ไปไม่กี่ตัวเช่น

displayType: “display-html”
errorFieldClass: “errorFieldDemo2″

จะเป็นระบุถึง DOM ตัวที่จะแสดง Error และยังสามารถกำหนด Class ให้มันได้อีกด้วย

โดยที่ตัวอย่าง Rules เราสามารถดูได้ที่หน้านี้
All Rules

รูปแบบก็คือ
rules.push(“required,user_name,This field is required.”);
1. Rule
2. Input Field Name
3. Message

การใช้งานก็ไม่ยากอะไร ยังไงถ้าสนใจก็ลองไป หาดาวน์โหลดมาใช้ได้จากลิ้งก์ที่ให้ไว้นะครับ

]]> http://www.jquerytips.com/2008/11/21/really-simple-validation/feed/ 4 มาทำ Drag and Drop ในรูปแบบ Table กัน http://www.jquerytips.com/2008/11/21/table-drag-and-dro/ http://www.jquerytips.com/2008/11/21/table-drag-and-dro/#comments Fri, 21 Nov 2008 15:26:41 +0000 Tee++; http://www.jquerytips.com/?p=171 หายไปนานเลย ช่วงนี้วุ่นๆ เพราะพึ่งย้ายงาน เลยต้องปรับตัว ไม่มีเวลามาอัพเดทเท่าไหร่ แต่วันนี้อากศหนาวเลยมา อัพเดทซะหน่อย 555+

ก็จะมาแนะน Plugin ดีๆ อีกตัวนึงของ jQuery เพื่อช่วยในการ Order ข้อมูลที่อยู่ในรูปแบบของ Table ซึ่งผมเห็นว่าน่าจะมีประโยชน์ในเรื่องของ การจัดลำดับของ ข้อมูลในส่วนของ Backend (ใครจะเอาไปใช้ Frontend ก็ได้)

Plugin ตัวนี้ก็คือ Table Drag and Drop JQuery plugin โดยลักษณะตามโครงส้างของ HTML table จะประกอบไปด้วยหลักๆ ก็คือ

  1. <table>
  2. <tr>
  3. <td></td>
  4. </tr>
  5. </table>

และงานที่ plugin ตัวนี้จะทำให้เราก็คือการสลับตำแหน่ง tr นั่นเอง ไม่หมดแค่นั้น ตัว plugin เองเตรียม event มาให้เราครบเลย โดยจะประกอบไปด้วย

onDragStart
onDragClass
onDrop

ทั้งยังสามารถกำหนดตำแหน่งที่จะทำให้เกิด Event ผ่าน function:

dragHandle

สุดท้ายก็คือทำกร Summary ข้อมูลผ่าน Function

$.tableDnD.serialize()

เอาล่ะอธิบายกันมาคร่าวๆ ละ ลองมาดูวิธีใช้งานจริงๆ กันดีกว่า…

โดยการใช้งานเราจะต้องกำหนดค่าให้กับ table ที่เราจะให้ทำงานก่อน และหลังจากนั้นก็ใช้คำสั่ง

  1. $(‘#table-1′).tableDnD();

เท่านี้ Table ของคุณก็จะสลับตำแหน่งของ TR กันได้แล้ว โดยจะไม่สนว่าจะมี Child -> TD กี่ตัว

ทีนี้เราลองมาดูตัวอย่างการใช้งานจริงๆ เต็มรูปแบบของมันกัน

HTML Code

  1. <table width="100%" cellpadding="1" cellspacing="1" id="table-1">
  2. <tr id="1">
  3.   <td><span class="handle">Move</span> Data</td>
  4. </tr>
  5. <tr id="2">
  6.   <td><span class="handle">Move</span> Data</td>
  7. </tr>
  8. <tr id="3">
  9.   <td><spanclass="handle">Move</span> Data</td>
  10. </tr>
  11. </table>

JS Code

  1.  
  2. <script type="text/javascript">
  3. $(function() {
  4.   $(‘#table-1′).tableDnD({
  5.     dragHandle: ‘handle’,
  6.     onDragClass: ‘externalclass’,
  7.     onDragStart: function(tb, row) {
  8.       // alert just testing or debugging
  9.       //alert( ‘Dragging tr id ‘ + row );
  10.     },
  11.     onDrop: function(tb, row) {
  12.       var order = $.tableDnD.serialize();
  13.       $.post(’saveorder.php’, { order: order }, function(str) {
  14.         // do something after save?
  15.       }
  16.     }
  17.   });
  18. });
  19. </script>
  20.  

เอาล่ะครับจากตัวอย่างที่ผมเขียน (ไม่ได้เทส เขียนสด Error เปล่าไปตรวจเอา) ก็คือผมสั่งให้ plugin ทำงานกับ table ที่มี id=table-1

และจะสามารถ Drag ได้แค่ตำแหน่งที่ระบุ Class=handle จากนั้นเมื่อเริ่มทำการ Drag ให้ Node นั้นเรียก Class = externalClass ไปด้วย ซึ่งอาจจะเป็น class สำหรับการเปลี่ยนสี ให้มันดูเด่นหน่อยหรืออะไรก็ตาม แต่ โดยที่ class นี้จะทำงานแค่ระหว่างที่ทำการ Drag เท่านั้น

และเมื่อการ Drag เริ่มต้นจะให้มัน Alert อะไรหรือทำอะไรก็สั่งไปที่ onDragStart ในที่นี้ผมเขียนให้ไม่ทำอะไรทั้งนั้น

สุดท้ายสำคัญมากคือการ Drag จบจะให้ทำอะไร ในที่นี้ ผมสั่งให้ Summary ค่าออกมาโดยค่าที่ได้จะออกมาในลักษณะนี้

  1. table-1[]=1&table-1[]=2&table-1[]=3

จะเห็นได้ว่า Format ที่ได้คือ Array นั่นเอง จากนั้นผมก็เรียก ajax แบบ post ส่งค่านี้ไปทันที และผมก็จะถอ array นี้ออกด้วย ภาษา PHP ด้วยคำสั่ง parse_str

จากนั้นก็เอาไป Re-order ใหม่ การทำงานก็จะจบลง เป็นไงล่ะครับ ง่ายมั้ย ถ้าสนใจยังไงลองไปดาวน์โหลดมาเล่นกันได้ที่
http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

คราวหน้าจะมาแนะนำของดีๆ ใหม่วันนี้พอแค่นี้ล่ะครับ

]]> http://www.jquerytips.com/2008/11/21/table-drag-and-dro/feed/ 0