jQueryTips by Tee++; » Basic 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 จะว่าไปแล้วผมยังไม่เคยเอ่ยถึง Trigger ใน jQuery เลยนี่นา http://www.jquerytips.com/2009/04/06/jquery-trigger/ http://www.jquerytips.com/2009/04/06/jquery-trigger/#comments Mon, 06 Apr 2009 08:32:31 +0000 Tee++; http://www.jquerytips.com/?p=366 Trigger เป็นส่วนนึงใน Events ของ jQuery โดยอยู่ในหมด event handing

ถ้าจะให้อธิบาย ตาม manual ของ jQuery กันเป๊ะ ผมว่าคงมึนกันเป็นแถบๆ ดังนั้นผมจะขออธิบาย ในภาษาของผมเองก็แล้วกัน 555+

trigger ในภาษาอื่นๆ เช่น SQL การทำงานของมันก็คือ เป็นตัวบ่งบอกว่า จะทำอะไร ก่อน หลัง หรือ ช่วงไหนก็ตาม หลังจากที่มีเหตุการณ์ หรือ ก่อนที่จะมีเหตุการณ์ เกิดขึ้น เช่น

ผมจะบอกว่า ก่อน กินข้าว ให้แปรงฟันก่อน หรือ หลังกินข้าว ให้ล้างจานด้วย หรือ ระหว่างกินข้าว ให้ใช้ข้อนกลาง ยังไงยังงั้นแหละ

trigger ใน jQuery ก็ไม่ได้ต่างกันเลย ลองมาดูตัวอย่างง่ายๆ กันก่อน

  1. $(‘#theTrigger’).click(function() {
  2.   alert(‘เอาจานไปล้าง’);
  3. });
  4.  
  5. $(‘#mainevent’).click(function() {
  6.   alert(‘กินข้าวเสร็จ’);
  7.   $(‘#theTrigger’).trigger(‘click’);
  8. });

จากตัวอย่างข้างบน พอผมคลิกไปที่ id = mainevent แล้ว ผมก็จะสั่งให้ id = theTrigger ทำการคลิกไปด้วย นี่ล่ะครับ ความสามารถพื้นฐานของมัน ส่วนตัวอย่างอื่นๆ ดูได้ที่นี่ครับ Example

นอกจากนี้ jQuery ยังมี TriggerHandle อีกตัวซึ่งไม่ได้ต่างกันมากนัก ถ้าจากตัวอย่างที่เค้าให้มา จะเห็นได้ว่า ต่างกัน ตรงที่ Trigger หลังจากทำงานเสร็จ ก็จะ ไปทำงาน ส่วนของ focus ด้วย แต่ TriggerHandle จะทำงานเฉพาะคำสั่งที่อยู่ภายในเท่านั้นเอง

]]> http://www.jquerytips.com/2009/04/06/jquery-trigger/feed/ 0 val() ใช้แบบนี้ก็ได้ด้วย o_O http://www.jquerytips.com/2009/02/20/something-about-jquery-val/ http://www.jquerytips.com/2009/02/20/something-about-jquery-val/#comments Thu, 19 Feb 2009 17:25:53 +0000 Tee++; http://www.jquerytips.com/?p=248 val() เพราะคิดว่า มันคงพื้นๆ ก็เข้าใจหมดแล้วนี่หว่า !!! แต่ที่ไหนได้พอเลื่อนมาดูท้ายๆ เท่านั้นล่ะ ถึงไปเจอเรื่องที่นึกไม่ถึงเข้า เลยเอามาอัพเดทกันนี่ล่ะ (หลายๆคนอาจจะรู้นานแล้ว ผมมันโง่เอง) ผมเิ่งรู้ว่า val เนี่ยเอไว้ทำ พวห selected, checked ได้เลย ไม่ต้องมาเขียนไรให้มันยุ่งยาก เขียนแค่นี้เองอ่ะ <!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Strict//EN’ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang=’en’ xml:lang=’en’ xmlns=’http://www.w3.org/1999/xhtml’> <head> <title>jQuery</title> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> <!–   google.load("jquery", "1.3");         google.setOnLoadCallback(function() {       [...]]]> เป็นไงสบายดีกันมั้ยครับ ไม่ได้อัพเดทมาชาติกว่าๆ เป็นเพราะติดงาน + ขี้เกียจ 555+

