jQuery EasyUI 中文API Layout(Tabs)

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

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

赞 (0)

相关推荐

  • 基于Jquery easyui 选中特定的tab

    获取选中的 Tab // 获取选中的 tab panel 和它的 tab 对象 var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // 相应的 tab 对象 更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current_tab = $('#frame_tabs'

  • jQuery easyui刷新当前tabs的方法

    更新特定的选项卡面板 可使用update方法,param参数包含2个属性: tab: 将被更新的选项卡. options: 选项卡相关配置项. Example: //当前tab var current_tab = $('#frame_tabs').tabs('getSelected'); $('#frame_tabs').tabs('update',{ tab:current_tab, options : { content : '<iframe scrolling="auto"

  • jquery easyui 结合jsp简单展现table数据示例

    jquery easyui 结合jsp简单展现table数据示例

    复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&qu

  • jquery easyui的tabs使用时的问题

    jquery easyui的tabs使用时的问题

    大家也可以在jquery easyui来下载,或者去官网下载和查看文档帮助. 我最近也使用了一下jquery easyui里tabs,但是发现一个问题:如果你把tabs的div开始设置为display:none,然后写个function change(){$("#tabs").css("display","block")}来让tabs显示,当执行change()时,结果tabs显示不正常. 本来应该显示为: 结果显示为: 后来我不断尝试,发现如果

  • jQuery EasyUI 布局之动态添加tabs标签页

    jQuery EasyUI 布局之动态添加tabs标签页

    在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用

  • jQuery EasyUI Tab 选项卡问题小结

    jQuery EasyUI Tab 选项卡问题小结

    需要解决的问题: 比如说 我先把行政区域的页面打开之后,我又把产品类型管理的页面打开,之后我再产品类型管理里添加了一条数据,当我点击横着的行政区域选项卡时,我需要使用到产品类型管理岗添加的数据,但是在行政区域里不存在那条数据.我就想让这条数据显示出来,所以我就想当我点击横着的选项卡的时候,我就想让刷新一下页面.这时那条数据就会显示出来. 主要是我完全不知道我点击横着的选项卡触发的事件.代码如下: html 选项卡 <div data-options="region:'center',col

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • jqueryUI tab标签页代码分享

    本文实例为大家分享了jqueryUI tab标签页的具体代码,供大家参考,具体内容如下 var temp=1; var arr=["我的首页"]; //×号点击关闭li $("#tabs").delegate( ".ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( &quo

  • jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)

    复制代码 代码如下: $(document).ready(function(){ $('#tabs').tabs({add:addEventHandler}); //给tabs块绑定addEventHandler事件 $('#newtabs').click(addTab); }) var tabCounter = 1; function addTab(){ if(tabCounter > 6){ alert('tabs can not more than 6!'); return; } $('<

  • jquery-easyui关闭tab自动切换到前一个tab

    复制代码 代码如下: var lastTabs = new Array(); $(function() { /* * cdh 2010.0630 补充,用于 退回上次标签页 */ $('#mainTabs').tabs({ onSelect: function(tt) { //移除 tt lastTabs = $.grep(lastTabs, function(n, i) { return n != tt; }); //重新压入,保证 最新的在最上面 lastTabs.push(tt); //更

随机推荐