zoukankan      html  css  js  c++  java
  • tabs选项卡

    jQuery提供了tabs(选项卡/页签)overlay(覆盖层),tooltip(提示框),scrollable(滚动信息栏),expose(突出显示),flahembed(视频播放嵌入)六大类功能(其官方网站自称为六大工具),这六大类功能又是每个功能都有自己的独立支持包,不相互干扰,用户完全可以根据自己的需要下载,这样就减少了js文件下载对页面加载速度的影响。

    <ul class="tabs-t"> 
    <li><a href="#first">tab1</a></li> 
    <li><a href="#second">tab2</a></li> 
    <li><a href="#third">tab3</a></li> 
    </ul> 
    <div class="tabsContent "> 
    <div> 
    <p> 
    Here you can see tabs in action. They are the most popular user-interface component on the web. And for good reason: they are intuitive to use, people are used to them, and above all your can organize your pages more friendly. 
    </p> 
    tabl content<a href="#second">open table2</a></div> 
    <div>

    该功能是通过jqueryObject.tabs()方法来实现的,其中tabs方法提供以下三种方式: 
    1. $("ul.tabs-t").tabs("div.tabsContent>div")//该方法能简单的将tabs组织起来 
    2. $("ul.tabs-t").tabs("div.tabsContent>div" ,{config object}) //该方法通过配置对象将tabs组织起来,适合多样的tabs展示。 
    3. $("ul.tabs-t").tabs("div.tabsContent>div" ,callback function) //通过回调函数对tabs进行进一步操作。 

    current:'current',//为当前tab的增加的class名称,默认为current 
    effect:"fade",//每个tab的panel内容显示方式为从整体逐渐显示 
    //effect:"slide",//点击tab的panel出现在当前tab的panel下面,并覆盖掉当前panel 
    //effect:"horizontal",//当前tab的panel逐渐从右向左收缩并最终消失,点击panel的内容占据相应位置,比较适合水平导航 
    fadeInSpeed:1000,//设置panel显示的速度,设置该属性在effect置为fade时有效,默认值为200毫秒 
    event:"mouseover",//指定触发tab切换的事件,默认是单击鼠标,可选择的触发事件有“mouseover”,"dbclick" 
    history:true,//类似javascript的history功能,默认为false,当用户点击浏览器的前进后后退按钮后,如果此处设置为true,那么就会回退到上次点击的tab,而不是跳转到其他页面去 
    initialIndex:1,//设置默认显示的tab 
    tabs:"a",//设置tab对应的标签元素,默认为"a",这里也可以设为"li",该处相当于jquery的选择器 
    api:false,//设置当前tab所在容器的返回类型类型。如果为false(默认值),以jquery对象返回;否则,以js对象返回。如果存在多个值,返回最后一个值。 
    onBeforeClick:function( index){ 
    //alert(this.getCurrentTab().text());//返回当前tab的名称 
    return true; 
    },//在tab被点击之前调用的函数,如果该函数返回false,那么该tab不会被触发;返回的是一个tab对象,对于该对象的操作,参见tab相关方法;改返回函数有一个参数,为当前tab的索引 
    onClick:function(index){ 
    return true; 
    }//在tab被点击的时候调用的函数,其他用法同onBeforeClick 

    tabs也提供了获取tabs的一系列方法,具体实现及说明如下:
    方法                         返回值                   描述 
    getConf()                 API               返回api的配置对象 
    getCurrentPane() jQuery             获取当前的panel 
    getCurrentTab()   jQuery             获取当前tab 
    getIndex()            integer            获取当前tab的index 
    getTabs()             jQuery             获取所有的tab 
    getPanes()           jQuery             获取所有的panel 
    next()                    API                 跳转到下一个tab 
    prev()                    API                 跳转到上一个tab 
    onBeforeClick()      API                同配置对象的BeforeClick,一个对象可以绑定多个Beforeclick事件 
    onClick()                API               //同配置对象的Click,一个对象可以绑定多个Beforeclick事件

  • 相关阅读:
    [转载]c++转python
    [转载]One-hot编码
    [转载]各种机器学习算法的应用场景
    SVC和SVR
    机器学习-正则化+回归与分类辨析
    C#编译时,提示缺少NuGet包
    C++中 左值和右值的区别
    C++11并发编程实战 免费书籍
    静态库和动态库
    C++中string类
  • 原文地址:https://www.cnblogs.com/top5/p/1763842.html
Copyright © 2011-2022 走看看