JQuery Tab タブ効果コードの改善 version_jquery

導入されるのは、JQuery をベースとしたタブ効果です。重要な点は、HTML にはインライン イベント ハンドラーがなく、動作と構造の分離を実現するために js ファイルで定義されることです。実際のアプリケーションでは、タブ モジュール構造コードの整合性が確保されている限り、同じ種類の N 個のタブを任意に追加できます。HTML でイベント ハンドラーを手動でバインドしたり、非表示にするコンテンツ レイヤーに ID を追加したりする必要はありません。 。
ここでは、複数の呼び出しをサポートしつつ、タブの自動切り替え機能と、タブのクリックまたはマウスの配置に対応するパラメータを追加して、いくつかの修正を加えました。
ここで、コードを貼り付けて他のブロガーと共有します
これは JS スクリプトです

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

/* jquery-fn-accordion v0
* jQuery JavaScript Library v3 に基づく
* http://jquery.com/
*
* 次のコードの作成者: miqi2214 、 wbpbest
* ブログ:eycbest.cnblogs.com 、 miqi2214.cnblogs.com
* 日付: 2010-3-10
*/
//メモ: デバッグ エラーの場合は、引用した jquery バージョン番号を確認してください。現在の参照バージョンは 1.3 です。
//パラメータの説明:
//tabList: ラップされたタブの親レイヤー
//tabTxt:ラップされたコンテンツレイヤー 親レイヤー
//options.currentTab: アクティブ化されたタブのシリアル番号
//options.defaultClass: 現在のタブのアクティブ化ステータスのスタイル名、デフォルト名は「current」です
// isAutoPlay: 自動かどうか Switching
//stepTime: 切り替え間隔
//switchingMode: モードの切り替え ('c' はクリック切り替え、'o' はマウスオーバー切り替えを意味します)
//呼び出し方法は次のとおりですこのページの下部のコードに示されています
$.fn.tabs = function(tabList, tabTxt, options) {
var _tabList = $(this).find(tabList);
var _tabTxt = $(this).find(tabTxt);
//操作を簡素化するために、タブは li タグで実装する必要があります
var tabListLi = _tabList.find("li"); >vardefaults={currentTab:0,defaultClass:"current",isAutoPlay:false,stepTime:2000,switchingMode:"c" };
var o = $.extend({},defaults,options); >var _isAutoPlay = o.isAutoPlay;
var _stepTime = o.stepTime ;
_tabList.find("li:eq(" o.currentTab ")") (o.defaultClass);
//
_tabTxt.children("div").each(function(i) {
$(this) を実装するには、コンテンツ レイヤーが div であることが必須です。 attr("id", "wp_div" i);
}).eq( o.currentTab).css({ "display": "block" });
tabListLi.each(
function( i) {
$(tabListLi[i]).mouseover(
function () {
if (_switchingMode == "o") {
$(this).click();
}
_isAutoPlay = false;
}
);
>$(tabListLi[i]).mouseout(
function() {
_isAutoPlay = true;
}
)
}
);
_tabTxt.each(
function(i) {
$(_tabTxt[i]).mouseover(
function() {
_isAutoPlay = false;
}
);
$(_tabTxt[ i]).mouseout(
function() {
_isAutoPlay = true;
}
)
});
// }
// else {
tabListLi.each(
function(i) {
$(tabListLi[i]).click(
function () {
if ($(this).className != o.defaultClass) {
$(this).addClass(o.defaultClass).siblings().removeClass(o.defaultClass)
; }
if ($.browser.msie) {
_tabTxt.children(" div").eq(i).siblings().css({ "display": "none" }); _tabTxt.children("div").eq(i).fadeIn(600);
} else {
_tabTxt.children("div").eq(i).css({ "表示": " block" }).siblings().css({ "display": "none" }) ; //標準スタイル
}
}
)
}
);
// }
function selectMe(oo) {
if (oo != null && oo.html() != null && _isAutoPlay) {
oo.click()
}
if (oo.html() == null) {
selectMe(_tabList.find( "li").eq(0));
} else {
window.setTimeout(selectMe, _stepTime, oo) .next());
}
}
if (_isAutoPlay) {
//alert("_isAutoPlay:" _isAutoPlay);
selectMe(_tabList.find("li"). eq(o.currentTab));
//alert(_isAutoPlay) ;
var userName = "wbpbest"; ;
window.setInterval = function(callback, ti​​meout, param) {
var args = Array.prototype.slice.call(arguments, 2);
var _cb = function(); .apply(null, args);
__sti(_cb, timeout) ;
//window.setInterval(hello,3000,userName);
window.setTimeout = function(callback, ti​​meout, param) {
var args = Array.prototype.slice.call(arguments, 2);
var _cb = function() {
コールバック。 apply(null, args);
}
__sto(_cb, timeout);


デモアドレス:
http://demo.jb51.net/ js/wbpbest/index.html


パッケージのダウンロード アドレス
http://www.jb51.net/jiaoben/25569.html