jQuery Tutorials in Thailand. http://www.jquery.in.th jQuery Tutorials in Thailand Fri, 03 Sep 2010 10:24:20 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Gmail กับฟีเจอร์ใหม่ Priority Inbox http://www.jquery.in.th/gmail-priority-inbox/ http://www.jquery.in.th/gmail-priority-inbox/#comments Thu, 02 Sep 2010 21:06:39 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1175 วันนี้ Google ได้เพิ่มความสามารถใหม่ให้กับ Gmail ครับคือฟีเจอร์​ Priority Inbox ผมดูจาก Video แล้วอธิบายได้เข้าใจง่ายดีมากๆครับ ความสามารถใหม่นี้ยังอยู่ในสถานะ beta อยู่นะครับ สำหรับใครที่ใช้ Gmail อยู่สามารถดูได้ที่มุมบนขวามือนะครับ จะเห็นมีฟีเจอร์ใหม่แนะนำขึ้นมา

ลองดูคำ Video ประกอบได้ด้านล่างนี้ครับ

ความสามารถหลักๆแล้วก็คือมันจะแบ่งการจัดกลุ่มของ Email ครับ โดยแบ่งออกเป็น

  1. Important and unread
  2. Starred
  3. Everything else

ถ้าเราติดป้าย Important ให้กับ Email อันใหนเวลาที่มี Email เข้ามาอีกมันก็จะขึ้นไปอยู่ที่กลุ่มด้านบน ที่ให้ความสำคัญมากๆครับ
ฟีเจอร์นี้เหมาะกับคนที่มี Email เข้ามาเยอะๆและไม่อยากจะพลาด Email สำคัญๆ ช่วยได้เยอะเลยละครับงานนี้

]]> http://www.jquery.in.th/gmail-priority-inbox/feed/ 0 Microsoft ก็มี URL สำหรับให้ Include jQuery มาใช้เหมือนกัน http://www.jquery.in.th/include-jquery-from-microsoft-url/ http://www.jquery.in.th/include-jquery-from-microsoft-url/#comments Thu, 02 Sep 2010 20:22:05 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1163 วันนี้ขอเขียนสั้นๆสักบทความครับ ช่วงนี้งานเข้าเยอะมากครับ (- -”) นอกตีสามตีสี่ มาสามวันติดๆ มาเข้าเรื่องกันเลยก็แล้วกันครับ วันนี้ผมนั่งอ่านบทความที่เกี่ยวกับการทำ  jQuery injection หรือการแทรก jQuery Framework เข้าไปในหน้า website ที่เราต้องการที่เขาไม่ได้งาน jQuery เพื่อการ Debugs หรือเพื่ออะไรก็แล้วแต่จุดประสงค์ของเราครับ แต่เอาไปใช้งานทางที่ดีก็พอครับแหะๆ  อ่านๆไปก็ไปเห็นตรงที่มันมี Link จากทาง Microsoft ที่ให้เราสามารถที่จะ Include jQuery ไปใช้งานได้

คือว่านอกจาก Google แล้วที่ได้เปิดให้เราสามารถที่จะ Include เวอร์ชั่นล่าสุดมาใช้งานได้แล้ว เรายังสามารถจะเลือกเวอร์ชั่นได้อีกด้วย ผมเองพึ่งจะเห็นจาก Microsoft ครับว่ามีให้ใช้ด้วยแหะเลยเอามาแชร์ให้ได้อ่านกันครับ :) จริงๆแล้วหลายคนอาจจะทราบมานานแล้ว

Microsoft: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js
Google: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

การที่ Microsoft หันมาสนับสนุน jQuery หรือนำ jQuery ไปใช้งานด้าน AJAX นั้นถือเป็นเรื่องดีและน่าชื่นชมมากๆเลยครับ เพราะนั้นมันเป็นการทำให้เรา เหล่าโปรแกรมเมอร์ มั่นใจได้ว่า เมื่อ Microsoft นำ jQuery ไปใช้งานโดยประกาศว่า จะไม่มีการปรับแต่ง code ใดๆใน core หลักของ jQuery เราก็จะไม่เจอปัญหาต่างๆของความไม่เข้ากันกับ Browser ตระกูล IE ทั้งหลาย

มันทำให้เราสามารถจะใช้ jQuery มาใช้งานกับงานต่างๆของเราได้อย่างสะบายใจอย่างที่ไม่เคยเป็นมาก่อน เหอๆแอบกัดนิดๆ มันก็เลยไม่ใช่เรื่องแปลกอะไรครับที่ตอนนี้ jQuery นั้นเป็นที่นิยมเป็นอย่างมาก ถ้าในตระกูล JavaScript Framework นั้นผมยกให้ jQuery นั้นเป็นที่หนึ่งไปเลยครับ



]]> http://www.jquery.in.th/include-jquery-from-microsoft-url/feed/ 0 นอกเรื่องครับ : Andriod Froyo 2.2 สำหรับ HTC Desire ออกแล้วครับ http://www.jquery.in.th/htc-desire-andriod-froyo-2-2-new-update/ http://www.jquery.in.th/htc-desire-andriod-froyo-2-2-new-update/#comments Mon, 30 Aug 2010 18:59:26 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1159 เรื่องนี้ก็ไม่ได้เกี่ยวกับ jQuery อีกเช่นกันครับ – -” เนื่องมาจากว่า เมื่อคืนนี้ผมได้อดตาหลับขับตานอน เพื่อหาวิธี update เจ้า HTC Desire ของผมที่พึ่งจะถอยมาเมื่ออาทิตย์ที่แล้ว ให้มันเป็น Android Froyo 2.2 ที่รองรับ การสั่งงานด้วยเสียง รองรับการถ่ายวีดีโอแบบ HD 720p (1280×720) ทำทั้งคืนครับเมื่อคืนนี้ สรุปทำไม่ผ่าน พอมาคืนนี้เข้าห้องน้ำก็นั่งกด update เล่นดู ดันมีให้ update ซะงั้นเหอๆ แล้วเมื่อคืนที่ไม่ได้นอนละ ฮ่าๆ

สุดท้ายผมก็ทำการ update จาก 2.1 ไปเป็น 2.2 Froyo เรียบร้อยครับแต่ยังไม่ได้ทดสอบอะไรมากมาย ได้ลองเล่นการสั่งงานด้วยเสียง ที่เป็นฟีเจอร์ใหม่ ลองแล้วปรากฏว่า ออกเสียงไม่ได้สำเนียงสักที ในเมนูมันมีให้เลือก  English สำเนียงอะไร เยอรมันนี เกาหลี จีน แต่ทำไม ดันไม่มีพี่ไทยหว่า หรือว่า พี่ไทยเราออกได้เสียงได้ห่วยกว่าชาติอื่นๆอีก ผมว่าไม่ใช่นะ เพราะที่ทำงานอยู่เนี่ย สำเนียงคน อินเดีย เนี่ยฟังแล้วปวดหัวที่สุด – -”

HTC Desire Froyo 2.2

HTC Desire Froyo 2.2

