easy Ui + Jquery 弹窗 的实现
2014-09-25 08:28
183 查看
easy Ui 的弹窗有很多种
我就来说下我实现的一种感觉用起来很方便的
首先 引用的easy ui JS
id 就是你DIV的ID
titlename 就是你窗口最上面显示的 比如 新增用户 修改用户
vwidth 和 vheight 是你弹窗的大小
我们开始看看 JS里面怎么调用
首先在调用的时候我们要把DIV样式 display=block
我就来说下我实现的一种感觉用起来很方便的
首先 引用的easy ui JS
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../js/easyUI/jquery.easyui.min.js"></script>一样还有他的样式CSS文件也要引用
<link rel="stylesheet" type="text/css" href="../js/easyUI/themes/default/easyui.css"/> <link rel="stylesheet" type="text/css" href="../js/easyUI/themes/icon.css"/>下面我们弹窗定义个DIV
<div id="win" style="display:none;"> 弹窗的内容</div>这里需要注意的是 div的样式要隐藏
function openwindow(id,titlename,vwidth,vheight){ $('#'+id).window({ width:vwidth, height:vheight, modal:true , title:titlename, collapsible:false, minimizable:false,//最小化 maximizable:false,//最大化 resizable:false }); }这是我们的JS弹窗的方法
id 就是你DIV的ID
titlename 就是你窗口最上面显示的 比如 新增用户 修改用户
vwidth 和 vheight 是你弹窗的大小
我们开始看看 JS里面怎么调用
首先在调用的时候我们要把DIV样式 display=block
document.getElementById("win").style.display="block"; openwindow('win','修改部门',300,340);同样 关闭窗口也很简单
$('#win').window('close');好啦 关于弹窗那里面的属性有很多 我就不一一说明了 可以去easy ui的官网上找找
相关文章推荐
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- easyUI布局篇使用jquery easy UI的panel和layout实现界面的自适用窗口
- jquery easy ui 实现radio单选
- Jquery Easy UI 实现页面的Loading效果(类似于Android的ProgressDialog)
- jquery ui dialog实现弹窗特效的思路及代码
- c#,jquery easy ui通过ajax实现异步加载tree
- jquery-ui实现bootstrap的modal拖拽功能,弹窗头部拖拽
- jquery easy ui datagrid 纯后台分页实现
- CSS实现覆盖弹窗(效果如JQuery-UI的Dialog)
- 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
- jquery easy ui 简单字段选择搜索实现
- jquery ui dialog实现弹窗特效的思路及代码
- jquery easy ui源码
- android UI进阶之弹窗的使用(2)--实现通讯录的弹窗效果
- jquery.blockUI.js实现上传滚动等待效果
- jquery ui sortable 实现table,row的拖动。(Make Table Rows Sortable Using jQuery UI Sortable)
- jQuery UI Datepicker的扩展控件Timepicker实现时间选择
- JQuery+JQuery ui实现的弹出窗口+遮罩层+拖动+更改大小~!