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

});

jquery easy ui 1.3.4 内容组件(2)的更多相关文章

  1. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  2. jQuery Easy UI Tooptip(提示框)组件

    我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...

  3. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. jQuery Easy UI Draggable(拖动)组件

    上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...

  5. jQuery Easy UI Panel(面板)组件

    panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...

  6. jQuery Easy UI Resizable(调整大小)组件

    Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...

  7. jQuery Easy UI ProgressBar(进度条)组件

    ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...

  8. jQuery Easy UI 开发笔记

    1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...

  9. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

随机推荐

  1. JavaScript入门培训材料(Copy至此以作备份)

    JavaScript简明学习教程 2014年5月31日 目录 一.说明... 2 二.准备知识... 2 (一)HTML. 2 (二)DOM.. 3 三.JavaScript简介... 3 四.Jav ...

  2. (翻译)初学者的object-C指南

    初学者的object-C指南 英文原文:http://blog.teamtreehouse.com/the-beginners-guide-to-objective-c-language-and-va ...

  3. Egret命令行小结

    1. build 构建指定项目,编译指定项目的TypeScript文件2. create 创建新项目3. create_app 从h5游戏生成app4. create_mainfest 在工程目录下生 ...

  4. LinkedList和ArrayList的区别/何时使用LinkedList和ArrayList

    1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList觉得优于LinkedList,因为LinkedList ...

  5. MyISAM 和 InnoDB 讲解

    MyISAM 和 InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处 ...

  6. [BZOJ3624][Apio2008]免费道路

    [BZOJ3624][Apio2008]免费道路 试题描述 输入 输出 输入示例 输出示例 数据规模及约定 见“输入”. 题解 第一步,先尽量加入 c = 1 的边,若未形成一个连通块,则得到必须加入 ...

  7. 大数据之ETL设计详解

    ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直接关接到BI项目的成败.ETL也是一个长期的过程,只有不断的发现问题并解决问题,才能使ETL运行效率更 ...

  8. [颓废] 改某人的WebGL light mapping demo并9xSSAA

    渲染图(4k) 链接: http://pan.baidu.com/s/1bnB4Wqz 密码: 8839 2px高斯模糊+立方缩小AA:  链接: http://pan.baidu.com/s/1mg ...

  9. eclipse 启动后,啥也不干,就一直在loading descriptor for XXX (XXX为工程名),,其他什么操作都不能操作。 如下图所示,保存文件也无法保存。 这个怎么办?一年好几天,什么都干不了!!!!!

    解决办法: 解决办法是 断一下网就好了

  10. sc 与net命令的区别

    windows服务操作命令有sc和net 两个命令; sc stop serviceName  sc start serviceName net stop serviceName  net start ...