在次封装easyui 的window插件,便于简化操作

插件代码:

$.fn.hWindow = function(options){
    
var defaults = {
         
500,                //宽度
        height: 400,            //高度
        iconCls: '',            //图标class
        collapsible: false,        //折叠
        minimizable: false,        //最小化
        maximizable: false,        //最大化
        resizable: false,        //改变窗口大小
        title: '窗口标题',        //窗口标题
        modal: true,            //模态    
        submit: function () {
            alert(
'写入执行的代码。');
        },
        html: 
''
    }
    
    
var options = $.extend(defaults,options);
    
var html = options.html;
    $(
'#w').window({title:options.title,options.width,height:options.height,content:buildWindowContent(html,options.submit),
        collapsible:options.collapsible,minimizable:options.minimizable,maximizable:options.maximizable,
        modal:options.modal,iconCls:options.iconCls
    }).window(
'open');
    
    
function buildWindowContent(contentHTML,fn)
    {
        
var centerDIV =    $('<div region="center" border="false" style="padding:5px;"></div>').html(contentHTML);

        $(
'<div class="easyui-layout" fit="true"></div>')
        .append(centerDIV)
        .append(
'<div region="south" border="false" style="padding-top:5px;height:40px; overflow:hidden; text-align:center;background:#fafafa;border-top:#eee 1px solid;">  <a iconCls="icon-ok">确定</a><a iconCls="icon-cancel">取消</a></div>')
        .appendTo($(
'#w').empty())
        .layout();

        $(
'.easyui-layout a[iconCls]').linkbutton();

        $(
'a[iconCls="icon-cancel"]').click(function(){
            $(
'#w').window('close');
        });

        $(
'a[iconCls="icon-ok"]').unbind('click').click(fn);
    }

}

可以将上面的代码保存到一个JS文件中,便于以后使用时直接引入即可,我在例子将此代码保存为 jQuery-easyui-window-expand.js

需要引入css和js 文件:

<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="jQuery-easyui-window-expand.js"></script>

HTML:

<input type="button" value="新窗口" id="btnOpen" >
<input type="button" value="新窗口1" id="btnOpen1" >
<input type="button" value="新窗口2" id="btnOpen2" >
<!--用于弹出窗口的DIV-->
<div id="w" ></div>

JS调用:

$('#w').hWindow();

 完整代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
  
<title> New Document </title>
  
<meta name="Generator" content="EditPlus">
  
<meta name="Author" content="疯狂秀才">
  
<meta name="Keywords" content="">
  
<meta name="Description" content="">
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script type="text/javascript" src="jQuery-easyui-window-expand.js"></script>
<script type="text/javascript">
    $(
function(){
        $(
'#btnOpen').click(function(){
            
var html = '<input type="text" id="text1" name="">';
            
var fn = function(){
                alert($(
'#text1').val());
            }
            $(
'#w').hWindow({html:html,submit:fn});
        });

        $(
'#btnOpen1').click(function(){
            
var html = '<input type="text" id="text1" name=""><input id="btn1" type="button" value="提交" onclick="">';
            
var fn = function(){
                alert(
'第二个窗口');
            }
            $(
'#w').hWindow({html:html,title:'第二个窗口',submit:fn});

            $(
'#btn1').click(function(){
                alert($(
this).prev().val());
            });
        });


        $(
'#btnOpen2').click(function(){
            
var html = '<textarea name="" rows="" cols=""></textarea><input type="checkbox" name="">';
            
var fn = function(){
                alert(
'第三个窗口');
            }
            $(
'#w').hWindow({iconCls:'icon-save',html:html,title:'第三个窗口',submit:fn});
        });
    })
  
</script>
 
</head>
<body>
<input type="button" value="新窗口" id="btnOpen" >
<input type="button" value="新窗口1" id="btnOpen1" >
<input type="button" value="新窗口2" id="btnOpen2" >
  
<div id="w" ></div>
 
</body>
</html>
原文地址:https://www.cnblogs.com/hxling/p/1875254.html