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

插件代码：

 

$.fn.hWindow  =   function (options){
     var  defaults  =  {
        width:  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,width: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="提交" οnclick=""> ' ;
             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/archive/2010/11/11/1875254.html