js_javascript スキルにカプセル化された優れたタブ効果コード

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

-equiv="Content-Type" content="text/html; charset=gb2312">
text/javascript"> >{
this.bind = new Array();
this.index = 0; //デフォルトで表示されるタブは 0 から始まります

this.style = new Array(); / /["","",""]
this.overStyle = false; //オプションに over, out 変換スタイル イベントがあるかどうか、スタイルは this.style[2] this.overChange = false; / /コンテンツが over、out で直接アクティブ化されるかどうか
this.menu = false; パラメータは、メニューと情報のサブセットの深さを指定するために使用される ID です

this.auto = [false, 1000]; //自動スクロール [true,2000]
this.timerID = null; //自動再生
this.menutimerID = null; 🎜> this.creat = function(func)
{
var _arrMenu = document.getElementById(this.bind[0] ).getElementsByTagName(this.bind[1]);
var _arrInfo = document. getElementById(this.bind[2]).getElementsByTagName(this.bind[3]);
var my = this, i;
var argLen = argument.length
var arrM = new Array() ;

if(this.nesting[0] || this.nesting[1]) // オプション カード埋め込み Set があります > {// 必要なデータをフィルタリングします
var arrmenu = this.ネスティング [0]? Getchilds (_Armenu, This.bind [0], 2): _ Arrmenu;
var arrinfo = this.nesting [1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo ;
var arrInfo =
これにはスペースが必要です。")}
// 修正
if (this.menu) {this.auto = false; this.overchange = true; 直接アクティブ化

// ループしてさまざまなイベントを追加します。など。
for(i=0;i {
arrMenu[i].cName = arrMenu[i].className ;
arrMenu[i].className = (i !=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style [1]); // スタイルをロードし、統一します。メニューのスタイル

if(arrMenu[i].getAttribute("skip")) // スキップする必要があるコンテナ
this.overStyle || this.overChange) // 以上です、スタイルを変更するか、
をアクティブにします。 ;}
arrMenu[i] click = function(){if (argLen==1){func()}}
arrInfo[i].style.display = "none"; if(i!=this.index || this.menu){arrInfo[i].style.display="none"} //初期化を非表示にし、すべてのメニューを非表示にします
arrMenu[i]。 index = i; //独自のアクティベーション値を記録します[シリアル番号]
arrInfo[i].index = i;


if(this.overChange) //マウスオーバー、アウトがありますイベント
{
arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);}
arrMenu[i].onmouseout = function(){changeOption(this);my.changeMenu(0):autoStop(this, 1);}
){changeOption(this);autoStop( this, 0);if(argLen==1 ){func()}}
if(this.overStyle) // スタイルを変更するには終わりです
{
arrMenu[i] .onmouseover = function (){changeTitle(this, 2 );autoStop(this, 0);}
arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);}
//自動操作があります
= function（）{autostop（this、0）;}
arrmenu [i] .onmouseout =
if（this.auto [0] || this.menu ) //arrinfo は自動再生を制御します
{
arrInfo[i].onmouseover = function(){my.menu?changeMenu(1): autoStop(this, 0);}
arrInfo[i]。 onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);}
End

if(this.auto[0])
{
this .timerID = setTimeout(autoMove,this.auto[1])
}

// 自動再生
関数 autoMove()
var n = my.index 1; ==l){n=0}; 🎜> while( arrMenu[n].getAttribute("skip")) //スキップする必要があるコンテナ
{
n = 1; n==l){n=0} }
changeOption(arrMenu[n]); ; num: 0 が終了、1 が終了。 obj は一時的に役に立ちません。-_-!!
function autoStop(obj, num)
{
if(!my.auto[0]){return;}
//if(obj.index==my. Index)
num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]);
}

// タブを変更します
function changeOption(obj)
.index].style.display = "none"; //古いコンテンツを非表示

obj.className = getClass(obj,my.style[1]); to new style
arrInfo[ obj.index].style.display = ""; // 新しいコンテンツを表示

my.index = obj.index; // 現在選択されているインデックスを更新します
}

