jQuery EasyUI 中文API Layout(Tabs)

所属分类: 网络编程 / JavaScript 阅读数: 974
收藏 0 赞 0 分享

Tabs【标签】


创建一个tab标签

使用说明
使用到的头文件:easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js

html

复制代码 代码如下:

<div id="tt" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
tab3
</div>
</div>


JQuery代码
复制代码 代码如下:

//创建一个标签容器
$('#tt').tabs(options);

//增加一个tab面板
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true
});

Tabs Container特性说明

名称 类型 描述 默认值
width number 标签容器宽度 auto
height number 标签容器高度 auto
idSeed number 应该是生成标签面板的基本id 0
plain boolean 设置true,标签栏显示背景 false
fit boolean 设置true,自适应父集容器大小 false
border boolean 标签容器边框 true
scrollIncrement number 标签卷按钮被按下,滚动的像素 100
scrollDuration number 滚动动画持续的毫秒 400

Tabs Container事件说明

名称 参数 描述
onLoad arguments ajax面板加载完毕后触发,参数调用跟jQuery.ajax调功能一样
onSelect title 选中标签面板触发
onClose title 关闭标签面板触发

Tabs Container方法说明

名称 参数 描述
resize none 调整容器的布局
add options 添加一个新的标签面板,选择一个配置对象参数,看标签面板的特性说明
close title 关闭一个标签面板,标题参数显示的面板被关闭。
select title 选中一个标签面板
exists title 指明特殊面板显示存在。

Tab Panel特性说明

名称 类型 描述 默认值
id string 标签面板id null
title string 标签面板的title  
content string 标签面板的content.  
href string 面板远程加载进来数据的地址. null
cache boolean 设置true,缓存标签面板 true
icon string 标签面板标题上图标css。 null
closable boolean 设置true,标题上显示一个关闭按钮 false
selected boolean 设置true,标签面板被选中【默认那个显示在前】 false
width number 标签面板宽度 auto
height number 标签面板高度 auto

 

有些觉得翻译的牵强,肯定也有错的地方,谢谢指出来。

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多