ใน blog ที่เขียนวันนี้ไม่มีอะไรเลยครับแค่่ดีใจเลยมาเขียน สนองความดีใจสักหน่อย เดี๋ยวพรุ่งนี้จะไปลองอะไรใหม่ๆที่มีมาให้่ซะหน่อย อ่อสำหรับ HTC ที่มันออกช้ากว่าของ Nexzone ที่ HTC ทำให้ Google ก็เพราะว่า HTC เองได้ทำ UI ของตัวเองขึ้นมาเรียกว่า HTC secnse ดังนั้นเวลา Firmware ของ Google ออกมาใหม่ ก็ต้องรอทาง HTC เอาไปปรับปรุง UI ของตัวเองให้เข้ากับ version ใหม่ซะก่อนถึงจะปล่อยออกมาครับ

]]> http://www.jquery.in.th/htc-desire-andriod-froyo-2-2-new-update/feed/ 0 Draft Components สำหรับ jQuery Mobile ครับ http://www.jquery.in.th/update-deaft-components-for-jquery-mobile/ http://www.jquery.in.th/update-deaft-components-for-jquery-mobile/#comments Sun, 29 Aug 2010 20:17:58 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1150 มีข่าวสำหรับแฟนๆ jQuery Mobile มาฝากครับ นี่เป็น Draft แรกครับสำหรับ Components ต่างๆที่จะมีในเวอร์ชั่น Mobile อ่อที่สำคัญนะครับ ตัว Components ที่เห็นในรูปนี้ เป็นการเขียนขึ้นมาจาก HTML/CSS แบบเพียวๆนะครับ ไม่มี Image มาเกี่ยวข้อแม้แต่น้อย หรือ ไม่มีเลยก็ว่าได้ ที่เป็นแบบนี้ก็เพื่อการใช้งานบน Moblie ละครับ ส่วนจะรอบรับกับอะไรบ้างเข้ามาอ่านเพิ่มเติมด้านในได้ครับ

Sample Mobile Components
ที่กล่าวถึงครับเขียนจาก HTML/CSS ล้วนๆเทพมากๆ งานนี้ได้ฝีมือในการออกแบบ UI จากทีม Filament Group ครับขอบอกว่าทีมนี้เทพมากๆเลยละ

Sample Selection Dialog
ตัวนี้ก็เป็น popup แบบ dialog ดูๆก็คล้ายๆกับ dialog ของ Facebook เลยนะเนี่ย

ก็เป็นข่าวสั้นๆมา update กันครับ
ที่มา : jquerymobile.com

]]> http://www.jquery.in.th/update-deaft-components-for-jquery-mobile/feed/ 0 Facebook ประกาศเลิกรองรับ IE6 http://www.jquery.in.th/facebook-not-support-ie6/ http://www.jquery.in.th/facebook-not-support-ie6/#comments Sat, 28 Aug 2010 05:24:15 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1126 ห่างหายกันหลายวันเลยครับ ไม่ได้มา update blog เลย เนื่องจากงานเข้าเยอะมากๆครับช่วงนี้ วันนี้ก็ขอเอาอะไรที่ไม่ได้เกี่ยวกับ jQuery มาเขียนบ้างครับ แต่ก็ไม่เชิงว่าไม่เกี่ยวซะทีเดียวนะครับ เพราะเจ้าตัวปัญหาก็คือ IE6 นั้นเองครับ ที่มีปัญหาทั้งด้านการแสดงผล และปัญหาไม่ support DOM ใหม่ๆที่เพิ่มขึ้น (อยากให้ Microsoft support อะไรๆที่ browser อื่นๆเขาทำกันบ้าง เช่น การ drag and drop รูปหรือ File มาใส่ที่ browser เนี่ยครับ จะช่วยอะไรได้เยอะเลย)

Facebook not support IE6
Facebook not support IE6

ล่าสุด Facebook พี่ใหญ่แห่งวงการ social network ที่ตอนนี้บ้านเรานั้นติดกันงอมแงมครับ ทั้งสื่อต่างๆลงมาเล่นกันเยอะมากๆ ทำ activity บน Facebook เยอะมากหรือทำการตลาดบน Facebook กันอย่างเอาเป็นเอาตายครับ ซึ่งก็เป็นที่มาของงานเข้าครับ แหะๆ เพราะต้องไป Develop งาน Facebook apps ให้กับลูกค้าเจ้าหนึ่ง เจอปัญหา IE เข้าไปปวดหัวเลยครับกว่าจะผ่านมาได้

Facebook นั้นออกมาประกาศ ยกเลิกการรองรับ Internet Explorer 6 เป็นที่เรียบร้อยครับ ซึ่งผมนั้นดีใจเป็นอย่างมากเลยละครับ แทบจะจัดงานฉลองกันเลยทีเดียว ที่จะกำจัดสิ่งยุ่งยากเหลือเกิน ทั้งการทำ Design และ Coding จะได้ไม่ต้องมากังวลว่ามันจะมีปัญหาใหม ถ้าลูกค้าเกิดใช้ IE6 แล้วเวลาส่งงาน จะเป็นยังไงหนอ จบกันสักทีครับ ฮ่าๆ
IE 8
แต่ก็ยังมีบางบริษัท หรือบางหน่วยงานนะครับ ที่เขาไม่ยอมจะ upgrade ไปใช้ IE8 กันผมก็ไม่เข้าใจนะว่าทำไม ทั้งๆที่ IE มันก็สามารถติดตั้งได้ฟรีนี่นา แต่ถ้าเป็นพวก บริษัท ที่มี Web apps เก่าแก่ ที่พัฒนามาบน IE6 อันนี้พอจะเข้าใจได้ครับว่าถ้าย้ายไป IE8 นี่มีปัญหาแน่ๆละ แต่ก็นั้นแหละครับ ก็ลงพวก Firefox, Chrome ก็ยังดีสำหรับไปเปิดหูเปิดตากับชาวโลกเขาบ้าง เพราะที่ผ่านๆมานั้นผมเจอลูกค้าที่ใช้ IE6 หลายเจ้าเลย และไม่ยอม upgrade ด้วย ไม่เข้าใจจริงๆ -*-

เนื้อหาในวันนี้ไม่มีอะไรมากครับ แค่อยากจะออกมาแสดงความยินดีที่ทาง  Facebook นั้นเลิก Support IE6 สักที ช่วงนี้ก็อาจจะมีบทความ หรือข่าวที่ไม่เกี่ยวกับ jQuery บ้างก็ต้องขออภัยเพื่อนๆที่ติดตามกันไว้ ณ. ที่นี้ด้วยนะครับ เนื่องจากช่วงนี้ ปั่น Document ของ jQuery ให้เป็นภาษาไทยกันอยู่ครับ จะได้เสร็จก่อนสิ้นปีนี้สักที :)

]]> http://www.jquery.in.th/facebook-not-support-ie6/feed/ 0 ข่าวล่ามาแรงครับ jQuery Mobile!!! http://www.jquery.in.th/jquery-mobile/ http://www.jquery.in.th/jquery-mobile/#comments Fri, 13 Aug 2010 21:48:04 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1060 ตอนนี้ jQuery มีเวอร์ชั่นสำหรับ อุปกรณ์จำพวก Mobile อย่างเป็นทางการแล้วนะครับ (แต่ยังอยู่ในสถานะระหว่างพัฒนานะครับ) jQuery Mobile นั้นเป็นการนำเอา jQuery UI มาทำให้ support อุปกรณ์พวก มือถือ,IPAD,iPhone ต่างๆมากยิ่งขึ้น ประโยชน์ของมันก็คือ เราไม่ต้องไปเสียเวลาในการศึกษาภาษาของ App ต่างๆที่จะต้องเขียนในแต่ละ Device เราสามารถใช้ jQuery Mobile เขียนแล้วสามารถใช้ได้กับทุกๆ ( Cross-Platform & Cross-Device)

