บทความ

กำลังแสดงโพสต์จาก กันยายน, 2014

jQuery กับการเลือก CheckBox ทั้งหมด

-
รูปภาพ
    วันนี้จะขอแนะนำโค๊ดของ jQuery ที่เกี่ยวข้องกับการเลือก CheckBox ทั้งหมด ( Select All ) โดยโค๊ดที่ผมนำเสนอนี้ จะมี 2 ส่วน คือ สำหรับ jQuery เวอร์ชั่นต่ำกว่า 1.6 กับเวอร์ชั่น 1.6 หรือสูงกว่า     เพราะ jQuery ตั้งแต่ 1.6 ขึ้นไปจะมีฟังก์ชั่นที่ว่า prop เข้ามาเพื่อตรวจสอบการกระทำกับเหตุการณ์ ที่เกิดขึ้น 2 เหตุการณ์ เช่นการติ๊กเลือกที่ CheckBox หรือ ไม่ติ๊กเลือก CheckBox ทำให้การเขียนคำสั่งกับ jQuery 1.6 หรือเวอร์ชั่นที่สูงกว่า ไม่ซับซ้อน และได้ผลลัพธุ์ที่รวดเร็วยิ่งขึ้นครับ มาดูโค๊ดกันเลยครับ 1. สำหรับ jQuery เวอร์ชั่นต่ำกว่า 1.6 ซึ่งไม่มีฟังก์ชั่น prop เราจะใช้คำสั่งเหล่านี้แทนครับ $(function() { $('#selectAll').change(function () { //ใช้ได้กับ jQuery เวอร์ชั่นต่ำกว่า 1.6 if($(this).attr('checked')){//ตรวจสอบว่า checkbox id=selectAll ถูกเช็คอยู่หรือไม่ ถ้าถูกเช็คอยู่ $('.product_select').each(function() {//วนลูป checkbox class=product_select ทั้งหมด $(this).attr('checked','checked'); //กำหนด class=product_selec...
แสดงความคิดเห็น
อ่านเพิ่มเติม

PHP การใช้ Regex แทนที่ link ให้กับข้อความที่เป็น URL

-
บทความนี้ไม่ได้เรียกว่า สอน ครับ แค่อยากนำโค๊ด PHP จากเว็บต่างประเทศมาดัดแปลงให้รองรับ URL ภาษาไทย มาแจกเท่านั้น     เรื่องของเรื่องคือ ผมทำเว็บอยู่เว็บนึง โดยให้ลูกค้ากรอกรายละเอียด ซึ่งในรายละเอียดลูกค้าอาจนำ URL มาใส่เช่น http://www.lazada.co.th แต่ผมอยากให้มันสามารถคลิกที่ URL แล้ว link ไปที่เว็บนั้นๆเลย ด้วยความขี้เกียจก็เลยลองเสิร์ทดูวิธีทำ ก็เจอเว็บนี้ครับ http://snipplr.com/view.php?codeview&id=36992      โค๊ดค่อนข้างสมบูรณ์ แต่รองรับเฉพาะภาษาอังกฤษ ไม่รองรับชื่อ โดเมน หรือ URL ภาษาไทย และผมเองก็พอมีความรู้เรื่องของ Regular Expression (Regex) อยู่บ้าง ก็เลยนำมาดัดแปลงนิดหน่อย ก็เลยได้ URL ที่รองรับทั้งภาษาไทยและภาษาอังกฤษ โดยใช้คำสังดังนี้ function link($text) { return preg_replace('@((https?://)+([-\w]+\.[-\w\.]*[ก-๙]*)+\w(:\d+)?(/([-\w/_\.]*[ก-๙]*(\?\S+)?)?)*)@', '<a href="$1" target="_blank">$1</a>', $text); } วิธีใช้งาน เช่น <?php $txt='http://lazada.co.th,http://รับทำเว็บ.com/ราคา'; ...
แสดงความคิดเห็น
อ่านเพิ่มเติม

AngularJs ใช้งามร่วมกับ PHP + MySQL : การค้นหาและแสดงข้อมูลจากฐานข้อมูล

-
รูปภาพ
     บทความนี้จะ สอน เรื่องการทำงานของ AnularJs ร่วมกับภาษา PHP และฐานข้อมูล MySQL โดยจะทำงานแบบ AJAX กันครับ โดยผลลัพธุ์ที่เราต้องการคือ เมื่อเพจถูกโหลดขึ้นมา ให้ AngularJs ไปดึงข้อมูลจากไฟล์ php แบบ AJAX แล้วไฟล์ PHP มีหน้าที่ดึงรายการสินค้าจากฐานข้อมูล MySQL ทั้งหมดไปแสดงหน้าแสดงรายการสินค้า      ส่วนการค้นหาสินค้า เราจะใช้ Filter ของ AnularJs ซึ่งคือ คอมโพเน้นท์ตัวนึง ที่มีหน้าที่กรองข้อมูลก่อนนำมาแสดงผล โดย Filter Component จะต้องผูกกับ ng-model ของช่องค้นหา และผมใช้ Theme จาก Bootstrap นะครับ เพื่อให้แสดงผลได้ทุกอุปกรณ์เช่น PC,มือถือ,แท็บเลต มาดูโค๊ดกันครับ 1.ไฟล์ showpd.html หน้าหลักสำหรับแสดงรายการสินค้า โดยเราจะให้ AnglarJs ทำงานจากหน้านี้ โดยการไปร้องขอไปยังไฟล์ showpd.php เพื่อนำข้อมูลจากไฟล์มาแสดงจากหน้านี้ เราจะใช้คำสั่งดังนี้ <!DOCTYPE html> <html ng-app="myapp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont...
5 ความคิดเห็น
อ่านเพิ่มเติม

AngularJS คือ

-
รูปภาพ
     AngularJs คือ Javascript Framework ที่พัฒนาโดย Google แต่ที่แตกต่างจาก Javascript Framework รูปแบบอื่นเช่น jQuery คือ AngularJs เป็น Javascript แบบ MVC ทำให้พัฒนาได้สะดวกรวดเร็ว ง่ายต่อการเรียนรู้ เพราะมีการแยกส่วนการทำงานที่ชัดเจน เพราะอาศัยหลักการแบบ MVC นั้นเองครับ      ตอนนี้ผมสนใจจาวาสคริปต์ เฟรมเวิร์ค ตัวนี้อยู่ครับ ถือว่าเป็นมือใหม่อยู่ครับ ตอนนี้กำลังเริ่มศึกษา เพราะมีความยืนหยุ่นสูง เพราะสามารถนำไปประยุกต์ใช้กับ mobile app ผ่าน ionicframework (mobile template) 1.เพิ่ม Attribute ng-app ไว้ที่ tag <html> เช่น <html ng-app="myapp"> 2.เรียกใช้งาน AngularJs ก่อนครับ โดยพิมพ์คำสั่งเหล่านี้ส่วนของ <head>    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 3.สร้างไฟล์นามสกุล .js ซึ่งจะเป็นส่วนของ controller ให้ชื่ออะไรก็ได้ เช่น mycontroller.js และพิมพ์คำสั่งเหล่านี้ในส่วนของ <head> ต่อจากข้อ 2 <scrip...
7 ความคิดเห็น
อ่านเพิ่มเติม