ホームページ >ウェブフロントエンド >jsチュートリアル >YUIのタブ切り替え実装コード_YUI.Ext関連
YUIのタブ切り替え実装コード_YUI.Ext関連
- WBOYオリジナル
- 2016-05-16 18:29:491425ブラウズ
タブの切り替えは HTML 構造に依存すべきではないため、デザイナーやフロントエンド開発者に最大限の柔軟性を与えます。原則: タブ オブジェクトは、コントロール部分 (トリガー) とコンテンツ部分 (シート) に分割されます。トリガーがトリガーされると、対応するシートが表示されます。
Dashu は以前に TabControl コードを作成しましたが、2 年間使用した後でもまだ非常にテスト可能であり、このアイデアが実際のニーズと比較的一致していることがわかります。 YUI ベースのバージョンに変更したので、より鮮明に見えるかもしれません。まず テスト ページ にアクセスして、完全な JavaScript コード を確認してください。
注: 実際のコードに変更する場合は、Tab クラスを特定の名前空間に配置し、グローバル空間に直接公開しないでください。
1:
を使用します。 以下は一般的に使用される HTML 構造ですが、これに限定されません。
コードをコピー コードは次のとおりです:
- t1
- /li> t3
id=" s2">s2
/div>
コードは次のとおりです。 4 つの初期化方法はすべて可能です。
コードは次のとおりです。 4 つの初期化方法はすべて可能です。
コードをコピー
コードは次のとおりです。 var tab = new Tab( $D.get('t').getElementsByTagName('li'), $D.get('s').getElementsByTagName('div'));//1 var tab = new Tab(['t1 ',' t2', 't3'],['s1','s2', 's3']);//2
var tab = new Tab(['t1','t2','t3' ],[ 's1','s2','s3'],{triggerEvent:'mouseover',slideEnabled:true});//3 var tab = new Tab();//4
tab .add( 't1', 's1');
tab.add('t2', 's2');
tab.add('t3', 's3'); ['triggerEvent '] = 'mouseover';
tab.config['slideEnabled'] = true;
tab.onShow.subscribe(function(t, a){ ... }); .init( ; イベントを定義します。
tab .add( 't1', 's1');
tab.add('t2', 's2');
tab.add('t3', 's3'); ['triggerEvent '] = 'mouseover';
tab.config['slideEnabled'] = true;
tab.onShow.subscribe(function(t, a){ ... }); .init( ; イベントを定義します。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。