页签

页签控件用于在同一个区域内切换显示多个内容页。

属性

autoheight

• 说明：自动调高
• 类型：boolean
• 默认值：true

可选值

值	说明
true	开启
false	关闭

示例

"autoheight":true

---

sg-list

• 说明：页签列表配置
• 类型：Array

sg-list 参数说明

参数名	类型	必填	说明
key	string	是	页签文字
code	string	是	页签编码
pageid	string	否	页面 id，支持 Get 传参（与 url 二选一）
url	string	否	页签 iframe 页面（与 pageid 二选一）
scrolling	boolean	是	是否支持滚动
active	boolean	是	页签默认活动状态

示例

"sg-list":[
    {
        "key":"这是页签A",
        "code":"tab_01",
        "pageid":"608&aaa=123",
        "scrolling":false,
        "active":true
    }
]

---

sg-loaddata

• 说明：自动渲染页签
• 类型：boolean
• 默认值：true

可选值

值	说明
true	开启
false	关闭

示例

"sg-loaddata":true

方法

renderTabBox

渲染页签。

语法

renderTabBox(id, list, params)

参数

参数名	类型	必填	说明
id	string	是	页签 id
list	Array	是	页签列表
params	Object	是	页签参数

list / params 参数说明

参数名	类型	必填	说明
pageid	string	否	页面 id，支持 Get 传参（与 url 二选一）
url	string	否	页签 iframe 页面（与 pageid 二选一）
key	string	是	页签文字
code	string	是	页签编码
scrolling	boolean	是	是否支持滚动
active	boolean	是	页签默认活动状态

示例

// 渲染包含多个页签的页签容器
var tabList = [
    {
        pageid: "user_info_page",
        key: "用户信息",
        code: "user_info",
        scrolling: false,
        active: true
    },
    {
        pageid: "order_history_page",
        key: "订单历史",
        code: "order_history",
        scrolling: true,
        active: false
    }
];

var tabParams = {
    style: "height:500px"
};

renderTabBox("user_tab_container", tabList, tabParams);

---

addOneTab

添加页签。

语法

addOneTab(id, params)

参数

参数名	类型	必填	说明
id	string	是	页签 id
params	Object	是	页签参数

params 参数说明

参数名	类型	必填	说明
pageid	string	是	页面 id
key	string	是	页面名称
code	string	是	页面编码
scrolling	boolean	是	是否显示滚动条
active	boolean	是	活动状态

示例

// 动态添加一个新的页签
var newTabParams = {
    pageid: "product_detail&productId=12345",
    key: "产品详情",
    code: "product_12345",
    scrolling: false,
    active: true
};

addOneTab("main_tab_container", newTabParams);

---

displayOneTab

页签显示操作。

语法

displayOneTab(id, code, index, mode)

参数

参数名	类型	必填	说明
id	string	是	页签容器 id
code	string	否	页签 code（code 和 index 二选一）
index	number	否	页签 index（code 和 index 二选一）
mode	string	是	操作模式：remove（移除）、show（显示）、hide（隐藏）

示例

// 隐藏指定页签
displayOneTab("main_tab_container", "user_info", null, "hide");

// 显示指定页签
displayOneTab("main_tab_container", "user_info", null, "show");

// 移除指定页签（无法恢复）
displayOneTab("main_tab_container", "temp_tab", null, "remove");

// 使用 index 参数隐藏页签
displayOneTab("main_tab_container", null, 2, "hide");

---

findTabBoxObj

获取页签里面的对象。

语法

findTabBoxObj(id, selector, code, index)

参数

参数名	类型	必填	说明
id	string	是	页签容器 id
selector	string	是	jQuery 选择器
code	string	否	页签 code（code 和 index 二选一）
index	number	否	页签 index（code 和 index 二选一）

示例

// 获取指定页签内的表单控件
var usernameInput = findTabBoxObj("user_tab_container", "#username", "user_info", null);
usernameInput.val("张三");

// 获取指定页签内的按钮并绑定事件
var saveButton = findTabBoxObj("user_tab_container", ".save-btn", "user_info", null);
saveButton.click(function() {
    console.log("保存用户信息");
});

// 使用 index 参数获取页签内的元素
var emailInput = findTabBoxObj("user_tab_container", "#email", null, 0);
emailInput.val("user@example.com");

---

getTabBoxPage

获取内嵌页面。

语法

getTabBoxPage(id, code, index)

参数

参数名	类型	必填	说明
id	string	是	页签容器 id
code	string	否	页签 code（code 和 index 二选一）
index	number	否	页签 index（code 和 index 二选一）

示例

// 获取指定页签的内嵌页面对象并调用其方法
var userTabPage = getTabBoxPage("main_tab_container", "user_info", null);
if (userTabPage && typeof userTabPage.refreshData === 'function') {
    userTabPage.refreshData();
}

// 获取页签页面并访问其属性
var orderTabPage = getTabBoxPage("main_tab_container", "order_history", null);
if (orderTabPage) {
    console.log("当前页签状态:", orderTabPage.pageStatus);
}

// 使用 index 参数获取页签页面
var thirdTabPage = getTabBoxPage("main_tab_container", null, 2);
if (thirdTabPage && typeof thirdTabPage.loadData === 'function') {
    thirdTabPage.loadData();
}

---

pageBoxAutoHeight

自动调整 iframe 高度（子页面调用）。

语法

pageBoxAutoHeight()

示例

// 在页签内的子页面中调用，自动调整 iframe 高度以适应内容
$(document).ready(function() {
    // 页面内容加载完成后调整高度
    pageBoxAutoHeight();

    // 当页面内容发生变化时再次调整高度
    $("#expand-content").click(function() {
        // 展开更多内容...
        pageBoxAutoHeight();
    });
});