ข้ามไปที่เนื้อหาหลัก

บทความ

กำลังแสดงโพสต์ที่มีป้ายกำกับ jQuery

วิธีการใช้งาน jQuery text highlight เพื่อแสดงข้อความที่ตรงกับการค้นหา

      การไฮไลท์วิธีการนี้ส่วนใหญ่จะใช้กับการค้นหา  เมื่อกรอกข้อความที่ค้นหา  และประมวลผลจนได้ผลลัพธ์เรียบร้อย ก็จะเห็นรายการที่ตรงกันปรากฏออกมา  และก็จะทำการไฮไลท์ข้อความของรายการต่างๆ ที่ตรงกับคำค้นหาให้เห็นได้ชัดเจนขึ้น การเชื่อต่อฐานข้อมูล <?php $conn = mysqli_connect("localhost","tobedev","dev.1234","test"); if (!$conn->set_charset("utf8")) {     printf("Error loading character set utf8: %s\n", $conn->error);     exit(); } ?> หน้าค้นหาสถานที่ท่องเที่ยว <?php include "mysql_connect.php";?> <html> <head> <title>ทดสอบ jQuery text highlight</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style>     .highlight {         background-color: #FFFF88;     } </style> </head> ...

การใช้ jQuery เว้นระยะห่างทางด้านซ้ายของหัวข้อย่อย ด้วยฟังก์ชั่น .css()

สำหรับการใช้ jQuery เว้นระยะห่างด้านซ้ายให้กับตัวเลขกำหนดหัวข้อนั้น เราสามารถเรียกใช้ฟังก์ชั่น .css() เพื่อกำหนด margin-left ให้มีค่าตามที่เราต้องการได้ โดยที่เราจะนับจำนวนจุดของหัวข้อเพื่อใช้เป็นตัวเว้นระยะขอบ เช่น  1.1.1 จะนับจุดได้ 2 จุด เราก็จะเว้นระยะโดยนำไปคูณ 20 ก็จะได้ระยะ 20px หากต้องการระยะห่างเพิ่มขึ้น ก็เพียงแค่เพิ่มค่าตัวคูณเข้าไปก็จะได้ระยะที่ห่างขึ้นตามต้องการ วิดีโอ ซอร์สโค้ด ลิงค์ที่เกี่ยวข้อง http://api.jquery.com/css/ http://www.w3schools.com/jsref/jsref_length_array.asp http://www.w3.org/TR/CSS21/box.html#mpb-examples

[สอน jQuery] เรียงลำดับข้อมูลด้วยตัวเลขหัวข้อที่กำหนดเอง

จากตัวอย่างในภาพ เมื่อเรากรอกตัวเลขหัวข้อของรายการในแถวใดๆ ก็จะเกิดการจัดเรียงลำดับอัตโนมัติทันที ตามฟังก์ชั่นที่เราเรียกใช้ วิดีโอตัวอย่าง

การคำนวนค่าความต้านทานแบบต่ออนุกรม

<!DOCTYPE html> <html> <head> <title>การหาค่าความต้านทานแบบอนุกรม</title> <meta charset="utf-8"> <script src="../js/jquery.min.js"></script> <script> var arr_resistance = []; var resistance = ''; function display_input(max_fields){ var x = 1; //initlal text box count $('#show_input').html(''); for(var i = x; i <= max_fields; i++) { $('#show_input').append('<div>R'+i+' : <input type="text" class="input_resistance"/> โอห์ม</div>'); //add input box if(resistance != ''){ resistance += ' + '; } resistance += 'R'+i; } $('#show_button').html('<div id="btn_nextstep"><button onclick="step1()">ขั้นตอนต่อไป (1)</button></div>'); //add input box } function check_data(){ var msg = ""; $( ".input_resistance...

PHP Javascript Diable/Enable Form การทำให้ textbox disabled หรือ readonly เมื่อกดปุ่มโหลดข้อมูล

โจทย์ปัญหาในบทความนี้ก็คือ จะทำอย่างไรให้ช่องกรอกข้อมูลมีสถานะเป็นอ่านอย่างเดียว Readonly หรือ Disable เพื่อไม่ให้ป้อนข้อมูลได้ จนกว่าจะมีการกดปุ่ม แก้ไข(Edit) การเขียนโค๊ดเพื่อให้การทำงานของหน้าเว็บตรงตามความต้องการของเรานั้น มีอยู่หลายวิธีด้วยกัน ซึ่งวิธีที่ผมนำมาเป็นตัวอย่างก็คือ การ Disable ช่องกรอกข้อมูลด้วยการเช็คค่าจาก PHP และสร้างตัวแปรแอตทริบิวต์ disabled="disabled" ให้กับช่องกรอกข้อมูลที่ต้องการ หลังจากนั้นจะเป็นการทำงานในส่วนของ Javascript เมื่อคลิกปุ่ม Edit คือยกเลิกการ disabled ช่องกรอกข้อมูลที่ต้องการให้แก้ไขได้ โดยจะมีการใช้ jQuery Selector เข้ามาช่วยให้เขียน JavaScript ได้ง่ายขึ้นด้วย ซอร์สโค๊ดตัวอย่าง disable_enable_form.php

Ajax กับ jQuery สร้างฟังก์ชั่น JavaScript สำหรับส่งค่าข้อมูลหลายชุดในแบบฟอร์มเดียวกัน

สำหรับบทความนี้เป็นการสาธิต JavaScript กับการส่งข้อมูลหลายชุดในแบบฟอร์มเดียวกัน โดยใช้ความสามารถของ jQuery เพื่อส่งข้อมูลแบบ AJAX อย่างง่ายๆ วิดีโอสาธิตการทำงาน ตัวอย่างแบบฟอร์ม <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <form method="post" name="myform" id="myform" >     <!-- ค่ารอปรับแต่ง -->     <input name="aa" id="aa" value="" type="hidden" style="width: 785px;">     <input name="bb" id="bb" value="" type="hidden" style="width: 785px;">     <input name="cc" id="cc" value="" type="hidden" style="width: 785px;">          <!-- ผู้ใช้ป้อนเอง -->     <select id="hotel">         <option value="1">Red Hotel</option>         <option value="2">Black Hotel...

เปรียบเทียบความเร็ว function ของ jQuery ระหว่าง html() empty() และ remove()

ช่วงนี้กำลังสนใจเรื่อง Performance ของโค๊ดที่เขียนขึ้นมา เลยนึกสงสัยว่าฟังก์ชั่น jQuery ทั้งสามฟังก์ชั่นนี้ จะเลือกใช้แบบไหนดี html(''), remove(), empty() โค๊ดตัวอย่าง <div id="main">     <div id="list">         <ul>             <li>Coffee</li>             <li>Tea</li>             <li>Milk</li>         </ul>     </div> </div> ผลลัพธ์ที่ผมต้องการก็คือ ต้องการลบข้อมูล div ที่ id="main" ให้เป็นค่าว่าง ทางเลือกก็คือ 1) $('#main').html(''); 2) $('#main').empty(''); ซึ่งจากการค้นหาข้อมูลดูแล้ว ก็ได้ข้อสรุปว่า $(element).empty();  ทำงานเร็วที่สุดครับ แต่ถ้าเรากำหนด id ให้กับเป้าหมายด้วยแล้วการใช้ remove() กับเป้าหมายไปเลยก็จะเร็วกว่าครับ 3) $('#list').remove(''); แต่ถ้า ...

