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

zoukankan html css js c++ java

在次封装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>

查看全文

相关阅读:
hihoCoder #1078 : 线段树的区间修改
 hihoCode r#1077 : RMQ问题再临-线段树
 hihoCoder #1070 : RMQ问题再临
 hihoCoder #1068 : RMQ-ST算法（模板）
LeetCode Valid Sudoku 有效数独
 150 Evaluate Reverse Polish Notation 逆波兰表达式求值
 149 Max Points on a Line 直线上最多的点数
 148 Sort List 链表上的归并排序和快速排序
 147 Insertion Sort List 链表插入排序
 146 LRU Cache 最近最少使用页面置换算法

原文地址：https://www.cnblogs.com/hxling/p/1875254.html