使用EasyUI手动创建Tabs选项卡

如果有学过JaueryEasyUI的人应该知道里面有一个功能可以帮助我们来进行创建选项卡，下面给大家介绍一种手动添加tabs选项卡。这是基于EasyUI基础上写的，下面开始介绍实现方法。

1.首先引用文件

<link href="EasyUI/themes/material/easyui.css" rel="stylesheet" />
    <link href="EasyUI/themes/icon.css" rel="stylesheet" />--图片样式
    <script src="EasyUI/jquery.min.js"></script>
    <script src="EasyUI/jquery.easyui.min.js"></script>
    <script src="EasyUI/locale/easyui-lang-zh_CN.js"></script>--使用语言

2.根据API上面说的要绑定树形控件，绑定的不是用div而是使用ul.

<ul id="tt" class="easyui-tree"></ul>这里我们不要轻易改变class里面的内容，因为这是别人已经写好的，改变的话有可能实现不了你想要的那种效果。

3.给树形控件绑定节点，这里使用的是对象数组进行绑定数据源。

var json = [{
            "id": 1,
            "text": "C#",
            "children": [{
                "id": 11,
                "text": "HTML",
                "attributes": {
                    "href":"Html.html"
                }
            },
            {
                "id": 12,
                "text": "DIV+CSS",
                "attributes": {
                    "href": "CSS.html"
                }
            }]
        },
          {
              "id": 2,
              "text": "PHP",
              "attributes": {
                  "href": "php.html"
              }
          },
          {
              "id": 3,
              "text": "JAVA",
              "attributes": {
                  "href": "java.html"
              }

}]

上面代码表示我绑定了3个同级节点节点，C#，PHP，JAVA，在C#，下面又绑定了2个子节点HTML，DIV+CSS，

其中 children: 一个节点数组声明了若干节点。

attributes: 被添加到节点的自定义属性。

我在里面添加一个了链接地址属性，特别注意的是不要写错任何字母，要不然会不显示的。

你以为这样就完成了吗？没有，我们只是写好了数据源并没有绑定在控件上，下面绑定在控件上。

$("#tt").tree({
data: json

});，tree表明控件类型

为实现效果。

4.下面我要点击每个节点都会找到相应的路径和对应的内容。

$("#tt").tree({

data: json,

//每个节点对应的的点击事件

                onClick: function (node) {
                    //得到文本值
                    var title = node.text;
                    //得到每个节点下面attributes的href路径
                    var path = node.attributes.href;

//进行判重，如果不进行判重会出现你多次点击同一个节点会出来很多相同的选项卡

//“exists”是根据title进行判断的，如果存在次此项就会直接找到此项，如果不存在进行添加选项卡

});

5.向Div1里面填充选项卡

data-options="fit:true" 表示充满div

最终结果。

学习EasuUI比较方便的是按照API上面的教程，那是比较有效率的。

以后还会持续更新关于EasyUI这方面的知识，请随时关注！！！

另外这里面有些东西比较说的模糊，可以提出来你的疑问，看到的话会回复的。最后谁知道是如何在博客上面上传视频？？？？

谢谢！！！。

使用EasyUI手动创建Tabs选项卡

猜你喜欢