แต่วันนี้แวะเข้าไปแอ่าน Doc ของ jQuery 1.3 มาดูซะหน่อย ดูไปดูว่า ไปเเจอหัวข้อที่เกือบจะเลยไปแล้วเรื่อง Traversing -> val() เพราะคิดว่า มันคงพื้นๆ ก็เข้าใจหมดแล้วนี่หว่า !!!

แต่ที่ไหนได้พอเลื่อนมาดูท้ายๆ เท่านั้นล่ะ ถึงไปเจอเรื่องที่นึกไม่ถึงเข้า เลยเอามาอัพเดทกันนี่ล่ะ (หลายๆคนอาจจะรู้นานแล้ว ผมมันโง่เอง)

ผมเิ่งรู้ว่า val เนี่ยเอไว้ทำ พวห selected, checked ได้เลย ไม่ต้องมาเขียนไรให้มันยุ่งยาก เขียนแค่นี้เองอ่ะ

  1. <!DOCTYPE html PUBLIC ‘-//W3C//DTD XHTML 1.0 Strict//EN’ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang=’en’ xml:lang=’en’ xmlns=’http://www.w3.org/1999/xhtml’>
  3. <head>
  4. <title>jQuery</title>
  5. <script src="http://www.google.com/jsapi" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. <!–
  8.   google.load("jquery", "1.3");
  9.         google.setOnLoadCallback(function() {
  10.  
  11.                 $(‘[name="try"]‘).click(function() {
  12.                         $(‘#myopts’).val(‘b’);
  13.                         $(‘#mymultiopts’).val(['a', 'c']);
  14.                         $(‘[name="data[]"]’).val(['a', 'b']);
  15.                         $(‘[name="gender"]‘).val(['1']);
  16.                 });
  17.  
  18.         });
  19. //–>
  20. </script>
  21. </head>
  22. <body>
  23.  
  24. <p>
  25. <select name="myopts" id="myopts">
  26.         <option value="a">A</option>
  27.         <option value="b">B</option>
  28.         <option value="c">C</option>
  29.         <option value="d">D</option>
  30. </select>
  31. </p>
  32.  
  33. <p>
  34. <select name="mymultiopts" id="mymultiopts" multiple="multiple">
  35.         <option value="a">A</option>
  36.         <option value="b">B</option>
  37.         <option value="c">C</option>
  38.         <option value="d">D</option>
  39. </select>
  40. </p>
  41.  
  42. <p>
  43. <input type="checkbox" name="data[]" value="a" /> A
  44. <input type="checkbox" name="data[]" value="b" /> B
  45. </p>
  46.  
  47. <p>
  48. <input type="radio" name="gender" value="1"> Male
  49. <input type="radio" name="gender" value="2"> Female
  50. </p>
  51.  
  52. <p><input type="button" name="try" value="Try Me" /></p>
  53.  
  54. </body>
  55. </html>

ง่ายซะจน ไม่รู้ว่าตัวเองหลงไปเขียนไรที่มันวุ่นวายตั้งนานได้ไง ถ้าอยากรู้ว่ามันคืออะไร ก็ลอง save ไปรันดูนะครับ

]]> http://www.jquerytips.com/2009/02/20/something-about-jquery-val/feed/ 1 คำสั่ง each ใช้วนลูป ก็สะดวกดีนะ http://www.jquerytips.com/2008/11/06/each-jquery/ http://www.jquerytips.com/2008/11/06/each-jquery/#comments Thu, 06 Nov 2008 07:29:27 +0000 Tee++; http://www.jquerytips.com/?p=166 javascript นั้นมีตัวแปรที่เก็บในลักษณะ array, object ซึ่งข้อมูเหล่านี้ การที่เราจะเข้าถึงมันจะต้องใช้ loop ต่างๆ ซึ่งการเขียนมันก็ยาวนิดนึง แต่ไม่ต้องห่วง jQuery ขึ้นชื่อว่า framework แล้ว ไม่เคยพลาดที่จะเตรียมเรื่อง loop มาให้ นั่นก็คือคำสั่ง “each” นั่นเอง การใช้งานก็แสนที่จะง่าย แทบจะไม่ต้องมาศึกษาอะไรเลย

