ถ้าใครเป็นแฟนพันธ์แท้ของ jQuery จะทราบดีว่า การเรียกใช้งาน jQuery และ jQuery UI นั้นทำได้ 2 แบบ

1. ดาวน์โหลดซอสต์ jQuery มาไว้ที่โฮสต์เราเลย

<script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jqueryui/1.7.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="jqueryui/1.7.2/themes/redmond/jquery-ui.css" media="all" />

2. ใช้บริการ CDN ของกูเกิล

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

ถ้าเราเข้าไปหน้า google AJAX libraries จะเห็นว่า ในส่วนของ jQuery จะให้บริการไฟล์ .js 2 ตัว คือ jQuery กับ jQuery UI ไอ้เจ้า jQuery UI นี่จะต้องใช้ theme ที่เป็น css ประกอบด้วย แต่ไม่เห็นทางกูเกิลแจ้งเรื่อง theme ไว้

เวลาผมเขียนโค้ด ผมจะเรียก jquery.min.js และ jquery-ui.min.js จากกูเกิล แล้วดาวน์โหลด jQuery UI theme มาเก็บที่เครื่อง ผมเคยนึกด่ากูเกิลว่า ทำไมในเมื่อให้บริการ jQuery UI แล้ว ไม่ให้ธีมมาด้วยเลย

แล้ววันนี้ผมไปแอบ view source ของเว็บ www.jqueryui.com แล้วก็พบว่า

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>

ทางกูเกิลมันเอาธีมของ jQuery UI ไปเก็บไว้ด้วยนี่นา อยู่ภายใต้โฟลเดอร์ themes ได้การลองซะเลย

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" media="all" />
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$('.datepicker').datepicker();
 
});
</script>
</head>
 
<body>
<input name="datepicker" type="text" class="datepicker" />
</body>
</html>

Live Demo เมื่อคลิกที่ช่องป้อนข้อมูลก็จะมีปฎิทินขึ้นมา

ธีมมาตรฐานของ jQuery UI นั้นมีอยู่

  1. ui-lightness
  2. ui-darkness
  3. smoothness
  4. start
  5. redmond
  6. sunny
  7. overcast
  8. le-frog
  9. flick
  10. pepper-grinder
  11. eggplant
  12. dark-hive
  13. cupertino
  14. south-street
  15. blitzer
  16. humanity
  17. hot-sneaks
  18. excite-bike

ลองเขียนโค้ดเรียกดูหน้าตาธีมได้โดยแค่เปลี่ยน

// เปลี่ยน
//<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" media="all" />
//เป็น
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" media="all" />

ไม่ต้องเก็บ jQuery,jQuery UI,และธีม ไว้ที่เว็บเราแล้ว ดูดๆๆๆ จากกูเกิลโลด

ajax jQuery jQuery theme jQuery UI min
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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