-------
Phần 33.
Cơ bản về jQuery UI
Cùng xem qua clip sau, do tác giả Huy Dao Quang chia sẻ, để
biết jQuery UI là cái gì? Cách sử dụng nó như thế nào?
Đọc thêm từ slide số 39 tới slide số 48 tại đây: http://www.slideshare.net/tuoitrecomvn/slide-7-23710237
Cùng đọc, xem, và làm theo.
Sau đây ghi lại một số ý.
UI viết tắt của User Interface, có nghĩa là giao diện người
dùng. Có một từ đầy đủ hơn hay được dùng là GUI, Graphical User Interface: giao
diện người dùng đồ họa.
Vậy có thể nói ngắn gọn jQuery UI là một thư viện miễn phí,
được xây dựng dựa trên jQuery (tất nhiên nền tảng vẫn là JavaScript), được dùng
để hỗ trợ việc lập trình giao diện người dùng.
Vào trang chủ của jQuery UI để tải thư viện này về máy.
Sau khi tải về máy, giải nén nó ra là có thể sử dụng được.
Mở tập tin index.html trong thư mục vừa giải nén để xem các
ví dụ.
Sau đó sẽ tạo một trang HTML mới, dùng để thử một số chức
năng của jQuery UI.
Để sử dụng jQuery UI, đầu tiên, cần nhúng các tập tin của
jQuery UI vào trang HTML, ví dụ: CSS của jQuery UI là tập tin jquery-ui.css,
thư viện jQuery là tập tin jquery.js và các hàm xử lý của jQuery UI là tập tin jquery-ui.js.
Ví dụ, dưới đây là một trang HTML đơn giản, có sử dụng chức
năng accordion của jQuery UI. Tham khảo mã nguồn tại đây: https://jqueryui.com/accordion/
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<link
rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
<script
src="jquery.js"></script>
<script>
$(function(){
$('#accordion').accordion();
});
</script>
</head>
<body>
<div
id="accordion">
<h3>Section
1</h3>
<div>
<p>
Mauris
mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut
neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet,
nunc.
</p>
</div>
<h3>Section
2</h3>
<div>
<p>
Sed
non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus.
</p>
</div>
<h3>Section
3</h3>
<div>
<p>
Nam
enim risus, molestie et, porta ac, aliquam ac, risus. Quisque obortis.
Phasellus
pellentesque purus in massa. Aenean in pede.
</p>
<ul>
<li>List
item one</li>
<li>List
item two</li>
<li>List
item three</li>
</ul>
</div>
<h3>Section
4</h3>
<div>
<p>
Cras
dictum. Pellentesque habitant morbi tristique senectus et netus
et
malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus
orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris
vel est.
</p>
<p>
Suspendisse
eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
</p>
</div>
</div>
<script
src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
</body>
</html>
Nếu muốn thêm các mục mới, chỉ cần tạo thêm cặp <h3>
và <div> ở trong <div id=”accordion”>.
Lần lượt thử các chức năng khác của jQuery UI. Ví dụ: Autocomplete, Button, Checkboxradio, Controlgroup, Tabs, Dialog, Overlay and Shadow Classes, Framework Icons, Slider, Datepicker, Progressbar, Selectmenu, Spinner, Menu, Toottip, Hightlight/Error. Nếu thấy nó không quá khó, thì có thể lướt qua, khi nào cần sử dụng thì sẽ quay lại xem kĩ hơn.
[7/10/2017 khóa học jQuery UI trên codecademy.com đã bị khóa
nên không vào được nữa] [Giờ sẽ quay lại
khóa học jQuery trên codecademy.com, để hoàn thành phần bài học về jQuery UI.
Sau đây ghi lại một số
thông tin hữu ích.
Phương thức
.effect(‘explode’) của jQuery UI làm ‘nổ’ một đối tượng.
Để một đối tượng
chuyển động lên xuống nhiều lần, dùng phương thức sau:
$('div').click(function () {
$(this).effect('bounce', {times:3}, 500);
});
Để một đối tượng trượt
ra, dùng phương thức sau:
$(this).effect('slide');
Kéo thả một đối tượng
trong jQuery UI, dùng phương thức sau:
$(document).ready(function() {
$('#car').draggable();
});
Để làm nổi bật một mục
được chọn, trong một danh sách, dùng phương thức sau:
$('ol').selectable();
Để sắp xếp lại các mục
trong một danh sách, dùng phương thức sau:
$('ol').sortable();
Đã hoàn thành bài học.
Cám ơn codecademy.com.]
-----------
Cập nhật [7/10/2017][8/10/2016]
-----------