บทความที่เกี่ยวข้องกับ: jquery - Page 3

jQuery: วิธีดึงเอาค่าของ input ที่เราทะลึงใส่จุดหรือ [ เข้าไปไอดี

เขียนโดย เมื่อ

เพื่อนๆ ที่หลีกเลี่ยงการใช้จุดหรือ [ หรืออะไรที่ jquery เองเค้าสงวน (reserve) ไว้ใช้ ก็จะไม่เกิดปัญหานี้นะครับ แต่ถ้ามันต้องทำแบบนี้จริงๆ

<input type="text" name="street" id="address.street" />

<input type="text" name="province" id="address.province"/>

พอจะเลือก input เหล่านี้มาเช็คค่าซะหน่อยเอาแล้วไงไอดีของมันดันมีจุดแล้วจะทำไง หึหึ วิธีการก็ไม่ยากครับ jquery จะใช้ \ เพื่อบอกให้รู้ว่าให้มองอักขระตัวนี้เป็น string ธรรมดา (ไม่รู้จะพูดไง ตอนนี้คิดออกแค่นี้ครับ ฮ่าๆ ๆ)

$(function(){

$('#address\.street').val();
$('#address\.province').val();

});

jQuery Plugin: lightBox plugin

เขียนโดย เมื่อ

Plugin ตัวนี้ก็เป็น plugin ยอดฮิตอีกตัวหนึ่งสำหรับการแสดงรูปภาพครับ ซี่งวิธีการใช้ก็ใช้ง่ายมากๆ เหมือนกัน แต่ตัวนี้จะมีลักษณะเหมือน popup ขึ้นมา ไม่เหมือนกับเจ้า bxGallery ที่เคยแนะนำไป เพื่อนๆ หลายๆ อาจจะเคยเห็นหน้าตาของเจ้า plugin ตัวนี้บ้างแล้วก็ได้ครับ

jQuery Plugin: bxGallery เพิ่มลูกเล่นในการแสดงรูปภาพบนเว็บ

เขียนโดย เมื่อ

ช่วงนี้เป็นช่วงศึกษา jQuery ก็เลยมี plugin มาแนะนำเรื่อยๆ ครับ วันนี้เป็น bxGallery ซึ่งเป็น plugin เกี่ยวกับการแสดงรูปภาพ โดยจะมีการแสดงภาพเต็มภาพนึง แล้วจะมีรูปเล็กๆ (thumb) ให้เรากดดูอีก ผมดูแล้วเป็น plugin ที่ใช้งานง่ายๆ ครับ

jQuery Plugin: BlockUI

เขียนโดย เมื่อ

วันนี้เอา BlockUI มาฝากครับ plugin ของ jQuery อีกหนึ่งตัวที่จะทำให้เว็บไซต์ของเราน่าสนใจมากยิ่งขึ้นครับ ซึ่งในตอนนี้เว็บของเพื่อนๆ หลายคนคงจะนำเอา ajax มาใช้ และในขณะที่ผู้ใช้ของเรากดที่ปุ่มอะไรซักอย่าง จากนั้นเราก็จะโหลดเนื้อหามาแสดงโดยใช้ ajax ซึ่งในขณะที่เรา request ข้อมูลอยู่นี้ อาจจะใช้เวลานิดนึงทำให้ผู้ใช้ของเรานึกว่ามันไม่ทำงาน ก็เลยกดปุ่มอีก บางคนอาจจะกดย้ำๆ จนทำให้เซิฟเวอร์ของเราต้องทำงานหนักได้

jQuery Plugin: form validation

เขียนโดย เมื่อ

หลังจากประสบปัญหาการตรวจสอบความถูกต้องของ input ต่างๆ ในโปรเจ็คที่ผ่านมา ก็เลยต้องเริ่มสรรหาเครื่องที่จะช่วยให้เราทำงานได้เร็วขึ้นเกี่ยวกับการทำงานในส่วนนี้ ก็เลยไปเจอกับ plugin ของ jQuery ก็คือ เจ้า validation

โดยเจ้า plugin ตัวนี้จะทำน่าที่ตรวจสอบความถูกต้องให้เราก่อนที่ข้อมูลจะถูกส่งไปประมวลผลที่ฝั่งเซิฟเวอร์ เช่น ตัวเลข, อีเมล, URLs และอีกมากมาย ลองเข้าไปศึกษาดูครับ

Submit Form โดยที่ไม่ต้องรีเฟรช (refresh) หน้าด้วย jQuery

เขียนโดย เมื่อ

โดยปกติแล้วเวลาเรากดปุ่ม submit ก็จะมีการส่งค่าของฟอร์มไปที่หน้าใหม่ ถ้าเกิดเว็บของเรามีข้อมูลเยอะๆ แล้ว เวลาโหลดหน้าใหม่ก็ต้องเสียเวลาในส่วนนี้ด้วย อาจจะทำให้ผู้ใช้เว็บของเราหงุดหงิดได้ ผมก็เลยเขียนตัวอย่างการ submit form แบบไม่ต้องรีเฟรช (refresh) หน้าใหม่โดยใช้ความสามารถของ jQuery ไว้ให้เพื่อนๆ ลองเอาไปใช้ดูครับ ไม่ต้องมากความลุยกันเลยครับ

jQuery ดึงค่าจากแท็ก Select

เขียนโดย เมื่อ

วันนี้ว่างๆ ก็เลยเอาความรู้เกี่ยวกับ jQuery มาอัพเดทซักหน่อย ก็เลยเลือกเอาเรื่องการดึงค่าจากแท็ก select ซึ่งบ้างคนอาจจะยังใช้ selector แบบสะบั้นหั่นแหลกกันอยู่ เช่น

แท็ก select ของเรา

<select id="test-select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

การใช้งาน function live ของ jQuery

เขียนโดย เมื่อ

วันนี้ติดปัญหากับการจัดการ click event ด้วย jquery ซึ่งปกติแล้วก็จะใช้ฟังก์ชัน click() เลย แต่วันนี้ดันใช้ไม่ได้ซะงั้น หลังจากที่ตรวจสอบดูก็พบว่า ถ้าเราเอาเนื้อหา (html) จากการโหลดด้วย ajax มาแสดง เหมือนว่ามันจะไม่ตอบสนองกับ jquery script ที่เราเขีียนไว้ที่หน้าหลัก

Cross-domain requests with jQuery

เขียนโดย เมื่อ

เทคนิคนี้เค้านำเอา YQL (Yahoo! Query Language) เข้ามาช่วยด้วยครับ

ซึ่งเจ้า YQL จะช่วยให้เราสามารถเรียก (request) ข้ามโดเมนได้ครับ

แถมคนที่เค้าเขียนอธิบายเกี่ยวกับเรื่องนี้ (การใช้ YQL ร่วมกับ jQuery)

เค้าก็ยังใจดีเขียนเป็น plugin ของ jQuery ไว้ให้ใช้เลยด้วยครับ

ตัวอย่างการใช้งาน

$.ajax({
    url: 'http://news.bbc.co.uk',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('a.tsh').text();
        alert(headline);
    }
});

เพิ่มลูกเล่นการเลื่อน scrollbar ไปยัง element ที่ต้องการด้วย jQuery

เขียนโดย เมื่อ

ปกติแล้วถ้าเราต้องการจะเลื่อน scrollbar ไปยังทำแหน่งที่เราต้องการภายในหน้าเดียวกันนั้น เราก็จะใช้ anchor ( <a> ) แล้วก็ลิงค์ไปหาตำแหน่งที่เราต้องการ เช่น

<a name="top" />

<p> blah blah blah ...</p>

<a href="#top">Go to Top</a>