Giao diện người dùng jQuery và ThemeRoller

• Có Thể 18, 2024

Nếu bạn muốn một cách dễ dàng và nhanh chóng để thiết kế giao diện người dùng cho trang web hoặc ứng dụng web và cũng bao gồm jQuery, hãy xem Giao diện người dùng jQuery. Ở đó, bạn sẽ tìm thấy gói kết hợp các hàm chức năng CSS và jQuery chìa khóa trao tay, giúp thêm các tính năng này vào dự án mới của bạn một cách nhanh chóng.

Hãy đi bộ qua trang web. Trong liên kết Demos và Docs, bạn sẽ tìm thấy một danh sách các plugin tương tác jQuery như kéo và thả, các tab và chuyển tiếp. Đối với mỗi plugin có một bản demo, tài liệu và mã cắt và dán mẫu để thử nghiệm.

Nếu bạn muốn lấy các tệp chìa khóa trao tay, hãy nhấp vào liên kết Chủ đề cho jQuery ThemeRoller. Css mặc định là một chủ đề xương trắng và xám trần. Bạn có thể nhấp vào nút tải xuống và sử dụng nguyên trạng nhưng cũng có Thư viện các chủ đề đầy màu sắc để bạn bắt đầu. Trong khu vực Thư viện có một số hình thu nhỏ chủ đề. Chỉ cần nhấp vào cái bạn thích. Bạn có thể tải xuống chủ đề đó bằng cách nhấp vào tab Cuộn riêng của bạn và sau đó là nút Tải xuống chủ đề. Nhưng niềm vui bắt đầu khi bạn bắt đầu tweet chủ đề bằng công cụ ThemeRoller. Có 11 tùy chọn mà bạn có thể tùy chỉnh. Hầu hết các tùy chọn sẽ cho phép bạn thay đổi kết cấu và màu nền, màu đường viền và màu văn bản và biểu tượng.

Bạn có một số tùy chọn để tweet chủ đề.

• Cài đặt phông chữ: Bạn có thể thay đổi họ phông chữ, trọng lượng và kích thước.
  
  
• Corner Radius: Bạn có thể thay đổi bán kính góc. Mỗi chủ đề có một kiểu tab tròn mặc định nhưng ở đây bạn có thể thay đổi kích thước của góc hoặc đặt nó thành 0 cho một tab vuông. (Các tab được xây dựng trên CSS3, không được IE hỗ trợ tại thời điểm này.)
  
  
• Tiêu đề / Thanh công cụ: Bạn có thể đặt các giá trị màu cho khu vực phía sau các tab và các khu vực tiêu đề, chẳng hạn như cho plugin lịch.
  
  
• Nội dung: Tại đây bạn có thể đặt màu cho khu vực nội dung chính. Bạn có thể có được một thiết kế rất khác nhau tùy thuộc vào sự lựa chọn của bạn hoặc không có đường viền.
  
  
• Trạng thái mặc định có thể nhấp: Điều này kiểm soát sự xuất hiện mặc định (không hoạt động) của các tab và nút.
  
  
• Trạng thái di chuột có thể nhấp: Các điều khiển này dành cho sự xuất hiện của các tab và nút ở trạng thái di chuột.
  
  
• Trạng thái hoạt động có thể nhấp: Điều khiển sự xuất hiện của tab và nút cho trang hoạt động.
  
  
• Điểm nổi bật: Màu nền, đường viền, văn bản và màu biểu tượng cho các vùng được tô sáng.
  
  
• Lỗi: Màu nền, đường viền, văn bản và màu biểu tượng cho thông báo lỗi.
  
  
• Modal Screen for Overlays: Điều khiển màu nền và kết cấu.
  
  
• Drop Shadows: Điều khiển độ mờ của bóng, độ dày, độ lệch và góc cho hiệu ứng đổ bóng.
  
  

Khi bạn tải xuống jquery-ui-x.x.xx.custom.zip và tải lên gói, bạn sẽ thấy ba thư mục (css, gói phát triển và js) và tệp index.html. Tệp index.html là bản demo cho các plugin được tạo kiểu theo chủ đề của bạn. Bạn sẽ muốn đặt các thư mục css và js trong thư mục chính của mình và sao chép / dán mã từ tệp index.html vào mã cho trang web của bạn tại vị trí bạn muốn các plugin xuất hiện.

//jqueryui.com
//jqueryui.com/demos/
//jqueryui.com/themeroller/

Video HướNg DẫN: Hướng dẫn thêm giao diện vào primefaces và sử dụng Primefaces CRUB (Có Thể 2024).