ทีนี้เราลองมาดูกันว่ามันเป็นยังไง ไอ้คำสั่ง each เนี่ย

สมมุติว่าผมได้ object มาจาก JSON format ผมสามารถเอามาวนลูป ลักษณะนี้ได้เลย

  1. $.getJSON(’somejsonurl.php’, {query: ‘xxx’ },
  2.   function(str)
  3.   {
  4.     $.each(str, function(key, item) {
  5.       alert( item.node ); // Output here
  6.     });
  7.   }
  8. );

หรือจะเอามาวนลูปเวลา Get ค่าต่าง ที่ return มาในลักษณะ array ก็ได้ เช่น

  1. $(‘input’).each(function() {
  2.   alert( $(this).attr(‘name’) ); // Output here
  3. });

เท่านี้เอง ง่ายมั้ยล่ะครับ ที่จริงวันนี้ไม่รู้จะอัพเดทไร เลยเอาเรื่อง ง่ายๆ มาบอก ใครรู้แล้วก็อย่าว่ากันเลยนะครับ 555

]]> http://www.jquerytips.com/2008/11/06/each-jquery/feed/ 3 การใช้ parameters หลายๆ ตัวแบบ inline http://www.jquerytips.com/2008/02/08/json-params-inline/ http://www.jquerytips.com/2008/02/08/json-params-inline/#comments Thu, 07 Feb 2008 17:19:54 +0000 Tee++; http://www.jquerytips.com/2008/02/08/json-params-inline/ ไม่ได้อัพเดทซะนานเลยช่วงนี้งานยุ่งมากๆ เลยครับ เสาร์ อาทิตย์ ก็ยังต้องทำงาน -*- แต่กลัวแฟนๆ jQuerytips จะบ่นวันนี้เลยเอาเรื่องง่ายๆ มาอัพเดทเสียหน่อย พอเป็นกะสัย

หลายๆคนที่เขียน plugin ของ jQuery ใช้เอง คงติดปัญหากับการนำ parameters หลายๆ ตัวไปใช้งานให้ถูกที่ ผมก็เลยจะมาอธิบายการนำ parameters ไปใช้ในลักษณะของ JSON Format กัน มาเริ่มกันเลยดีกว่า

  1. <a href="#" id="options" rel="{id: 1, url: ‘www’, delay: ’slow’}">alert: my options</a>

ตามโคดข้างบนจะเห็นว่าผมต้องการส่งค่า params หลายๆตัว คือ id, url แล้วก็ delay โดยที่ผมใช้ { }

โดยเวลา Get ค่าออกมาผมจะใช้โคดดังนี้

  1. $("#options").click(function() {
  2.   var arr = new Array();
  3.   var opts = eval("(" + $(this).attr("rel") + ")");
  4.   $.each(opts, function(i, n) {
  5.     arr.push( i + ‘=’ + n );
  6.   });
  7.   alert( arr.join("\n") );
  8.   return false;
  9. });

