001. EsayUI系列之easyui-window

    Esay-UI是简单易用功能强大的轻量级WEB前端JavaScript框架,使用它可减少大量的页面js的开发。

<一>窗口插件 easyui-window

    这个插件使用非常简单,只需在一个div标签里加上easyui-window即可。

当然,首先你的把jquery相关js文件、css文件引入才能使用,需要引入:

jquery-1.4.4.min.js

jquery-easyui-1.2.2/jquery.easyui.min.js

jquery-easyui-1.2.2/themes/default/easyui.css

jquery-easyui-1.2.2/themes/icon.css

前2个js文件是jquery基本js文件,后2个css是jquery自带的样式。

demo1 :

<html>
  <head>
 <%@ include file="/JS/jquery/inc/linkjs.inc"%>
    <title>easyui-window</title>
  </head>
  <body>
<div id="tt" class="easyui-window" style="width:500px;height:250px;">
我的地盘我做主!

</div>
  </body>
</html>

效果如下:

  001. EsayUI系列之easyui-window_第1张图片

demo2

如果要创建一个隐藏窗口,将closed属性设为true ;要显示该窗口调用 open方法即可。

<div id="tt" class="easyui-window" closed="true"  style="width:500px;height:250px;">
我的地盘我做主!

</div>

 窗口显示: $('#tt).window('open')。

 

easyui-window常用属性
modal:是否生产模态窗口 true--是 false--否;
shadow:是否显示窗口阴影 true--是 false--否;
title:该对话框标题文本 ,默认:New Dialog;
minimizable:True时可显示最小化按钮。默认false
maximizable:True时可显示最大化按钮。默认false
resizable:True时能重绘对话框大小。默认false
toolbar:该工具栏置于对话框的顶部,每个工具栏包含:text, iconCls, disabled, handler等属性。
buttons:这个按钮置于对话框的底部,每个按钮包含:text, iconCls, handler等属性。
    走的太快了,停一停,让灵魂跟上脚步。
          在物欲时代,消费占据了感官,也吞噬了个体生活。
******************* 我是阿木 *******************

你可能感兴趣的:(JavaScript,jquery,Class,dialog,工具,include)