Manually create Tabs with EasyUI

If you have learned JaueryEasyUI, you should know that there is a function in it that can help us create tabs. Here is a way to manually add tabs. This is written on the basis of EasyUI, and the implementation method is introduced below.

1. Cite the file first

<link href="EasyUI/themes/material/easyui.css" rel="stylesheet" />
    < link  href =" EasyUI/themes/icon.css " rel =" stylesheet " / > --image style
    <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 >--use language

2. According to the above API, to bind the tree control, the binding is not to use div but to use ul.

<ul id="tt" class="easyui-tree"></ul>Here we don't want to change the content of the class easily, because this is already written by others, if you change it, it may not be able to achieve what you want Effect.

3. Bind the node to the tree control. Here, the object array is used to bind the data source.

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"
              }

}]

The above code means that I have bound 3 nodes of the same level, C#, PHP, JAVA, and in C#, I have bound 2 child nodes HTML, DIV+CSS,

Where children: A node array declares several nodes.

attributes: Custom attributes to be added to the node.

I added a link address attribute in it, paying special attention not to write any letters wrong, otherwise it will not be displayed.

Did you think this was done? No, we just wrote that the data source is not bound to the control, and the following is bound to the control.

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

});, tree indicates the control type

to achieve the effect.

4. Below I want to click on each node to find the corresponding path and corresponding content.

$("#tt").tree({

data: json,

//The click event corresponding to each node

                onClick: function (node) {
                    //Get the text value
                    var title = node.text;
                    //Get the href path of the attributes under each node
                    var path = node.attributes.href;

//To judge the weight, if you don't judge the weight, it will appear that if you click the same node multiple times, a lot of the same tabs will appear

//"exists" is judged according to the title. If this item exists, it will find this item directly. If it does not exist, add a tab

});

5. Fill Tabs into Div1

data-options="fit:true" means fill the div

Final Results.

It is more convenient to learn EasuUI by following the tutorial on the API, which is more efficient.

We will continue to update the knowledge about EasyUI in the future, please keep an eye on it! ! !

In addition, some of the things here are relatively vague, you can ask your questions, and if you see it, you will reply. In the end who knows how to upload videos on blogs? ? ? ?

Thanks! ! ! .

Manually create Tabs with EasyUI

Guess you like