26
2010
AJAX Image Upload with Thumbnail Preview
หลายคนถามหาวิธีการ Upload รูปแล้วสามารถเห็นรูป Preview ก่อนได้ วันนี้เรามีวิธีการทำมาแนะนำ ดูได้ตามลิงค์ด้านล่างเลยครับ Website: http://www.zurb.com/playground/ajax_upload Demo : http://www.zurb.com/playground/ajax_upload
8
2010
jQuery Snippets ตอนที่ 1
มาดูวิธีการใช้งาน 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; [...]
6
2010
Search highlighter by jQuery
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 [...]
9
2009
jQuery and Ajax Cross-Site
วันนี้เราจะมาแนะนำการทำ 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 [...]
20
2009
jquery and php json
เกือบหนึ่งอาทิตย์เต็มๆเลย กว่าจะมีเวลามาเขียน 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 [...]
Tags
Facebook Development
Google+ Page
Categories
- HTML5 & CSS3 (8)
- jQuery 1.4 (9)
- jQuery 1.5 (6)
- .data (1)
- jQuery 1.6 (3)
- .data (1)
- jQuery 1.7 (4)
- Events (1)
- jQuery Mobile (3)
- jQuery UI (3)
- Mobile (1)
- News (8)
- Others (28)
- Plugin (15)
- The basics of jQuery (9)
- Tips (13)
- คู่มือการใช้งาน jQuery ฉบับ ภาษา ไทย (30)
- Ajax (4)
- Attributes (1)
- Core (1)
- Deferred (3)
- Effects (7)
- Events (3)
- Manipulation (2)
- Selectors (5)
- Traversing (2)
- Utilities (2)

An article by


