EasyUI系列学习(十)-Tabs(选项卡)
一、创建组件
<div class="easyui-tabs" style="width:500px;height:250px">
<div title="tab1">tab1</div>
<div title="tab2">tab2</div>
</div>
二、属性
1.
<div id="tbs">
<div title="tab1">tab1</div>
<div title="tab2">tab2</div>
<div title="tab3">tab3</div>
</div>
<script>
$(function () {
$("#tbs").tabs({
width: 500,
height: 250,
//plain:true,
//fit:true,
border: true,
tools: [
{
iconCls: "icon-add",
handler: function () { alert("add"); }
},
{
iconCls: "icon-edit",
handler: function () { alert("edit"); }
}],
toolPosition: "left",
//设置header的位置
tabPosition: "top",
//tabPosition为left或right时才有效
//headerWidth: 150,
//初始化选中一个tab页,默认为0
selected: 1,
showHeader: true
});
});
</script>
生成的html(发现了panel,那边它也继承了panel的一些属性)
2.
<div id="tbs">
<div title="tab1">tab1</div>
<div title="tab2">tab2</div>
<div title="tab3">tab3</div>
</div>
<script>
$(function () {
$("#tbs").tabs({
width: 500,
height: 250,
tabWidth: 300,
tabHeight: 27,
//选项卡每次滚动的像素值,默认为100
scrollIncrement: 100,
//每次滚动动画持续的时间,默认400
scrollDuration:1000
});
});
</script>
三、事件
四、方法
EasyUI系列学习(十)-Tabs(选项卡)的更多相关文章
- 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件
当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...
- 第二百节,jQuery EasyUI,Tabs(选项卡)组件
jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 基于jQuery简单实用的Tabs选项卡插件
jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- Tabs - 选项卡插件
接上篇Tabs - 选项卡插件 其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充 9)Flipping C ...
- (十)easyUI之折叠面板+选项卡+树完成系统布局
一.效果 二 .编码 数据库设计 数据库函数设计,该函数根据父节点id 查询出所有字节点(包括孙子节点) BEGIN #声明两个临时变量 ); ); '; SET tempChd=CAST(rootI ...
- EasyUI - Tabs 选项卡标签
基本效果: 效果图: html代码: <div id="tab"> <div title="tab1" > <p>tab1& ...
- JQERY EasyUI Tabs 选项卡 自适应浏览器宽度高度 解决方案
<script type="text/javascript"> $(window).resize(function () { $('#tt').tabs({ width ...
随机推荐
- 服务器Centos7.4 下jdk1.8环境配置、mysql环境搭建,mysql找回(重置)密码看这篇就够了
最近一直帮我的同学搭建自己的服务器,其中涉及到了以下知识点,经过查询博客资料等方式,再加上多重实践,我成功总结出了完整的配置一个简单服务器环境的步骤: (来自 ZYXS 的CSDN 博客 ,全文地址请 ...
- Mayor's posters-POJ2528(线段树+离散化)
The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campaign h ...
- poj——3687 Labeling Balls
Labeling Balls Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 14835 Accepted: 4346 D ...
- 06-js的逻辑结构
<html> <head> <title>js的逻辑结构和循环结构学习</title> <meta charset="UTF-8&quo ...
- Git push时报错 ! [remote rejected] master -> master (pre-receive hook declined) error: failed to push some refs to......
今天在使用Git回退到之前某个版本的代码时,进行push时出现如下错误: ! [remote rejected] master -> master (pre-receive hook decli ...
- 【转】实现一个自己的promise
转, 原文:http://blog.csdn.net/yibingxiong1/article/details/68075416------------------------------------ ...
- 设计并实现一个LRU Cache
一.什么是Cache 1 概念 Cache,即高速缓存,是介于CPU和内存之间的高速小容量存储器.在金字塔式存储体系中它位于自顶向下的第二层,仅次于CPU寄存器.其容量远小于内存,但速度却可以接近CP ...
- Windows 驱动开发 - 7
在<Windows 驱动开发 - 5>我们所说的读写操作在本篇实现. 在WDF中实现此功能主要为:EvtIoRead和EvtIoWrite. 首先,在EvtDeviceAdd设置以上两个回 ...
- 中国剩余定理模板&俄罗斯乘法
void ex_gcd(ll a,ll b,ll &d,ll &x,ll &y){ if(!b){d=a;x=1LL;y=0LL;} else {ex_gcd(b,a%b,d, ...
- 【NOIP 2016】初赛-完善程序 & 参考答案
参考答案 感觉这两题目都挺好的~~ T1 交朋友 简单描述:有n个人依次进入教室,每个人进入会找一个身高绝对值相差最小的人交朋友(相同时更想和高的交朋友),求每个人交的朋友. Solution: So ...