แต่ถ้านำไปใช้จริงๆ เพื่อนๆสามารถอ้างอิงได้ตรงๆ หลัง eval เลยคือเรียกแบบ opts['id'], opts['url'], opts['delay'] ตามแต่ต้องการจะใช้งาน

]]> http://www.jquerytips.com/2008/02/08/json-params-inline/feed/ 2 มาทำ Horizontal Menu แบบ show/hide กันเถอะ http://www.jquerytips.com/2007/12/19/jquery-horizontal-menu/ http://www.jquerytips.com/2007/12/19/jquery-horizontal-menu/#comments Tue, 18 Dec 2007 18:26:49 +0000 Tee++; http://www.jquerytips.com/2007/12/19/%e0%b8%a1%e0%b8%b2%e0%b8%97%e0%b8%b3-horizontal-menu-%e0%b9%81%e0%b8%9a%e0%b8%9a-showhide-%e0%b8%81%e0%b8%b1%e0%b8%99%e0%b9%80%e0%b8%96%e0%b8%ad%e0%b8%b0/ dl > dd").hide(); $("#menu > dl > dt").click(function() { $(this).parent().parent().find('dd:visible').slideUp(); $(this).parent().find('dd').css('cursor', 'pointer').slideDown(); }); $(document).click(function() { $("#menu > dl > dd").filter(':visible').hide(); }); }); body { font-family: verdana; font-size: 12px; } #menu dl { float: left; width: 150px; text-align: center; border-top: solid 1px #000; border-bottom: solid 1px #000; } #menu dl dt { font-weight: [...]]]> บทความของวันนี้ผมจะมาแนะนำการทำเมนู แบบ horizontal ที่มี sub ย่อย 1 ระดับกัน ที่ผมเขียนบทความนี้ก้เพราะผมไปเห็นเพื่อนบางคน เขียน javascript ยุบยับ เดี๋ยวจับ onclick ตัวนี้ ซ่อนตัวโน้น เขียนกันให้ยาวเฟื้อย มาลองวิธีแบบ jQuery ดีกว่า รับประกันความง่าย ^_^

Example:
http://www.jquerytips.com/example/menuDL.html

Code:





ขออธิบายโคดแค่ในส่วน jQuery นะครับ
$(function() {
$("#menu > dl > dd").hide();
$("#menu > dl > dt").click(function() {
$(this).parent().parent().find('dd:visible').slideUp();
$(this).parent().find('dd').css('cursor', 'pointer').slideDown();
});

$(document).click(function() {
$("#menu > dl > dd").filter(':visible').hide();
});

});

1. แรกสุดให้ซ่อน dd ทุกตัว ที่อยู่ใน parents #menu
2. ต่อมาเป็นการจับ events เมื่อมีการคลิกที่ tag dd ที่อยู่ใน parent ของ dl และ #menu ตามลำดับ
3. ให้ซ่อน dd ทั้งหมดที่มีการแสดงผลอยู่ในขณะนี้
4. ให้แสดงผล dd ของตัวที่ถูกคลิกอยู่ในปัจจุบัน รวมทั้ง add css ให้มันอีกนิดหน่อย เพิ่มความสวยงาม

$(document).click(function() {
$("#menu > dl > dd").filter(':visible').hide();
});
ส่วนโคดด้านบนเป็นการบอกว่าเวลาคลิกที่จุดในไหนหน้าเอกสารให้ซ่อน dd ทั้งหมด

สังเกตุ
จะเห็นได้ว่าในเอกสาร HTML มีโคด นี้อยู่ด้วย

