Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能

LigerUI框架Tree于Tab标签动态使用，当点击Tree后动态创建Tab标签，和通常用的iframe框架功能类似

Tree中的关键代码

//Tree初始化
$("#tree1").ligerTree({
nodeWidth: 112, //Tree控件宽度
data: createData(), //Tree数据源
checkbox: false, //是否使用Checkbox
idFieldName: 'id', //绑定id
isExpand: 2, //是否展开节点 FALSE为不展开 TRUE展示所有节点 指定数字为展开指定节点
slide: false, //节点展开效果False无效果 TRUE缓慢展开效果
parentIDFieldName: 'pid', //绑定夫ID
onSelect: function (node) {//节点点击事件
var tabid = $(node.target).attr("tabid");
if (node.data.url.length < 15) return;
if (!tabid) {
//判断该TabItem是否存在，存在展开该Item
tabid = new Date().getTime();
$(node.target).attr("tabid", tabid)
}
TabAdd(tabid, node.data.text, node.data.url);
}
});

Tab动态添加节点关键代码

//左侧面板初始化
$("#accordion1").ligerAccordion({});
accordion = liger.get("accordion1");//声明面板
//添加Tab标签
function TabAdd(tabid, TabText, TabUrl) {
tab.addTabItem({
tabid: tabid,//Tab ID
text: TabText, //Tab名称
url: TabUrl//Tab链接
});
}

通过上面代码就动态使用tree和Tab控件，实习iframe功能