Cách Tạo Tabbed Panels với jQuery trong Dreamweaver - núm vú

Tùy chọn jQuery UI Tab trong Dreamweaver giúp bạn dễ dàng thêm một loạt các bảng hiển thị hoặc ẩn nội dung tương ứng với một loạt các tab. Tương tự với các bảng thu gọn, tính năng jQuery UI này cho phép bạn hiển thị thêm thông tin trong không gian ít hơn trong một cửa sổ trình duyệt.

Tương tự với bảng accordion, các tab được đặt theo tab có thể được sử dụng để hiển thị văn bản, hình ảnh và đa phương tiện.

Thực hiện theo các bước sau để tạo một nhóm bảng điều khiển theo tab:

Đặt con trỏ vào một trang mà bạn muốn bảng điều khiển được hiển thị.

1. Chọn Chèn → Giao diện jQuery → Tabs hoặc nhấp vào mục Tabs trong bảng chèn UI jQuery.

2. Bảng điều khiển được chèn vào trang và các tệp CSS tương ứng xuất hiện trong bảng thiết kế CSS.

   Trong vùng làm việc chính, lần lượt chọn các văn bản

   

3. Tab1, Tab2, và Tab 3 và sau đó thay thế mỗi tiêu đề tab bằng văn bản bạn muốn xuất hiện trong tab của bảng điều khiển khu vực. Bạn có thể chỉnh sửa nội dung của các tab chỉ trong vùng làm việc chứ không phải trong thanh tra thuộc tính. Theo mặc định, văn bản trong vùng Tab là màu đậm và đen, nhưng bạn có thể thay đổi định dạng đó bằng cách thay đổi quy tắc CSS tương ứng.

   Để điều chỉnh kích thước của mỗi tab, hãy chọn tab và sau đó sử dụng cài đặt Chiều cao và Chiều rộng trong Trình kiểm tra thuộc tính.

4. Với một tab cá nhân được chọn, Thanh tra Bất động sản sẽ hiển thị các cài đặt cho tab đó cụ thể.

   Để thêm nội dung, hãy chọn từ

   

5. Nội dung trong khu vực chính của bảng tab đã chọn, sau đó nhập văn bản, hình ảnh hoặc đa phương tiện. Bạn có thể sao chép văn bản vào một bảng điều khiển bằng cách dán nó như bạn muốn dán văn bản bất cứ nơi nào khác trên trang. Tương tự như vậy, chèn hình ảnh vào bảng như bạn muốn ở bất cứ nơi nào khác trên một trang: Chọn Chèn → Hình ảnh → Hình ảnh và sau đó chọn tệp GIF, JPEG hoặc PNG bạn muốn hiển thị. Bạn cũng có thể thêm tập tin đa phương tiện hoặc Photoshop nếu bạn muốn sử dụng Dreamweaver để tối ưu hóa hình ảnh của bạn.

   Để thay đổi sự xuất hiện của một tab hoặc một bảng điều khiển, chẳng hạn như mặt phông chữ hoặc màu sắc, chỉnh sửa quy tắc CSS tương ứng.

6. Ví dụ: để chỉnh sửa màu văn bản hoặc phông chữ trong các tab, hãy chọn hộp quanh tab và hộp quanh phong cách được tự động chọn trong bảng Lựa chọn Thiết kế CSS.

   Để chỉnh sửa số hoặc thứ tự của bảng được đặt theo tab, hãy nhấp vào tab Tab màu jQuery màu xanh ở đầu bảng điều khiển thiết lập trong khu vực thiết kế.

7. Khi bạn nhấp vào tab màu xanh lam, các cài đặt bảng điều khiển xuất hiện trong thanh tra Thuộc tính. Nhấp bên ngoài khu vực đóng hộp màu xanh lục và Thanh tra Nhà xuất bản sẽ trở về cài đặt mặc định.

   Để thêm các tab, hãy nhấp vào biểu tượng dấu cộng (+) trong thanh tra Thuộc tính.

   

8. Các tab mới xuất hiện trong không gian làm việc.

   Để thay đổi thứ tự của các tab, hãy chọn tên tab trong thanh tra Thuộc tính và sau đó sử dụng các mũi tên trong trường Bảng để di chuyển bảng điều khiển.

9. Tên bảng điều khiển di chuyển lên và xuống menu theo thứ tự được thay đổi. Các bảng điều khiển và các tab tương ứng của chúng xuất hiện trong trang web theo thứ tự mà chúng xuất hiện trong thanh tra Thuộc tính.

   Chọn bảng điều khiển trong danh sách thả xuống Panels mà bạn muốn hiển thị khi trang được tải vào một trình duyệt web.

10. Danh sách thả xuống tương ứng với tên mà bạn cung cấp cho mỗi tab trong không gian làm việc.

    Chọn File → Save để lưu trang; khi hộp thoại Copy Dependent Files xuất hiện, nhấn OK để tự động tạo ra tất cả các file có liên quan.

11. Để các tính năng của jQuery UI hoạt động, bạn phải tải các tệp này lên máy chủ web của mình khi bạn tải lên trang web.

    Nhấp vào biểu tượng quả địa cầu ở đầu không gian làm việc và chọn trình duyệt để xem trước tác phẩm của bạn trong trình duyệt.

12. Tùy thuộc vào trình duyệt web của bạn, bạn có thể phải cho phép ActiveX điều khiển để xem trước trang trên máy tính của bạn.