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

在次封装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 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>
相关阅读:
第123天：移动web开发中的常见问题
 第122天：移动端开发常见事件和流式布局
 第121天：移动端开发基本知识
 第120天：移动端-Bootstrap基本使用方法
 第119天：移动端：CSS像素、屏幕像素和视口的关系
 加入收藏设为首页代码收藏本页的代码和收藏本站的代码设为首页代码
 JQuery和UpdatePannel的问题
 JS中apply与call的用法
 Sumlime text3 安装包、汉化包、注册码
 使用WITH AS提高性能简化嵌套SQL
原文地址：https://www.cnblogs.com/hxling/p/1875254.html