ประโยชน์ของมันก็คือเมื่อเวลามีการทำงานกับ event onclick มันจะไม่เหมารวตัวนี้เข้าไปด้วย ในที่นี้มันมีประโยชน์คือ เมื่อเราคลิกหน้าเอกสารไม่ว่าตรงไหน menu dd จะถูกปิดลง ยกเว้นเมื่อคลิกที่ dt หรือ dd เพราะเราใส่ cancelBubble ไว้ที่ paremt ของพวกมัน นั่นก็คือ dl ไว้แล้วนั่นเอง

]]> http://www.jquerytips.com/2007/12/19/jquery-horizontal-menu/feed/ 1 Siblings กับการหาญาติทางสายเลือด http://www.jquerytips.com/2007/12/17/jquery-siblings/ http://www.jquerytips.com/2007/12/17/jquery-siblings/#comments Mon, 17 Dec 2007 16:37:53 +0000 Tee++; http://www.jquerytips.com/2007/12/17/siblings-%e0%b8%81%e0%b8%b1%e0%b8%9a%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b8%ab%e0%b8%b2%e0%b8%8d%e0%b8%b2%e0%b8%95%e0%b8%b4%e0%b8%97%e0%b8%b2%e0%b8%87%e0%b8%aa%e0%b8%b2%e0%b8%a2%e0%b9%80%e0%b8%a5%e0%b8%b7/ จั่วหัวกันซะมั่วซั่ว ก้อย่างเพิ่งงงไปซะก่อนล่ะ พอดีผมเปิด dict หาความหมายของคำว่า sibling มันแปลออกมาอย่างนี้ผมก็เลยเอาตามนี้แหละ ^_^

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

siblings.gif

โดคดของ jquery ที่ผมจะเขียนให้ทำงานในลักษณะนี้ก็คือ

jQuery Code

  1.  
  2. $(document).ready(function() {
  3.  $("#demo > div").mouseover(function() {
  4.    $(this).addClass(‘highlight’).siblings().removeClass(‘highlight’);
  5.  });
  6. });
  7.  

Html Code

  1. <h3>Siblings</h3>
  2. <div id="demo">
  3.  <div>1</div>
  4.  <div>2</div>
  5.  <div>3</div>
  6.  <div>4</div>
  7.  <div>5</div>
  8. </div>

แบบนี้ครับ เป็นการสั่งให้ทำงานโดยเมื่อมีการเอา mouse วางไว้ใน div ที่อยู่ใน parent:: id = demo ให้ add class ที่มีชื่อว่า highlight แต่ตัวอื่นๆ ให้เอา class นี้ออก โดยใช้ำสั่ง siblings หาตัวอื่นๆ นั่นเอง

สำหรับคำสั่ง siblings นี้เหมาะมากในการทำ according menu ต่างๆ ยังไง ก็ลองเอาไปประยุกต์กันนะครับ

เดี๋ยวครั้งหน้าเราจะมาลองหัดทำ menu show/hide ซึ่งถ้าเราทำจาก Javascript เพียวๆ ต้องเขียนกันไม่ต่ำกว่า 80 บรรทัด แต่ผมจะเนรมิตโคดแค่ 10 บรรทัดทำมันขึ้นมา ให้ดู ^_^

]]> http://www.jquerytips.com/2007/12/17/jquery-siblings/feed/ 3 Selectors ในกลุ่มของ input ต่างๆ http://www.jquerytips.com/2007/12/06/input-selector-jquery/ http://www.jquerytips.com/2007/12/06/input-selector-jquery/#comments Wed, 05 Dec 2007 17:37:22 +0000 Tee++; http://www.jquerytips.com/2007/12/06/input-selector-jquery/ สวัสดีครับ งวดนี้มาอัพเดทบล๊อกไวกว่าเดิม มากๆ เพราะว่าวันนี้พอมีเวลาว่าง หลังจากวันพ่อผ่านมา มีใครได้พาพ่อ หรือครอบครัวไปเที่ยวไหนมาบ้างครับ ผมเองไปมาหลายที่เลย ก็รู้สึกดีไปอีกแบบ ไปเที่ยวกับครอบครัวแทนสาวๆ บางครั้งก็สบายใจดีเหมือนกันนะครับ อิอิ

เอาล่ะๆ เรามาเข้าเนื้อเรื่องของวันนี้กันดีกว่า ก่อนที่ความขี้เกียจจะเข้ามาแทรกแซง เนื่องจากวันนี้มีเวลาไม่มากนักก็เลยจะขออธิบายเรื่องง่ายๆ อย่าง selector ก็แล้วกันนะครับ

