Cách tạo các bảng có thể đóng mở với jQuery trong Dreamweaver - núm vú

Tiện ích jQuery UI accordion trong Dreamweaver giúp bạn dễ dàng thêm các bảng đóng lại mà khách truy cập trang web có thể mở và đóng mà không cần làm mới lại trang web. Tính năng jQuery này cho phép bạn sử dụng tốt hơn không gian trên một trang bằng cách hiển thị nhiều thông tin hơn bằng không gian trong một cửa sổ trình duyệt.

Bạn có thể thấy các bảng thu gọn về đàn accordion có chứa tên, ảnh và các sở thích về môi trường sống của mỗi chú chim songbird trong trang web này. Kết quả là bạn có thể dễ dàng nhìn thấy tên của tất cả các loài chim trên một trang. Để xem mô tả về bất kỳ loài chim nào, người dùng chỉ cần nhấp vào tab ở đầu bảng điều khiển (nơi mà tên của chim xuất hiện) và bảng điều khiển sẽ mở ra ngay lập tức.

Hình ảnh và mô tả cho chim vằn có vú màu cam được mở trong khi những người khác trên trang này đóng lại. Vẻ đẹp của jQuery là trang không phải được nạp lại cho các bảng để mở hoặc đóng. Nhấp vào tab một lần và bảng điều khiển sẽ mở ra ngay lập tức. Nhấp vào tab khác và bảng điều khiển đó sẽ mở ra khi bảng đã mở trước đó đóng.

Để xem bảng điều khiển accordion (hoặc nhiều tính năng nâng cao khác trong Dreamweaver) vì nó sẽ xuất hiện trong một trình duyệt web, bạn cần phải nhấp vào nút Chế độ xem Trực tiếp ở phía trên bên trái của không gian làm việc của Dreamweaver.

Thực hiện theo các bước sau để tạo một tập hợp đàn accordion:

Đặt con trỏ vào một trang nơi bạn muốn bảng chèn accordion xuất hiện.

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

1. Một bảng điều khiển jQuery UI có thể thu gọn được với ba bảng xuất hiện trong trang.

2. Chọn từ

   Phần

   

3. ở đầu mỗi bảng điều khiển và thay thế bằng văn bản bạn muốn xuất hiện trong vùng Tab của bảng điều khiển. Theo mặc định, văn bản trong vùng Tab là văn bản thuần, nhưng bạn có thể thay đổi bằng cách thay đổi nguyên tắc CSS tương ứng hoặc định dạng văn bản bằng các thẻ HTML, chẳng hạn như các thẻ tiêu đề. Chọn từ

   Nội dung

4. trong khu vực chính của mỗi bảng điều khiển và nhập bất kỳ văn bản hoặc hình ảnh nào bạn muốn hiển thị. Bạn có thể dán văn bản vào bảng điều khiển giống 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, bạn chèn hình ảnh vào các bảng như bạn sẽ làm ở bất cứ nơi nào khác trên một trang: Đặt con trỏ vào bảng điều khiển, chọn Chèn → Hình ảnh → Hình ảnh, và chọn tệp GIF, JPEG hoặc PNG bạn muốn hiển thị.Bạn cũng có thể chọn một tệp Photoshop nếu bạn muốn sử dụng Dreamweaver để tối ưu hóa hình ảnh. Khi bạn dán văn bản vào bảng điều khiển, hãy chọn Chỉnh sửa → Dán Đặc biệt để chọn số lượng định dạng bạn muốn giữ trong văn bản bạn dán trong Dreamweaver. Hạn chế số lượng định dạng được bảo quản có thể cắt giảm các xung đột về phong cách tiềm ẩn.

   Để thay đổi cài đặt bảng điều khiển, nhấp vào tab Accordion jQuery màu xanh ở đầu bảng trong khu vực thiết kế.

   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. (Đúng cách nhấp vào tab màu xanh lam có thể rất khôn lanh, do đó hãy chắc chắn nhấp vào khu vực màu lam.) Nhấp vào bất kỳ nơi nào khác trên trang và thanh tra sẽ trở về cài đặt mặc định của nó.

5. Thêm hoặc xóa bảng bằng cách sử dụng trường Panels trong thanh tra thuộc tính.

   Để thêm bảng, nhấp vào dấu cộng (+) ở bên phải trường Bảng. Để xóa bảng điều khiển khỏi bộ đàn accordion, trước tiên hãy chọn tên bảng trong danh sách thả xuống Panels trong thanh tra Property và sau đó nhấp vào dấu trừ (@@min).

   

6. Bạn có thể thêm bảng điều khiển khác bằng cách nhấp lại vào dấu cộng.

   Thay đổi cách các bảng được mở bằng cách sử dụng trình đơn thả xuống Sự kiện.

   Cài đặt Sự kiện kiểm soát xem các bảng có mở khi người dùng nhấp vào tab bảng điều khiển (Nhấp chuột) hay cuộn một con trỏ chuột qua tab bảng điều khiển (Chuột).

7. Đặt tùy chọn bảng khác, như mong muốn.

   Các tùy chọn accordion trong thanh tra Property không bắt buộc, và bao gồm khả năng vô hiệu hóa bất kỳ hoặc tất cả các bảng (Vô hiệu hoá) và animate cách mở và đóng các bảng điều khiển (Animate list).

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

   Để các tính năng của Spry 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 tải lên trang web.

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

   Lưu ý:

10. Bạn không thể chỉnh sửa các kiểu tương ứng cho bảng điều khiển accordion cho đến khi trang đã được lưu và Dreamweaver đã tạo ra các tệp CSS và JavaScript tương ứng.

    Để xem bảng sẽ xuất hiện như thế nào trong trình duyệt web, hãy 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 bạn muốn sử dụng để xem trước trang. Khi bạn sử dụng máy tính để xem trước một trang có tính năng tương tác yêu cầu JavaScript hoặc một chương trình khác, một số trình duyệt web, bao gồm Internet Explorer, sẽ hiển thị cảnh báo cho biết rằng bạn phải cho phép điều khiển ActiveX xem trang.

11. Đây là cảnh báo bảo mật chỉ xuất hiện khi trang được mở trên cùng một máy tính nơi trang được lưu. Nếu bạn xuất bản trang lên máy chủ web và sau đó xem nó trên kết nối Internet, lỗi này sẽ không xuất hiện cho bạn hoặc khách truy cập trang của bạn.