Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能_.NET_编程开发_程序员俱乐部

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功能