เจคิวรี่ (jquery)
Home  Contents KMArticlesMembersSponsorsAbout us

ปรับปรุง : 2557-03-29 (เริ่มเรียบเรียง)
ขอบซ้ายขอบบน
jquery
ความหมาย jquery คือ การรวม Javascript ที่ช่วยให้เรียกใช้ได้เร็ว ขนาดเล็ก และยกระดับให้ดูดี เหมือนกับการทำงานในเอกสาร HTML ทั้งการจัดการโค้ด จัดการเหตุการณ์ อนิเมชั่น และใช้เอแจ็คที่ง่าย รวมความสามารถและส่วนขยายต่าง ๆ เข้าด้วยกัน ทำให้นักพัฒนามากมายเปลี่ยนแนวการเขียน javascript มาใช้ jquery
แนะนำเว็บ (Web guides)
+ https://developers.google.com/speed/libraries/devguide ***
+ http://jqueryui.com/themeroller/ ***
+ http://jquery.com/download/
+ http://www.jquery.in.th
+ http://www.w3schools.com/Jquery
+ http://it-ebooks.info/book/2956/ 6.6MB 444 Pages
+ ex_fieldset.htm
+ ex_p.htm
+ ex_fullcalendar.htm

ตัวอย่าง 1. การใช้ jquery-ui
<html><head>
<link rel="stylesheet" href="http://www.thaiall.com/jquery/js/jquery-ui.css">
<style type="text/css">
fieldset legend { width:20%;}
</style>
</head><body>
<fieldset class="ui-widget ui-widget-content">
<legend id="legend" class="ui-widget-header ui-corner-all">hello world</legend>
hello world
</fieldset>
</body></html>

ตัวอย่าง 2. การใช้ jquery-ui กับภาษาไทย
<html><head>
<meta http-equiv="content-type" content="text/html;charset=windows-874" />
<link rel="stylesheet" href="http://www.thaiall.com/jquery/js/jquery-ui.css">
<style type="text/css">
body{font-family:microsoft sans serif;font-size:10pt;margin: 0 0 0 0;} 
fieldset legend { width:20%;}
</style>
</head><body>
<div style="font-family:microsoft sans serif;font-size:20pt;text-align:center;">ยินดีต้อนรับ</div>
<fieldset class="ui-widget ui-widget-content">
<legend id="legend" class="ui-widget-header ui-corner-all">hello world 1</legend>
สวัสดีชาวโลก 1
</fieldset><br/>
<fieldset class="ui-widget ui-widget-content" style="width:800;height:300;">
<legend id="legend" class="ui-widget-header ui-corner-all">hello world 2</legend>
สวัสดีชาวโลก 2
</fieldset>
</body></html>

ตัวอย่าง 3. การใช้ jquery tab
<html><head><title>jquery</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://www.thaiall.com/jquery/js/jquery-ui.css">
<script type="text/javascript">  
$(function(){ $("#tabs").tabs(); });  
</script> 
</head><body>
<div id="tabs">  
<ul>  
<li><a href="#tabs-1">tab1</a></li>  
<li><a href="#tabs-2">tab2</a></li>  
<li><a href="#tabs-3">tab3</a></li>  
</ul>  
<div id="tabs-1"><p>detail 1</p> </div>  
<div id="tabs-2"><p>detail 2</p> </div>  
<div id="tabs-3"><p>detail 3</p> </div>  
</div>  
</body></html>

ตัวอย่าง 4. การใช้ jquery fullcalendar
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<link rel='stylesheet' type='text/css'
href='http://www.celmonze.com/cms/scripts/jquery/plugin/fullcalendar/examples/redmond/theme.css' />
<link rel='stylesheet' type='text/css' 
href='http://www.celmonze.com/cms/scripts/jquery/plugin/fullcalendar/fullcalendar.css' />
<script type='text/javascript' 
src='http://dev.galeri.salihara.org/js/libs/jquery/plugin/fullcalendar/1.4.6/jquery/jquery.js'></script>
<script type='text/javascript'
src='http://dev.galeri.salihara.org/js/libs/jquery/plugin/fullcalendar/1.4.6/jquery/jquery-ui-custom.js'></script>
<script type="text/javascript"
src="http://www.celmonze.com/cms/scripts/jquery/plugin/fullcalendar/fullcalendar.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'month,agendaWeek,agendaDay',
center: 'title',
right: 'prev,next today'
},
editable: true,
theme:true,
events: [
{"title":"เหตุการณ์ 1","start":"2014-03-12","end":"2014-03-16",
"url":"http://www.thaiall.com/jquery/","allDay":true},
{"title":"เหตุการณ์ 2","start":"2014-03-24 11:35:38","end":"2014-03-24 16:35:38",
"url":"http://arshaw.com/fullcalendar/","allDay":false},
{"title":"เหตุการณ์ 3","start":new Date(y, m, 27, 12, 0),"end":new Date(y, m, 27, 14, 0),
"url":"http://www.facebook.com/thaiall","allDay":false}],
loading: function(bool) { if (bool) $('#loading').show(); else $('#loading').hide(); }
});
});
</script>
<style type="text/css">
#calendar{width:800px;margin:auto;}
</style>
<div id='calendar'></div>
</body>
</html>

