jQuery_easyUI窗口

最新推荐文章于 2023-05-18 11:07:06 发布

pseudonym_

最新推荐文章于 2023-05-18 11:07:06 发布

阅读量268

点赞数

分类专栏： JQuery 文章标签： jquery easyui window窗口对话框

本文链接：https://blog.csdn.net/pseudonym_/article/details/76407707

版权

JQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

easyUI给我们提供的窗口有：window窗口、对话框以及信息窗口。

1. window窗口
窗口控件是一个可以浮动和拖拽的面板，可以用作默认情况下的程序窗口，能够移动、调整大小和关闭。它的内容也可以通过加载静态html或者动态ajax。<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于标签之前。<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

创建：

<div id="win" class="easyui-window" title="My Window" style="width:600px;height:400px"   
        data-options="iconCls:'icon-save',modal:true">   
    Window Content    
</div>  

//modal为true，表示鼠标点击窗口外的地方无效果。modal为false，表示可以点击窗口外的地方

注意：

在页面开头加入以下语句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
可能会出现样式改变.不能正确的显示组件的外观

2. dialog对话框
该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

<div id="dd" class="easyui-dialog" title="My Dialog" style="width:400px;height:200px;"   
            data-options="title:'我的对话框',modal:true,buttons:[{text:'保存',handler:function(){}},{text:'关闭',handler:function(){}}]">
        Dialog Content.    
</div>