[jQuery] มาเรียน jQuery แบบฟรี ๆ กัน

ทาง Tutsplus เปิดรายการสอนฟรีอีกแล้ว คราวนี้เป็นตาของ jQuery บ้าง ซึ่งการสมัครเรียนไม่ยากเลย ก็แค่กรอก Email ลงไป แล้วในทุก ๆ วันจะมี Email ส่งบทเรียนมาให้เราเรียน ว่าแล้วอย่ารอช้า ไปสมัครกันเลยดีกว่า

ตาม Link นี้ไปเลยครับ Learn jQuery in 30 Days

[jQuery] Cheat Sheet สำหรับ jQuery 1.7

ทางเว็บ Woorkup ได้ทำ Cheat Sheet ตัวนี้ขึ้นมา เลยเอามาแบ่งปันให้ได้นำไปใช้กันนะครับ ดาวน์โหลดเป็นไฟล์ PDF ไปได้เลยครับ

[jQuery] Cheat Sheet สำหรับ jQuery 1.7
คลิ๊กที่รูปเพื่อขยาย
ดาวน์โหลดไฟล์ PDF : jQuery 1.7 Visual Cheat Sheet

หรือจะไปดูที่เว็บเจ้าของได้เลยครับ

เว็บต้นฉบับ : jQuery 1.7 Visual Cheat Sheet

PhotoSwipe : Image Gallery ใช้กับ Touch Screen

วันนี้มี Plugin ใช้ทำ Image Gallery สำหรับใช้กับ Touch Screen ได้ มาชมวิดีโอแนะนำตัว PhotoSwipe กันก่อนนะครับ

PhotoSwipe

ในเว็บของ PhotoSwipe นั้นได้อธิบายเกี่ยวกับตัว Plugin ตัวนี้ไว้ว่า

What is it?

PhotoSwipe is a FREE HTML/CSS/JavaScript based image gallery specifically targeting mobile devices.

Who is it for?

Developers and designers requiring an interactive image gallery on their mobile website with the look and feel of a native app.

Why use it?

PhotoSwipe provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

ใช้กับมือถือ platform ไหนได้บ้าง

PhotoSwipe : Image Gallery สำหรับ Touch Screeen [1]

สำหรับตัว PhotoSwipe นั้นสนับสนุน iOS, Android รวมถึง BlackBerry และใช้งานคู่กับ jQuery หรือ PhoneGap ได้ด้วยครับ

วิธีการใช้งาน PhotoSwipe

ดาวน์โหลดตัว PhotoSwipe ที่นี่เลยครับ Download PhotoSwipe หลังจากนั้นก็เพิ่ม code นี้ไปที่ส่วน head นะครับ

[html]
<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>
[/html]

และเรียกใช้งานโดย

[javascript]
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener(‘DOMContentLoaded’, function(){

var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll(‘#Gallery a’), { enableMouseWheel: false , enableKeyboard: false } );

}, false);
[/javascript]

แต่ถ้าถนัดเป็น jQuery ก็เรียกใช้งานแบบนี้เลยครับ

[javascript]
//jQuery version
$(document).ready(function(){

var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

});
[/javascript]

และในส่วน HTML เพื่อใช้ประกอบให้ตัว PhotoSwipe ทำงานได้นั้น ก็มีลักษณะแบบนี้ครับ

[html]
<ul id="Gallery">
<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>
[/html]

ซึ่งตัว PhotoSwipe นั้น เราสามารถจะปรับแต่งลูกเล่นมันได้หลากหลายพอสมควร รายละเอียดเพิ่มเติมและตัวอย่างการใช้งาน PhotoSwipe นั้น ให้ไปดูที่เว็บของ PhotoSwipe เลยครับ

ที่มา : PhotoSwipe

jQuery : Plugins ที่ใช้สำหรับแต่ง Checkbox และ Radio Button

จากหลาย ๆ ครั้งที่ได้รับงานมา ตัวเว็บที่ design จะมีการปรับเปลี่ยนลักษณะของตัว form ไปในรูปแบบต่าง ๆ ซึ่ง jQuery ก็มี Plugins อยู่หลายตัวที่สามารถช่วยในการปรับเปลี่ยนได้

jQuery : Plugins

คลิ๊กตามไปดู

jQuery : เลือก element ตัวที่อยู่ด้านในสุด

สมมติว่าเรามี code html ดังนี้

[xml]
<div>Outermost element
<div>Some Text
<div>Evenmore text
<div>Who cares anymore?
<div>Innermost Element</div>
</div>
</div>
</div>
</div>
[/xml]

โดยที่เราต้องการเลือก div ตัวในสุด ซึ่งจาก code ก็คือ
[xml firstline=”5″]<div>Innermost Element</div>[/xml]
ซึ่ง jQuery ไม่มีตัว selector ที่จะเลือก แต่เราจะดัดแปลงโดยใช้วิธีดังนี้
[js]
$(‘div:only-child:last’);

// Change background color to gray
$(‘div:only-child:last’).css(‘background-color’,"#ccc");
[/js]