ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
ได้พิมพ์โดยสังวาล รักไทย ได้เปลี่ยน 8 ปีที่แล้ว
1
พื้นฐานการใช้งาน jQuery
2
Outline
3
ทำความรู้จักกับ jQuery เป็นไลบรารีที่พัฒนาขึ้นด้วยภาษาจาวาสคริปท์ ที่รวบรวม ฟังก์ชันและคำสั่งต่าง ๆ เข้าไว้ด้วยกัน ทำให้สะดวกและ ง่ายต่อการใช้งานโดยที่ผู้ใช้ไม่ต้องเขียนสร้างฟังก์ชันเอง ทั้งหมด รองรับการทำงานกับ DOM และ Event ต่าง ๆ รวมถึง สามารถรองรับการทำงานของ เทคโนโลยี AJAX
4
การติดตั้ง ดาวน์โหลดไฟล์จาก jQuery.com แล้วนำมาติดตั้งใน โฮสต์ที่ต้องการใช้งาน เรียกใช้งานผ่านอินเทอร์เน็ตโดยตรง
5
การโหลดหน้าเอกสาร ใช้คำสั่ง jQuery แบบเต็ม jQuery(document).ready(func tion(){ คำสั่งต่าง ๆ }); ใช้เครื่องหมาย $ $(document).ready(function() { คำสั่งต่าง ๆ }); ใช้เครื่องหมาย $() $().ready(function(){ คำสั่งต่าง ๆ }); ใช้คำสั่ง jQuery แบบเต็ม $(function)(){ คำสั่งต่าง ๆ });
6
ดักจับการทำงานด้วยอีเวนต์ อีเวนต์ (Events) คือ เหตุการณ์ที่กำหนดขึ้นในเว็บเพจ เช่น เมื่อโหลดหน้าเว็บเพจ (onLoad) แล้วดำเนินการ อะไร, เมื่อคลิกปุ่ม (onClick) แล้วให้ดำเนินการอย่างไร $("# ค่า id ของอินพุต ").Events(function) ตัวอย่างคำอธิบาย $("#btnSubmit").click( function) เมื่อคลิก (click) ปุ่มชื่อ (btnSubmit) $("#txtAmt").keyup(fu nction) เมื่อพิมพ์ตัวอักษร (keyup) ลงในช่องรับข้อความชื่อ (txtAmt)
7
การเข้าถึงข้อมูลในตำแหน่งที่กำหนด ใน jQuery เราสามารถเข้าถึงข้อมูลในตำแหน่งอิลิเมนต์ และ ได้ด้วย 2 รูปแบบดัง ใช้เมธอด html() เข้าถึงข้อมูลที่เป็นแท็ก HTML ใช้เมธอด text() เข้าถึงข้อมูลเฉพาะข้อความไม่รวม แท็ก HTML
8
$(document).ready(function () { $("#txtName").keyup(function() { var strName = $(this).val(); $("#showHtml").html(" ข้อมูลที่คุณป้อนคือ " + strName + " "); $("#showText").text(" ข้อมูลที่คุณป้อนคือ " + strName + " "); });
9
การซ่อนและแสดงข้อมูลด้วย jQuery ฟังก์ชัน hide() และ show() สามารถรับพารามิเตอร์ สำหรับกำหนดความเร็วในการแสดงผลได้ดังนี้ slow normal fast กำหนดตัวเลข หน่วยเป็นมิลลิวินาที ตัวอย่างรายละเอียดรูปแบบการใช้งาน hide() ซ่อนอิลิเมนต์ $("# ค่า id ของอิลิเมนต์ ").hide(); show() แสดงอิลิเมนต์ $("# ค่า id ของอิลิเมนต์ ").show();
10
$(function () { $("#btnHide").click(function() { $("#divContent").hide(); }); $(function () { $("#btnShow").click(function() { $("#divContent").show(); });
11
ซ่อนและแสดงข้อมูลแบบสลับกัน (toggle) เมธอด toggle() ใช้สำหรับสลับการทำงานในการเปิดหรือปิด แสดงข้อมูล. $("# ค่า id ของอิลิเมนต์ ").toggle( พารามิเตอร์ ); $(document).ready(function () { $("#btnHideShow").click(function() { $("#divContent").toggle("fast"); });
12
ฟังก์ชันสำหรับกำหนดรูปแบบการแสดงผล ตัวอย่างรายละเอียดรูปแบบการใช้งาน slideUp() ค่อย ๆ เลื่อนข้อมูลขึ้นด้านบน $("# ค่า id ของอิลิเมนต์ ").slideUp( พารามิเตอร์ ); slideDown() ค่อย ๆ เลื่อนข้อมูลลงด้านล่าง $("# ค่า id ของอิลิ เมนต์ ").slideDown( พารามิเตอร์ ); slideToggle() สลับการเลื่อนข้อมูลและลง $("# ค่า id ของอิลิ เมนต์ ").slideToggle( พารามิเตอร์ ); fadeIn() ข้อมูลค่อย ๆ ปรากฏชัดเจนขึ้น $("# ค่า id ของอิลิเมนต์ ").fadeIn( พารามิเตอร์ ); faceOut() ข้อมูลค่อย ๆ จางหายไป $("# ค่า id ของอิลิเมนต์ ").fadeOut( พารามิเตอร์ ); fadeTo() ข้อมูลค่อย ๆ จางหายไปจนถึงค่า ความทึบที่กำหนด ( สามารถกำหนดได้ ตั้งแต่ 0.00 – 1.00) $("# ค่า id ของอิลิเมนต์ ").fadeTo( พารามิเตอร์, ค่าความทึบ );
13
กำหนดความเคลื่อนไหวของอิลิเมนต์ animate() เมธอด animate() ทำหน้าที่กำหนดการเคลื่อนไหวของอิ ลิเมนต์ในการแสดงผล เช่น ความเร็ว, ความเข้ม - จาง, ความสูง เป็นต้น $(" ค่า id ของอิลเเมนต์ ").animate( พร็อพเพอร์ตี้ ), ความเร็ว,function()
14
$(function () { $("#btnAnimate").click(function() { $("#divContent").animate({ opacity: 0.80, height: "toggle" }, 500, function() { });
15
การตรวจสอบฟอร์มด้วย jQuery การรับค่าจากอินพุตต่าง ๆ ของฟอร์ม สามารถทำได้ 2 วิธี คือใช้เมธอด val() และเมธอด attr() เมธอด val() เป็นการเข้าถึงข้อมูลในแอตตริบิวต์ value ของอินพุต $(" ค่า id ของอิลิเมนต์ ").val() เมธอด attr() เป็นการเข้าถึงแอตตริบิวต์ที่กำหนด $(" ค่า id ของอิลิเมนต์ ").attr(“ แอตตริบิวต์ที่ต้องการ ")
16
$(document).ready(function () { $("#btnSubmit").click(function (e) { var tName = $("#txtName").val(); var tEmail = $("#txtEmail").attr("value"); var tLink = $("#link").attr("href"); alert(" ชื่อ - สกุล : " + tName + "\n อีเมล : " + tEmail + "\nMy Link : " + tLink); });
17
การตรวจสอบค่าว่างในอินพุต TextBox การตรวจสอบอินพุตทีละตัว $(document).ready(function () { $(".error").hide(); $("#btnSubmit").click(function (e) { var tName = $("#txtName").val(); var tEmail = $("#txtEmail").attr("value"); if (tName.length < 1) { $("#errorName").show(); e.preventDefault(); } else { $("#errorName").hide(); } if (tEmail =="") { $("#errorEmail").show(); e.preventDefault(); } else { $("#errorEmail").hide(); } });
18
ตรวจสอบอินพุดหลายตัวพร้อมกัน function chk_form(){ $(":input + span.error").remove(); $(":input").each(function(){ if($(this).val()==""){ $(this).after(" กรุณาป้อนข้อมูลด้วย "); } }); if($(":input").next().is(".error")==false){ return true; }else{ return false; }.error{ color:#FF0000; padding-left:5px; font-size:14px; }
19
กำหนดให้รับตัวเลขจำนวนเต็มเพียงอย่างเดียว $(document).ready(function () { $("#txtAmt").keyup(function() { $("#errNum").hide(); var inputNum = $(this).val(); var numericReg = /^([0-9]+)$/; if (!numericReg.test(inputNum)) { $("#errNum").html(" กรุณาป้อนจำนวน สินค้า ").show().fadeIn(2000); return false; } });
20
การจำกัดและนับจำนวนตัวอักษรในอินพุต TextArea $(function(){ $("#txtMsg").keyup(function(){ var text = $(this).val(); var chars = text.length; var limit = parseInt($(this).attr('maxlength')); var now_length = limit - chars ; if (chars > limit) { var new_text = text.substr(0, limit); $(this).val(new_text); } else { $("#charLeft").html(now_length+" ตัวอักษร "); } });
21
การตรวจสอบรูปแบบ e-mail ใน TextBox $(document).ready(function () { $(".error").hide(); $("#btnSubmit").click(function (e) { var tName = $("#txtName").val(); var tEmail = $("#txtEmail").attr("value"); var regEmail = /(\w+)@(\w+)\.(\w+)/; if (tName.length < 1) { $("#errorName").show(); e.preventDefault(); } else { $("#errorName").hide(); } if (tEmail =="") { $("#errorEmail").show(); e.preventDefault(); } else if (!regEmail.test(tEmail)) { $("#errorEmail").html(" คุณป้อน อีเมลไม่ถูกต้อง ").show().fadeIn(2000); e.preventDefault(); } else { $("#errorEmail").hide(); } });
22
การตรวจสอบข้อมูลต้องตรงกัน $(document).ready(function () { $(".error").hide(); $("#btnSubmit").click(function (e) { var tPassword = $("#txtPwd").val(); var tRePassword = $("#txtRePwd").val(); if (tPassword == "") { $("#errPwd1").show(); e.preventDefault(); } else if (tRePassword == "") { $("#errPwd2").show(); e.preventDefault(); } else if (tPassword != tRePassword ) { $("#errPwd").html(" คุณป้อน Password ไม่ตรงกัน ").show().fadeOut(5000); $("#txtRePwd").attr("value","").focus(); e.preventDefault(); } else { $(".error").hide(); } });
23
กำหนดการใช้งาน / ยกเลิกการใช้งานด้วย checkbox $(document).ready(function () { $(".error").hide(); $("#btnSubmit").click(function (e) { var tName = $("#txtName").val(); var tEmail = $("#txtEmail").attr("value"); if (tName.length < 1) { $("#errorName").show(); e.preventDefault(); } else { $("#errorName").hide(); } if (tEmail =="") { $("#errorEmail").show(); e.preventDefault(); } else { $("#errorEmail").hide(); } }); $("#ChkAccept").click(function(){ if($(this).attr("checked")=="checked"){ $("#btnSubmit").removeAttr("disabled"); }else{ $("#btnSubmit").attr("disabled","disabled"); } });
24
การใช้งาน jQuery UI เป็น plug in ของ jQuery สำหรับสร้างแท็บข้อมูลให้เป็น หมวดหมู่ สร้างปฏิทิน และอื่น ๆ
25
สร้างเมนูแท็บเก็บข้อมูลให้เป็นหมวดหมู่ $(function() { $("#tabs").tabs(); });.divTab { font-size: 14px; color: #F60; } ข้อมูลทั่วไป เนื้อหาโดยย่อ ข้อมูลทั่วไปของหนังสือ ขนาด จำนวนหน้า ราคา รายละเอียดที่น่าสนใจเกี่ยวกับหนังสือ
26
กล่องข้อความแบบ POPUP (Dialog) $(function() { $( "#dialog" ).dialog({ title: " ทดสอบสร้าง Dialog", width: 350, modal: true });
27
กรอกข้อมูลวันที่ด้วยปฏิทิน (Datepicker) $(function(){ $("#txtBirthday").datepicker({ changeYear: true, dateFormat: 'dd-mm-y' }); วันที่ :
งานนำเสนอที่คล้ายกัน
© 2024 SlidePlayer.in.th Inc.
All rights reserved.