Jquery Easyui选项卡组件Tab使用详解(10)


Posted in Javascript onDecember 18, 2016

本文实例为大家分享了Jquery Easyui选项卡组件的实现代码,供大家参考,具体内容如下

加载方式

Class加载

<div class="easyui-tabs" style="width: 400px;height: 250px">
  <div title="Tab1" data-options="closable:true">
   tab1
  </div>
  <div title="Tab2" data-options="closable:true">
   tab2
  </div>
  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">
   tab3
  </div>
</div>

JS调用加载

<div id="box" style="width: 400px;height: 250px">
  <div title="Tab1" data-options="closable:true">
   tab1
  </div>
  <div title="Tab2" data-options="closable:true">
   tab2
  </div>
  <div title="Tab3" data-options="iconCls:'icon-reload',closable:true">
   tab3
  </div>
 </div>

 <script>
  $(function () {
   $('#box').tabs({
    // 选项卡容器宽度
    width : 500,
    // 项卡容器高度
    height: 400,
    // 是否不显示控制面板背景。
    plain : false,
    // 选项卡是否将铺满它所在的容器
    fit : false,
    // 是否显示选项卡容器边框
    border : true,
    // 选项卡滚动条每次滚动的像素值
    scrollIncrement : 200,
    // 每次滚动动画持续的时间
    scrollDuration : 400,
    // 工具栏添加在选项卡面板头的左侧或右侧
    tools:[{
     iconCls : 'icon-add',
     handler : function () {
      alert('添加!');
     },
    }],
    // 工具栏位置
    toolPosition : 'left',
    // 选项卡位置
    tabPosition : 'left',
    // 选项卡标题宽度,在 tabPosition 属性设置为'left'或'right'的时候才有效
    headerWidth : 300,
    // 标签条的宽度
    tabWidth : 250,
    // 标签条的高度
    tabHeight : 25,
    // 初始化选中一个 tab 页, 从0开始
    selected : 2,
    // 是否显示 tab 页标题
    showHeader: true
   }) ;
  });
 </script>

属性列表

Jquery Easyui选项卡组件Tab使用详解(10)

事件列表

Jquery Easyui选项卡组件Tab使用详解(10)

$(function () {
   $('#box').tabs({
    // 在 ajax 选项卡面板加载完远程数据的时候触发。
    onLoad : function (pannel) {
     alert(panel);
    },
    // 用户在选择一个选项卡面板的时候触发
    onSelect : function (title,index) {
     alert(title + '|' + index);
    },
    // 用户在取消选择一个选项卡面板的时候触发。
    // (选择另一个时,先触发上一个的此方法,再触发下一个的onSelect方法)
    onUnselect : function (title, index) {
     alert(title + '|' + index);
    },
    // 在选项卡面板关闭的时候触发,返回false 取消关闭操作
    onBeforeClose : function (title, index) {
     alert(title + '|' + index);
     return false;
    },
    // 在关闭一个选项卡面板的时候触发
    onClose : function (title, index) {
     alert(title + '|' + index);
    },
    // 在添加一个新选项卡面板的时候触发
    onAdd : function (title, index) {
     alert(title + '|' + index);
    },
    // 在更新一个选项卡面板的时候触发
    onUpdate : function (title, index) {
     alert(title + '|' + index);
    },
    // 在右键点击一个选项卡面板的时候触发
    onContextMenu : function (e, title, index) {
     alert(e + '|' + title + '|' + index);
    }
   }) ;
  });

方法列表

Jquery Easyui选项卡组件Tab使用详解(10)

Jquery Easyui选项卡组件Tab使用详解(10)

//返回属性对象
console.log($('#box').tabs('options'));
//返回所有选项卡面板
console.log($('#box').tabs('tabs'));
//新增一个选项卡
$('#box').tabs('add', {
 title : '新面板',
 selected : false,
});
//选择指定下标的选项卡
$('#box').tabs('select', 1);
//取消选择指定下标的选项卡
$('#box').tabs('select', 0);
//关闭指定下标的选项卡
$('#box').tabs('close', 1);
//重新调整面板布局和大小
$('#box').tabs('resize');
//指定下标的选项卡是否存在
console.log($('#box').tabs('exists', 4));
//获取指定下标的选项卡
console.log($('#box').tabs('getTab', 1));
//获取指定面板的索引
console.log($('#box').tabs('getTabIndex','#tab2'));
//获取被选定的选项卡
console.log($('#box').tabs('getSelected'));
//显示选项卡标题
$('#box').tabs('showHeader');
//隐藏选项卡标题
$('#box').tabs('hideHeader');
//更新一个选项卡
$('#box').tabs('update', {
 tab : $('#tab2'),
 options : {
 Title : '新标题',
 }
});
//禁用指定下标或标题的选项卡
$('#box').tabs('disableTab', 1);
$('#box').tabs('disableTab', 'Tab2');
//启用指定下标或标题的选项卡
$('#box').tabs('enableTab', 1);
$('#box').tabs('enableTab', 'Tab2');
//滚动选项卡标题,正值向左,负值向右
$('#box').tabs('scrollBy', 100);
//可以使用$.fn.tabs.defaults 重写默认值对象。
$.fn.tabs.defaults.border = false;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 #Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 #Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 #Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 #Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 #Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 #Javascript
前端js弹出框组件使用方法
Aug 24 #Javascript
You might like
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
google地图的路线实现代码
2009/08/20 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
js中this的用法实例分析
2015/01/10 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
kindeditor修复会替换script内容的问题
2015/04/03 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
javascript添加前置0(补零)的几种方法
2017/01/05 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
js实现轮播图特效
2020/05/28 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
重命名批处理python脚本
2013/04/05 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python虚拟环境迁移方法
2019/01/03 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
Python如何计算语句执行时间
2019/11/22 Python
python 常见的排序算法实现汇总
2020/08/21 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
一些网络技术方面的面试题
2014/05/01 面试题
建筑工程自我鉴定
2013/10/18 职场文书
大学生自荐书范文
2013/12/10 职场文书
给校长的建议书
2014/03/12 职场文书
企业安全生产标语
2014/06/06 职场文书
董事长助理工作职责
2014/06/08 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
手机被没收的检讨书
2014/10/04 职场文书
初婚未育证明样本
2014/10/24 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
商务代表岗位职责
2015/02/15 职场文书
见习期个人总结
2015/03/05 职场文书
新生开学寄语大全
2015/05/28 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android