Browsing articles in "Tips"
Mar
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

Jan
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; [...]

Jan
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 [...]

Jul
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 [...]

Jun
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 [...]

Pages:«123»