検索

ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery Tab プラグインは、タブに iframe を表示するために使用されます。ソース コードと詳細な手順が含まれています_jquery

jQuery Tab プラグインは、タブに iframe を表示するために使用されます。ソース コードと詳細な手順が含まれています_jquery

WBOY
WBOYオリジナル
2016-05-16 18:05:331017ブラウズ

著者: think8848 (会社ホームページ: http://www.cleversoft.com、QQ: 166156888、ブログ: http://think8848.cnblogs.com) この情報は転載用に保管しておいてください


CleverTabs は、jQuery バージョン: 1.6.1、jQuery UI スタイル バージョン: 1.8.13 を必要とする jQuery プラグインです。その機能は、iframe を表示するための jQuery UI スタイルのタブを作成することです。

この例では、jQuery.contextMenu プラグインが追加され、そのスタイルを変更して jQuery UI スキン

を使用しました。

効果は次のとおりです:

jQuery Tab プラグインは、タブに iframe を表示するために使用されます。ソース コードと詳細な手順が含まれています_jquery
基本的なアプリケーションの例:
HTML コード:


    JavaScriptコード:

    コードをコピー コードは次のとおりです:



    CleverTabsすべてのタブ コンテナ用


    コードをコピー コードは次のとおりです。
    var tabs; >


    CleverTabs.add メソッド: 新しいタブを追加し、アクティブ化状態にします。追加する URL が既に存在する場合、タブはアクティブ化されます



    コードをコピーします
    コードは次のとおりです。


    CleverTabs.getCurrentTab メソッド:
    現在アクティブなタブを取得します



    コードをコピーします


    コードは次のとおりです。
    CleverTabs.getTabByUrl メソッド:
    指定された URL の Tab インスタンスを取得します




    コードをコピーします


    コードは次のとおりです。
    🎜>
    CleverTab.kill メソッド:
    タブからタブを移動



    コードをコピー
    コードは次のとおりです。
    CleverTab.setDisable メソッド:
    disabled を true に設定した後、タブの locked 属性を自動的に true に設定します。 🎜>



    コードをコピー


    コードは次のとおりです。

    -----------------------------2011.06.27更新------------- --------------------
    「他人を変えることができないなら、自分を変えればいいのです。」
    ほとんどの場合、現在のページはいくつかのページで構成されていますバナー、ナビゲーター、コンテンツなどのパーツ構成。作業領域を大きくするために、バナー、ナビゲーター、またはその他のパネルが折りたたまれる (Collapse) ことがよくあります。タブの幅: 80%; 高さ: 90%; タブの幅と高さが変更されましたが、さらにひどいのは、内部タブ ページが以前のサイズに従って表示されていることです。サイズ変更イベントにはウィンドウのみがあり、ボディのみですが、div はこのイベントをサポートしていません。彼らが何を考えているかは本当にわかりません...前の賢いタブでは、window.resize イベントをバインドしましたが、問題は次のとおりです。上記の例では、ウィンドウのサイズは実際には変更されておらず、本体も変更されていませんが、この場合、デフォルトの tabPenelContainer を使用する場合は、タブのサイズが変更されている必要があります。タブのサイズ変更イベントですが、タブは単なる div です。サイズ変更する予定ですか?昨日寝る前にふと思いついた方法ですが、「他人を変えられないなら自分を変える」ことができるので、「自分ができないことは他人に任せる」ことができます。サイズ変更を「外注」することは忘れてください。したがって、CleverTabs コンストラクターでは、resizePanelContainer 関数が CleverTabs プロトタイプに追加されました。しかし、誰がそれを呼び出したかは誰にもわかりません。
    CleverTabs.resizePanelContainer メソッド:
    CleverTabs のデフォルトのPanelContainerを使用する場合、PanelContainerのサイズをリセットします。
    コードをコピー コードは次のとおりです: