详解jQuery EasyUI Layout(Tabs)中文参考手册

详解jQuery EasyUI Layout(Tabs)中文参考手册

[日期：2010-04-26]

来源：     作者：

[字体：大 中 小]

 

本文和大家讲下jQuery EasyUI中Layout(Tabs)，即标签的应用手册参考。

效果：

创建一个tab标签

使用说明

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

HTML代码

 Code  [http://www.oeedu.com]

      
      


       
       <
       
       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代码

 Code  [http://www.oeedu.com]

      
      


       
       //
       
       创建一个标签容器 $('#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