「jQuery ツール」タブの使用法入門_jquery

WBOY
リリース: 2016-05-16 17:52:04
オリジナル
1447 人が閲覧しました

html
代打 代打:




<頭>
jQuery ツールのスタンドアロン デモ



<リンク rel="ショートカット アイコン" href="/media/img/favicon.ico">
href="./tabs-no-images.css"/>



  • タブ 1

  • 2 番目のタブ

  • 非常に長い 3 番目のタブ






  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
    viverra、leo sit amet auctor fermentum、risus lorem posuere
    tortor、in accumsan purus magna imperdiet sem。



    サスペンスサスペンス。ペレンテスク・ファシリシス・アリカム・エニム。マエセナス
    ファシリシス・モレスティ・レクトゥス。セド・オルナレ・ウルトリシーズ・トーター。 Vivamus
    nibh metus、faucibus quis、semper ut、dignissim id、diam。





    モーリス・アルトリシーズ。ナム・フギアット・エジェスタス・ヌラ。 Donec augue dui、
    molestie sed、tristique sit amet、blandit eu、turpis。 Mauris
    hendrerit、nisi et sodales Tempor、orci Tellus laoreet elit、sed
    molestie dui quam vitae dui。



    ペレンテスク・ニスル。 Ut adipiscing vehicula risus。名前:
    拷問者。マエセナス・イド・オーグ。 Vivamus interdum nulla ac
    ドール。フース・メトゥス。サスペンス・ユー・プルス。 Maecenas quis lacus
    eget dui volutpat 痴漢。





    オディオのマエセナス。 Nunc laoreet lectus vel ante。ヌラム
    無関心。 Sed justo dolor、mattis eu、euismod sed、tempus a、
    nisl。社会的な罪と大きな出産
    モンテス、バカバカしいこと。



    シードドールで。 Etiam eget quam ac nibh pharetra
    アディピシング。ヌラム・ヴィタエ・リグラ。セド・シット・アメット・レオ・シット・アメット・アルク
    モリス・ウルトリス。ビバムス・ロンクス・サピエンス・ネクロレム。マティス
    ニシで。 enimのビバマス。整数 semper imperdiet
    massa.前庭ヌラ・マッサ、プレティウム・キス、ポルタ・イド、
    前庭、ヴェリット。






    $(function() {
    // ページにタブが 1 つしかない場合、:first セレクターはオプションです
    $(".cs-tabs:first").tabs(".cs-panes :first > div");
    });




    css
    复制代码代码如下:

    /* タブのルート要素 */
    ul.cs-tabs {
    margin:0 ! important;
    パディング:0;
    高さ:30px;
    border-bottom:1px ソリッド #666;
    }
    /* 単一タブ */
    ul.cs-tabs li {
    float:left;
    パディング:0;
    マージン:0;
    リストスタイルタイプ:なし;
    }
    /* タブ内のリンク。背景画像を使用します */
    ul.cs-tabs a {
    float:left;
    フォントサイズ:13px;
    表示:ブロック;
    パディング:5px 30px;
    テキスト装飾:なし;
    ボーダー:1px ソリッド #666;
    ボーダーボトム:0px;
    高さ:18px;
    背景色:#efefef;
    カラー:#777;
    マージン右:2px;
    位置:相対;
    トップ:1px;
    概要:0;
    -moz-border-radius:4px 4px 0 0;
    }
    ul.cs-tabs a:hover {
    background-color:#F7F7F7;
    カラー:#333;
    }
    /* 選択されたタブ */
    ul.cs-tabs a.on {
    background-color:#ddd;
    border-bottom:1px ソリッド #ddd;
    カラー:#000;
    カーソル:デフォルト;
    }
    /* タブペイン */
    .cs-panes div {
    display:none;
    ボーダー:1px ソリッド #666;
    ボーダー幅:0 1px 1px 1px;
    最小高さ:150px;
    パディング:15px 20px;
    背景色:#ddd;
    }

    该功能是通过jqueryObject.tabs()方法来实现的
    $(".cs-tabs:first").tabs(".cs-panes:first > div");
    官方是用的class,我对div都加了id。
    $("#tabui").tabs("#tabpans >div");
    $("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});
    这两个同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果
      是不是很强大呢。
      下面就以上配置参数说明描述如下:
    属性名称 默认 值 描述
    current 'current' CSS类名当前活跃的选项卡。
    effect 'default'

    效果被用来当点击一个选项卡。 这可以 戏剧性地改变这种行为的选项卡。 这是 可用的内置的效果:

    • 'default' :一个简单的显示/隐藏效果。 这个 标签的默认行为。
    • 'fade' :这个选项卡内容逐渐显示 从零到完全不透明。
    • 'ajax' :从服务器加载选项卡内容 使用AJAX。 视图 示例 
    • 'slide' :垂直滑动效果,合适的 对于 手风琴导航 
    • 'horizontal' :水平的幻灯片效果, 合适的 对于 水平 手风琴导航 

    你也可以 让自己的效果 

    event 'click' 指定事件一个选项卡时打开。 默认情况下,这个 发生在当用户单击选项卡。 另一个有效值 是 mouseover” 和 dblclick
    fadeInSpeed 200 自从1.0.1。 唯一可用一起使用时 与“fade”效应。 该属性定义了加快( 毫秒)打开的面板中显示其内容。
    fadeOutSpeed <span id="OUTFOX_JTR_TRANS_NODE-170" class="OUTFOX_JTR_TRANS_NODE">0</span> 自从1.1.0版。 唯一可用一起使用时 与“fade”效应。 该属性定义了加快( 毫秒)打开窗格中隐藏了它的内容。 一个积极的 这里的价值将导致“crossfade”作用 演示了 这里 
    history false 自从1.2.0 。 浏览器的支持 “后退按钮”,这样当用户点击后退或前进 按钮打开相应的选项卡。 要求 这个 历史工具 是 包括在你的页面。
    initialIndex <span id="OUTFOX_JTR_TRANS_NODE-182" class="OUTFOX_JTR_TRANS_NODE">0</span> 指定选项,最初打开当页面 加载。 这将自动触发一个 点击 事件 为选项卡指定在本 财产。 指定 null 或者一个负数这里 不会触发 点击 事件在页面加载 导致所有选项卡最初将关闭。
    rotate false 自从1.1.0版。 当最后一个选项卡是开放和 这个 next() 调用API调用,然后选项卡将 从头开始,当第一个选项卡是开放和 这个 上一页() 调用调用选项卡将提前 最后一个选项卡。 这是证明 在 这里 
    tabs 'a' 一个选择器进行元素,用作标签在根 元素。 如果没有发现然后的直接子根 元素用于为选项卡。

    事件
    事件 触发时间
    onBeforeClick 点击一个标签之前。 第二个参数是指数 被单击的选项卡。
    onClick 点击后一个选项卡。 第二个参数是指数 点击的选项。
    スクリプト API
    次の例は、API にアクセスする方法を示しています。
    コードをコピーします コードは次のとおりです:

    var api = $("#tabui").data("tabs");
    // 次のタブに進みます
    api.next();
    以下にリストされているのはすべての API メソッドです:

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート