Data-options usage in Easyui

Data-options is a property developed by jquery Easyui in the last few versions. The controller in the control that corresponds to the index is called in the method. Because of this property, we can instantiate the component in HTML.

Child Node Property assignment value

<span style= "FONT-SIZE:14PX;" ><div class= "Easyui-dialog" style= "width:200px;height:100px"    data-options= "title: ' My Dialog ', Collapsible:true,iconcls: ' Icon-ok ', Onopen:function () {} ">    dialog content.</div></span>

The Data-options property defines the styles and contents and events of various components, such as the ability to have some properties of node in the Easyui-tree control, which cannot be implemented via HTML at the time of the instance, and must be assigned by JSON. But using the Data-options property is a lot easier.

Example:

<span style= "FONT-SIZE:14PX;" ><ul id= "Tt1" class= "Easyui-tree" data-options= "Animate:true,dnd:true" > <li> <span>folder</             span> <ul> <li data-options= "state: ' Closed '" > <span>sub Folder 1</span> <ul> <li data-options= "attributes:{' url ': ' xxxxx '}" > <span><a href= "                # ">file 11</a></span> </li> <li data-options=" attributes:{' url ': ' xxxxx '} "> <span>file 12</span> </li> <li> <span >file 13</span> </li> </ul> </li> <li data-options= "at tributes:{' url ': ' xxxxx '} ' > <span>file 2</span> </li> <li data-options= ' attrib utes:{' url ': ' xxxxx '} ' > <span>file 3</span> </li> <li id= ' 123 ' data-options= "attributes:{' url ': ' xxxxx '}" >file 4</li> <li>file 5</li> </ul> </li&gt    ; <li> <span>File21</span></li></ul></span>

effect:

Easyui is a jquery-based user interface plug-in collection.

Easyui provides the necessary functionality for creating modern, interactive, JavaScript applications. with Easyui you don't have to write a lot of code, you just need to write some simple HTML tags to define the user interface.

Easyui is a complete framework for supporting HTML5 Web pages perfectly. save time and scale for your web development. very simple but powerful.

Reference: Summary of common usage of easyui--

Copyright NOTICE: This article is the original blogger articles, reproduced please indicate the source.

Data-options usage in Easyui