Selector ของ jQuery นั้นถือเป็นจุดเด่นอีกอย่างนึงของมันเลยก็ว่าได้ เพราะทำให้เราสามารถเรียกใช้งาน node ในส่วนต่างๆ ของหน้าเอกสารได้ดังใจนึกเลยทีเดียว ซึ่งในกลุ่ม selectors ของ jQuery นั้นมีหลายกลุ่มทีเดียวแต่วันนี้ผมขออธิบายแค่ในกลุ่มของ Forms ก่อนแล้วกัน

ในกลุ่มของ Forms นั้นก้มี input ต่างๆ ซึ่งคนที่เขียน html คงรู้หมดแล้ว ก็คือไอ้พวก inpu text checkbox radio ต่างๆ นั่นแหละ ทีนี้เราลองมาดูการเรียกใช้งานผ่าน jQuery บ้าง

ลักษณะการเรียกใช้งานก็ไม่ยากเย็นอะไรเลย บรรทัดเดียวก็จบ ตัวอย่างเช่น

$(":input").val('Tee');

แบบนี้จะเป็นการให้ค่า Tee ใน value ทั้งหมดของ input หมายถึง html ที่มี tag ขึ้นด้วย input นั่นเองเช่น

text
password
checkbox
radio
etc…

ที่ jQuery ได้สร้างไว้ให้ก้มี

:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden

จะเห็นได้ว่ามีครบเลยทีเดียว การประยุกต์ใช้นั้นก้ไม่ยากครับ เอาไปทำได้หลายอย่างตามแต่จะต้องการเลย เช่นผมต้องการจะใส่ background-color ให้ input text ทั้งหมดผมก้เขียนแค่นี้

html

jQuery
$(document).ready(function() {
$(":text").css({background-color:'red', font-size:'12px'});
});

เท่านี้เอง แต่บางครั้งการใช้ประโยชน์จริงๆ เรามักจะเรียกแบบนี้มากกว่า…

ตัวอย่างผมจะเช็ค username ผ่าน ajax ว่า username นี้ยังว่างหรือไม่ว่าง

html

jQuery

$(document).ready(function() {
$(input#username").blur(function() {
var user = $(this).val();
$.get('checkusername.php', { username: user }, function(msg) {
if (msg == 'exists') { $(this).css('border: 'solid 1px red') }
});
});
});

จากตัวอย่างข้างบนผมต้องการให้มันทำงานดังนี้คือ
1. จับ event blur ของ input ที่มี id = username
2. ส่ง username ไปตรวจกับไฟล์ serve script ต่างๆ เช่น php, asp, jsp (เขียนเองละกัน)
3. ถ้าค่าที่ถูกส่งกลับมาคือ exists ให้ทำกรอบสีแดงใส่ input ตัวนี้ เป็นอันจบ

และบางครั้งถ้าเราต้องการเรียก input หลายแบบ เราก็สามารถเรียกได้แบบนี้

$("form#myform").find('input, select, textarea').empty();

โคดตัวข้างบนหมายความว่า ภายใต้ parent form ที่มี id = myform ถ้าเจอ input select หรือ textarea ให้เคลียร์ค่ามันทิ้งเลย

ปล. โคดที่เขียนขึ้นมายังไม่ได้ลองเขียนมันสดๆ ถ้า error ยังไงลองแก้กันเอานะ

เกี่ยวกับเรื่อง selector ผมขอแนะนำ link หน่อย ตามนี้

http://docs.jquery.com/Selectors

http://www.learningjquery.com/2006/11/how-to-get-anything-you-want-part-1
http://www.learningjquery.com/2006/12/how-to-get-anything-you-want-part-2

ก้ลองเอาไปอ่านและศึกษาเพิ่มเติมกันเอานะครับ jQuery ง่ายนิดเดียว ^_^

]]> http://www.jquerytips.com/2007/12/06/input-selector-jquery/feed/ 0