jQueryのEasyUIレイアウト - 自動再生タブを追加(タブ)
このチュートリアルでは、自動再生タブを作成する方法を紹介します。 タブコンポーネントは、最初のタブのパネルが表示され、第3、第二の表示...我々はそれサイクルさせ、自動的にタブパネルを切り替えるためにいくつかのコードを記述します。
ステップ1:タブを作成
<DIVのID = "TT"クラス= "easyui-タブ"スタイル= "幅:330px;高さ:270px;"> <DIVタイトル= "Shirt1"スタイル= "パディング:20ピクセル;"> <IMG SRC = "画像/ shirt1.gif"> </ DIV> <DIVタイトル= "Shirt2"スタイル= "パディング:20ピクセル;"> <IMG SRC = "画像/ shirt2.gif"> </ DIV> <DIVタイトル= "Shirt3"スタイル= "パディング:20ピクセル;"> <IMG SRC = "画像/ shirt3.gif"> </ DIV> <DIVタイトル= "Shirt4"スタイル= "パディング:20ピクセル;"> <IMG SRC = "画像/ shirt4.gif"> </ DIV> <DIVタイトル= "Shirt5"スタイル= "パディング:20ピクセル;"> <IMG SRC = "画像/ shirt5.gif"> </ DIV> </ DIV>
ステップ2:コード自動再生を書きます
VAR指数= 0; VARトン= $( '#のTT'); VARタブ=のt.tabs( 'タブ'); setInterval(関数(){ t.tabs( '選択'、タブの[インデックス] .panel( 'オプション')タイトル。); インデックス++; 場合(インデックス> = tabs.length){ インデックス= 0。 } }、3000);
あなたが見ることができるように、我々はすべてのタブパネルを取得し、それらを切り替える」のsetInterval」機能を使用するには、「タブ」アプローチを呼び出します。