วันนี้ขอเขียนสั้นๆสักบทความครับ ช่วงนี้งานเข้าเยอะมากครับ (- -”) นอกตีสามตีสี่ มาสามวันติดๆ มาเข้าเรื่องกันเลยก็แล้วกันครับ วันนี้ผมนั่งอ่านบทความที่เกี่ยวกับการทำ  jQuery injection หรือการแทรก jQuery Framework เข้าไปในหน้า website ที่เราต้องการที่เขาไม่ได้งาน jQuery เพื่อการ Debugs หรือเพื่ออะไรก็แล้วแต่จุดประสงค์ของเราครับ แต่เอาไปใช้งานทางที่ดีก็พอครับแหะๆ  อ่านๆไปก็ไปเห็นตรงที่มันมี Link จากทาง Microsoft ที่ให้เราสามารถที่จะ Include jQuery ไปใช้งานได้

ช่วงที่ผมเริ่มจะเขียน ภาษา jQuery ใหม่ๆ เจอปัญหาเส้นผมบังภูเขาแบบการจัดเรียง ลำดับของ Script ไม่ถูก ทำให้ไม่มีการแสดงผลอะไรออกมา หรือมี Error ออกมาบ้าง ไล่ code กับไปสิฮ่าๆ หาทั้งวันเลยครับ ว่าทำไมมันถึงไม่ยอมทำงาน ที่แท้ก็มาตกม้าตายตรงเรียง Script ไม่ถูกครับ ดันเอา Plugin ไปขึ้นก่อน Script ของ jQuery ดังนั้นเวลาที่ Plugin มัน เรียกใช้งาน Function jQuery มันก็หาไม่เจอนะสิ สำหรับเพื่อนๆที่พึ่งจะศึกษาใหม่ๆไม่ควรพลาดเรื่องนี้เลยครับ ผมว่ามีประโยชน์มากๆครับ ตามมาอ่านต่อกันได้เลย

ผมไปเจอ Video ที่สอนการใช้งานเครื่องมือสำหรับ Debug เบื้องต้นครับ ดูแล้วน่าสนใจมากๆขอบอก ใครพลาดแล้วจะเสียใจครับ มันดียังไงนั้นต้องเข้าไปดูเองครับ แต่ที่แน่ๆนั้น มันมีบางเทคนิค หรือบางอย่างที่ผมเองนั้นยังไม่เคยใช้เลย เขาสอนการใช้ Debug tools ทั้งบน FireFox, Chrome, Safari ครับ ยังไงลองเข้ามาดู Video ด้านในเลยครับ สุดยอดมากๆ

ในบางงานที่เป็นการทำงานที่ไม่ใช่ Static HMTL หรือเป็น dynamic HTML นั้นเราจำเป็นต้องใช้ความสามารถของ JavaScript มาช่วยในการสร้าง HTML แบบ dynamic หรือแบบที่มีการเปลี่ยนแปลงตลอดเวลา ใน jQuery version 1.4 เราจะมาใช้ความสามารถของมันในการสร้าง HTML แบบ dynamic กันครับ ถ้าเรียกเป็นภาษาทางการหน่อยก็ Building HTML in jQuery

หลายคนถามหาวิธีการ Upload รูปแล้วสามารถเห็นรูป Preview ก่อนได้ วันนี้เรามีวิธีการทำมาแนะนำ ดูได้ตามลิงค์ด้านล่างเลยครับ Website: http://www.zurb.com/playground/ajax_upload Demo : http://www.zurb.com/playground/ajax_upload

มาดูวิธีการใช้งาน jQuery กันแบบย่อๆกันบ้างนะครับเปลี่ยนบรรยากาศกันหน่อย ผมว่ามีประโยชน์มากๆเลยครับ เพราะจะได้เรียนรู้วิธีการเขียน jQuery หรือการเรียกใช้ Function บาง Function ที่เราไม่เคยใช้ หรือเอาไว้ศึกษาวิธีอื่นๆในการเขียนที่ชาวต่างชาตินิยมเขียนกันนะครับ – วิธีการ Refresh src ของ IMG นะครับ 12$(imageobj).attr(’src’, $(imageobj) .attr(’src’) + ‘?’ + Math.random() ); – วิธีการ เช็คว่า Image นั้นโหลดเสร็จแล้ว หรือโหลดไม่ได้ 123456var imgsrc = ‘img/image1.png’; $(’<img alt="" />’).load(function () { alert(’image loaded’); }).error(function () { alert(’error loading image’); }).attr(’src’, imgsrc); – วิธีการ ไม่ให้ Click ขวา 12345$(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); – วิธีสั่ง Run Function 5 ครั้งทุกๆ 20 วินาที 1234567var count = 0; [...]