ข้อดีของการที่มัน cross-platform และ cross-device คือทำทีเดียวใช้ได้กับทุกๆ mobile เลยครับ ตรงนี้เยี่ยมมากๆเลย ตอนนี้ทาง jQuery เองนั้นได้จดโดเมนใหม่ สำหรับ jQuery Mobile นี้ในชื่อ http://www.jquerymobile.com ลองเข้าไปอ่านดูกันครับ

ตอนนี้ในเว็บหลักยังไม่มี Link นี้นะครับ แต่ถ้าเข้าไปที่ jQuerymobile.com แล้วจะเห็นว่ามี Link Mobile นั้นเพิ่มขึ้นมา สำหรับ jQuery mobile นั้น support อะไรบ้างก็มีคร่าวๆดังนี้ครับ

ดูจาก OS ต่างๆที่รองรับนี้ก็เรียกได้ว่าแทบจะทุกๆ OS หลักๆในตลาดเลยก็ว่าได้นะครับ น่าสนใจทีเดียว อีกอย่างทาง jQuery ได้ให้ความสำคัญเกี่ยวกับ UI ในส่วนการติดต่อกับ User ด้วยครับ

ดูจาก UI แล้วก็เหมาะกับ Mobile ที่เป็นแบบ Touch Screen ที่กำลังฮิตติดลมบนกันในปัจจุบันนี้เลยนะครับ ยังไงก็ติดตามดูกันว่าจะ Work แค่ใหนครับ แต่ผมว่านะ ถ้า jQuery ลงมือทำแล้วมันต้องเป็นที่นิยมแน่นอนครับ

]]> http://www.jquery.in.th/jquery-mobile/feed/ 0 ถึงคราวของ jQuery .delegate() กันบ้างครับ http://www.jquery.in.th/jquery-deledate-method/ http://www.jquery.in.th/jquery-deledate-method/#comments Fri, 13 Aug 2010 20:03:58 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1047
วันนี้มาทำความรู้จักกับ Method Deledate กันบ้างครับซึ่ง Method หรือ Function นี้จะมีอยู่ใน jQuery 1.4 นะครับ ตามคำจำกัดความที่ทาง jQuery นั้นเขียนไว้ว่า “Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.” แปลเป็นไทยได้ทำนองนี้ครับ (แปลได้ งูๆปลาๆนะครับ – -’ ) jQuery delegate ก็คือ Function หรือ method ที่ใช้ในการ แทรก Event ต่างๆเข้าไปสามารถแทรกเข้ามาได้มากกว่า 1 event เช่น event Click, hover, mouseover, mouseout เป็นต้น ซึ่งจะแทรกเข้าไปในทุกๆ elements ที่ตรงกับที่เราได้ selector เอาไว้


เช่นถ้าเราทำการ selector element ที่ชื่อ ul ซึ่งแน่นอนว่าใน ul นั้นก็จะต้องมี li ที่เป็น elements ลูกอยู่แล้ว element อะไรก็ตามที่อยู่ภายใต้ ul ก็จะถูกกำหนด event ให้โดยอัตโนมัติ และที่สำคัญ มันสามารถที่จะกำหนด event ให้กับ elements ที่ยังไม่มี ณ ตอนปัจจุบัน หรือเราอาจจะสร้างขึ้นมาภายหลัง มันเลยเหมาะกับโปรแกรมประเภท Dynamic event เป็นอย่างมากครับ เพราะมันเป็น Future หรืออนาคต ที่เราเป็นคนกำหนดว่าจะเกิดอะไรขึ้น อ่านไปอ่านมาก็อาจจะงงไปกันใหญ่ มาดู code ดีกว่าครับ

Code นี้เป็นตัวอย่างการเขียน event แบบเก่านะครับจะได้เห็นความแตกต่างชัดเจน

1
2
3
4
5
$("table").each(function(){
    $("td", this).live("hover", function(){
        $(this).toggleClass("hover");
    });
});

จาก code ด้านบนจะเห็นได้ว่ามีการใช้ function each ก็คือการ วนลูป นั้นเองครับ จาก code ตัวอย่าง เราได้ทำการ selector element TABLE โดยใน TABLE มันต้องมี elements ลูกที่เป็น TR กับ TD อยู่แล้ว แต่ใน code นี้ได้ทำการ selector เอา TD มา และใช้ function live ในการกำหนด Event Hover ให้กับ TD