+ demo ที่ ex_fullcalendar.htm
+ official plug-in ที่ http://arshaw.com/fullcalendar/
+ http://www.thaiall.com/calendar

ตัวอย่าง 5. การใช้ jquery datepicker
<html><head><title>Datepicker</title>
<link href="http://keith-wood.name/css/jquery.datepick.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.datepick.js"></script>
<script>
$(function() {
	$('#popupDatepicker').datepick();
	$('#inlineDatepicker').datepick({onSelect: showDate});
});
function showDate(date) {
    var sdate = '' + date;
	alert('date: ' + sdate);
	document.f.d1.value = date;
	var vars = sdate.split(" ");
	alert(vars[1] + " " + vars[2] + " " + vars[3]);
	document.f.d2.value = vars[1] + " " + vars[2] + " " + vars[3];
}
</script>
</head>
<body>
<p><input type="text" id="popupDatepicker"></p>
<p>or</p>
<div id="inlineDatepicker"></div>
<form name="f">
<input name="d1" size="80">
<input name="d2" size="80">
</form>
</body></html>

+ demo ที่ ex_datepicker.htm
+ official plug-in ที่ http://jqueryui.com/datepicker/
+ http://www.thaiall.com/java

ตัวอย่าง 6. การใช้ jquery ทั่วไป
<html><head>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<link href="js/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
fieldset legend { width:20%;}
body, td { font-size:10px;}
p {color: red;margin: 4px;}

ul.radio  { list-style: none; }
ul.radio li:hover,
ul.radio li.focus  {
  background-color: lightyellow;
  border: 1px gray solid;
  width: 10em;
}
</style>
<script>

$(function(){
  $('a').bind('click', function(e){
    e.preventDefault();
    $(this).text("test");
  });
});
</script>
<script>
$(document).ready( function() {
$('ul.radio li').focusin( function() {
$(this).addClass('focus');
});
$('ul.radio li').focusout( function() {
$(this).removeClass('focus');
});
});
</script>
</head><body>
<form>
<fieldset class="ui-widget ui-widget-content">
<legend id="legend" class="ui-widget-header ui-corner-all">Profile</legend>
Names: <input type="text" id="name" name="name" /><br/>
Email: <input type="text" id="email" name="email" /><br/>
<button id='toggle1'>go1</button>
<button id='toggle2'>go2</button>
<button id='toggle3'>go3</button>
<script>
$("button").click(function(e){ 
  e.preventDefault();
  $("#toggle2").text("Hello world!"); 
  $("#email").val("Hello world!"); 
});
$("#toggle2").click(function(e){ 
  e.preventDefault();
  $("#name").val("Hello world!"); 
  alert("button2 was clicked.");}
);
</script>

<!-- on click -->
<a href="#">click</a> :: 
<p>paragraph 1</p>
<p id="para">paragraph 2</p>
<script>
$("p").click(function(){ $("#para").text("Hello world!"); });
$("#para").click(function(){ alert("par2 was clicked.");});
</script>

<!-- on select -->
<select id="ddlFruits"></select>
<legend id="lgFruits">Legend</legend>
<script>
$(function () {
  $("#ddlFruits").each(function () {
  $(this).append($("<option />").val("0").html("Please select"));
  $(this).append($("<option />").val("1").html("Mango"));
  $(this).append($("<option />").val("2").html("Orange"));
  $(this).append($("<option />").val("3").html("Apple"));
  });
});
function displayVals() {
   if ($(this)[0].selectedIndex != 0) {
     $("#lgFruits").html($("option:selected", this).html());
   } else {
     $("#lgFruits").html("");
   }
}
$("select").change( displayVals );
displayVals();
</script>
</fieldset>
<!-- on radio -->
<fieldset class="radiogroup"  class="ui-widget ui-widget-content">
<legend id="legend" class="ui-widget-header ui-corner-all">opt1</legend>
  <ul class="radio" id="opt">
    <li><input type="radio" name="opt" id="opt11" />opt11</li>
    <li><input type="radio" name="opt" id="opt12" />opt12</li>
    <li><input type="radio" name="opt" id="opt13" />opt13</li>
  </ul>
</fieldset>
<fieldset class="radiogroup"  class="ui-widget ui-widget-content">
<legend id="legend" class="ui-widget-header ui-corner-all">opt2</legend>
  <ul class="radio" id="opt">
    <li><input type="radio" name="opt" id="opt21" />opt21</li>
    <li><input type="radio" name="opt" id="opt22" />opt22</li>
    <li><input type="radio" name="opt" id="opt23" />opt23</li>
  </ul>
