<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>
<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>
<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>
<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>
<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>
<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>
<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>