1
2
3
...
    $("td", this).live("hover", function(){ ...
...

ดังนั้นผลที่ได้ก็คือใน Elements TD ทั้งหมดที่อยู่ภายใต้ TABLE นั้นจะถูกกำหนด event Hover ให้ทั้งหมด โดยการทำงานที่จะทำงานเมื่อมี event Hover เกิดขึ้น โดย toggleClass “Hover” เข้าไปนั้นเอง

เอาละมาดู code Function delegate() กันบ้าง โดยการทำงานนี้จะได้ผลเหมือนกันทุกประการ

1
2
3
$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

จะเห็นว่ามีการรวมเอาทั้ง selector และ live เข้าไปไว้ด้วยกันเลยทำให้ code สั้นไปได้เยอะเลยครับ เจ๋งใหมละ!!

มาดู code ที่ผมอธิบายไว้ว่ามันรองรับการเขียนแนว Dynamic Event หรือการกำหนด Event แบบอนาคตกันบ้าง

1
2
3
4
5
6
7
8
9
10
11
12
.........
<body>
    <p>Click me!</p>

<script>
    $("body").delegate("p", "click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });
</script>

</body>
.......

จาก code ด้านบนนี้จะเห็นว่ามีการกำหนด Event Click ให้กับ Tag P ที่มีอยู่ในปัจจุบัน เน้นนะครับ ที่มีในปัจจุบัน และ ในอนาคต ด้วย จากตัวอย่าง ถ้าหากเรา click ที่ tag P แล้วมันจะเพื่ิอ Tag P ขึ้นมาอีกหลัง Tag P ตัวปัจจุบัน และ tag p ที่เพิ่มขึ้นมาใหม่นั้น ก็จะมี Event Click กำหนดไว้เรียบร้อยครับ อันนี้ก็เจ๋งอีกเช่นกัน

ลองเอาไปแก้ปัญหากับงานที่ทำอยู่ดูนะครับ ตอนนี้ผมก็ได้ไอเดียใหม่ๆในการแก้ไขปัญหาของงานที่กำลังทำอยู่เหมือนกัน ได้ผลยังไงก็เอามาแช์กันที่ Forum หรือ Facebook ได้ตลอดนะครับ

]]> http://www.jquery.in.th/jquery-deledate-method/feed/ 0 jQuery Plugin Timeago!! http://www.jquery.in.th/jquery-plugin-timeago/ http://www.jquery.in.th/jquery-plugin-timeago/#comments Wed, 11 Aug 2010 10:29:03 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1027 วันนี้นั่งทำงานเกี่ยวกับ Twitter อยู่มีโจทย์อยู่ว่าให้ดึงเอาข้อความใน Twitter มาโชว์และต้องใส่ไปด้วยว่าข้อความนั้น post ผ่านมากี่วันกี่นาทีแล้ว เลยนึกขึ้นได้ว่า เออ Plugin ของ jQuery ก็มีนี่นาเอามาใช้ประโยชน์ดีกว่า เพราะแต่ก่อนนั้นใช้ PHP ในการคำนวนหา ซึ่งจะเป็นการไปเพิ่มโหลดให้กับ Server ซะเปล่าๆ

ในเมื่อเราทำฝั่ง Client ได้ก็ให้ฝั่ง Client ประมวลผลดีกว่าใหม!! บางคนอาจจะนึกไม่ออกครับ ว่ามันคืออะไร ให้ลองเข้า Facebook หรือ Twitter ดูครับ มันจะมีข้อความประมาณว่า [14 minutes ago ] อะไรประมาณนี้ คือเป็นการบอกว่า Content ที่เรา Post หรือคนอื่น Post ไปนั้น ณ. เวลาปัจจุบัน ผ่านไปนานเท่าไรแล้ว เอาละกดเข้ามาอ่านกันได้เลยครับ..

่jQuery Plugin ตัวนี้ผมก็ได้มาจากการค้นใน Google อีกเช่นเคยครับ
ก่อนอื่นเลยก็ไปโหลด Plugin timeago มาก่อนเลยครับ โหลดได้ที่ Link ด้านล่างนี้

หลังจากที่โหลดมาแล้วก็อย่างลืมเรื่องของการจัดลำดับการวาง Script นะครับต้องเอา core jQuery ขึ้นก่อนเน้อ

1
2
3
4
5
6
....
<head>
    <script src="jquery-latest.min.js"></script>
    <script src="jquery.timeago.js"></script>
</head>
....

เอาละหลังจาก include javascript มาแล้วก็พร้อมจะใช้งานแล้ว มาลองกันเลย
ผมจะสมมุติว่าเราได้ดึงเอาข้อมูลจาก Database ขึ้นมาแล้วโชว์ในรูปแบบ HMTL ประมาณนี้นะครับ ระบบเวลาตามตัวอย่างนี้เป็นระบบ ISO 8601 นะครับ หรือใช้เป็น timestamps ก็ได้ครับ

1
2
3
4
5
6
7
<abbr class="timeago" title="2008-07-17">2008-07-17</abbr>

<script>
   jQuery(document).ready(function() {
                  jQuery("abbr.timeago").timeago();
   });
</script>

จาก code ด้านบนนี้นะครับ ให้สังเกตุที่ title ตรงนี้นะครับที่ตัว Plugin จะเอาไปทำการแปลงหรือคำนวน ให้เป็น Timeago หลังจากแปลงหรือคำนวนแล้ว จะเอาไปใส่แทนที่ Text ใน Tag abbr ครับ ผลก็จะได้ตามด้านล่างนี้ครับ

1
<abbr class="timeago" title="2008-07-17">2 years ago</abbr>

จะเห็นได้ว่า ตัว Text นั้นจะเปลี่ยนเป็น “2 years ago” ครับ ตัวอย่างอื่นๆตามด้านล่างนี้ น่าจะเข้าใจและเห็นภาพง่ายที่สุดครับ

1
2
3
jQuery.timeago(new Date());             //=> "less than a minute ago"
jQuery.timeago("2008-07-17");           //=> "2 years ago"
jQuery.timeago(jQuery("abbr#some_id")); //=> "2 years ago"     // [title="2008-07-20"]

จริงๆแล้ว Plugin ตัวนี้เราสามารถที่จะ Config ค่าต่างๆได้เยอะกว่านี้นะครับ Link อื่นๆที่เกี่ยวข้องสามารถตามไปที่ Link ด้านล่างนี้ได้เลยครับ

  • ที่มา: http://timeago.yarp.com
  • Config: http://gist.github.com/6251
  • Download the stable: http://timeago.yarp.com/jquery.timeago.js
  • Timeago was built by Ryan McGeary: http://twitter.com/rmm5t
]]> http://www.jquery.in.th/jquery-plugin-timeago/feed/ 0 jQuery UI version ล่าสุดออกแล้วครับ 1.8.4 http://www.jquery.in.th/jquery-ui-new-release/ http://www.jquery.in.th/jquery-ui-new-release/#comments Wed, 11 Aug 2010 02:22:13 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=1019 ออกมา update เมื่อวานนี้ครับสดๆร้อนๆกับ jQuery UI เวอร์ชั่นล่าสสุด 1.8.4 ในเวอร์ชั่นนี้ได้มีการ fix bugs ต่างๆเช่น Droppablem Resizable, Selectable และ Sortable ซึ่ง function เหล่านี้เป็นการใช้งานในกลุ่มของคำสั่ง Drag and Drop ทั้งหมด ใครที่เคยมีปัญหาก็ลอง Download ไป update กับดูนะครับสำหรับ jQuery UI ตัวล่าสุดนี้ รายละเอียดต่างๆเพิ่มเติมคลิกเข้ามาอ่านด้านในได้เลยครับ

รู้สึกว่าถ้าใครใช้ตัว 1.8.3 อยู่และจะ update เป็น 1.8.4 นั้นจะมีปัญหาบางอย่างอยู่ ทางที่ดีนั้นผมแนะนำว่าให้ Download หรือ upgrade มาเป็นเวอร์ชัน 1.8.4 ไปเลยจะดีกว่า เพราะบางอย่างที่ build ออกมาจาก 1.8.3 จะมีปัญหากับตัว 1.8.4 ได้ หรือถ้าไม่แน่ใจให้เข้าไปดู Change log กันก่อนครับว่าจะกระทบกับระบบที่ได้พัฒนาไปแล้วหรือไม่

สำหรับเวอร์ชั่นนี้นะครับ ทาง jQuery UI ได้เพิ่มฟีเจอร์ใหม่ๆเข้ามาอีก 4 ฟีเจอร์ด้วยกัน ตามด้านล่างนี้ครับ
New Features

  1. ACCORDION
  2. AUTOCOMPLETE
  3. DIALOG
  4. TABS

ACCORDION
คุณสามารถกำหนด Event แบบ multiple ให้กับ accordion’s ได้ เป็น option นะครับจะใส่หรือไม่ใส่ก็ได้

AUTOCOMPLETE
ได้เพิ่ม options ใหม่เข้าไปอีกสอง options คือ position และ appendTo

