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.
Mặc dù chúng ta có thể dùng công cụ thay đổi Theme (Theme switcher) cho các
trang chưa thành phẩm (mục đích là để thử nghiệm và xem kết quả), nhưng đây
không phải là một ý kiến hay khi áp dụng nó lên các trang web hoàn chỉnh. Công
cụ dựa trên máy chủ của bên thứ ba để chứa Theme, và bạn cũng sẽ không chắc
rằng người dùng đang nhìn thấy điều gì.
Tuy nhiên có một cách khác để kiểm tra jQuery UI Theme là dùng công cụ
ThemeRoller, chỉ dùng được trên Mozilla Firefox (xem phần Tài nguyên để tìm
đường link). Sau khi cài đặt công cụ (như một bookmarklet trong Firefox), bạn mở
thư viện và chọn Theme cần xem. Chọn một Theme và nhấn vào đường link tải về.
Sau khi tải về xong, bạn giải nén thư mục Theme ra, đặt nó vào bên trong thư mục
jQuery UI, rồi chỉnh đường dẫn những file HTML tới Theme đó.
Công cụ này hữu ích hơn nhiều so với việc chỉ đơn giản là chuyển đổi theme. Nó
cũng cho phép bạn tạo Theme tùy chỉnh dễ dàng hơn là tạo chúng bằng tay.
Tạo các Theme độc đáo
Sử dụng trang web ThemeRoller (chạy trên hầu hết trình duyệt; xem phần Tài
nguyên để tìm đường link), bạn có thể thay đổi trực tiếp trên những Theme jQuery
có sẵn để tạo ra Theme độc đáo của riêng mình. Việc này giúp bạn bỏ qua việc tạo
các Theme ngay từ đầu. Điều này cũng có nghĩa là bạn không cần phải rành về
CSS, và công cụ này cho phép bạn xem những thay đổi trực tiếp trên Theme và
Widget của bạn. Hình 4 hiển thị trang web ThemeRoller (bạn đừng bối rối về
bookmarklet của ThemeRoller chạy trên trình duyệt Firefox).
Hình 4. Trang web ThemeRoller
Nhấp vào Gallery (Thư viện) cho phép bạn chọn bất kỳ Theme hiện tại nào. Làm
như vậy để chuyển các dạng và hình ảnh CSS mà Widget mẫu sử dụng để phản
ánh những thay đổi. Nhấp vào nút Edit ở mỗi Theme sẽ mở ra cho bạn tab "Roll
Your Own", nơi bạn có thể thay đổi kiểu CSS liên quan đến Theme đó. Nếu bạn
không chọn trước một Theme để chỉnh sửa, bạn sẽ bắt đầu với tab "Roll Your
Own" nhưng không có Theme nào được chọn cả, mà chỉ đơn giản xây dựng Theme
hoàn toàn mới ngay từ đầu.
Cuối cùng, bạn nhấp chuột vào Download theme để tải về Theme được chọn chứa
các chỉnh sửa của bạn. Lưu ý rằng jQuery UI và Theme của nó hỗ trợ nhiều tính
năng của CSS3, có nghĩa rằng những tính năng chính trên trình duyệt cũng được
hỗ trợ (ngoại trừ các phiên bản trước đây của Windows Internet Explorer).
Tab "Roll Your Own" của ThemeRoller được sắp xếp rất hợp lý để bạn có thể dễ
dàng tìm và thay đổi những thứ mà bạn muốn tìm. Tab này chứa các mục thông tin
quan trọng (trong số những thông tin quan trọng khác):
Font Settings (Cài đặt phông chữ) - Cho phép những thay đổi chung cho
các font sử dụng trong suốt vòng đời của Theme.
Corner Radius (Bán kính góc) - Điều khiển việc bo góc (hay làm lõm góc)
cho các Widget.
Header/Toolbar (Tiêu đề/Thanh công cụ) - Cung cấp cái nhìn về các tiêu
đề được dùng trong các Widget khác nhau.
Content (Nội dung) - Cung cấp các thiết lập để điều chỉnh nội dung chính
của Widget.
Clickable - Điều khiển các vùng khác nhau mà Widget sử dụng.
Khi nhấn qua các tùy chọn, bạn sẽ nhận thấy nhiều điều thú vị về việc xây dựng
các Theme này. Ví dụ, Theme jQuery UI tận dụng lợi thế của các Textures. Để
xem cách sử dụng chúng, nhấn vào Header/Toolbar trong ThemeRoller. Sau đó
nhấn chọn nút bấm có màu ở giữa. Một bảng Drop-down chứa các mẫu được chọn.
Các mẫu Texture được chọn sẽ được kết hợp với màu nền mà bạn đã chọn để xuất
ra mẫu sử dụng cho tiêu đề và thanh công cụ. Đây là một trong những cách sử
dụng Texture. Cũng có những cách khác thông qua Theme jQuery UI. Ví dụ, thay
đổi Texture trong "Clickable: default state" để thấy rằng những thay đổi đó ảnh
hưởng đến các Button của Theme được chọn như thế nào.
Một tính năng thú vị của Theme jQuery UI là sử dụng các cách đánh dấu và báo lỗi
(hay còn gọi là các dấu hiệu trực quan). ThemeRoller cung cấp các control hoàn
chỉnh về các dấu hiệu trực quan này để hiển thị cho người dùng. Các Texture, màu
nền, góc đường viền, màu chữ, và thậm chí màu của biểu tượng (icon) cũng có thể
được thay đổi ( nếu một icon được hiển thị như là dấu hiệu). Tên của chúng được
hiển thị trong ThemeRoller, vì thế bạn chỉ đơn giản sử dụng những tên này trong
website của bạn để có nhiều kiểu hiển thị cho người dùng.
Việc thay đổi các thiết lập khác nhau cũng làm thay đổi đường dẫn URL trên trình
duyệt của bạn. Liệt kê 6 cho thấy đường URL mẫu.
Liệt kê 6. Mẫu đường dẫn URL ThemeRoller
http://jqueryui.com/themeroller/#ffDefault=Segoe+UI%2C+Arial%2C+sans-
serif&
fwDefault=bold&fsDefault=1.1em&cornerRadius=8px&
bgColorHeader=817865&bgTextureHeader=07_diagonals_medium.png&
bgImgOpacityHeader=45&borderColorHeader=494437&fcHeader=ffffff&
iconColorHeader=fadc7a&bgColorContent=feeebd&
bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&
borderColorContent=8e846b&fcContent=383838&iconColorContent=d19405&
bgColorDefault=fece2f&bgTextureDefault=16_diagonal_maze.png&
bgImgOpacityDefault=60&borderColorDefault=d19405&fcDefault=4c3000&
iconColorDefault=3d3d3d&bgColorHover=ffdd57&bgTextureHover=12_gloss_w
ave.png
&bgImgOpacityHover=70&borderColorHover=a45b13&fcHover=381f00&
iconColorHover=bd7b00&bgColorActive=ffffff&bgTextureActive=05_inset_soft.
png&
bgImgOpacityActive=30&borderColorActive=655e4e&fcActive=0074c7&
iconColorActive=eb990f&bgColorHighlight=f5d361&
bgTextureHighlight=22_spotlight.png&bgImgOpacityHighlight=100&
borderColorHighlight=ee5320&fcHighlight=1f1f1f&iconColorHighlight=ed9f26&
bgColorError=d34d17&bgTextureError=07_diagonals_medium.png&
bgImgOpacityError=20&borderColorError=ffb73d&fcError=ffffff&
iconColorError=ffe180&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png
&
bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&
bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&
thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&
cornerRadiusShadow=8px
Bạn hãy lưu lại đường dẫn URL để sau này có thể quay lại và thay đổi các thiết
lập. Ví dụ, sao chép đường dẫn URL mà bạn đã có những thay đổi và lưu nó vào
một nơi lưu giữ an toàn. Bây giờ, bạn hãy đóng trình duyệt lại (hay trang tab trong
trình duyệt mà đang mở trang ThemeRoller) and reopen it using the copied URL.
As you can see, all of your modifications are back, ready for further modifications.
Kết luận
Chúng ta có thể thảo luận nhiều hơn về các thành phần cốt lõi của jQuery UI,
nhưng bạn nên có những kiến thức nền tảng để bắt đầu với Theme jQuery UI. Bạn
đã thấy cấu trúc các thư mục và file cho phép bạn chỉnh sửa Theme. Bạn có thể
xem và sử dụng các file này như là điểm khởi đầu để tạo Theme cho chính mình
khi bạn sẵn sãng.
Bài này mô tả tổng quan về ThemeRoller và các trang web liên quan hỗ trợ việc
chỉnh sửa các Theme có sẵn cũng như tạo mới một Theme ngay từ đầu. Cuối cùng,
bạn cũng đã khám phá quá trình lưu và khôi phục các thay đổi của Theme trên
trang web ThemeRoller.
