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

著者: 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 スキン

を使用しました。

効果は次のとおりです:

基本的なアプリケーションの例:
HTML コード:

JavaScriptコード:

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

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

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

var tabs; >


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



コードをコピーします

コードは次のとおりです。 tabs.add({ //タブ内にある必要があります

id: 'uniqueId',

// iframe の src 属性に設定する値
url: 'iframe.src',
//タブヘッダーに表示されるテキスト
label: 'tab header',
//このタブを閉じるときに更新する必要があるタブの URL (デフォルト: null)
closeREfresh: 'tab url',
//このタブを閉じるときに必須 アクティブ化されたタブの URL (デフォルト: null)
closeActivate: 'tab url',
//このタブを閉じるときに実行する必要があるコールバック関数
callback: function () { /*do something*/ }
}); 🎜>


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

コードをコピーします


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

CleverTabs.getTabByUrl メソッド:

指定された URL の Tab インスタンスを取得します

コードをコピーします

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

CleverTabs.clear メソッド:

タブ内のロックされていないタブをすべて閉じる

コードをコピー

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

CleverTab.deactivate メソッド:
タブ ページを非アクティブにしますが、コード内での使用はお勧めしません。
CleverTab.prevTab メソッド:
前のタブ タブ

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

🎜>
CleverTab.kill メソッド:
タブからタブを移動



コードをコピー

コードは次のとおりです。 var tabs = ('#tabs').cleverTabs(); var tab = tabs.getTabByUrl('http:// www.jb51.net'); tab.kill();

CleverTab.refresh メソッド:
タブ

コードをコピー

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

CleverTab.setDisable メソッド:
disabled を true に設定した後、タブの locked 属性を自動的に true に設定します。 🎜>



コードをコピー

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

タブのロックされた属性を設定します。 locked を true に設定すると、タブを閉じることができなくなります

コードをコピー

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


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

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

http://demo.jb51.net/js/2011/CleverTabs/index.htm
ソース コードのダウンロード /201106/yuanma/CleverTabs.rar