</fieldset>
</form> 
<hr color="red" />
<div id="outer" style="position:relative">
<table border="0" cellspacing="1" bgcolor="#aaaaaa" 
style="{position:absolute;top:5px;left:0px;height:50px;width:100px;}">
<tr bgcolor=white><td>
hello world
</td></tr>
</table>
<div style="{position:absolute;top:0px;left:5px;width:50;background-color:yellow;}">test</div>
</div>
</body></html>
ขอบซ้ายขอบบน
google map with jquery
ตัวอย่าง 7. google map
<html><head><title>map</title>
<meta http-equiv="content-type" content="text/html;charset=windows-874" />
<style type="text/css">
#map_canvas { width:440px; height:400px; margin:auto; margin-top:50px; }
</style></head>
<body>
<div id="map_canvas"></div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
var geocoder; 
var map; 
var my_Marker = new Array();
var GGM; 
//
function initialize() {
GGM=new Object(google.maps);
geocoder = new GGM.Geocoder();
var my_Latlng  = new GGM.LatLng(18.28886952929245,99.49089143978574);
var my_mapTypeId=GGM.MapTypeId.SATELLITE;
var my_DivObj=$("#map_canvas")[0];
var image;
var myOptions = { zoom: 12, center: my_Latlng , mapTypeId:my_mapTypeId };
map = new GGM.Map(my_DivObj,myOptions);
image = 'flag_yellow.gif';
my_Latlng  = new GGM.LatLng(18.28886952929245,99.49089143978574);
my_Marker["1"] = new GGM.Marker({ icon: image, position: my_Latlng, map: map,
draggable:true, title:"1:ห้าแยกหอนาฬิกา"});
GGM.event.addListener(my_Marker["1"], 'dragend', function() {
var my_Point = my_Marker["1"].getPosition();  
map.panTo(my_Point); 
$("#lat_value").val(my_Point.lat());  
$("#lon_value").val(my_Point.lng());  
$("#zoom_value").val(map.getZoom());  
});
image = 'flag_yellow.gif';
my_Latlng  = new GGM.LatLng(18.28183024918321,99.4949362109802);
my_Marker["2"] = new GGM.Marker({ icon: image, position: my_Latlng, map: map,
draggable:true, title:"2:central plaza lampang"});
GGM.event.addListener(my_Marker["2"], 'dragend', function() {
var my_Point = my_Marker["2"].getPosition();  
map.panTo(my_Point); 
$("#lat_value").val(my_Point.lat());  
$("#lon_value").val(my_Point.lng());  
$("#zoom_value").val(map.getZoom());  
});
image = 'flag_school.gif';
my_Latlng  = new GGM.LatLng(18.258493,99.533515);
my_Marker["3"] = new GGM.Marker({ icon: image, position: my_Latlng, map: map,
draggable:true, title:"3:มหาวิทยาลัยเนชั่น"});
GGM.event.addListener(my_Marker["3"], 'dragend', function() {
var my_Point = my_Marker["3"].getPosition();  
map.panTo(my_Point); 
$("#lat_value").val(my_Point.lat());  
$("#lon_value").val(my_Point.lng());  
$("#zoom_value").val(map.getZoom());  
});
GGM.event.addListener(map, 'zoom_changed', function() { $("#zoom_value").val(map.getZoom()); }); }

$(function(){
var searchPlace=function(){ 
var AddressSearch=$("#namePlace").val(); 
if(geocoder){ 
  geocoder.geocode({
    address: AddressSearch 
  },function(results, status){ 
    if(status == GGM.GeocoderStatus.OK) { 
       var my_Point=results[0].geometry.location; 
       map.setCenter(my_Point); 
       my_Marker["1"].setMap(map); 
       my_Marker["1"].setPosition(my_Point); 
       my_Marker["2"].setMap(map); 
       my_Marker["2"].setPosition(my_Point); 
       my_Marker["3"].setMap(map); 
       my_Marker["3"].setPosition(my_Point);
       $("#lat_value").val(my_Point.lat()); 
       $("#lon_value").val(my_Point.lng()); 
       $("#zoom_value").val(map.getZoom()); 
    }else{
       alert("Geocode was not successful for the following reason: " + status);
       $("#namePlace").val("");
    }
    });
  }
  } // if
  $("#SearchPlace").click(function(){ searchPlace();  });
  $("#namePlace").keyup(function(event){ 
     if(event.keyCode==13){  searchPlace();  }
   });
});

$(function(){
$("<script/>", { "type": "text/javascript", 
src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize" }).appendTo("body");
});
</script>
</body></html>

+ jquery_googlemap.htm
+ http://www.thaiall.com/map
"Imagination is more important than knowledge" - Albert Einstein
Home
Thaiabc.com
Thainame.net
Lampang.net
Nation university
PHP
MySQL
Visual basic.NET
TabletPC
Linux
Online quiz
Download
Search engine
Web ranking
Add website
Blog : Education
Blog : ACLA
Blog : Lampang
Facebook.com
Twitter.com
About us
My dream
Site map
Sponsor
http://goo.gl/72BPC