easy Ui + Jquery 弹窗 的实现

页面导航:首页 > 网络编程 > JavaScript > easy Ui + Jquery 弹窗 的实现

easy Ui + Jquery 弹窗 的实现

来源: 作者: 时间:2016-02-21 09:50 【

easy Ui 的弹窗有很多种 我就来说下我实现的一种感觉用起来很方便的首先 引用的easy ui JS一样还有他的样式CSS文件也要引用 下面我们弹窗定义个DIV 弹窗的内容这里需要注意的是 div的样式

easy Ui 的弹窗有很多种

我就来说下我实现的一种感觉用起来很方便的

首先 引用的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>
一样还有他的样式文件也要引用


  
下面我们弹窗定义个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的官网上找找







Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<