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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 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获取apk包信息的方法
2014/08/15 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
JS解密入门之凭直觉解
2008/06/25 Javascript
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python实现栈的方法
2015/05/26 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
python3访问字典里的值实例方法
2020/11/18 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
红色影片观后感
2015/06/18 职场文书
车辆管理制度范本
2015/08/05 职场文书
html5+实现plus.io进行拍照和图片等获取
2022/06/01 HTML / CSS