Sử dụng các chủ đề
giao diện cho jQuery
Giao diện jQuery giờ đây đã trở thành chuẩn để triển khai theme, bởi vì nó hỗ trợ
nhiều widget. Bạn sẽ tìm hiểu sâu về giao diện người dùng jQuery với kiến trúc sư
Java Ken Ramirez để học cách sử dụng các chủ đề gốc và các chủ đề được thiết kế
dành riêng cho trang web của bạn.
Themes (chủ đề) không phải là một khái niệm mới. Bạn có thể sử dụng Cascading
Style Sheet (CSS) hoặc các classes để định dạng giao diện trang web của bạn. Sử
dụng một Farmework được tiêu chuẩn hóa cách tiếp cận và làm giảm đi số lượng
công việc và code cần phải viết.
JQuery giờ đây là chuẩn công nghệ được áp dụng để thiết kế Theme. Bên cạnh đó
cũng có những lựa chọn khác, chẳng hạn như Dojo (cùng với Dijit) hoặc Ext JS,
nhưng jQuery UI cho phép kết hợp các Themes với các Widgets, đó là những tiện
ích mà người dùng có thể tương tác được như Date Pickers (cho phép chọn ngày
tháng) hay Buttons (các nút bấm). Khi mổ xẻ các hoạt động bên trong các tập tin
tạo nên một giao diện jQuery, những thứ bạn tìm thấy không gì khác là CSS và
JavaScript. Nhưng đó là quá trình suy nghĩ và tiêu chuẩn hóa để nó có thể sử dụng
CSS và JavaScript làm cho jQuery UI như là một nền tảng tuyệt vời để xây dựng
giao diện của một trang web.
Các Theme jQuery UI
Nền tảng jQuery bao gồm hai thành phần sub-framework: một Widget Framework,
trong đó bao gồm Widget Factory và một tập hợp các Widget thông dụng; thành
phần thứ hai là CSS Framework. Widget Factory cung cấp cơ sở cho tất cả các
jQuery UI Widgets, bao gồm những Widget thông thường trong tập hợp các
Widgets. Khi tạo các Widget, ta sử dụng một trong những kiểu Widget phổ biến
được cung cấp sẵn hoặc tự tạo ra ngay từ đầu. Một khi bạn biết vị trí của các
Widget , mở nó lên trong bất kỳ trình soạn thảo yêu thích và xem mã code. Từ đó
sửa code này và tạo ra một widget tùy chỉnh (bắt đầu với những Widget có sẵn)
hoặc tạo ra một cấu trúc tương tự.
Cấu trúc thư mục của jQuery UI themes
Trước khi tiếp tục xem các tập tin khác nhau và nội dung của nó, bạn hãy tải về
một trong các Themes từ jQuery UI platform (xem phần Tài nguyên để tìm đường
link). Các tập tin Zip chứa 3 thư mục: css, js, and development-bundle. Thư mục
development-bundle chứa một thư mục có tên là themes, đó là nơi lưu trữ các
jQuery UI themes. Thư mục themes lần lượt chứa một thư mục có tên theme được
chọn/tải về (chẳng hạn như UI lightness) cũng như một thư mục có tên cơ sở. Thư
mục này là nơi bắt đầu Theme của bạn. Nó luôn được tải về, không phụ thuộc vào
theme được chọn.
Thư mục css chứa một thư mục với tên của theme tải về. Thư mục theme này có
chứa một tập tin CSS kết hợp đánh dấu CSS cho tất cả các thành phần hoặc các
Widget. Thư mục development-bundle, tuy nhiên, cũng có một thư mục theme /
[theme-name] (trong đó [theme-name] là tên thực tế của các theme được chọn) có
chứa các file CSS riêng cho mỗi thành phần hoặc widget. Cấu trúc này làm cho nó
dễ dàng hơn để tìm và sửa đổi theme của mình. Hình 1 cho thấy cấu trúc của thư
mục themes.
Hình 1. Cấu trúc của thư mục themes
Không phải tất cả các tập tin từ thư mục [theme-name] được liệt kê trong Hình 1,
nó chỉ liệt kê những thành phần quan trọng. File jquery.ui.all.css nhập vào các file
jquery.ui.base.css và jquery.ui.theme.css, giúp dễ dàng thêm vào các file bằng cách