Làm thế nào để Xây dựng một giao diện theo thẻ trong AJAX cho HTML5 và CSS3 Lập trình - núm vú

Một kỹ thuật quan trọng trong phát triển web HTML5 và CSS3 là sử dụng một giao diện theo thẻ trong AJAX. Điều này cho phép người dùng thay đổi nội dung của một phân đoạn bằng cách chọn một trong một loạt các tab.

Trong một giao diện theo thẻ, chỉ có một phần tử có thể nhìn thấy được tại một thời điểm, nhưng tất cả các tab đều có thể nhìn thấy được. Giao diện theo thẻ có thể dự đoán được nhiều hơn đàn accordion bởi vì các tab (không giống các tiêu đề của accordion) vẫn ở cùng một vị trí.

Các tab thay đổi màu sắc để cho biết tab nào đang được đánh dấu, và chúng cũng thay đổi trạng thái (thường bằng cách thay đổi màu) để cho biết chúng đang được di chuột qua. Khi bạn nhấp vào tab khác, khu vực nội dung chính của tiện ích sẽ được thay thế bằng nội dung tương ứng.

Đây là điều xảy ra khi người dùng nhấp vào tab.

Giống như đàn accordion, hiệu ứng tab rất dễ đạt được. Xem qua mã:

$ (init); hàm init () {$ ("# tabs"). tabs ();} các tab. html

Tab Demo

Sách 1
Sách 2
Sách 3


Sách I - Tạo HTML Foundation

Quản lý thông tin với các bảng và bảng
Kết nối với các liên kết
Thêm hình ảnh
Tạo tạo mẫu
Sách II - Tạo kiểu với CSS
Làm màu thế giới của bạn
Tạo kiểu văn bản


Các trình chọn, lớp và kiểu

Biên giới
Mức CSS
Sách III - CSS dành cho Giao diện
Vui vẻ với Float tuyệt vời
Tạo các bảng bố trí trang Floating


Tạo kiểu Danh sách và Menus

Sử dụng Định vị Thay thế
Cơ chế xây dựng giao diện dựa trên tab rất giống với giao diện dành cho accordions:
Thêm tất cả các file phù hợp.
Giống như hầu hết các hiệu ứng jQuery UI, bạn cần jQuery, jQuery UI, và một tệp CSS chủ đề. Bạn cũng cần truy cập thư mục hình ảnh cho đồ hoạ nền của chủ đề.

Xây dựng HTML như bình thường.

1. Nếu bạn đang xây dựng một trang web được tổ chức tốt, bạn đã gần lắm.

   Tạo một div có chứa tất cả các dữ liệu theo thẻ.

2. Đây là thành phần mà bạn sẽ thực hiện phép thuật jQuery.

   Đặt các nội dung chính trong các div được đặt tên.

3. Mỗi đoạn nội dung sẽ được hiển thị dưới dạng một trang nên được đặt trong một div có ID mô tả. Mỗi một trong những div này phải được đặt trong tab div.

   Thêm một danh sách liên kết địa phương vào nội dung.

4. Xây dựng một trình đơn của liên kết. Đặt cái này ở đầu phân div được tab. Mỗi liên kết phải là liên kết cục bộ với một trong các div. Ví dụ, chỉ mục sẽ như sau:

   Sách 1

5. Sách 2

   Sách 3

   
   Xây dựng một hàm init () như thường lệ.
   Sử dụng các kỹ thuật jQuery thông thường.
   Gọi phương thức tabs () trên div chính.
   
   

6. Không thể tin được, một dòng mã jQuery thực hiện tất cả công việc.