一、创建组件

<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(选项卡)的更多相关文章

  1. 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件

    当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...

  2. 第二百节,jQuery EasyUI,Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  3. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  5. 基于jQuery UI的tabs选项卡美化

    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...

  6. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  7. (十)easyUI之折叠面板+选项卡+树完成系统布局

    一.效果 二 .编码 数据库设计 数据库函数设计,该函数根据父节点id 查询出所有字节点(包括孙子节点) BEGIN #声明两个临时变量 ); ); '; SET tempChd=CAST(rootI ...

  8. EasyUI - Tabs 选项卡标签

    基本效果: 效果图: html代码: <div id="tab"> <div title="tab1" > <p>tab1& ...

  9. JQERY EasyUI Tabs 选项卡 自适应浏览器宽度高度 解决方案

    <script type="text/javascript"> $(window).resize(function () { $('#tt').tabs({ width ...

随机推荐

  1. 服务器Centos7.4 下jdk1.8环境配置、mysql环境搭建,mysql找回(重置)密码看这篇就够了

    最近一直帮我的同学搭建自己的服务器,其中涉及到了以下知识点,经过查询博客资料等方式,再加上多重实践,我成功总结出了完整的配置一个简单服务器环境的步骤: (来自 ZYXS 的CSDN 博客 ,全文地址请 ...

  2. Mayor's posters-POJ2528(线段树+离散化)

    The citizens of Bytetown, AB, could not stand that the candidates in the mayoral election campaign h ...

  3. poj——3687 Labeling Balls

    Labeling Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 14835   Accepted: 4346 D ...

  4. 06-js的逻辑结构

    <html> <head> <title>js的逻辑结构和循环结构学习</title> <meta charset="UTF-8&quo ...

  5. 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 ...

  6. 【转】实现一个自己的promise

    转, 原文:http://blog.csdn.net/yibingxiong1/article/details/68075416------------------------------------ ...

  7. 设计并实现一个LRU Cache

    一.什么是Cache 1 概念 Cache,即高速缓存,是介于CPU和内存之间的高速小容量存储器.在金字塔式存储体系中它位于自顶向下的第二层,仅次于CPU寄存器.其容量远小于内存,但速度却可以接近CP ...

  8. Windows 驱动开发 - 7

    在<Windows 驱动开发 - 5>我们所说的读写操作在本篇实现. 在WDF中实现此功能主要为:EvtIoRead和EvtIoWrite. 首先,在EvtDeviceAdd设置以上两个回 ...

  9. 中国剩余定理模板&俄罗斯乘法

    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, ...

  10. 【NOIP 2016】初赛-完善程序 & 参考答案

    参考答案 感觉这两题目都挺好的~~ T1 交朋友 简单描述:有n个人依次进入教室,每个人进入会找一个身高绝对值相差最小的人交朋友(相同时更想和高的交朋友),求每个人交的朋友. Solution: So ...