Thoải mái trình bày nội dung theo các kiểu Tab - Component TabShow
Hiển thị nội dung theo kiểu tab
Đối với các web-developer việc trình bày nội dung như trên không phải là kĩ thuật khó, cũng chỉ như "lấy viên sỏi trong túi ra". Nhưng đối với người sử dụng thông thường, chỉ biết sử dụng các trình soạn thảo nội dung như ms-word thì việc trình bày trang nội dung như trên là nằm ngoài tầm tay. Liệu có thể nào, không cần biết một chút kiến thức về html mà vẫn dễ dàng tạo được các trang nội dung sinh động như trên không? Câu trả lời là có thể.
Với hệ quản trị nội dung Bitrix, sử dụng thành phần trực quan TabShow (visual component) chỉ trong vòng 1 phút một người dùng thông thường có thể tạo ra các trang nội dung phức tạp. Thậm chí hiển thị nhiều tab trên một trang, tab lồng trong tab...
Thành phần trực quan TabShow được phát triển dựa vào kĩ thuật Component Engine kết hợp với việc sử dụng linh hoạt các khu vực ghép [Include area].
Hướng dẫn sử dụng TabShow:
Bước 1: Tạo trang nội dung sử dụng trình soạn thảo trực quan HTML:
Trong trình soạn thảo trực quan HTML, ấn vào bảng chọn Component. Trong danh mục các component chọn Vportal. Một danh sách dạng cây các component của danh mục này sẽ hiện ra. Nhấp chuốt vào biểu tượng component TabShow, kéo thả vào khung soạn thảo ở vị trí mong muốn.
Kéo TabShow vào khung soạn thảo
Bước 2: Thiết lập các tham số cho tab:
Ấn chọn component TabShow, ấn vào cửa sổ thuộc tính để thiết lập thuộc tính. Bạn lần lượt gõ nhanh vào tên định danh, tên hiển thị, tên tệp chứa nội dung cho các nút tab. Bạn có thể tạo tùy thích số lượng các tab. Tên có thể đặt tùy ý, tốt nhất cứ giữ nguyên theo mặc định. Sau đó ấn Lưu để lưu lại văn bản soạn thảo. Chuyển sang bước 3 - soạn thảo nội dung cho các tab.
Thiết lập tham số cho các tab (Click để xem ảnh phóng to)
Bước 3: Soạn thảo nội dung các tab:
Trở lại khu vực xuất bản, tìm đến trang bạn vừa tạo. Lúc này đã hiện các tab với tên hiển thị, nhưng các tab đều chưa có nội dung. Ấn vào nút Content hoặc Design để chuyển sang chế độ soạn thảo nội dung trực quan trên site. Chọn tab cần soạn thảo nội dung.
Chế độ soạn thảo trực quan trên site
Nhấp vào biểu tượng soạn thảo nội dung, và bắt đầu soạn nội dung cho tab đã chọn:
Soạn thảo nội dung tab trong trình soạn thảo trực quan HTML
Như vậy với các bước hoàn toàn trực quan, không phải động chạm một chút nào đến các mã lệnh HTML nhưng người sử dụng thông thường vẫn có thể tạo được các trang nội dung sinh động theo kiểu tab. Hơn nữa còn tạo nhiều tab lồng nhau. Vì trong nội dung tab ta hoàn toàn có thể lặp lại các bước như trên để tạo một tab mới.
Thông số component TabShow.
1. Vị trí component: /bitrix/components/vportal/tab.show
2. Mẫu các nút bấm cho tab:
/bitrix/templates/id_template/components/vportal/tab.show/id_tab_template
Trungnt-bitrixsoft.vn
