`
stworthy
  • 浏览: 522489 次
  • 来自: ...
社区版块
存档分类
最新评论

jquery-easyui中创建Window窗口

阅读更多

jquery-easyui中创建窗口很简单,建立一个DIV就行了:

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

这样不用写一行JS代码窗口就会出现在屏幕上:

如果想建立一个隐藏的窗口,则需要设置属性closed="true",需要打开时调用open方法就行:

$('#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>

效果图如下:

 

原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:win1

 

分享到:
评论
9 楼 madsion8875 2010-10-13  
good,nice girl
8 楼 zhaoy_info 2010-07-16  
请问:关于easyui --window,点最小化后怎么停靠在当前页面?貌似一点最小化后就没了?
7 楼 qqgoodluck 2010-04-19  
window在使用过程中发现如下问题:
1.iframe中使用window时,只能在iframe内层弹出,这样就限制了窗口的大小,目前的解决办法是把window放在外层构造。
2.windows在拖放时,如果拖到浏览器外,再次打开时,由于没有TITLE,造成了窗体无法拖动,目前的解决办法是手动计算窗体位置,再次打开时重新定位。希望作者在源码中处理一下,防止窗体拖出浏览器之外的情形发生。同时在记住上次位置的情况下,判断窗体的位置是否合理。
3.同样是上面的情形,将窗体拖到浏览器外时,再往回拖时,会出现一个虚线边框,且会多次出现,这个问题和截图已经邮件给作者(可否回复一下:))。
4.当我在iframe内部构造window时,如果不是以modal模式构造,当鼠标焦点放在了底层的grid上时,会出现window无法拖动的BUG。

希望作者能及时充实、完善API文档,同时出一个完整的示例。
6 楼 chenzhou 2010-04-07  
bnmcvzx 写道
如果window dom是在layout布局内部,弹出的窗口位置是相对于布局定位的,但定位的算法却是相对于浏览器窗口的,所以窗口只能在layout内部拖动,出现的位置也不太对。dom移到layout外部可以解决,如果框架里面能处理也许会更方便。

谢谢了!
5 楼 bnmcvzx 2010-03-25  
如果window dom是在layout布局内部,弹出的窗口位置是相对于布局定位的,但定位的算法却是相对于浏览器窗口的,所以窗口只能在layout内部拖动,出现的位置也不太对。dom移到layout外部可以解决,如果框架里面能处理也许会更方便。
4 楼 stworthy 2010-03-02  
可以,DIV里面包一个IFRAME就好了。
3 楼 sogo1986 2010-03-02  
能让这个window 支持iframe吗??
2 楼 stworthy 2010-02-05  
可以,用href属性就会加载远程页面内容。
1 楼 fnet 2010-02-05  
window 是否可以用远程地址?
看了文档里面没有标识。

相关推荐

    jQuery EasyUI 1.5.1 中文API文档

    jQuery EasyUI 1.5.1版本更新内容:Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在窗体高度...

    jQuery EasyUI 1.4.3 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.4.3版本更新内容: Bug(修复) textbox:修复“setText”方法不接受值为0的问题; timespinner:修复在使用IE11时点击空文本框时出错的问题; tabs:修复“update”方法只能更新面板正文的问题...

    jQuery EasyUI 1.2.4 API 中文文档.chm

    本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...

    jQuery EasyUI 1.3 API 中文教程

    在panel中创建复杂布局 创建折叠面板 创建Tabs标签 创建和动态添加tabs组件 创建自动播放tab 创建XP风格左侧面板 数据表格 转换table到数据表格 数据表格添加分页组件 数据表格添加查询功能 ...

    jQuery+EasyUI+1.2.4+API+中文文档(标记).rar

    jQuery+EasyUI+1.2.4+API+中文文档,有时间好好看一下,目录如下: Base 基础 Documentation 文档 Parser 解析器 EasyLoader 加载器 Draggable 可拖拽 Droppable 可释放 Resizable 可调整尺寸 Pagination...

    Jquery_EasyUI教程

    o 6.12 DataGrid中合并单元格 41 • 7 窗口 44 o 7.1 我第一个窗口 44 o 7.2 自定义窗口工具 45 o 7.3 Window和Layout 46 o 7.4 创建对话框 47 • 8 Tree 50 • 8.1从标记创建tree 51 • 8.2创建异步Tree 52...

    jQuery +EasyUI+ API+中文

    1.BASE基础 2.LAYOUT布局 3.MENU AND BUTTON 菜单和按钮 4.FORM表单 5.WINDOW 窗口 6.DATAGRID AND TREE 数据表格和树

    jQuery_EasyUI教程

    o 6.12 DataGrid中合并单元格 41 • 7 窗口 44 o 7.1 我第一个窗口 44 o 7.2 自定义窗口工具 45 o 7.3 Window和Layout 46 o 7.4 创建对话框 47 • 8 Tree 50 • 8.1从标记创建tree 51 • 8.2创建异步Tree 52 • 8.3 ...

    jQuery EasyUI window窗口使用实例代码

    本文通过实例代码给大家介绍了jQuery EasyUI window窗口使用功能,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    jQuery EasyUI 1.5.1 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    jQuery EasyUI 1.5.1版本更新内容: Bug(修复) datagrid:修复在调用“updateRow”方法之后选中和复选行标志丢失的问题; tabs:修复在调用“update”方法的时候导致标签栏工具错位的问题; window:修复在...

    jquery_easyui_cn文档

    9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel(面板) 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 11 Tabs(标签) 30 11.1 实例 30 11.2 参数 32 11.3 事件 32 ...

    jquery_easyui_cn 中文例子 和详解

    9 Window(窗口) 23 9.1 实例 23 9.2 参数 25 9.3 事件 26 9.4 方法 26 10 Panel(面板) 26 10.1 实例 26 10.2 参数 28 10.3 事件 29 10.4 方法 29 11 Tabs(标签) 30 11.1 实例 30 11.2 参数 32 11.3 事件 32 ...

    jQuery easyUI的教程

    jQuery easyUI 培训 教程 1 Accordion(可折叠标签) 2 1.1 实例 2 1.2 参数 3 2 DateBox(日期框) 4 2.1 实例 4 2.2 参数 6 2.3 事件 6 2.4 方法 6 3 ComboBox(组合框) 7 3.1 实例 7 3.2 参数 9 3.3 事件 9 3.4 ...

    解决easyui的弹框越界问题

    解决easyui的弹框越界问题 里面的包含的js和css文件自己可以用easyui官方的文件

    easyUI 事件列表

    1、div easyui-window 生成一个window窗口样式。 属性如下: 1)modal:是否生成模态窗口。true[是] false[否] 2)shadow:是否显示窗口阴影。true[显示] false[不显示] 2、div easyui-panel 生成一个面板。 属性...

    给Easyui-Datebox设置隐藏或者不可用的解决方法

    最近我在做一个安全监测系统,选择了用easyui进行搭建,easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码,功能上需要加一些样式。下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的...

    Jquery插件 easyUI属性汇总

    CSS类定义:1、div easyui-window 生成一个window窗口样式。 属性如下: 1)modal:是否生成模态窗口。true[是] false[否] 2)shadow:是否显示窗口阴影。true[显示] false[不显示]2、div easyui-panel 生成一个...

    增强用户体验友好性之jquery easyui window 窗口关闭时的提示

    我的弹窗是这么写的 代码如下: $(‘#aa’).click(function(){ //按钮单击事件 $(‘#w’).window({//窗口初始化 title:’随便点’,width:400,height:300,iconCls:’icon_add’, //重要的部分 onBeforeClose:function...

Global site tag (gtag.js) - Google Analytics