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. 在ECSHOP后台左侧导航中增加新菜单

    在ECSHOP后台左侧导航中增加新菜单 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-11-08   有个别高级用户(懂PHP的),提到这样的问题: 在后台管 ...

  2. iptables相关

    ⑴.Iptables规则写法的基本格式是:    Iptables [-ttable] COMMAND chain CRETIRIA -j ACTION   ⑵.Iptables规则相关参数说明:  ...

  3. java 打包过程及如何使用第三方jar包

    地址:http://wenku.baidu.com/view/44a1bbed81c758f5f61f6779.html或者 http://wenku.it168.com/d_000575231.sh ...

  4. 转:Java NIO系列教程(三) Buffer

    Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...

  5. c语言的头文件-不是c++类的头文件?

    下面的概述是参考的这篇文章:http://blog.csdn.net/bingxx11/article/details/7771437 c语言编程中也有,也需要头文件, 头文件不只是C++的类才需要! ...

  6. [整理]通过AngularJS directive对bootstrap日期控件的的简单包装

    最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...

  7. 【整理】Angularjs 监听ng-repeat onfinishrender事件

    http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished http://ww ...

  8. Java并发编程笔记—基础知识—实用案例

    如何正确停止一个线程 1)共享变量的使用 中断线程最好的,最受推荐的方式是,使用共享变量(shared variable)发出信号,告诉线程必须停止正在运行的任务.线程必须周期性的核查这一变量(尤其在 ...

  9. 网站程序版本号信息也可能造成bd快照严重滞后

    在a5上看到一篇“破解阿里云论坛的快照时间迷局 或涉足所有phpwind论坛”的文章,里面说到pw的一个版本信息导致了快照滞后的问题,这再次验证了之前那篇文章“时间戳造成快照滞后”的准确性. 如下图所 ...

  10. 第14章 使用DHCP动态管理主机地址

    章节简述: DHCP协议服务能够自动化的管理局域网内的主机IP地址,有效的提升IP地址使用率,提高配置效率,减少管理与维护成本. 学习dhcpd服务程序的使用方法并逐条讲解配置参数,完整演示自动化分配 ...