DIALOG
ตรงนี้เดี๋ยวผมต้องไปทดสอบดูสักหน่อยครับ พอดียังไม่ได้ลอง

TABS
ในส่วนนี้มีการ update ให้สามารถ access TAB ในส่วนของ href ได้ครับ

ก็ลองศึกษากับ jQuery UI กันดูนะครับผมได้ลองเอามาใช้กับพวกระบบ Backend ช่วยงานในเครื่องของการ Design Interface ไปได้เยอะเลย ไม่ต้องมาทำเองทั้งหมด ลดเวลาในการทำ Action ต่างๆของ UI ไปได้เยอะเลยครับ ถ้าติดอะไรหรือมีปัญหาตรงใหนก็ Post ไว้ที่ Forum ได้เลยนะครับเดี๋ยวผมและทีมงานจะรีบไปตอบให้ครับ

]]> http://www.jquery.in.th/jquery-ui-new-release/feed/ 0 มารู้จักกับ jQuery .delay กันบ้างครับ http://www.jquery.in.th/jquery-delay/ http://www.jquery.in.th/jquery-delay/#comments Mon, 09 Aug 2010 19:32:42 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=988 วันนี้นั่งๆทำงานอยู่ เจอปัญหาอยู่อย่างหนึ่ง เกี่ยวกับว่า หลังจากเรา Click ที่ปุ่มปุ่มหนึ่งแล้ว ทำงานบางอย่างเสร็จ ต้องการจะให้หน่วงเวลาไปสัก สิบวินาที แล้วค่อยทำงานต่อ จะทำไงดี ก็นึกขึ้นได้ว่า jQuery มีอยู่ Function หนึ่งที่ใช้ในการหน่วงเวลา นั้นก็คือ .delay นั้นเอง jquery delay นั้นจัดอยู่ในหมวดของ Effect โดยใช้งานร่วมกับ Effect เป็นส่วนใหญ่เช่นพวก fadeIn, fadeOut, slideUp , sildeDown มาลองกันเลยดีกว่าจะได้้เข้าใจ

Code ตัวอย่างด้านล่างนี้ เป็นตัวอย่างการทำงานของ function delay ของ jQuery เมื่อทำการคลิกที่ปุ่ม Div ที่เราได้ select เอาไว้ก็จะ slideUp หรือ หดขึ้น จากนั้นก็ delay ไป 800 milliseconds ถึงจะเริ่มคำสั่ง fadeIn ต่ออีกที

1
2
3
4
5
6
7
8
9
10
11
12
//HTML
<div id="myDiv" style="background-color: red;">MyDIV</div>
<input id="myButton" type="button" value="Click Here" />

//JavaScript
<script type="text/javascript">
  $("#myButton").click(
       function(){                
            $("#myDiv").slideUp(300).delay(800).fadeIn(400);            
       }      
    );
</script>

หวังว่าในบทความนี้เพื่อนๆคงจะได้นำเอาไปใช้ประโยชน์ได้พอสมควรสำหรับการหน่วงเวลา ที่จะแสดง หรือให้ทำคำสั่งต่อไป ตอนนี้อาจจะมองไม่ออกครับว่ามันจะเอาไปใช้ในเหตุการณ์อะไรดี แต่ต้องมีแน่ๆครับศึกษาไว้ไม่เสียหลาย (พอดีผมเองลืมครับว่านึกถึง delay ขึ้นมาเพราะต้องเอามาแก้กับงานอะไรสักงานเนี่ยแหละ)

เจอกับบทความหน้าครับ

]]> http://www.jquery.in.th/jquery-delay/feed/ 0 การใช้งาน .prev() ของ jQuery ครับ http://www.jquery.in.th/jquery-traversing-prev/ http://www.jquery.in.th/jquery-traversing-prev/#comments Tue, 03 Aug 2010 02:32:24 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=980 วันนี้จะมาแนะนำการใช้งาน Function .prev() กันครับซึ่งอยู่ในหมวดหรือกลุ่มคำสั่ง Tree Traversal ครับ ถ้าให้อธิบายง่ายๆก็คือการ select ค่าของ Element อะไรก็ตามที่อยู่ถนัดไป หรือ หลัง Element ที่เราได้ select ไว้แล้ว ประโยชน์ส่วนใหญ่ก็จะเอาไปใช้กับ Tag พวก li ครับ

มาดูตัวอย่าง code กันเลยละกัน จากตัวอย่างนี้นะครับผม ได้ select element input ที่มี type เป็นชนิด checkbox โดยกำหนด Event Mouse Click ให้กับมันไปด้วย คือเมื่อไรก็ตามที่มีการ click ที่ ckechbox นี้และมีสถานะถูก checked แล้ว ก็จะทำคำสั่งในบรรทัดต่อไป ซึ่งก็คือการเรียกใช้ Function .prev ของ jQuery นั้นเอง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
   <input type="text" name="myText" id="textBox" value="Hello jQuery!!" />
   <input type="checkbox" id="checkBox" />
</div>

<script>
    $(document).ready( function(){
           $(" div input[type=checkbox] ").click(
                function(){
                     if( $(this).is(':checked') ) {
                           $(this).prev().attr('value','Say hi jQuery');
                      }
                 }
            );
    });
</script>

จาก code ก็จะเห็นได้ว่าเราจะมี input box ที่เป็น text box อยู่ด้านบนตัว checkbox นะครับดังนั้นถ้าเราจะทำการ select มันก็ใช้คำสั่ง .prev ได้เลย เราก็จะได้ object ของมันมาและกำหนดรายละเอียดต่างๆได้

หวังว่าบทความนี้จะมีประโยชน์ไม่มากก็น้อยนะครับ สำหรับนำไปประยุคใช้กับงานต่างๆ

]]> http://www.jquery.in.th/jquery-traversing-prev/feed/ 0 Source Order เรื่องง่ายๆที่ไม่ควรมองข้าม http://www.jquery.in.th/jquery-source-order/ http://www.jquery.in.th/jquery-source-order/#comments Mon, 19 Jul 2010 18:56:17 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=975 ช่วงที่ผมเริ่มจะเขียน ภาษา jQuery ใหม่ๆ เจอปัญหาเส้นผมบังภูเขาแบบการจัดเรียง ลำดับของ Script ไม่ถูก ทำให้ไม่มีการแสดงผลอะไรออกมา หรือมี Error ออกมาบ้าง ไล่ code กับไปสิฮ่าๆ หาทั้งวันเลยครับ ว่าทำไมมันถึงไม่ยอมทำงาน ที่แท้ก็มาตกม้าตายตรงเรียง Script ไม่ถูกครับ ดันเอา Plugin ไปขึ้นก่อน Script ของ jQuery ดังนั้นเวลาที่ Plugin มัน เรียกใช้งาน Function jQuery มันก็หาไม่เจอนะสิ สำหรับเพื่อนๆที่พึ่งจะศึกษาใหม่ๆไม่ควรพลาดเรื่องนี้เลยครับ ผมว่ามีประโยชน์มากๆครับ ตามมาอ่านต่อกันได้เลย

