หัดใช้ jQuery UI ปรับแต่งหน้าเว็บ

การใช้ jQuery นอกจากทำให้ชีวิตการเขียน JavaScript ง่ายขึ้นแล้ว ยังมี jQuery UI ช่วยปรับแต่งหน้าเว็บไซต์ (User Interface) ให้ดูน่าใช้งานขึ้นอีก แถมยังเขียนง่ายมาก เช่นบรรทัดเดียว ก็ได้ form input ที่เป็นปฏิทิน (Datepicker) ให้เลือกวันเดือนปี


ดาวน์โหลดไฟล์จากเว็บ http://jqueryui.com/ แล้วใช้คำสั่ง unzip แตกไฟล์ไว้ในไดเร็คทอรีที่ใช้เขียนเว็บ เช่น /var/www/html/

$ cd /var/www/html/
$ ls -l jquery-ui-1.10.3.zip

$ unzip jquery-ui-1.10.3.zip
Archive:  jquery-ui-1.10.3.zip
   creating: jquery-ui-1.10.3/
  inflating: jquery-ui-1.10.3/ui.effect-explode.jquery.json
  inflating: jquery-ui-1.10.3/ui.effect-highlight.jquery.json
  inflating: jquery-ui-1.10.3/ui.effect-clip.jquery.json
  inflating: jquery-ui-1.10.3/package.json
...

เนื่องจากไฟล์ jQuery UI ที่แตกจากไฟล์ zip มีไฟล์จำนวนมาก  เพื่อความเป็นระเบียบ แนะนำให้สร้างไดเร็คทอรีเฉพาะสำหรับเก็บไฟล์ jQuery UI เท่าที่จำเป็น เช่น jquery/ui/

$ mkdir -p jquery/ui/

copy ไฟล์ จากที่ได้จากการแตกไฟล์ zip

ไฟล์ UI ทั้งที่เป็น .js และ .css จะมีอยู่สองแบบคือไฟล์ธรรมดา และไฟล์ที่มีชื่อ min (อยู่ในไดเร็คทอรี minified) ซึ่งจะมีขนาดเล็กกว่าเพราะตัดตัวอักษรที่ไม่จำเป็นออกเช่นเว้นวรรค การขึ้นบรรทัดใหม่  การใช้งานทั่วไป แนะนำให้ใช้ไฟล์ที่มีชื่อ min เพราะหน้าเว็บจะโหลดได้เร็วกว่ามาก

เปรียบเทียบขนาดไฟล์ระหว่างไฟล์แบบธรรมดา jquery-ui.js กับไฟล์ที่ถูกลดขนาด (minified)

$ ls -l jquery-ui-1.10.3/ui/jquery-ui.js jquery-ui-1.10.3/ui/minified/jquery-ui.min.js
-rw-r--r--. 1 user1 users 435844 May  3  2013 jquery-ui-1.10.3/ui/jquery-ui.js
-rw-r--r--. 1 user1 users 228077 May  3  2013 jquery-ui-1.10.3/ui/minified/jquery-ui.min.js

copy ไฟล์ jquery-ui.min.js

$ cp jquery-ui-1.10.3/ui/minified/jquery-ui.min.js jquery/ui/

ไม่จำเป็นต้อง copy ไฟล์ .js อื่นๆ เช่น jquery.ui.accordion.min.js, jquery.ui.autocomplete.min.js เพราะไฟล์ .js เหล่านี้จะถูกรวมไว้ในไฟล์ jquery-ui.min.js ไฟล์เดียวอยู่แล้ว

สร้างไดเร็คทอรีสำหรับเก็บไฟล์ css และไฟล์รูปไอคอนของ jQuery UI Themes

เพื่อให้สามารถเปลี่ยน themes ได้ภายหลัง (สามารถดาวน์โหลดได้จากเว็บ jQuery UI เอง)  แนะนำให้สร้างไดเร็คทอรีตามชื่อ theme ไว้ใน jquery/ui/themes/ เช่นในที่นี้คือ base ไว้เก็บไฟล์ css และไอคอนไว้ในไดเร็คทอรีของ theme นี้

$ mkdir -p jquery/ui/themes/base
$ mkdir -p jquery/ui/themes/base/images

copy ไฟล์ css

$ cp jquery-ui-1.10.3/themes/base/minified/jquery-ui.min.css jquery/ui/themes/base/

เช่นเดียวกัน copy แค่ไฟล์ jquery-ui.min.css เพราะไฟล์นี้จะรวมไฟล์ .css อื่นๆ เช่น jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css ไว้อยู่แล้ว

copy ไฟล์รูปไอคอน

$ cp jquery-ui-1.10.3/themes/base/minified/images/* jquery/ui/themes/base/images/

เพิ่มเติมอาจย้ายไฟล์ jquery.min.js ไปไว้ในไดเร็คทอรีย่อยนี้ด้วย

$ cp jquery-1.10.2.min.js jquery/jquery.min.js

สรุปไฟล์ที่ถูกย้ายไปเก็บไว้ในไดเร็คทอรี jquery/

$ find jquery/
jquery/
jquery/ui
jquery/ui/themes
jquery/ui/themes/base
jquery/ui/themes/base/images
jquery/ui/themes/base/images/ui-icons_cd0a0a_256x240.png
jquery/ui/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png
jquery/ui/themes/base/images/ui-bg_glass_65_ffffff_1x400.png
jquery/ui/themes/base/images/animated-overlay.gif
jquery/ui/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png
jquery/ui/themes/base/images/ui-bg_flat_75_ffffff_40x100.png
jquery/ui/themes/base/images/ui-icons_888888_256x240.png
jquery/ui/themes/base/images/ui-icons_454545_256x240.png
jquery/ui/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png
jquery/ui/themes/base/images/ui-icons_222222_256x240.png
jquery/ui/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png
jquery/ui/themes/base/images/ui-icons_2e83ff_256x240.png
jquery/ui/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png
jquery/ui/themes/base/images/ui-bg_glass_75_dadada_1x400.png
jquery/ui/themes/base/jquery-ui.min.css
jquery/ui/jquery-ui.min.js
jquery/jquery.min.js

เมื่อ copy ย้ายไฟล์เรียบร้อยแล้ว อาจลบไฟล์ที่ได้จากการ unzip ได้

ตัวอย่างการใช้ jQuery UI เขียน form input ที่เป็นปฎิทิน (Datepicker)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery/ui/themes/base/jquery-ui.min.css">
<script src="jquery/jquery.min.js"></script>
<script src="jquery/ui/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
 $("#date1").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="date1"></p>
</body>
</html>

 

เมื่อคลิก input form ที่มี id #date1 จะแสดงปฎิทินให้เลือก

datepicker

หมายเหตุ ระบุพาธของไฟล์ให้ถูกต้อง และการเรียงลำดับในการระบุไฟล์ js ใน <script> สำคัญมาก ต้องระบุ jquery.min.js ก่อน jquery-ui.min.js

ข้อมูลอ้างอิง

Leave a Reply