These two days to see the next Easyui teaching first talk about some of their own small understanding it!
----also encountered a problem in using Easyui:
Uncaught Typeerror:cannot call method ' offset ' of undefined//for method declaration ...
Later on Baidu search related issues discovered, this is Easyui's package has been modified to lead to some styles in addition to the problem of the wrong ...
1. Introduction of Easyui Main documents:
<script type= "Text/javascript" src= "Easyword/jeasyui/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" src= "Easyword/jeasyui/jquery.easyui.min.js" ></script>
<script type= "Text/javascript" src= "Easyword/jeasyui/locale/easyui-lang-zh_cn.js" ></script>
<link href= "Easyword/jeasyui/themes/default/easyui.css" rel= "stylesheet"/>
<link rel= "stylesheet" type= "Text/css" href= "Easyword/jeasyui/themes/icon.css"/>
2. First layout according to: North (Northern), South (southern), East (east), West (west), center (middle)
Cases:
<body class= "Easyui-layout" >
<div data-options= "region: ' Northern ', title: ' North title ', Split:true" style= "height:100px;" ></div>
<div data-options= "region: ' Nan ', title: ' Down South title ', Split:true" style= "height:100px;" ></div>
<div data-options= "region: ' East ', Iconcls: ' Icon-reload ', title: ' Right East ', Split:true ' style= ' width:100px;" ></div>
<div data-options= "region: ' West ', title: ' Levocetirizine West ', split:true" style= "width:100px;" ></div>
<div data-options= "region: ' Center ', title: ' Center title '" style= "Padding:5px;background: #eee;" ></div>
</body>
I didn't see it in the manual when I was writing a paging plugin. Property: Layout: Paging control layout definition, layouts options can contain one or more values
1.list (page display bar list), 2.sop (page button split line), 3.first (home button), 4.prev (Previous button),
5. Next (Next button), 6.last (last button), 7.refresh (refresh button), 8. (Manually enter the input box for the current page),
9.links (number of pages link)
For example: <div id= "pp" class= "easyui-pagination" data-options= "total:1000,pagesize:10" style= "background: #efefef; border:1px solid #ccc; " ></div>
The effect is as follows:
Use the above layout: links inside to change style
3. The use of the Data-options attribute that must be known (through which we can instantiate the Easyui component can be fully written to HTML) for example:
The results are as follows:
4. Easyui Component properties can also be written to the tag.
<div id= "P" class= "Easyui-panel" title= "My Panel" style= "width:500px;height:150px;padding:10px;" iconcls= "Icon-save" closable= "true" collapsible= "true" minimizable= "true" maximizable=true> is equivalent to:
<div id= "P" class= "Easyui-panel" title= "My Panel" data-options= "Width:500px;height:150px;padding:10px;background : #fafafa; " iconcls= "Icon-save" closable= "true"
----above is the class notation, the following is the JS notation such as:
<div id= "Login" >
<p> account: <input class= "Easyui-numberbox" id= "manager" type= "text" name= "name" value= "/></p>
<p> Password: <input class= "Easyui-numberbox" id= "managerpass" type= "password" name= "name" value= ""/></p>
</div>
First give Div an ID ("login")
Just getting started with Easyui
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