/*
overStyle の onclick、onmouseover、onmouseout イベントのみ。
obj: ターゲット オブジェクトを事前にアクティブ化するために使用されます。 NUM: 1 は終了、0 は OUT
*/
Function Changetitive (obj, num)
{
if (! My.Overstyle) {RETURN;};
IF (obj. Index!=my.index){obj.className = getClass(obj,my.style[num])}
。num: 1 が終了、0 が終了
*/
function changeMenu(num)
{
if(!my.menu){return;}
num==0?my. menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID)
arrInfo[my.index]. style.display = "none";
arrMenu[my.index].className = my.style[0] ];
}

// className を取得 (元のスタイルの上書きを防ぐため)
function getClass(o, s)
{
if(o.cName=="" ){return s}
else{return o.cName " " s}
}

= my.nesting[num] ===""?arrObj[0]:document.getElementById( my.nesting[num]); //最初のサブセットを取得します
do //深さを計算します
{
if(firstObj.parent Node .getAttribute("id")==id){break} else{ Depth =1}
firstObj = firstObj.parentNode;
while(firstObj.tagName.toLowerCase()!="body" ) // ボディフォースが終了します。

var t; var arr = new Array(); for(i=0;i {
t = arrObj[i ]、d = 0;
do
do "）== id && d == arr.push（arrobj [i]）;}
t = t = t.parentnode ;
}
while(t.tagName.toLowerCase()!="body") // ボディフォース終了
}
}
}
window.onload = function()
{
var aa = new opCard();
aa.bind = ["a1","div","b1","div"];
aa.style = ["a1_0","a1_1","a1_0"];
aa.index = 0;
aa.nesting = [false,true,"",""]
aa.creat();
aa =null;

// デフォルトの onclick では、
var bba = new opCard(); a2","li","b2","div"];
bba.style = ["style1", "style2", "style3"];
bba.overStyle = true;
bba .creat();
bba = null;

// デフォルトの onclick では、
var bbb = new opCard();
bbb.bind = [" a3" ,"li","b3","div"];
bbb.style = ["style1","style2","style3"];
bbb.overStyle = true; ();
bbb = null;

// onmousover トリガーの例
var cc = new opCard();
cc.bind = ["a4","li "," b4","div"];
cc.style = ["style1","style2","style3"];
cc.overStyle = true;
cc.overChange = true;
cc.creat();
cc = null;

//自動再生の最初の例 auto
var dd = new opCard();
dd.bind = [ "a5", "li","b5","div"];
dd.style = ["style1","style2","style3"]
dd.auto = [true, 3000]; dd.creat();
dd = null;

//自動再生の 2 番目の例 auto
var ee = new opCard();
ee.bind = ["a6"," li","b6","div"];
ee.style = ["style1","style2","style3"];
ee.auto = [true, 2000 ];
ee .overChange = true;
ee.creat();
ee = null; //自動再生の 3 番目の例 auto
var ff = new opCard (); .bind = ["a7","li","b7","div"];
ff.style = ["style1","style2","style3"];
ff.auto = [ true, 1000];
ff.overChange = true;
ff = null;
var gg = new opCard();
gg.bind = ["a8","li","b8","div"];
gg.style = ["style1","style2" ","style3"];
gg.overStyle = true;
gg.menu = true;
gg.creat();
gg = null;

//その他アプリケーション
var hh = new opCard();
hh.bind = ["a9","li","a9","li"];
hh.style = ["style4"," style4","style4"];
//hh.overStyle = true;
hh.auto = [true, 1000];
hh.creat();
hh = null;
}





  
    

简单介绍          默认的onclick          onmousover触发          自动播放auto          菜单导航          关于嵌套          其他应用          一些说明                                             もうタブには見えません -_-!!! 理解できない場合は、いくつか説明します。わかりやすくするための例を次に示します。 & lt; Strong & gt; "b1", "div"];/strong & lt; id="a1" の下に td タグをバインドし、id="b1" の下に div タグをコンテンツとしてバインドします。             td标签的数量和div标签的数量必须相同             （若不需要显示内容，只显示菜单话，可以这个在td标签上加

