EasyUI my first window

@ Author YHC

Creating a window is very simple. We create a DIV tag.

[Html]
<Div id = "win" class = "easyui-window" title = "My Window" style = "width: 300px; height: 100px; padding: 5px;">
Some Content.
</Div>

<Div id = "win" class = "easyui-window" title = "My Window" style = "width: 300px; height: 100px; padding: 5px;">
Some Content.
</Div> run your test page now and you will see a window on your screen. We do not need to write any javascript code.

 

If you want to create a hidden window, remember to set the 'closed 'attribute to true. You can call the 'open' method to open a window.

[Html]
<Div id = "win" class = "easyui-window" title = "My Window" closed = "true" style = "width: 300px; height: 100px; padding: 5px; ">
Some Content.
</Div>

<Div id = "win" class = "easyui-window" title = "My Window" closed = "true" style = "width: 300px; height: 100px; padding: 5px; ">
Some Content.
</Div> [javascript] view plaincopyprint? $ ('# Win'). window ('open ');

$ ('# Win'). window ('open'); the final example is to create a logon form:

[Html]
<Div id = "win" class = "easyui-window" title = "Login" style = "width: 300px; height: 180px;">
<Form style = "padding: 10px 20px 10px 40px;">
<P> Name: <input type = "text"> </p>
<P> Pass: <input type = "password"> </p>
<Div style = "padding: 5px; text-align: center;">
<A href = "#" class = "easyui-linkbutton" icon = "icon-OK"> OK </a>
<A href = "#" class = "easyui-linkbutton" icon = "icon-cancel"> Cancel </a>
</Div>
</Form>
</Div>

<Div id = "win" class = "easyui-window" title = "Login" style = "width: 300px; height: 180px;">
<Form style = "padding: 10px 20px 10px 40px;">
<P> Name: <input type = "text"> </p>
<P> Pass: <input type = "password"> </p>
<Div style = "padding: 5px; text-align: center;">
<A href = "#" class = "easyui-linkbutton" icon = "icon-OK"> OK </a>
<A href = "#" class = "easyui-linkbutton" icon = "icon-cancel"> Cancel </a>
</Div>
</Form>
</Div>

 

 
Author: yhc13429826359