easyUI 我的第一个window

最新推荐文章于 2025-11-26 17:11:00 发布

最新推荐文章于 2025-11-26 17:11:00 发布 · 70 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用EasyUI框架创建窗口组件，包括基本窗口、隐藏窗口及登录窗体的实现方式，无需编写额外的JavaScript代码。

@author YHC

创建一个window 非常简单,我们创建一个DIV标记.

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

现在运行你的测试页面,你会看见一个 window 显示在你的屏幕上,我们不需要写任何的javascript代码.

如果你希望创建一个隐藏的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');

最为最后的示例我们创建一个登录窗体:

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