jquery ui tabs_jquery の理解について話す

jquery ui ここをクリックして をダウンロードしてください。また、公式 Web サイトにアクセスしてドキュメントのヘルプを表示することもできます。

1 属性

1.11 ajaxOptions、タブがコンテンツをロードするときに ajax オプションを追加します。追加された ajax オプションは、ajax を使用する場合にのみ機能します。デフォルト値は null です。上記の例では、beforeSend と success の 2 つのオプションが追加されています。 ajax には他にもいくつかのオプションがあります。jquery ajax を参照してください。ここでは詳しく説明しません。 。 。

1.12 初期化設定例: $('.selector') はタブのクラス名です。この例では、.selector=#tabs については説明しません。

$('.selector').tabs({ ajaxOptions: { async: false } }); //ここで非同期を同期に変更します。

1.13 初期化後のパラメータの取得と設定: 注意: getter は取得を意味し、ゲッターと読みます。setter は設定を意味し、セッターと読みます。これについては今後説明しません。

//getter
var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
//setter
$('.selector').tabs('option', 'ajaxOptions', { async: false });

1.21 キャッシュのデフォルトは false で、キャッシュはありません。このオプションは ajax 呼び出しに使用されます。簡単に言うと、キャッシュがない場合は、リクエストが送信されるたびに更新されます。キャッシュがある場合は、最初のリクエストで更新され、その後ページを閉じると更新されません。案件。

ajaxOptions:{cache:false} にはこれと同じ機能が必要です。

1.22 初期化設定例:

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

$('.selector').tabs({ キャッシュ: true });

2.23 初期化後のパラメータ取得と設定:

//getter
var cache = $('.selector').tabs('option', 'cache');
//setter
$('.selector').tabs('option', 'cache', true);

1.31collapsible、つまり折りたたみ可能です。デフォルトのオプションは false であり、折りたたむことはできません。 true に設定すると、ユーザーは選択したタブのコンテンツを折りたたむことができます。このようにしてみましょう。タブ 2 を 1 回クリックすると、タブ 2 のコンテンツが表示されます。このとき、タブ 2 をもう一度クリックすると、タブ 2 のコンテンツ領域が折りたたまれます。のタブが再度展開されます。わかりますか？理解できないのはわかりますが、上の例を試してみてください。

1.32 初期化設定例:

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

$('.selector').tabs({ 折りたたみ可能: true });

1.33 初期化後のパラメータ取得と設定: 1.23...を参照してください。

1.41 Cookie のデフォルト値は null です。Cookie プラグインが必要です。最後に選択したタブを Cookie に保存します。使用可能なオプションの例: (例): { 有効期限: 7、パス: '/'、ドメイン: 'jquery.com'、セキュア: true }.

1.42 初期化設定例: $('.selector').tabs({ cookie: {expires: 30 } });

1.43 初期化後のパラメータ取得と設定: 1.23...を参照してください。

1.51deselectable のデフォルトは false で、collapseable と同じ効果があるようです。

1.61 は、どのタブが使用できないかを設定します。これは配列の例 [0,1,2] であり、1 番目、2 番目、および 3 番目のタブです。デフォルトは[]です。

1.62 初期化設定例: $('.selector').tabs({ 無効: [1, 2] });

1.63 初期化後のパラメータ取得と設定: 1.23...を参照してください。

1.71 イベント、タブを切り替えるためのイベント、デフォルトは「クリック」で、クリックするとタブが切り替わります。

1.72 初期化設定例: $('.selector').tabs({event: 'mouseover' }); //マウスをスライドさせることでタブを切り替えます

1.73 初期化後のパラメータ取得と設定: 1.23...を参照してください。

1.81 fx、タブ切り替え時のアニメーション効果、デフォルト: null、アニメーション効果なし、

1.82 初期化設定: 上部の例を参照してください。

1.83 初期化後のパラメータ取得と設定: 1.23...を参照してください。

1.91 idPrefix、ajax を使用する場合、idPrefix オプションで一意の ID を追加できます。デフォルトは「ui-tabs-」です。

1.92 初期化設定例: $('.selector').tabs({ idPrefix: 'ui-tabs-primary' });

1.93 初期化後のパラメータ取得と設定: 1.23...を参照してください。

