easyUI的简单窗口应用

easyUI帮助开发人员省去了js代码的编写，提高了效率

首先，我们要引入easyUI所需要的js文件和css样式

1.因为easyUI是基于jquery的前段框架，所以引入jquery

<script type="text/javascript"

src="${path}/jsp/admin/rpage/dept/js/jquery-1.4.4.min.js"></script>

2.引入基础的样式文件

<link rel="stylesheet" type="text/css"

href="${pageContext.request.contextPath }/js/jquery-easyui-1.4.1/themes/icon.css">

<link rel="stylesheet" type="text/css"

href="${pageContext.request.contextPath }/js/jquery-easyui-1.4.1/ext/portal.css">

<link rel="stylesheet" type="text/css"

href="${pageContext.request.contextPath }/css/default.css">

3.然后引入easyui的js包

<script type="text/javascript"

src="${pageContext.request.contextPath }/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>

4.引入easyui的中文编译包

<script type="text/javascript"

src="${pageContext.request.contextPath }/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"  ></script>

5.引入控件js文件

<script type="text/javascript"

src="${pageContext.request.contextPath }/js/jquery-easyui-1.4.1/ext/jquery.portal.js"></script>

<script type="text/javascript"

src="${pageContext.request.contextPath }/js/jquery-easyui-1.4.1/ext/jquery.cookie.js"></script>

 

然后我们在代码中编写一个简单窗口

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

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

　　Some Content.

</div>

这里默认的是隐藏的窗口，若希望窗口显示出来，则将closed属性设置为 true；

若希望展现点击按钮弹窗的样式；则可以在按钮的点击事件中添加一下代码：

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

如果希望设置工具栏；

collapsible:false,

minimizable:false,

maximizable:false

这样窗口就只剩下关闭窗口按钮。
...慢慢补充