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