เขียนเว็บด้วย AJAX เวลาโหลดข้อมูลใหม่ ควรสั่งให้ Scrollbar วิ่งไปที่บรรทัดแรกด้วย

จุดเล็กๆ ที่ไม่สำคัญแต่ขัดใจกระผมอย่างยิ่งเกี่ยวกับการสร้างเว็บเพจ หรือเว็บไซต์ที่ใช้การโหลดข้อมูลแบบ AJAX ก็คือ "การเปลี่ยนหน้า" หรือโหลดข้อมูลหน้าใหม่ ปกติเราคลิกที่ลิงค์ก็จะโหลดหน้าใหม่ แล้วก็แสดงข้อมูลตั้งแต่บรรทัดแรก แต่เว็บที่ใช้การเขียนโปรแกรมรับส่งข้อมูลด้วย AJAX โหลดข้อมูลเพจใหม่ มักจะลืมไปว่า บางครั้งผู้ใช้งานกำลังดูข้อมูลอยู่ตรงบรรทัดสุดท้าย ที่ห้างไกลจากบรรทัดแรกเยอะมากๆ พอคลิกเพื่อไปหน้าใหม่ปุ๊บ ก็จะเจอไม่มีการเหลี่ยนหน้าไปไหน มีแต่ความว่างเปล่า ที่ไหนได้ ข้อมูลมาเปลี่ยนไปแล้ว แต่ไม่ได้สั่งให้สกอบาร์วิ่งไปด้านบน รู้สึกขัดใจกับหลายๆเว็บแฮะ (รวมทั้งเว็บที่กระผมเองดูแลด้วย) ลองเอาโค๊ดนี้ ไปปรับใช้ดูเถอะนะ ^____^

