Jquery——Day9（选项卡）

缺乏、安全感 2022-07-16 17:54 220阅读 0赞

选项卡，是一种能提供给用户在同一界面切换不同内容的UI，尤其是在页面布局紧凑的页面上，提供了非常好的用户体验。

1、使用tabs，如下所示tabs.html

<div id="tabs">
     <ul>
     <li><a href="#tab1">tab1</a></li>
     <li><a href="#tab2">tab2</a></li>
     <li><a href="#tab3">tab3</a></li>
    </ul>
    
    <div id="tab1">tab1-content</div>
    <div id="tab2">tab2-content</div>
    <div id="tab3">tab3-content</div>
    </div>

同时，在tabs.js中，

$('#tabs').tabs();

对它们样式进行设置，

//去掉外边框
    #tabs{
    border:none;
    }
    
    //内容区域修饰
    #tab1,#tab2,#tab3{
    height:100px;
    pading:10px;
    border:1px solid #aaa;
    position:relative;
    top:-2px;
    }

2、tabs的外观选项

collapsible：允许折叠对应的内容；

disabled：使用数组来禁用哪个选项卡的索引，（\[0,1\]表示禁用了前两个的索引）

event：表示触发tabs执行的事件类型（默认为click，可设置mouseover其他鼠标事件）；

active：默认展开哪个tab，对应的是数值。（比如active:1）

heightStyle：默认值为“content”

show：显示

hide：隐藏

3、tabs()方法的事件

create：当创建一个选项卡时激活此事件，有两个参数（event，ui），

对于ui参数，有两个子属性tab和panel，得到当前活动卡和内容选项的对象。

create:function(event,ui){
     alert($(ui.tab.get()).html());
     alert($(ui.panel.get()).html() );
    }

activate:切换到另一个活动卡后触发，有两个参数：event，ui。

对于ui参数，有四个子属性，即oldTab、newTab、oldPanel、newPanel

beforeActivate：当切换到另一个活动卡之前触发。

load：当ajax加载一个文档后激活此事件。该方法有ui和event两个参数

对于ui参数，有两个子属性，即tab和panel，得到当前的活动卡和内容选项的对象。

beforeLoad：ajax远程加载文档前触发。

对于ui参数，有四个子属性，即tab和panel，jqXHR，ajaxSettings

（在jqXHR中常用的方法是success，ajaxSettings主要用于编写默认的属性）

4、tabs('action',param)方法

tabs('widget')——表示获取选项卡的jQuery对象

tabs('destory')——删除选项卡，直接阻断了tabs

tabs('refresh')——更新选项卡，比如高度

tabs('option',param)——获取options属性的值

tabs('option',param,value)——设置options属性的值

5、tabs中on的用法

对于on()方法触发的选项卡事件

（1）tabsload：Ajax加载后触发

（2）tabsbeforeload：Ajax加载前触发

（3）tabsactivate：选项卡切换时触发

（4）tabsbeforeactivate：选项卡切换前触发

//ajax加载后触发
    $('#tabs').on('tabsload',function(){
     alert('ajax加载后触发！');
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，220人围观）

还没有评论，来说两句吧...

相关阅读

相关选项卡

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2022年12月13日 04:43/ 0 赞/ 219 阅读

相关 Fragment 选项卡

选项卡的主要的思路就是通过FragmentManager这个类来进行replace的方法的调用。替换需要的Fragment来显示。 android:layo

た入场券/ 2022年08月27日 05:59/ 0 赞/ 188 阅读

相关 js选项卡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

阳光穿透心脏的1/2处/ 2022年07月30日 13:55/ 0 赞/ 214 阅读

相关 Jquery——Day9（选项卡）

选项卡，是一种能提供给用户在同一界面切换不同内容的UI，尤其是在页面布局紧凑的页面上，提供了非常好的用户体验。 1、使用tabs，如下所示tabs.html

缺乏、安全感/ 2022年07月16日 17:54/ 0 赞/ 221 阅读

相关自动选项卡

![自动简易选项卡][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta

电玩女神/ 2022年06月16日 12:28/ 0 赞/ 244 阅读

相关 jQ选项卡

jQ选项卡 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-

刺骨的言语ヽ痛彻心扉/ 2022年06月14日 10:54/ 0 赞/ 234 阅读

相关选项卡

关于选项卡效果 1. 常规 2. 传参（可设置多个参数值） 3. 回调函数下面是几种参考方法常规方法 <!DOCTYPE html>

淩亂°似流年/ 2022年06月14日 10:37/ 0 赞/ 304 阅读

相关 CSS选项卡

看到好多大型的网站都会有一些tab选项卡，所以今天就写了一个供大家参考，代码简洁明了，不需要太多的解释，只需要注意一下兼容性问题就行了。看代码 <html>

缺乏、安全感/ 2022年06月13日 12:13/ 0 赞/ 239 阅读

相关 jQuery 选项卡

选项卡是非常常见而实用的效果，本篇文章示例一个简单的选项卡效果，在以往的代码中都是选择jQuery对象级别插件扩展，本次将改为类级别插件扩展的方式。上效果图： ![70]

左手的ㄟ右手/ 2022年05月11日 14:34/ 0 赞/ 228 阅读

相关 jQuery选项卡

Html的代码 <body> <div class="wrap"> <ul class="blist clearfix">

我不是女神ヾ/ 2022年02月02日 19:43/ 0 赞/ 355 阅读