<Cthuvien:tab>

thông tin

Controls thay thế: BSSTab

Mô tả

<Cthuvien:tab> là control tab điều hướng của hệ thống (kế thừa từ System.Web.UI.WebControls.Label, render <span> html).

Khi người dùng click vào tab, control sẽ gọi script P_TAB(this) ở phía client để tự động quản lý việc ẩn/hiện các panel nội dung tương ứng và thay đổi trạng thái (active/inactive) của các tab cùng nhóm.

Control tự động phân giải (resolve) các đối tượng liên quan (tab cha, panel hiển thị, tab chứa) bằng cách tra cứu control trên Page thông qua hàm form.Fc_CTR, từ đó tạo ra cấu trúc tab động mà không cần phải viết thêm JS.

Thuộc tính

Thuộc tính chung

Tên	Kiểu	Mặc định	Có thể có	Mục đích	Thuộc tính mới	Ghi chú
id	string			Định danh của tab. Theo quy ước chuẩn nên đặt ID dạng: T_[tên panel]_[số thứ tự]		Dùng để resolve PaId, CeId, TaId.
Text	string			Nội dung văn bản hiển thị trên tab		Kế thừa từ Label
CssClass	string	"css_tab_ngang_de"		Lớp CSS cho tab. Ký tự đuôi (_de hoặc _ac) biểu thị trạng thái inactive/active		Nếu không khai báo, tự động gắn css_tab_ngang_de

Chức năng

Tên	Kiểu	Mặc định	Có thể có	Mục đích	Thuộc tính mới	Ghi chú
paId	string		ID của panel nội dung	Định danh của panel cần hiển thị khi click vào tab này		Nếu để trống, hệ thống sẽ tự sinh bằng cách bỏ ký tự đầu tiên của ID tab (vd: T_pn_1 -> _pn_1).
hinh	string		File path	Tên file hình ảnh/icon nền của tab		Sẽ được tự động biên dịch lại đường dẫn thành dạng url tuyệt đối và set background cho thẻ <td> cha chứa nó.
ham	string		Tên hàm JS	Tên hàm callback JS mở rộng được gọi tới khi click chuyển đổi tab

Khởi tạo

Control được khai báo trong file .aspx như một server control:

<Cthuvien:tab ID="T_pn_1" runat="server" Text="Thông tin chung" paId="pn_1" />

Trước khi render ra client, function OnPreRender sẽ tự động chuyển các thuộc tính server-side thành HTML attribute để JavaScript phía client xử lý.

Các attribute luôn được gắn:

Attribute	Giá trị	Mô tả
ten_goc	ID	Lưu ID gốc của control (vd: T_pn_1).
PaId	ClientID của panel	Tính theo ID b_s (b_s là paId, nếu paId rỗng thì b_s = ID bỏ 1 ký tự đầu). Dùng để trỏ tới thẻ div nội dung.
CeId	ClientID của control	(Có dạng C + ID bỏ 1 ký tự đầu).
TaId	ClientID của vùng tab	(Có dạng ID cắt đến dấu _ cuối cùng, vd T_pn). Nơi chứa các tab con.
ham	Giá trị ham	Chỉ render ra nếu ham có giá trị.
hinh	Đường dẫn url hình ảnh	Trỏ đến đường dẫn đầy đủ của hình sau khi resolve. Ngoài ra OnPreRender còn tự động thay đổi trực tiếp background của thẻ <td> (HtmlTableCell) bao ngoài control.
onclick	P_TAB(this);	Bắt buộc gán sự kiện click để thực thi việc chuyển tab.
class	Giá trị CssClass	Tự động gán "css_tab_ngang_de" nếu rỗng.

Hoạt động phía Client (JavaScript)

Khi click vào tab, hàm P_TAB(b_ctrId) sẽ thực hiện:

• Tìm toàn bộ các tab cùng nhóm (nằm trong container có ID là TaId).
• Xử lý trạng thái các tab khác: Đặt class của các tab khác thành trạng thái inactive (thêm hậu tố _de), và ẩn (display = 'none') các panel nội dung (PaId) của chúng.
• Xử lý tab được chọn:
  • Hiển thị panel tương ứng với tab đang click (display = '' cho PaId).
  • Đổi CSS class của tab hiện tại sang trạng thái active (thêm hậu tố _ac).
  • Đổi lại ảnh background nền (background-image) nếu tab có khai báo thuộc tính hinh.
• Chạy hàm tùy chọn mở rộng: Nếu tab có thuộc tính ham, gọi eval(ham).

Ví dụ

Khai báo HTML/XML:

<table>
    <tr>
        <td>
            <Cthuvien:tab ID="T_pn_1" runat="server" Text="Thông tin chung" />
        </td>
        <td>
            <Cthuvien:tab ID="T_pn_2" runat="server" Text="Chi tiết" />
        </td>
    </tr>
</table>
<div id="_pn_1" runat="server">
    <!-- Nội dung tab 1 -->
</div>
<div id="_pn_2" runat="server" style="display:none">
    <!-- Nội dung tab 2 -->
</div>

Mã HTML sinh ra (Client):

<td>
    <span 
        id="ctl00_MainContent_T_pn_1" 
        class="css_tab_ngang_de" 
        ten_goc="T_pn_1" 
        PaId="ctl00_MainContent__pn_1" 
        TaId="ctl00_MainContent_T_pn" 
        onclick="P_TAB(this);">Thông tin chung</span>
</td>