保存到桌面加入收藏设为首页
EasyUI
当前位置:首页 > Web技术 > EasyUI

easyui创建window

时间:2013-07-26 01:54:24   作者:梦幻小纯哥   来源:永硕E盘装饰网   阅读:886   评论:0
内容摘要:easyui创建windowCreateawindowisverysimple.WecreateaDIVmarkup:创建一个窗口是非常简单的。我们创建一个DIV标记:<divid="win"class="easyui-window"...

 

easyui创建window

 

Create a window is very simple. We create a DIV markup:

创建一个窗口是非常简单的。我们创建一个DIV标记:

<div id="win" class="easyui-window" title="My Window"

style="width:300px;height:100px;padding:5px;"> 

       Some Content.

</div> 

 

Now run your test page and you will see a window show on screen. We don't need to write any javascript code.

现在运行您的测试页面, 您将看到一个窗口显示在屏幕上。我们不需要写任何javascript代码。

 

window的效果如下:

easyui创建window 

 

If you wish to create a invisible window, remember to set a 'closed' attribute to 'true' value and you can invoke a 'open' method to open the window:

如果你想创建一个隐藏的窗口, 要设置“closed”属性值为“true,你可以调用一个“open”的方法来打开该window窗口:

<div id="win" class="easyui-window" title="My Window" closed="true"

 style="width:300px;height:100px;padding:5px;"> 

    Some Content. 

</div>

 

$('#win').window('open'); 

 

 

As a demonstration we create a login window in finally:

在最后作为一个示范, 我们创建一个登录窗口:

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

 

form登录窗口的效果如下:

easyui创建window




相关评论