เรื่องนี้ก็ไม่ได้เป็นเรื่องยากครับ แต่เชื่อว่าเทพหลายๆคนเคยพลาดท่ามาแล้วแน่นอน เพราะบางทีเรา copy code มาแต่ดันนำมันมาวางผิดตำแหน่ง แค่นั้นก็ได้ผลที่แตกต่างกันแล้วครับ

วันนี้ผมจะแนะนำวิธีที่เขาทำกันนะครับ เป็นรูปแบบมาตราฐาน ที่ฝรั่งเขาทำกันว่างั้นเถอะ เหอๆ ในบทความนี้ถ้าเรียกเป็นภาษาอังกฤษ ก็คงจะเรียกว่าการทำ Source order มั้งครับไม่แข็งแรงเท่าไรสำหรับภาษา ต่างประเทศ ถ้าอีสานนี่ถนัดเลย ฮ่าๆ

รูปแบบที่เขาใช้กันจะเป็นแบบนี้ครับ

  1. jQuery script
  2. jQuery plugin
  3. Custom script

ตัวอย่างครับ

1
2
3
4
5
6
<html>
   <head>
     .......
     <script type="text/javascript" src="/jquery/1.4.2/jquery.min.js"></script>
     <script type="text/javascript" src="/plugin/jquery.plugin.js"></script>
     <script type="text/javascript" src="/custom.js"></script>

ถ้าเรียงลำดับแบบนี้แล้วก็หมดปัญหาครับ พบกันใหม่ในบทความต่อไปครับ :)

]]> http://www.jquery.in.th/jquery-source-order/feed/ 0 ตัวอย่างการทำ Image Rotate แบบหมุนวนครับ http://www.jquery.in.th/jquery-image-rotate-360/ http://www.jquery.in.th/jquery-image-rotate-360/#comments Thu, 15 Jul 2010 05:15:23 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=970 วันนี้ขอเบิ้ลอีกสักบทความเลยละกันครับ ไปเจอวิธีการทำ Image Rotate แบบ 360 องศา มาครับน่าเอามาศึกษาและประยุคต์กับงานที่ทำมากๆ Action คล้ายๆกับการหมุนรูปสลับกันเป็นวงกลมครับ หรือคล้ายๆกับพวกการโชว์ Thump บน iTune ครับ สวยงามดี แต่ที่น่าสนใจก็วิธีการศึกษาจาก code ที่ทางเว็บที่ผมจะแนะนำครับ จะได้ไอเดียเอามาทำงานได้อีกเยอะเลย ใครสนใจก็ด้านในเลยครับ…

ลองเข้าไปดู Demo กันก่อนครับที่ : http://bit.ly/bThnP6
หรือเข้าไปศึกษาตัวอย่าง Code ได้ที่ : http://bit.ly/9ymwE3

]]> http://www.jquery.in.th/jquery-image-rotate-360/feed/ 0 jQuery Tooltip Plugin http://www.jquery.in.th/jquery-tooltip-plugin/ http://www.jquery.in.th/jquery-tooltip-plugin/#comments Thu, 15 Jul 2010 04:49:11 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=965 วันนี้มี Plugin สำหรับทำ Tooltip มาฝากกันครับ เอาไปใช้ประโยชน์ในการทำ Tip เวลาเอา Mouse ไป RollOver และขึ้นคำแนะนำขึ้นมา อันนี้พิเศษตรงที่สีสันสวยงามครับ น่าใช้มากๆ ใครนึกไม่ออกมาดูภายด้านในเลยครับ

Download ได้ที่ URL นี้ครับ : http://tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin

]]> http://www.jquery.in.th/jquery-tooltip-plugin/feed/ 0 ตัวอย่างการใช้ appendTo() แบบง่ายๆครับ http://www.jquery.in.th/easy-jquery-appendto/ http://www.jquery.in.th/easy-jquery-appendto/#comments Mon, 12 Jul 2010 02:00:34 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=948 บทความนี้เขียนตอนประมาณตี 2 กว่าๆครับ (นั่งดูบอลไปด้วยทำงานไปด้วย) ไปเจอปัญหาหนึ่งที่ง่ายๆแต่ลืมวิธีใช้งาน ก็เลยมาเขียนลงบทความไว้ดีกว่าครับ จะได้เป็นประโยชน์สำหรับเพื่อนๆ ที่พึ่งเริ่มต้นกัน สำหรับ เทพๆ คงผ่านบทความนี้ไปได้เลยครับ

appendTo คืออะไร ?
appendTo มันใช้ทำอะไร ?
appendTo แล้วทำไมถึงเลือกใช้ ?
appendTo มันดียังไง ?

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

การหาคำตอบของคำถามนี้ก็มีมากหมายครับใน Internet แต่จะอธิบายได้เข้าใจหรือเปล่านั้นก็แล้วแค่ว่า คนที่เขียนบทความนั้นๆ อธิบายละเอียดแค่ใหน หรือว่ายกตัวอย่างได้เข้าใจแค่ใหน มาดูกันเลยดีกว่าครับ ผมจะยกจากปัญหาที่ผมเจอ ตอนที่กำลัง code งานสดๆตอนตีสองกว่าๆนี้เลย กับ Function appendTo();

คำว่า append มันก็ตรงตัวอยู่แล้วครับสำหรับคำแปลของมัน append = การนำไปต่อท้าย เช่นตัวอย่างนี้ครับ

ยกตัวอย่าง เรามี tag DIV อยู่ 1 ตัวและข้างในก็ไม่มีอะไรนะครับ

1
<div id="myDiv">.....</div>

ถ้าหากเราต้องการจะใส่ Tag SPAN ที่มีข้อความอยู่ข้างใน tag DIV นี้จะทำยังไงดี

1
<div id="myDiv"><span>Hello World!!!!</span></div>

มาดู code กันครับว่าเขียนยังไง ง่ายมากๆ

1
2
3
4
<script type="text/javascript">// <![CDATA[
   var html = "<span>Hello World!!!!</span>";
    $( html ).appendTo('#myDiv');
// ]]></script>

เพียงเท่านี้ ทั้ง tag SPAN และข้อความข้อในก็จะถูกนำไปใส่ภายใต้ DIV ที่เราต้องการครับในที่นี้ก็คือ id myDiv นั้นเอง การนำไปใช้งานนั้นคือ เราอาจจะรับค่าที่ได้มาเป็น HTML เช่นการ ส่ง Request แบบ AJAX ไปและรับค่ากลับมาเป็น HTML และต้องการแสดงผลที่รับมา เราก็จะใช้ appendTo ในการแทรกสิ่งที่เราต้องการใน element นั้นๆที่เราต้องการจะให้มันโชว์

ตัวอย่างการนำไปใช้งานของผมคร่างๆเป็นแนวทางครับ
ผมจะส่ง Request แบบ POST ไปยัง file PHP file หนึ่งเพื่อดึงเอาข้อมูล HTML ออกมาแสดงผลใน element ที่เราต้องการนะครับ

