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