EasyUI学习第二篇：基础组件(panel、window、dialog、LinkButton、easyLoader )

目标

• 理解Jquery组件之间的关系

• 理解Jquery的俩种写法

• 理解动态加载组件的方法，但不推荐使用

  *动态加载 easyloader.js*  
  *jquery.parser.js 解析标签里的class值*
  

• 学会查API以及培养调试bug的能力

Panel 面板

使用组件的方式 1.html 2.js

html实现

<div class="easyui-panel" style="width: 400px;height: 250px;"
title="我的面板" minimizable="true" maximizable="true" closable="true" collapsible="true">
    <p>panel content</p>
    <p>panel content</p>
    <p>panel content</p>
</div>

js实现

<div id="mypanel"></div>

$(function(){
    $("#mypanel").panel({
        title:'我的面板',//显示在Panel头部的标题文字
        width:400,//设置Panel的宽度
        height:250,//设置Panel的高度
        iconCls:'icon-ok',//在Panel里显示一个16x16图标的CSS类
        minimizable:true,//定义了是否显示最小化按钮
        maximizable:true,//定义了是否显示最大化按钮
        closable:true,//定义了是否显示关闭按钮
        collapsible:true,//定义了是否显示折叠按钮
        content:'<p>panel content</p><p>panel content</p><p>panel content</p>'//Panel身体的内容
    });
});

Window 窗口

依赖：

• draggable
• resizable
• panel

也就是说window的特性继承自draggable、resizable、panel，当然也就可以使用依赖的特性.

<div id="mywindow"></div>

$("#mywindow").window({
    title:"我的窗口",//窗口的标题文字
    width: 400,//定义了窗口的宽度
    height: 250,//定义了窗口的高度
    draggable:false,//定义是否窗口能被拖拽
    resizable:false,//定义是否窗口可以调整尺寸
    shadow:false,//如果设为 true， 当窗口能够显示阴影的时候将会显示阴影
    modal:true,//定义窗口是不是模态窗口,也就是子窗口打开是否可以操作父窗口，默认为false,文档有问题
    content:'我是窗口内容',//用panel中的属性,
    onOpen:function(){ //panel中的事件，Panel打开后触发
        alert('ok');
    }

});

LinkButton 链接按钮

<a href="#" id="btn"></a>  

$("#btn").linkbutton({
    iconCls:"icon-search",//按钮上的图标
    text:"easyui" //按钮的文字
});

$("#btn").linkbutton('disable');  //禁用按钮

Dialog 对话框

<div id="mydialog"></div>

$("#mydialog").dialog({
    title:'对话框',//对话框的标题文字
    width:400,
    height:250,
    toolbar:[
         {
             iconCls:"icon-add",//按钮上的图标
                 text:"添加", //按钮的文字
                 handler:function(){
                     alert('添加');
                 }
         },
         {
             iconCls:"icon-edit",//按钮上的图标
                 text:"编辑",//按钮的文字
                 handler:function(){
                     alert('编辑');
                 }
         }
    ],
    buttons:[
         {
             iconCls:"icon-ok",//按钮上的图标
                 text:"确认", //按钮的文字
                 handler:function(){
                     alert('确认');
                 }
         },
         {
             iconCls:"icon-no",//按钮上的图标
                 text:"取消",//按钮的文字
                 handler:function(){
                     alert('取消');
                 }
         }
    ]
});

案例：通过按钮控制打开或者关闭window

<a href="#" id="btn"></a>
<a href="#" id="btn2"></a>
<div id="mywindow"></div>

$("#mywindow").window({
    title:"我的窗口",//窗口的标题文字
    width: 400,//定义了窗口的宽度
    height: 250,//定义了窗口的高度
    //draggable:false,//定义是否窗口能被拖拽
    resizable:false,//定义是否窗口可以调整尺寸
    shadow:false,//如果设为 true， 当窗口能够显示阴影的时候将会显示阴影
    //modal:true,//定义窗口是不是模态窗口,也就是子窗口打开是否可以操作父窗口，默认为false,文档有问题
    content:'我是窗口内容',//用panel中的属性,
    closed:true,//定义是否关闭了窗口
    onOpen:function(){ //panel中的事件，Panel打开后触发
        //alert('ok');
    }
}); 


$("#btn").linkbutton({
    iconCls:"icon-search",//按钮上的图标
    text:"打开window" //按钮的文字
}); 

$("#btn2").linkbutton({
    iconCls:"icon-search",//按钮上的图标
    text:"关闭window" //按钮的文字
}); 

//事件绑定
$("#btn").click(function(){
     $("#mywindow").window("open");
 });

$("#btn2").click(function(){
 $("#mywindow").window("close");
});

easyLoader加载器