jquery easy ui 1.3.4 内容组件（2）

2.1、panel(面板)

panel面板是easyui里面非常基础的一个内容组件，在我们后期学的tabs (选项卡)、accordion(手风琴)这两种内容组件都依赖于panel组件。构建一个panel组件代码如下

$("#myDiv").panel({

title: "js方式的panel",

width: 300,

height: 500,

fit: true,加上这个会看不到设置面板内容

border: true,

content: "设置面板内容",

)}

2.1.1、panel其他常用属性

l  loadingMessage：在加载远程数据的时候在面板内显示一条消息。

l  href：panel内容加载地址

l  collapsible：添加收缩/显示按钮

l  closable：显示关闭按钮

l  minimized：显示最大化按钮

l  maximized：显示最小化按钮

l  closed:初始的时候是否关闭面板

2.1.2、panel-添加tools

如果我们需要给panel的头上面加上如上图的功能按钮就可以使用panel的tools属性给面板添加一个工具按钮，代码如下

tools: [{

iconCls: 'icon-add',

handler: function () {

$.messager.alert("系统提示","你点击了添加按钮");

}

}, {

iconCls: "icon-save",

handler: function () {

$.messager.alert("系统提示","你点击了保存按钮");

}

}]

2.2、tabs(选项卡)

同过依赖关系,我们可以得知tabs依赖panel与linkbutton。说明tabs同样能使用panel属性及方法，tabs的add方法是给他tabs添加一个tab页

var tabs = $("#tt").tabs({

border: false,

fit: true,

});

$('#tt').tabs('add', {

title: 'Tab页',

content: 'tab页内',

closable: true,

width: 50,

});

2.2.1、tabs(选项卡)--常用属性

l  plain:简洁模式

l  toolPosition:工具栏位置,有left与right两个值

l  tabPosition:标签位置,有top、bottom、left、right

l  headerWidth:标签的宽度,只有toolPosition为left、right有效

l  scrollDuration: 每个滚动动画持续时间

l  scrollIncrement:每次标签滚动的像素

2.2.2、tabs(选项卡)—tools

同样tabs也有tools但是tools用在不同的地方就会有不同的效果

tools: [{

iconCls: 'icon-add',

handler: function () {

alert('add');

}

}]

easyui针对标签这种比较特殊的tools写了一个默认的icon-mini的图标样式

tools: [{

iconCls: 'icon-mini-refresh',

handler: function () {

alert('refresh');

}

}]

3、Accordion(手风琴)

accordion(手风琴)布局是将一组相关的功能或者内容放到一起，每个选项卡我们都可以使用href加载内容,也可以使用content属性设置值

<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
        <h3 style="color:#0099FF;">Accordion for jQuery</h3>
        <p>Accordion is a part of easyui framework for jQuery.
        It lets you define your accordion component on web page more easily.</p>
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3">
        content3
    </div>
</div>  

我们可以更改或修改面板的一些功能以后再重新创建它。

$('#aa').accordion({

animate:false

});