码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-08-27 16:12:57      阅读:204      评论:0      收藏:0      [点我收藏+]

标签: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功能

标签:style   blog   color   使用   io   ar   数据   div   cti   

原文地址:http://www.cnblogs.com/xiao-bei/p/3939589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!