html菜鸟教程选项卡,jQuery EasyUI 布局插件 – Tabs 标签页/选项卡 | 菜鸟教程
jQuery EasyUI 布局插件 - Tabs 标签页/选项卡
jQuery EasyUI 插件
通过 $.fn.tabs.defaults 重写默认的 defaults。
The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.
依赖
panel
linkbutton
用法
创建标签页(Tabs)
1、通过标记创建标签页(Tabs)
从标记创建标签页(Tabs)更容易,我们不需要写任何 JavaScript 代码。记住把 'easyui-tabs' class 添加到
tab1
tab2
tab3
2、编程创建标签页(Tabs)
现在我们编程创建标签页(Tabs),我们同时捕捉 'onSelect' 事件。
$('#tt').tabs({
border:false,
onSelect:function(title){
alert(title+' is selected');
}
});
添加新的标签页面板(tab panel)
通过迷你工具添加一个新的标签页面板(tab panel),迷你工具图标(8x8)放置在关闭按钮前。
// 添加一个新的标签页面板(tab panel)
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
获取选中的标签页(Tab)
// 获取选中的标签页面板(tab panel)和它的标签页(tab)对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页(tab)对象
属性
名称
类型
描述
默认值
width
number
标签页(Tabs)容器的宽度。
auto
height
number
标签页(Tabs)容器的高度。
auto
plain
boolean
当设置为 true 时,就不用背景容器图片来呈现 tab 条。
false
fit
boolean
当设置为 true 时,就设置标签页(Tabs)容器的尺寸以适应它的父容器。
false
border
boolean
当设置为 true 时,就显示标签页(Tabs)容器边框。
true
scrollIncrement
number
每按一次 tab 滚动按钮,滚动的像素数。
100
scrollDuration
number
每一个滚动动画应该持续的毫秒数。
400
tools
array,selector
放置在头部的左侧或右侧的工具栏,可能的值:
1、数组,指示工具组,每个工具选项都和链接按钮(Linkbutton)一样。
2、选择器,指示包含工具的
代码实例:
通过数组定义工具。
$('#tt').tabs({
tools:[{
iconCls:'icon-add',
handler:function(){
alert('add')
}
},{
iconCls:'icon-save',
handler:function(){
alert('save')
}
}]
});
通过已有的 DOM 容器定义工具。
$('#tt').tabs({
tools:'#tab-tools'
});
null
toolPosition
string
工具栏位置。可能的值:'left'、'right'。该属性自版本 1.3.2 起可用。
right
tabPosition
string
标签页(tab)位置。可能的值:'top'、'bottom'、'left'、'right'。该属性自版本 1.3.2 起可用。
top
headerWidth
number
标签页(tab)头部宽度,只有当 tabPosition 设置为 'left' 或 'right' 时才有效。该属性自版本 1.3.2 起可用。
150
tabWidth
number
tab 条的宽度。该属性自版本 1.3.4 起可用。
auto
tabHeight
number
tab 条的高度。该属性自版本 1.3.4 起可用。
27
selected
number
初始化选定的标签页索引。该属性自版本 1.3.5 起可用。
0
showHeader
boolean
当设置为 true 时,显示标签页(tab)头部。该属性自版本 1.3.5 起可用。
true
事件
名称
参数
描述
onLoad
panel
当一个 ajax 标签页面板(tab panel)完成加载远程数据时触发。
onSelect
title,index
当用户选择一个标签页面板(tab panel)时触发。
onUnselect
title,index
当用户未选择一个标签页面板(tab panel)时触发。该事件自版本 1.3.5 起可用。
onBeforeClose
title,index
当一个标签页面板(tab panel)被关闭前触发,返回 false 就取消关闭动作。下面的实例演示如何在关闭标签页面板(tab panel)前显示确认对话框。
$('#tt').tabs({
onBeforeClose: function(title){
return confirm('Are you sure you want to close ' + title);
}
});
// using the async confirm dialog
$('#tt').tabs({
onBeforeClose: function(title,index){
var target = this;
$.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
if (r){
var opts = $(target).tabs('options');
var bc = opts.onBeforeClose;
opts.onBeforeClose = function(){}; // allowed to close now
$(target).tabs('close',index);
opts.onBeforeClose = bc; // restore the event function
}
});
return false; // prevent from closing
}
});
onClose
title,index
当用户关闭一个标签页面板(tab panel)时触发。
onAdd
title,index
当一个新的标签页面板(tab panel)被添加时触发。
onUpdate
title,index
当一个标签页面板(tab panel)被更新时触发。
onContextMenu
e, title,index
当一个标签页面板(tab panel)被右键点击时触发。
方法
名称
参数
描述
options
none
返回标签页(tabs)选项(options)。
tabs
none
返回全部的标签页面板(tab panel)。
resize
none
调整标签页(tabs)容器的尺寸并做布局。
add
options
添加一个新的标签页面板(tab panel),options 参数是一个配置对象,更多详细信息请参见标签页面板(tab panel)属性。
当添加一个新的标签页面板(tab panel)时,它将被选中。
如需添加一个未选中的标签页面板(tab panel),请记得设置 'selected' 属性为 false。
// add a unselected tab panel
$('#tt').tabs('add',{
title: 'new tab',
selected: false
//...
});
close
which
关闭一个标签页面板(tab panel),'which' 参数可以是要被关闭的标签页面板(tab panel)的标题(title)或索引(index)。
getTab
which
获取指定的标签页面板(tab panel),'which' 参数可以是标签页面板(tab panel)的标题(title)或索引(index)。
getTabIndex
tab
获取指定的标签页面板(tab panel)索引。
getSelected
none
获取选中的标签页面板(tab panel)。下面的实例演示如何获取选中的标签页面板(tab panel)的索引。
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
select
which
选择一个标签页面板(tab panel),'which' 参数可以是标签页面板(tab panel)的标题(title)或索引(index)。
unselect
which
选择一个标签页面板(tab panel),'which' 参数可以是标签页面板(tab panel)的标题(title)或索引(index)。该方法自版本 1.3.5 起可用。
showHeader
none
显示标签页(tabs)头部。该方法自版本 1.3.5 起可用。
hideHeader
none
隐藏标签页(tabs)头部。该方法自版本 1.3.5 起可用。
exists
which
指示指定的面板是否已存在,'which' 参数可以是标签页面板(tab panel)的标题(title)或索引(index)。
update
param
更新指定的标签页面板(tab panel),param 参数包含两个属性:
tab:被更新的标签页面板(tab panel)。
options:面板(panel)的选项(options)。
代码实例:
// update the selected panel with new title and content
var tab = $('#tt').tabs('getSelected'); // get selected panel
$('#tt').tabs('update', {
tab: tab,
options: {
title: 'New Title',
href: 'get_content.php' // the new content URL
}
});
// call 'refresh' method for tab panel to update its content
var tab = $('#tt').tabs('getSelected'); // get selected panel
tab.panel('refresh', 'get_content.php');
enableTab
which
启用指定的标签页面板(tab panel),'which' 参数可以是标签页面板(tab panel)的标题(title)或索引(index)。该方法自版本 1.3 起可用。
代码实例:
$('#tt').tabs('enableTab', 1); // enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2'); enable the tab panel that has 'Tab2' title
disableTab
which
禁用指定的标签页面板(tab panel),'which' 参数可以是标签页面板(tab panel)的标题(title)或索引(index)。该方法自版本 1.3 起可用。
代码实例:
$('#tt').tabs('disableTab', 1); // disable the second tab panel.
scrollBy
deltaX
通过指定的像素数滚动标签页(tab)头部,负值表示滚动到右边,正值表示滚动到左边。该方法自版本 1.3.2 起可用。
代码实例:
// scroll the tab header to left
$('#tt').tabs('scroll', 10);
标签页面板(Tab Panel)
标签页面板(tab panel)属性被定义在面板(panel)组件里,下面是一些常用的属性。
名称
类型
描述
默认值
id
string
标签页面板(tab panel)的 id 属性。
null
title
string
标签页面板(tab panel)的标题文字。
content
string
标签页面板(tab panel)的内容。
href
string
加载远程内容来填充标签页面板(tab panel)的 URL。
null
cache
boolean
当设置为 true 时,在设定了有效的 href 特性时缓存这个标签页面板(tab panel)。
true
iconCls
string
显示在标签页面板(tab panel)标题上的图标的 CSS class。
null
width
number
标签页面板(tab panel)的宽度。
auto
height
number
标签页面板(tab panel)的高度。
auto
collapsible
boolean
当设置为 true 时,允许标签页面板(tab panel)可折叠。
false
一些附加的属性。
名称
类型
描述
默认值
closable
boolean
当设置为 true 时,标签页面板(tab panel)将显示一个关闭按钮,点击它就能关闭这个标签页面板(tab panel)。
false
selected
boolean
当设置为 true 时,标签页面板(tab panel)将被选中。
false
jQuery EasyUI 插件
html菜鸟教程选项卡,jQuery EasyUI 布局插件 – Tabs 标签页/选项卡 | 菜鸟教程相关推荐
- html accordion折叠菜单动态,jQuery EasyUI 布局插件 – Accordion 折叠面板 | 菜鸟教程...
jQuery EasyUI 布局插件 - Accordion 折叠面板 jQuery EasyUI 插件 通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板 ...
- easyui打开新的选项卡_Easyui Tabs 标签页/选项卡_EasyUI 插件
通过 $.fn.tabs.defaults 重写默认的 defaults. The tabs display a collection of panel. It shows only one tab ...
- css3和jQuery实现一个简单的标签页效果
主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果, css代码如下: body{width: 600px;margin: 100px au ...
- jQuery EasyUI ztree插件使用
1.下载easyUI的开发包 该包的结构是 2.将easyUI的资源文件引入的页面中: <link rel="stylesheet" type="text/css& ...
- jQuery EasyUI布局容器layout实例精讲
这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...
- jQuery easyUI布局(Layout)与手风琴(Accordion)
上期讲了easyUI最重要的组件:面板,这期讲讲布局和手风琴 运用jQuery easyUI是需要引用文件的,详见上一期 布局(layout) 效果图如下: 我们从上图可以看到,整个布局分为五个部分, ...
- EasyUI中Tabs标签页的简单使用
场景 效果 属性 tabs none 返回全部的标签页面板(tab panel). resize none 调整标签页(tabs)容器的尺寸并做布局. add options 添加一个新的标签页面板( ...
- EasyUI Layout实现tabs标签
一.概述: 1.引入jquery.js与easyUi相关文件 2.效果如图: 二.创建Layout主页: <%@ page language="java" pageEncod ...
- vue 循环tabs 标签页 组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
- Edge游览器,新插件WeTab标签页
如果你还没有体验过chatGPT,那么Wetab新标签页应该是最方便快捷的一个方式了.Wetab新标签页整合了chatGPT的功能,自带6个源可以切换,日常使用完全够了.可以为你解答包括但不限于历史. ...
最新文章
- python语法手册-python语法手册
- 深入理解ROS技术 【4】ROS下的模块详解(181-232)
- gridview 在已有数据的基础上添加数据_基于Python的数据分析-1.语法基础(上)
- 开源 展uv_消费电子展上的开源,印度被封锁的网站等等
- python3 threading.lock_Python3 threading
- 软件工程--瀑布模型
- 疾速激爽,电竞玩家的心仪之选:AMD 锐龙 5000 系列登场!
- VBS 与 VBA 的区别
- 模板 - 数学 - 数论
- URL和URI的区别
- ubuntu查看显卡驱动以及其他驱动
- 计算机考研专业课408备考经验分享
- 《王亡於江上》之周昭王姬瑕
- GIMP 2.10.24 图片切片
- 手游App渠道推广统计
- 查询IP所在区段(C#)
- 抖音返利CPS系统APP平台开发
- 清单革命:如何持续、正确、安全地把事情做好
- 计算机桌面有一条红线去不掉,我的电脑桌面屏幕最下方存在一条大概2mm红线请问正常吗...
- 网页webview适应手机分辨率
热门文章
- 整数规划的matlab计算,Matlab遗传算法解决整数规划问题
- 51单片机之CHQ1838红外接收(NEC协议)
- 红外遥控接收头 的引脚参数
- Mac墨刀怎么导出HTML,mockingbot墨刀中文使用说明.pdf
- ubuntu文件名乱码(转载)
- C# 将彩色PDF转为灰度
- 7-10 365次方 (10 分)
- 360手机助手电脑版 v2.4.0.1251 官方版
- f452虚拟服务器,中兴f452网关,超级用户的密码如何获得,启动路由功能
- arping指令linux,arping命令详解