1
2
3
4
5
6
7
8
9
10
11
<div id="result">.....</div>
<script type="text/javascript">// <![CDATA[
 $('document').ready(function(){      
           $.post("/path/to/url/php",
                  { searchByName:"jQuery" },            
                   function(data){                    
                           $( data ).appendTo("#result");              
                   },            
                   'html'  //สามารถระบุว่าจะเป็น html,json,text ก็ได้ขึ้นอยู่กับสิ่งที่ return      
); });
// ]]></script>
]]> http://www.jquery.in.th/easy-jquery-appendto/feed/ 0 Video สอนเครื่องมือที่ใช้ในการ Debug jQuery ครับ http://www.jquery.in.th/debug-toolsjquery-for-firefox-safari-chrome/ http://www.jquery.in.th/debug-toolsjquery-for-firefox-safari-chrome/#comments Fri, 09 Jul 2010 06:21:43 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=935 ผมไปเจอ Video ที่สอนการใช้งานเครื่องมือสำหรับ Debug เบื้องต้นครับ ดูแล้วน่าสนใจมากๆขอบอก ใครพลาดแล้วจะเสียใจครับ มันดียังไงนั้นต้องเข้าไปดูเองครับ แต่ที่แน่ๆนั้น มันมีบางเทคนิค หรือบางอย่างที่ผมเองนั้นยังไม่เคยใช้เลย เขาสอนการใช้ Debug tools ทั้งบน FireFox, Chrome, Safari ครับ ยังไงลองเข้ามาดู Video ด้านในเลยครับ สุดยอดมากๆ

เพื่อนๆดูกันแล้วก็ลองเอาไปใช้ดูนะครับ สำหรับผมเนี่ยโอ้มันสุดยอดมากๆ ถ้าวัยรุ่นสมัยนี้ก็ต้องบอกว่า มัน เมพมากๆ (ไม่รู้เหมือนกันว่าคำว่า เมพ เนี่ยมันคืออะไร) แล้วผมจะหาอะไรดีๆมาแชร์ให้เพื่อนๆอีกนะครับ

ที่มา : http://jqueryfordesigners.com/debugging-tools/

]]> http://www.jquery.in.th/debug-toolsjquery-for-firefox-safari-chrome/feed/ 0 มาสร้าง HTML ด้วย jQuery version 1.4 กันครับ http://www.jquery.in.th/building-html-in-jquery/ http://www.jquery.in.th/building-html-in-jquery/#comments Fri, 09 Jul 2010 04:22:19 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=927 ในบางงานที่เป็นการทำงานที่ไม่ใช่ Static HMTL หรือเป็น dynamic HTML นั้นเราจำเป็นต้องใช้ความสามารถของ JavaScript มาช่วยในการสร้าง HTML แบบ dynamic หรือแบบที่มีการเปลี่ยนแปลงตลอดเวลา ใน jQuery version 1.4 เราจะมาใช้ความสามารถของมันในการสร้าง HTML แบบ dynamic กันครับ ถ้าเรียกเป็นภาษาทางการหน่อยก็ Building HTML in jQuery

มาเข้าเรื่องกันเลยครับ
บางคนคงเคยเขียน code ด้วย JavaScript แบบตัวอย่างด้านล่างนี้กันมาบ้างแล้วสำหรับการทำ dynamic HTML

1
2
3
4
5
6
7
8
html = '<input "' + inputId
                           + '" name="'
                           + inputName
                           + '" type="'
                           + inputType
                           + '"'
                           + (isChecked ? 'checked="checked"' : '')
                           + '/>';

Code ด้านบนนี้มันก็คือการ Build HTML ขึ้นมานั้นเองแต่ด้วยความสามาถใหม่ของ jQuery 1.4 นั้น
เราสามารถเขียนให้ได้ผลออกมาเหมือนกันได้แต่ง่ายกว่าตาม code ด้านล่างนี้ครับ

1
2
3
4
5
6
7
8
9
$("input", {
  id: "permissionsInput",
  name: "permissions",
  type: "checkbox",
  click: function(){
    update();
  },
  checked: "checked"
}).appendTo("#myForm");

จะเห็นว่าเราสามารถ Build tag “input” ขึ้นมาได้เหมือนกับ code แรกและยังสามารถกำหนด event ให้กับ input box ไปได้อีกด้วย เราสามารถกำหนด attributes ต่างๆที่จำเป็นสำหรับ Tag นั้นๆเข้าไปด้วยด้วยไม่ว่าจะเป็น Class,ID,Name,Value ได้หมดครับ ใส่ Event เข้าไปเลยก็ยังได้ หรือเราจะกำหนดค่าตัวแปรต่างๆเข้าไปด้วยเลยก็ได้

เท่าที่ลองเล่นดูผมว่า version 1.4 นี้ช่วยงานได้เยอะเหมือนกันครับ ความสามารถใหม่ๆที่เพิ่มเข้ามา ทำให้เวลากลับไปแก้ไข code ของ javascript นั้นทำได้ง่ายและรวดเร็วขึ้นเยอะเลย

]]> http://www.jquery.in.th/building-html-in-jquery/feed/ 0 jQuery Selectors type http://www.jquery.in.th/jquery-selectors-type/ http://www.jquery.in.th/jquery-selectors-type/#comments Thu, 08 Jul 2010 03:08:42 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=924 ความสามารถที่โดดเด่นของ jQuery เลยก็คงจะหนีไม่พ้นเรื่องของการใช้ Selector ครับ เพื่อนๆที่พึ่งจะลองจับ jQuery อาจจะยังไม่รู้จักว่า Selector มันคืออะไร จริงๆแล้วถ้าเคยเขียน JavaScript แบบเพียวๆมาก่อนถ้ายกตัวอย่างให้ดูนี่ คงต้องอ๋อกันทุกคนครับ ( document.getElementById(“id”) ) คุ้นๆใหมครับกับรูปแบบนี้ Selector ของ jQuery ก็ทำงานเหมือนกับ ที่ผมยกตัวอย่างขึ้นมาครับ แต่มันสั้นกว่า และง่ายกว่ามาก ความสามารถนี่เอาไปปรับใช้กับงานได้อย่างรวดเร็ว ใครสนใจหัวข้อนี้คลิกเข้ามาอ่านได้เลยครับผมจะยกตัวอย่าง Selector บางชนิดให้พอเป็นข้อมูลเพื่อเอาไปต่อยอดกันได้อีกนะครับ

  • Element ตัวอย่าง $(“td”) ตัวอย่างนี้เป็นการ select  HTML element tag “TD” ที่อยู่ใน tag Table
  • #id ตัวอย่่าง $(‘#myDIV”) เป็นการ selector element ด้วยชื่อข id ของ element นั้นๆ
  • selector,selector ตัวอย่าง $(“input:buttom,input:text”) เป็นการ select แบบ multi หรือ select แบบหลายๆ element โดยใช้ comma “,” ในการขั้น
  • ancestor descendant ตัวอย่าง $(“#myDIV a”) เป็นการ select tag HTML “a” ใน element ที่มี ID ชื่อ id=”myDIV”
  • :filter ตัวอย่าง $(“input:button) เป็นการ filter เอาเฉพาะ element ที่มี type เป็น button เท่านั้น

นี่เป็นตัวอย่างของการใช้ selector ของ jQuery ครับส่วน selector แล้วจะเอาไปทำอะไรต่อนั้นก็ขึ้นอยู่กับเราละครับว่าจะเอาไปใช้งาน หรือ ทำอะไรต่อ เพราะเวลาเรา select element นั้นๆได้แล้ว เราก็จะได้ object ของมันออกมาด้วย ก็ลองๆทำความเข้าใจในส่วนนี้ดูครับ ถ้าไม่เข้าใจตรงใหนเข้าไปตั้งกระทู้สอบถามได้ที่ Webboard ของเราได้เลยนะครับ  http://www.jquery.in.th/forums

]]> http://www.jquery.in.th/jquery-selectors-type/feed/ 0 แนะนำ jQuery UI http://www.jquery.in.th/jquery-ui-suggest/ http://www.jquery.in.th/jquery-ui-suggest/#comments Wed, 07 Jul 2010 09:36:07 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=910 บทความแรกของวันนี้เลยครับ หลังจากที่ Maintenance พวก Server ต่างๆเสร็จเรียบร้อย วันนี้จะมาแนะนำ jQuery UI ให้กับเพื่อนๆมือใหม่ ที่ยังไม่เคยรู้จักกันมาก่อน หรือ รู้จักแต่ยังไม่เคยใช้ ก็มาลองอ่านบทความนี้ดูครับ หวังว่าจะทำให้เพื่อนๆอยากจะลองเอาไปใช้งานกันบ้าง เพราะช่วยลดเวลาในการออกแบบ หรือ Design UI (user interface) ต่างๆ เพราะเราสามารถเอาปุ่มสวยๆ ไอคอน สวยๆที่มีอยู่แล้วนำมาใช้งาน ควบคู่กับ jQuery ได้เลยครับ..

