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
});
jquery easy ui 1.3.4 内容组件(2)的更多相关文章
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- jQuery Easy UI Tooptip(提示框)组件
我们都知道DOM节点的title属性.Tooptip组件就是比較强大的title,它能够自由的设置自己的样式.位置以及有自己相关的触发事件. 演示样例: <!DOCTYPE html> & ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
- jQuery Easy UI Resizable(调整大小)组件
Resizable(调整大小)组件,easyui基础组件之中的一个.调整大小就是能够对元素能够拖着调整大小,这个组件不依赖于其它组件,使用比較简单,相关的属性.事件都 在样例中介绍了. 演示样例: & ...
- jQuery Easy UI ProgressBar(进度条)组件
ProgressBar(进度条)组件,这个还是挺好玩的.我们在自己做点什么的时候常常能用到,比方上传下载文件.导入导出文档啊.加载网页等等. 应用场景非常多,使用起来还非常easy. 演示样例: &l ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
随机推荐
- 在ECSHOP后台左侧导航中增加新菜单
在ECSHOP后台左侧导航中增加新菜单 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2011-11-08 有个别高级用户(懂PHP的),提到这样的问题: 在后台管 ...
- iptables相关
⑴.Iptables规则写法的基本格式是: Iptables [-ttable] COMMAND chain CRETIRIA -j ACTION ⑵.Iptables规则相关参数说明: ...
- java 打包过程及如何使用第三方jar包
地址:http://wenku.baidu.com/view/44a1bbed81c758f5f61f6779.html或者 http://wenku.it168.com/d_000575231.sh ...
- 转:Java NIO系列教程(三) Buffer
Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的. 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被包装成NIO ...
- c语言的头文件-不是c++类的头文件?
下面的概述是参考的这篇文章:http://blog.csdn.net/bingxx11/article/details/7771437 c语言编程中也有,也需要头文件, 头文件不只是C++的类才需要! ...
- [整理]通过AngularJS directive对bootstrap日期控件的的简单包装
最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...
- 【整理】Angularjs 监听ng-repeat onfinishrender事件
http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished http://ww ...
- Java并发编程笔记—基础知识—实用案例
如何正确停止一个线程 1)共享变量的使用 中断线程最好的,最受推荐的方式是,使用共享变量(shared variable)发出信号,告诉线程必须停止正在运行的任务.线程必须周期性的核查这一变量(尤其在 ...
- 网站程序版本号信息也可能造成bd快照严重滞后
在a5上看到一篇“破解阿里云论坛的快照时间迷局 或涉足所有phpwind论坛”的文章,里面说到pw的一个版本信息导致了快照滞后的问题,这再次验证了之前那篇文章“时间戳造成快照滞后”的准确性. 如下图所 ...
- 第14章 使用DHCP动态管理主机地址
章节简述: DHCP协议服务能够自动化的管理局域网内的主机IP地址,有效的提升IP地址使用率,提高配置效率,减少管理与维护成本. 学习dhcpd服务程序的使用方法并逐条讲解配置参数,完整演示自动化分配 ...