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.

Sử dụng chủ đề giao diện cho jQuery Giao diện jQuery trở thành chuẩn để triển khai theme, hỗ trợ nhiều widget Bạn tìm hiểu sâu 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 chủ đề gốc chủ đề thiết kế dành riêng cho trang web bạn Themes (chủ đề) khái niệm Bạn sử dụng Cascading Style Sheet (CSS) classes để định dạng giao diện trang web bạn Sử dụng Farmework tiêu chuẩn hóa cách tiếp cận làm giảm số lượng công việc code cần phải viết JQuery chuẩn công nghệ áp dụng để thiết kế Theme Bên cạnh có lựa chọn khác, chẳng hạn Dojo (cùng với Dijit) Ext JS, jQuery UI cho phép kết hợp Themes với Widgets, tiện ích mà người dùng tương tác Date Pickers (cho phép chọn ngày tháng) hay Buttons (các nút bấm) Khi mổ xẻ hoạt động bên tập tin tạo nên giao diện jQuery, thứ bạn tìm thấy khơng khác CSS JavaScript Nhưng q trình suy nghĩ tiêu chuẩn hóa để sử dụng CSS JavaScript làm cho jQuery UI tảng tuyệt vời để xây dựng giao diện trang web Các Theme jQuery UI Nền tảng jQuery bao gồm hai thành phần sub-framework: Widget Framework, bao gồm Widget Factory tập hợp Widget thông dụng; thành phần thứ hai CSS Framework Widget Factory cung cấp sở cho tất jQuery UI Widgets, bao gồm Widget thông thường tập hợp Widgets Khi tạo Widget, ta sử dụng kiểu Widget phổ biến cung cấp sẵn tự tạo từ đầu Một bạn biết vị trí Widget , mở lên trình soạn thảo u thích xem mã code Từ sửa code tạo widget tùy chỉnh (bắt đầu với Widget có sẵn) tạo cấu trúc tương tự Cấu trúc thư mục jQuery UI themes Trước tiếp tục xem tập tin khác nội dung nó, bạn tải Themes từ jQuery UI platform (xem phần Tài nguyên để tìm đường link) Các tập tin Zip chứa thư mục: css, js, and development-bundle Thư mục development-bundle chứa thư mục có tên themes, nơi lưu trữ jQuery UI themes Thư mục themes chứa thư mục có tên theme chọn/tải (chẳng hạn UI lightness) thư mục có tên sở Thư mục nơi bắt đầu Theme bạn Nó ln tải về, không phụ thuộc vào theme chọn Thư mục css chứa thư mục với tên theme tải Thư mục theme có chứa tập tin CSS kết hợp đánh dấu CSS cho tất thành phần Widget Thư mục development-bundle, nhiên, có thư mục theme / [theme-name] (trong [theme-name] tên thực tế theme chọn) có chứa file CSS riêng cho thành phần widget Cấu trúc làm cho dễ dàng để tìm sửa đổi theme Hình cho thấy cấu trúc thư mục themes Hình Cấu trúc thư mục themes Khơng phải tất tập tin từ thư mục [theme-name] liệt kê Hình 1, liệt kê thành phần quan trọng File jquery.ui.all.css nhập vào file jquery.ui.base.css jquery.ui.theme.css, giúp dễ dàng thêm vào file cách sử dụng file jquery.ui.all.css File jquery.ui.base.css nhập vào file jquery.ui.core.css tất file thành phần Widget từ thư mục (những thông tin khơng hiển thị Hình 1) File jquery.ui.core.css chứa lớp thông dụng chia sẻ tất file Widget Nó cung cấp lớp CSS sở cho tất Widget jQuery UI (bên Theme) tầm nhìn chung định vị cho Widget File quan trọng cuối jquery.ui.theme.css, cung cấp xuất phổ biến hành vi chia sẻ tất widget themes theme File jquery.ui.theme.css có ba loại kiểu khác nhau:  Container - Kiểu định nghĩa theme container, chẳng hạn ui-widget, ui-widget-content, hay ui-widget-header  States - Loại dùng jQuery UI Widgets để xác định xem widget người dùng tương tác với Các lớp bao gồm ui-state-default, ui-state-hover, ui-state-active  Cues - Như xảy ứng dụng (không phải hành động người sử dụng), lớp thay đổi giao diện Widget Các lớp bao gồm ui-state-highlight, ui-state-error, ui-state-disabled Các kiện Widget Bởi Widget đối tượng JavaScript bản, chúng thiết lập với kiện chạy xuyên suốt vòng đời website Khi kiện gióng lên, chúng bắt giữ mã JavaScript hay xử lý Widget website (đây lựa chọn mặc định) Tất cách thực Widget mô tả đầy đủ tài liệu đội jQuery UI cho Widget phổ biến Bạn thêm vào code mình, nhiên, để xử lý hay nhiều Widget chọn Dưới đoạn code mẫu để thiết lập việc tiếp nhận kiện: $( "#dlg_popup" ).dialog({ drag: function(event, ui) { } }); Ví dụ móc nối vào kiện drag gióng lên ta rê hộp thoại Dialog Box hình Dấu ba chấm (…) ví dụ nơi bạn viết thêm code để xử lý kiện gióng Các phương thức Widget Các phương thức liên quan Widget cho phép gọi chức định nghĩa sẵn để thực thi hành động cụ thể Dưới ví dụ gọi phương thức Widget: $(“#dlg_popup”).dialog("moveToTop”); Trên lý thuyết tùy chọn phương thức khác Tuy nhiên, lưu ý giá trị tùy chọn thay đổi hay truy hồi cách sử dụng phương thức để thực thi, ví dụ $(“#dlg_popup”).dialog("option", "autoOpen", false); huyển đổi Theme Bạn thêm mã code vào file HTML JavaScript phép thay đổi Theme nhanh chóng cách dùng menu Drop-down (thanh thực đơn thả xuống) Liệt kê thể thay đổi mã code HTML để thực điều Liệt kê Thay đổi Theme nhanh chóng Liệt kê thể mã JavaScript Liệt kê Mã JavaScript để thay đổi Theme nhanh chóng $(document).ready(function(){ $('#switcher').themeswitcher(); }); Hình thể ứng dụng mẫu sau thay đổi Hình Ứng dụng mẫu sau thay đổi mã code Hãy chạy lại trang HTML bạn trình duyệt xem kết Bây bạn chọn danh sách Drop-down để thay đổi Theme Theme chọn ngầm tải cần thiết Mặc dù dùng cơng cụ thay đổi Theme (Theme switcher) cho trang chưa thành phẩm (mục đích để thử nghiệm xem kết quả), ý kiến hay áp dụng lên trang web hồn chỉnh Cơng cụ dựa máy chủ bên thứ ba để chứa Theme, bạn không người dùng nhìn thấy điều Tuy nhiên có cách khác để kiểm tra jQuery UI Theme dùng công cụ ThemeRoller, dùng Mozilla Firefox (xem phần Tài nguyên để tìm đường link) Sau cài đặt công cụ (như bookmarklet Firefox), bạn mở thư viện chọn Theme cần xem Chọn Theme nhấn vào đường link tải Sau tải xong, bạn giải nén thư mục Theme ra, đặt vào bên thư mục jQuery UI, chỉnh đường dẫn file HTML tới Theme Cơng cụ hữu ích nhiều so với việc đơn giản chuyển đổi theme Nó cho phép bạn tạo Theme tùy chỉnh dễ dàng tạo chúng tay Tạo Theme độc đáo Sử dụng trang web ThemeRoller (chạy hầu hết trình duyệt; xem phần Tài ngun để tìm đường link), bạn thay đổi trực tiếp Theme jQuery có sẵn để tạo Theme độc đáo riêng Việc giúp bạn bỏ qua việc tạo Theme từ đầu Điều có nghĩa bạn khơng cần phải rành CSS, công cụ cho phép bạn xem thay đổi trực tiếp Theme Widget bạn Hình hiển thị trang web ThemeRoller (bạn đừng bối rối bookmarklet ThemeRoller chạy trình duyệt Firefox) Hình Trang web ThemeRoller Nhấp vào Gallery (Thư viện) cho phép bạn chọn Theme Làm để chuyển dạng hình ảnh CSS mà Widget mẫu sử dụng để phản ánh thay đổi Nhấp vào nút Edit Theme mở cho bạn tab "Roll Your Own", nơi bạn thay đổi kiểu CSS liên quan đến Theme Nếu bạn khơng chọn trước Theme để chỉnh sửa, bạn bắt đầu với tab "Roll Your Own" khơng có Theme chọn cả, mà đơn giản xây dựng Theme hoàn toàn từ đầu Cuối cùng, bạn nhấp chuột vào Download theme để tải Theme chọn chứa chỉnh sửa bạn Lưu ý jQuery UI Theme hỗ trợ nhiều tính CSS3, có nghĩa tính trình duyệt hỗ trợ (ngoại trừ phiên trước Windows Internet Explorer) Tab "Roll Your Own" ThemeRoller xếp hợp lý để bạn dễ dàng tìm thay đổi thứ mà bạn muốn tìm Tab chứa mục thơng tin quan trọng (trong số thông tin quan trọng khác):  Font Settings (Cài đặt phông chữ) - Cho phép thay đổi chung cho font sử dụng suốt vịng đời 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 Widget  Header/Toolbar (Tiêu đề/Thanh công cụ) - Cung cấp nhìn tiêu đề dùng Widget khác  Content (Nội dung) - Cung cấp thiết lập để điều chỉnh nội dung Widget  Clickable - Điều khiển vùng khác mà Widget sử dụng Khi nhấn qua tùy chọn, bạn nhận thấy nhiều điều thú vị việc xây dựng Theme Ví dụ, Theme jQuery UI tận dụng lợi Textures Để xem cách sử dụng chúng, nhấn vào Header/Toolbar ThemeRoller Sau nhấn chọn nút bấm có màu Một bảng Drop-down chứa mẫu chọn Các mẫu Texture chọn kết hợp với màu mà bạn chọn để xuất mẫu sử dụng cho tiêu đề công cụ Đây cách sử dụng Texture Cũng có cách khác thơng qua Theme jQuery UI Ví dụ, thay đổi Texture "Clickable: default state" để thấy thay đổi ảnh hưởng đến Button Theme chọn Một tính thú vị Theme jQuery UI sử dụng cách đánh dấu báo lỗi (hay gọi dấu hiệu trực quan) ThemeRoller cung cấp control hoàn chỉnh dấu hiệu trực quan để hiển thị cho người dùng Các Texture, màu nền, góc đường viền, màu chữ, chí màu biểu tượng (icon) thay đổi ( icon hiển thị dấu hiệu) Tên chúng hiển thị ThemeRoller, bạn đơn giản sử dụng tên website bạn để có nhiều kiểu hiển thị cho người dùng Việc thay đổi thiết lập khác làm thay đổi đường dẫn URL trình duyệt bạn Liệt kê cho thấy đường URL mẫu Liệt kê Mẫu đường dẫn URL ThemeRoller http://jqueryui.com/themeroller/#ffDefault=Segoe+UI%2C+Arial%2C+sansserif& 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 lưu lại đường dẫn URL để sau quay lại thay đổi thiết lập Ví dụ, chép đường dẫn URL mà bạn có thay đổi lưu vào nơi lưu giữ an tồn Bây giờ, bạn đóng trình duyệt lại (hay trang tab trình duyệt mà 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 thảo luận nhiều thành phần cốt lõi jQuery UI, bạn nên có kiến thức tảng để bắt đầu với Theme jQuery UI Bạn thấy cấu trúc thư mục file cho phép bạn chỉnh sửa Theme Bạn xem sử dụng file điểm khởi đầu để tạo Theme cho bạn sẵn sãng Bài mô tả tổng quan ThemeRoller trang web liên quan hỗ trợ việc chỉnh sửa Theme có sẵn tạo Theme từ đầu Cuối cùng, bạn khám phá trình lưu khơi phục thay đổi Theme trang web ThemeRoller  .. .Giao diện jQuery trở thành chuẩn để triển khai theme, hỗ trợ nhiều widget Bạn tìm hiểu sâu 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 chủ đề gốc chủ đề. .. kế dành riêng cho trang web bạn Themes (chủ đề) khái niệm Bạn sử dụng Cascading Style Sheet (CSS) classes để định dạng giao diện trang web bạn Sử dụng Farmework tiêu chuẩn hóa cách tiếp cận làm... Nhưng q trình suy nghĩ tiêu chuẩn hóa để sử dụng CSS JavaScript làm cho jQuery UI tảng tuyệt vời để xây dựng giao diện trang web Các Theme jQuery UI Nền tảng jQuery bao gồm hai thành phần sub-framework: