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.
Nội dung trích xuất từ tài liệu:
Sử dụng các chủ đề giao diện cho jQuerySử dụng các chủ đềgiao diện cho jQueryGiao 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 CascadingStyle 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ượngcô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àytháng) hay Buttons (các nút bấm). Khi mổ xẻ các hoạt động bên trong các tập tintạ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ụngCSS và JavaScript làm cho jQuery UI như là một nền tảng tuyệt vời để xây dựnggiao diện của một trang web.Các Theme jQuery UINề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ànhphần thứ hai là CSS Framework. Widget Factory cung cấp cơ sở cho tất cả cácjQuery UI Widgets, bao gồm những Widget thông thường trong tập hợp cácWidgets. 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ácWidget , 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 themesTrướ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 đườnglink). Các tập tin Zip chứa 3 thư mục: css, js, and development-bundle. Thư mụcdevelopment-bundle chứa một thư mục có tên là themes, đó là nơi lưu trữ cácjQuery UI themes. Thư mục themes lần lượt chứa một thư mục có tên theme đượcchọ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àotheme đượ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ácWidget. 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 themesKhô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 filejquery.ui.base.css và jquery.ui.theme.css, giúp dễ dàng thêm vào các file bằng cáchsử dụng file jquery.ui.all.css. File jquery.ui.base.css nhập vào filejquery.ui.core.css và tất cả các file thành phần và Widget từ cùng một thư mục(những thông tin này không được hiển thị trong Hình 1). File jquery.ui.core.csschứa các lớp thông dụng được chia sẻ bởi tất cả các file Widget. Nó cung cấp cáclớp CSS cơ sở cho tất cả các Widget jQuery UI (bên trong Theme) cũng như tầmnhìn chung và định vị cho các Widget. File quan trọng cuối cùng làjquery.ui.theme.css, cung cấp sự xuất hiện phổ biến và hành vi chia sẻ bởi tất cảcác widget trong themes cũng như chính theme đó.File jquery.ui.theme.css có ba loại kiểu khác nhau:  Container - Kiểu này định nghĩa theme container, chẳng hạn như ui-widget, ui-widget-content, hay ui-widget-header.  States - Loại này được dùng bởi jQuery UI Widgets để xác định xem các widget như người dùng tương tác với nó. Các lớp bao gồm ui-state-default, ui-state-hover, và ui-state-active.  Cues - Như một cái gì đó xảy ra trong ứng dụng (không phải do hành động của người sử dụng), các lớp này thay đổi giao diện của các Widget. Các lớp bao gồm ui-state-highlight, ui-state-error, và ui-state-disabled.Các sự kiện của WidgetBởi vì Widget là các đối tượng JavaScript cơ bản, chúng có thể được thiết lập vớicác sự kiện chạy xuyên suốt vòng đời của một website. Khi những sự kiện nàyđược gióng lên, chúng được bắt giữ bởi mã JavaScript hay được xử lý trong cácWidget của website (đây là lựa chọn mặc định).Tất cả các cách thực hiện Widget được mô tả đầy đủ trong cá ...