jQuery selector นับจำนวนตามค่าที่เลือกและคำนวณคะแนน

การเขียนโปรแกรมเว็บแอพพลิเคชั่นนั้น ส่วนของการแสดงผลจะใช้ jQuery ร่วมกับ Javascript เพื่อแสดงผลลัพธ์ที่เกิดขึ้นในขณะนั้น ในตัวอย่างนี้จะเป็นการคำนวณคะแนนที่ได้จากตัวเลือก โดยใช้ jQuery selector ในการนับจำนวนตัวเลือกค่าต่างๆ ว่ามีจำนวนเท่าไหร่ แล้วนำมาคำนวณตัวค่าคงที่ของตัวมันเอง ก็จะได้คะแนนที่ต้องการ

อัพเดตซอร์สโค๊ดตัวอย่าง Autocomplete ด้วย jQuery

หลังจากที่เคยนำเสนอเรื่อง Autocomplete ไปแล้วในบทความ " ตัวอย่างการทำ Autocomplete แบบลดจำนวนการคิวรี่ MySQL " แต่ยังไม่เห็นความชัดเจนพอ เลยอัพเดตซอร์สโค๊ดใหม่ให้ทดลองกันเองไปเลย โดยที่เริ่มจากข้อมูลพนักงานไม่เกิน 1,000 เรคอร์ด(เฉพาะสถานะ Active นะ คนลาออกไปแล้วไม่ต้องแสดง) กับข้อมูล 10,000 เรคอร์ด จะเห็นผลเรื่องประสิทธิภาพที่ต่างกัน

เขียน PHP แสดงรายการคำตอบจากแบบสอบถาม Radio Button [2/2]

หลังจากที่นำเสนอเรื่องการแสดงตัวเลือกจากคะแนนในฐานขอมูลในบทความก่อน และได้ทิ้งท้ายในเรื่องการปรับปรุงซอร์สโค๊ด PHP ให้สั้นและกระชับลง แต่ก็ยังคงอ่านเข้าใจง่าย ซึ่งในบทความนี้จะใช้วิธีการเก็บ ID ของตัวเลือกที่ต้องการ แล้วนำไปใช้กับโค๊ด jQuery เพื่อสั่งให้ Checked ตัวที่กำหนดไว้

แสดงข้อมูลจาก MySQL ลงใน Drop-Down List ด้วย PHP+AJAX

    สำหรับวิดีโอในบทความนี้ จะเป็นการเขียนโปรแกรม PHP เพื่อดึงข้อมูลสถานที่ท่องเที่ยวต่างๆจากฐานข้อมูล MySQL มาแสดงใน drop-down list ตามรายชื่ออำเภอที่เลือก โดยการรับส่งข้อมูลผ่าน AJAX ด้วย jQuery จาวาสคริปต์เฟรมเวิร์ก ซึ่งจะใช้ข้อมูลรูปแบบ JSON สร้างเป็นอาร์เรย์ในจาวาสคิปต์ จากนั้นก็นำข้อมูลอาร์เรย์ที่ได้ไปสร้าง <option> ด้วยฟังก์ชั่น parseHtml() ที่สร้างขึ้นมาเพื่อรับข้อมูลแบบอาร์เรย์โดยเฉพาะ สำหรับเทมเพลต html หรือตัว <option> นั้นจะสร้างด้วยหลักการเดียวกันกับ View ของ CodeIgniter Framework {list}     <option value="{district_id}">{district_name}</option> {/list}