http://www.jqueryui.com

สำหรับเว็บ jQueryui.com นั้นเป็นอีกหนึ่งเว็บหรืออีกหนึ่ง session ของ jQuery ครับที่มี UI ให้เราใช้งานกันโดยไม่ต้องมานั่งออกแบบเองให้เสียเวลาทำมาให้กินกันครับ UI นี้ส่วนมากแล้วที่ผมนำมาใช้งานนั้น ก็จะเป็นงานพวก Backend ครับเช่นระบบ Backend ของ CMS ต่างๆที่ได้เขียนขึ้นมา มีให้เลือกใช้เยอะเลยครับ ที่สำคัญเอามาใช้ร่วมกับ jQuery ด้วยจะช่วยเพิ่มประสิทธิภาพในระบบ Web Interface ของเราให้ใช้งานได้ง่านขึ้นไม่ซับซ้อนจนเกินไป

http://jqueryui.com/demos

เว็บ jQueryUI นี้เราสามารถเข้าไปทดลองใช้งานดูหรือจะอ่านวิธีการใช้งาน ได้ที่ URL นี้ครับ http://jqueryui.com/demos ในนี้จะแบ่งหมวดอมู่ออกเป็น 4 หมวดหมู่ใหญ่ๆด้วยกันครับ

  • Interactions
  • Widgets
  • Utilities
  • Effect

แต่ละหมวดหมู่นั้นเพื่อนๆก็สามารถเข้าไปอ่านได้ตาม Link ด้านบนที่ได้กล่าวมาแล้วได้เลยครับ แต่ผมคิดว่าอีกไม่นาน ทาง jQuery.in.th ของเราจะนำเอา Document จากเว็บ jQueryUI มาแปลเป็นภาษาไทย ให้ได้อ่านกันง่ายๆขึ้นและเข้าใจมากขึ้น ถ้าใช้ Google แปล มันก็จะได้ภาษาที่แปลกๆไปพอสมควรครับ แฮ่ะๆ

http://jqueryui.com/themeroller

อ่อและยังสามารถที่จะ Build หรือสร้าง ปรับแต่งโทนสีต่างๆของ UI ให้เข้ากับเว็บเราได้ด้วยนะครับ ผมว่ามันเป็นอะไรที่เจ๋งมากๆเลย
สามารถเข้าไป Build ได้ที่ Link นี้ครับ http://jqueryui.com/themeroller

]]> http://www.jquery.in.th/jquery-ui-suggest/feed/ 0 jQuery Thailand เปลี่ยน Design ใหม่ฉลองครบ 1 ปีครับ http://www.jquery.in.th/new-theme-jquery-in-thailand/ http://www.jquery.in.th/new-theme-jquery-in-thailand/#comments Wed, 07 Jul 2010 05:24:22 +0000 ต้นร่มเกล้า http://www.jquery.in.th/?p=897 สวัสดีกันอีกครั้งครับ
และยินดีต้อนรับเพื่อนๆ แฟนของภาษา jQuery ทั้งหลายวันนี้ก็มารายงานความคึบหน้าในการปรับปรุงเว็บ jQuery ของเราครับ jQuery in Thailand นี้มีอายุครบ 1 ปีแล้วครับ เวลาผ่านไปเร็วมากๆ ช่วงแรกๆนั้นติดอันดับใน Google ดีพอสมควรครับขึ้นหน้าต้นๆเลย เมื่อสักเดือนเมษายนที่ผ่านมาน่าจะได้นะครับ เกิดปัญหาเรื่อง DNS Server ทำให้เพื่อนๆบางท่านนั้นไม่สามารถเข้าเว็บ jQuery.in.th ได้ ทำให้จำนวน page view หายไปเยอะพอสมควร (เป็นอีกสาเหตุที่ทำให้อันดับใน Google ตกไปด้วย) ตอนนี้ได้รับการแก้ไขเป็นที่เรียบร้อยแล้วครับ ผมจัดการติดตั้ง OS ใหม่เลยทำการ Build Control panel สำหรับ Server ตัวนี้ใหม่ก็หมดปัญหาไปครับ Server ทำงานได้เร็วกว่าเดิมเยอะเลย

ตอนนี้บทความต่างๆของเก่าที่มีอยู่อาจจะแสดงผลพวก code style ไม่ถูกต้องนะครับ อีกอย่างเว็บใหม่นี้มีการใช้รูปมาทำ Thumpnails ทำให้บางบทความนั้นไม่มีรูปก็ไม่ต้องตกใจนะครับ แฮ่ะๆ ไม่ใช้ Error แต่อย่างใด

ตอนนี้มีอะไรใหม่เกิดขึ้นกับเว็บ jQuery in Thailand บ้างมาดูกันครับ

ตอนนี้ก็มีเท่านี้ครับสำหรับการ update ในปีนี้จริงๆแล้วการใช้งาน jQuery นั้นมันก็ต้องเอาไปใช้กับ Tools ตัวอื่นๆเช่น PHP Framework ต่างๆ ทางทีมงานผมเองนั้นนำมาใช้กับ CakePHP, CodeIgniter, SilverStripe และคิดว่าจะเปิด Session สำหรับ Framework ต่างๆพวกนี้ใน Forums ให้ได้ถามตอบปัญหาที่เฉพาะกลุ่มกันมากขึ้นครับ

]]> http://www.jquery.in.th/new-theme-jquery-in-thailand/feed/ 0