Search highlighter by jQuery มี tip เล็กมาแนะนำครับ คือการเน้นข้อความ โดยใช้ jQuery ครับ โดยจะเอามาประยุกต์ใช้กับ การค้นหาข้อความ มาดูตัวอย่างกันได้เลย ส่วนของ html และ css 1234567891011<style type="text/css"> .highlight { background-color:yellow } </style> <input id="txtSearch" name="txtSearch" type="text" /> <input id="btnSearch" name="btnSearch" type="button" value="Search" /> <div id="divContent">This is the recommended version of jQuery to use for your application. The code in here should be stable and usable in all modern browsers. The minified versions, while having a larger file size than the packed versions [...]

วันนี้เราจะมาแนะนำการทำ ajax โดยใช้ jQuery แบบ Cross-Site กันครับ การทำงาน ผมจะใช้ ajax ไปโหลด page url มาซึ่งทาง server-side ผมใช้ PHP ครับและ ทาง PHP ก็ return ค่ากลับมาเป็น json ครับ Code ในส่วนของ Html <div style=”background-color:#333333;height:20px;”> <a id=”top” href=”javascript:void(0);” gt;Show Message</a> </div> <div id=”layDiv” style=”display:none;height:30px;font-weight:bold;color:#ff3300;”></div> Code ในส่วนของ Javascript <script language=”javascript”> $(“document”).ready(function(){ $(“#top”).click(function(){ jQuery.ajax({ url: ‘http://executedns.net/hello.php’, type: ‘GET’, dataType: ‘jsonp’, dataCharset: ‘jsonp’, success: function (data){ var content = data.msg; alert(content); $(‘#layDiv’).html(”); $(‘#layDiv’).html(content); $(‘#layDiv’).css(“display”,”block”); } }); }); }); </script> สิ่งที่สำคัญสำหรับ code ในส่วนนี้ก็จะเป็น parameter [...]

เกือบหนึ่งอาทิตย์เต็มๆเลย กว่าจะมีเวลามาเขียน Block สักที มัวแต่วุ่นวายกับงาน Programming Flash ActionScript 3 ที่ทำให้ Seagate กับ SF Cinemacity เหอๆกว่าจะผ่านไปได้ครับเหนื่อยแทบแย่ วันนี้ผมจะเอาความรู้ที่ทำงานมาแนะนำอีกอันครับ สำหรับเพื่อนๆที่ไม่รู้ หรือเพื่อนๆที่รู้ก็แนะนำเพิ่มได้เลยครับ วันนี้จะมาเสนอเรื่องการใช้ PHP JSON ร่วมกับ jQuery กันครับ การที่จะใช้ function json_encode นั้น php จะต้องเป็น version 5.2.8 ขึ้นไปนะครับถึงจะรองรับการทำงาน Function นี้ Function json_encode() นั้นจะเป็นการแปลง array ให้ออกมาอยู่ในรูปแบบของ json ครับ ตัวอย่างเช่น array(‘name’=>’Root’, ‘age’=>’27′); ถ้านำ array นี้ไปผ่าน function json_encode ก็จะได้รูปแบบดังต่อไปนี้ครับ $arr = array(‘name’=>’Root’, ‘age’=>’27′) ; echo json_encode( $arr ); // output ->  {‘name’:'Root’,'age’:’27′} เมื่อรูปแบบที่ออกมาอยู่ในรูปแบบของ json แล้วเราก็สามารถใช้ jquery json เรียกข้อมูลกลับมาแสดงผลได้ ดังตัวอย่างนี้ครับ ผมจะส่งค่า Post ด้วย json [...]

ไม่ได้เขียนบทความใน Blog นานแล้ว งานเยอะพอสมควรเลย วันนี้ว่างๆ มานั่งเล่นนั่งทำงาน ที่ร้านกาแฟ Bug & Bee บรรยากาศก็ดีนะ สบายๆ ร้านนี้มีหลายสาขาแต่วันนี้ที่มานั่งก็ที่สาขา สีลม ครับ วันนี้ผมจะมาเสนอวิธีการเขียน jQuery แบบที่จะทำให้เวลากลับมาแก้ code นั้นสบายตาไม่ต้องมานั่งปวดหัวเวลาไล่ code นานๆ จริงๆแล้วน่าจะเรียกว่า style การเขียนของแต่ละคนมากกว่า การเขียน jQuery ส่วนมากผมจะนำมาใช้ในเรื่องพวกการดัก Event ต่างๆที่เกิดขึ้นเช่น onClick, onMouseOver เป็นต้น มาดู Style ผมกันบ้างครับเผื่อจะเป็นประโยชน์สำหรับเพื่อนๆกันบ้าง