Jquery LigerUI架構學習（二）之Tree於Tab標籤實現iframe功能

標籤：style   blog   color   使用   io   ar   資料   div   cti   

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

Jquery LigerUI架構學習（二）之Tree於Tab標籤實現iframe功能