）             如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting             obj.nesting = [false,true,"",""];             当标签tag有嵌套时，需要用到这个             比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到             菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了             判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断             但有些情况下，这样还是不行             我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];             这样就肯定不会错了（不明白的话看下例子就简单多了）             obj.index = 0;             默认显示第几个选项卡，序号从0开始             obj.style = ["c1","c2","c3"]             菜单加载的样式的className：             菜单未选中的className是c1             菜单选中的className是c2             菜单onmouseover的className是c3             obj.overStyle = false;             选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]             obj.overChange = false;             选项卡内容是否用onmouseover, onmouseout直接激活             obj.menu = false;             选项卡是菜单类型             obj.auto = [false, 1000];             选项卡是否自动播放，播放速度（毫秒）             obj.creat();             开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)             所有的都会触发                                                                                1                2                3                4                                                 这个例子是用onclick触发的 并设置overStyle = true; (over，out改变样式,但不激活)                              var bba = new opCard();                 bba.bind = ["a2","li","b2","div"];                 bba.style = ["style1","style2","style1"];                 bba.overStyle = true;                 bba.creat();                 bba = null;                           33333              4444444                                                            1                2                3                4                                                                 这个例子是比上面增加skip="true" 即 4 所以选项卡4是没有内容的                 你可以为选项卡的文字直接加上链接，我这里就不加了                           222222              33333              4444444                                                                              1                2                3                4                                                 这个例子是用onmouseover触发的 (over，out直接激活) 并且 3 [选项卡3不会被激活] overStyle = true;                              var cc = new opCard();                 cc.bind = ["a4","li","b4","div"];                 cc.style = ["style1","style2","style1"];                 cc.overStyle = true;                 cc.overChange = true;                 cc.creat();                 cc = null;                           33333              4444444                                                                              1                2                3                4                                                 1111111 我每3秒切换一个选项卡                              var ee = new opCard();                 ee.bind = ["a6","li","b6","div"];                 ee.style = ["style1","style2","style1"];                 ee.auto = [true, 2000];                 ee.overChange = true;                 ee.creat();                 ee = null;                           33333 我每3秒切换一个选项卡              4444444 我每3秒切换一个选项卡                       注：鼠标在选项卡任意位置都会使停止播放 下面这个结合overChange一起                                                   1                2                3                4                                                 1111111 我每2秒切换一个选项卡                              var dd = new opCard();                 dd.bind = ["a5","li","b5","div"];                 dd.style = ["style1","style2","style1"];                 dd.auto = [true, 3000];                 dd.creat();                 dd = null;                           33333 我每2秒切换一个选项卡              4444444 我每2秒切换一个选项卡                       下面这个再来个 3 ，且overStyle=true;                                                   1                2                3                4                                                 1111111 我每1秒切换一个选项卡                              var ff = new opCard();                 ff.bind = ["a7","li","b7","div"];                 ff.style = ["style1","style2","style1"];                 ff.auto = [true, 1000];                 ff.overChange = true;                 ff.overStyle = true;                 ff.creat();                 ff = null;                           33333 我每1秒切换一个选项卡              4444444 我每1秒切换一个选项卡                                                                              首页                新闻                论坛                联系我们                                                              国内新闻国际新闻娱乐新闻体育新闻              蓝色理想blue idea                                    注：菜单延时一秒关闭 这里只是演示，实际可以设置下position什么的。-o- 多级菜单不知道能不能支持，没试过                               我见过的许多选项卡都不能用来嵌套 但还是有些时候会用到的             所以如您所见，这个演示本身就是一个嵌套，效果还不错                                        比如图片切换什么，不过我太懒了，不写了。。。             这个能干什么，我也不知道。。                             新年好啊                快过年了                天好冷啊                大家去抢红包吧                红包~！红包~！你在哪里啊？                                                         选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错 即使选项卡菜单skip="true"，内容也要放一个空的标签占位             其他好像暂时没发现什么             本来打算加入ajax的，但有些还没想好。             效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错             写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异             本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。             哦，还有选项卡是附加样式，不会取消原本设置的样式             如左边的下划线是原有的样式                   啥都没有1          啥都没有2          啥都没有3 なし 4

本文>