Nội dung

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 sử dụng file jquery.ui.all.css. File jquery.ui.base.css nhập vào file jquery.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.css chứ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ác lớp CSS cơ sở cho tất cả các Widget jQuery UI (bên trong Theme) cũng như tầm nhì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 Widget Bởi vì Widget là các đối tượng JavaScript cơ bản, chúng có thể được thiết lập với cá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ác Widget 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ác tài liệu của đội jQuery UI cho từng Widget phổ biến. Bạn có thể thêm vào code của chính mình, tuy nhiên, chỉ để xử lý một hay nhiều Widget được chọn. Dưới đây là đoạn code mẫu để thiết lập việc tiếp nhận sự kiện: $( "#dlg_popup" ).dialog({ drag: function(event, ui) { ... } }); Ví dụ này móc nối vào sự kiện drag được gióng lên khi ta rê hộp thoại Dialog Box trên màn hình. Dấu ba chấm (…) ở ví dụ trên là nơi bạn có thể viết thêm code để xử lý khi sự kiện được gióng. Các phương thức của Widget Các phương thức liên quan của Widget cho phép gọi các chức năng được định nghĩa sẵn để thực thi một hành động cụ thể. Dưới đây là ví dụ gọi phương thức của Widget: $(“#dlg_popup”).dialog("moveToTop”); Trên lý thuyết thì các tùy chọn và phương thức là khác nhau. Tuy nhiên, lưu ý rằng giá trị của các tùy chọn có thể được thay đổi hay truy hồi bằng cách sử dụng một phương thức để thực thi, như ví dụ dưới đây. $(“#dlg_popup”).dialog("option", "autoOpen", false); huyển đổi Theme Bạn có thể thêm mã code vào các file HTML và JavaScript để cho phép thay đổi Theme nhanh chóng bằng cách dùng một menu Drop-down (thanh thực đơn thả xuống). Liệt kê 4 thể hiện những thay đổi trong mã code HTML để thực hiện điều này. Liệt kê 4. Thay đổi Theme nhanh chóng . . . . . .

. . . Liệt kê 5 thể hiện mã JavaScript. Liệt kê 5. Mã JavaScript để thay đổi Theme nhanh chóng $(document).ready(function(){ $('#switcher').themeswitcher(); . . . }); Hình 3 thể hiện ứng dụng mẫu sau những thay đổi này. Hình 3. Ứng dụng mẫu sau khi đã thay đổi mã code Hãy chạy lại trang HTML của bạn trong trình duyệt và xem kết quả. Bây giờ bạn có thể chọn danh sách Drop-down để thay đổi Theme. Theme được chọn sẽ được ngầm tải về khi cần thiết.