1.101 が選択されました。初期化中にどのタブが選択されますか。デフォルトは 0 で、最初のタブが選択されていることを意味します。

1.102 初期化設定例：$('.selector').tabs({ selected: 3 });

1.103 初期化後のパラメータ取得と設定: 1.23...を参照してください。

1.111 スピナー、リモート コンテンツがロードされると (ajax)、スピナー文字列の HTML コンテンツがタブのタイトルに表示されます。 (とても驚いています。自分でも試してみましたが、なぜうまくいかないのですか?)

1.112 初期化設定例: $('.selector').tabs({ スピナー: 'データ取得中...' });

1.113 初期化後のパラメータ取得と設定: 1.23...を参照してください。

1.121 パネルテンプレート、

1.131 tabTemplate 、

2 イベント

最初にイベント バインディングの例を示します。注意してください:

$('#example').bind('tabsselect', function(event, ui) {
  ui.tab   // 被选中（点击后）的选项卡元素
  ui.panel  //这个元素包含被选中（点击后）的选项卡的内容
  ui.index  //返回一个被选中（或点击后）选项卡的索引值（从0开始）
});

2.11 select 类型：tabsselect ，点击选项卡时触发该事件。

2.12 初始化时绑定事件：

$('.selector').tabs({
  select: function(event, ui) { ... }
});

2.13 在初始化后使用事件绑定绑定该事件：

$('.selector').bind('tabsselect', function(event, ui) {
...
});

2.21 load，类型：tabsload 一个远程（ajax）选项卡的内容被加载完成后触发该事件。

2.22 参考2.12

2.23 参考2.13

2.31 show，类型：tabsshow 当选项卡显示后触发该事件。

2.41 add，类型：tabsadd ，当一个选项卡被添加后触发。

2.51 remove ，类型tabsremove ，当一个选项卡被删除后触发。

2.61 enable ，类型tabsenable ，当一个选项卡可用时触发。

2.71 disable，类型tabsdisable，当一个选项卡不可用时触发。

3 方法

3.11 destroy，哈哈，又到了我最喜欢的摧毁地球时间。例：.tabs( 'destroy' )

3.21 disable，整个选项卡不可用。

3.31 enable，整个选项卡可用。.tabs( 'enable' )

3.41 option，设置属性。例：.tabs( 'option' , optionName , [value] )

3.51 add，remove，添加、删除选项卡。例：.tabs( 'add' , url , label , [index] ) ，.tabs( 'remove' , index )

3.61 enable，设置某个选项卡标签可用。例：.tabs( 'enable' , index )

3.71 disable，设置某个选项卡标签不可用。例：.tabs( 'disable' , index )

3.81 select，选择一个选项卡标签。例：.tabs( 'select' , index ) ，index从0开始。

3.91 load，重载一个ajax选项卡的内容，这个一直载入远程内容，即使cache设置为true，第二个参数是要重载选项卡的索引值。

例：.tabs( 'load' , index )

3.101 url，当一个ajax选项卡将要加载时，改变url。.tabs( 'url' , index , url )

3.111 abort，中止所有运行在tab标签上的ajax请求或动画。.tabs( 'abort' )

3.121 rotate， 自动翻滚选项卡标签。.tabs('rotate',ms,[countinue]),第二个参数是毫秒，是两个标签自动翻滚所需要的时间，设为0或null为停止翻滚。第三个参数是设置当用户选择一个

选项卡标签后是否继续翻滚，默认为：false，不继续。

真累，歇歇再说吧。。。

4 技巧

4.1 如何接收已选中选项卡标签的索引值？

例：

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

4.2 如何用一个其它元素代替选项卡单击事件来切换选项卡？

例：

var $tabs = $('#example').tabs(); // 第一个标签被选中
$('#my-text-link').click(function() { // 绑定单击事件
  $tabs.tabs('select', 2); // 切换到第三个选项卡标签
  return false;
});

4.3 如何立刻选择刚添加的选项卡标签？

例：

var $tabs = $('#example').tabs({
  add: function(event, ui) {
    $tabs.tabs('select', '#' + ui.panel.id);
  }
});

4.4 如何在一个新窗口中打开选项卡标签？

例：$('#example').tabs({

  select: function(event, ui) {
    location.href = $.data(ui.tab, 'load.tabs');
    return false;
  }
});