Sprechen Sie über das Verständnis von jquery ui tabs_jquery

jquery ui Klicken Sie hier, um es herunterzuladen . Sie können auch auf die offizielle Website gehen, um die Dokumentationshilfe anzuzeigen.

1 Attribut

1.11 ajaxOptions, fügen Sie eine Ajax-Option hinzu, wenn die Registerkarte Inhalte lädt. Die hinzugefügte Ajax-Option funktioniert nur bei Verwendung von Ajax. Der Standardwert ist null. Im obigen Beispiel werden zwei Optionen, beforeSend und success, hinzugefügt. Es gibt einige andere Optionen für Ajax. Weitere Informationen finden Sie unter jquery ajax. Diese werden hier nicht im Detail erläutert. . .

1.12 Beispiel für die Initialisierungseinstellung: Bitte beachten Sie, dass $('.selector') der Klassenname von Tabs ist. In diesem Beispiel wird .selector=#tabs nicht noch einmal erklärt.

$('.selector').tabs({ ajaxOptions: { async: false } }); //Hier wird asynchron in synchron geändert.

1.13 Parametererfassung und -einstellung nach der Initialisierung: Bitte beachten Sie: Getter bedeutet Erfassung, ausgesprochen als: Getter, Setter bedeutet Einstellung, ausgesprochen als: Setter, was in Zukunft nicht erklärt wird.

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

1.21 Cache ist standardmäßig auf „false“ eingestellt, kein Cache. Diese Option wird für Ajax-Aufrufe verwendet. Einfach ausgedrückt bedeutet „Kein Cache“, dass sie jedes Mal aktualisiert wird, wenn eine Anfrage mit Cache gesendet wird. Sie wird bei der ersten Anfrage aktualisiert und wird in Zukunft nicht mehr aktualisiert Gegenstand.

ajaxOptions:{cache:false} sollte die gleiche Funktion wie diese haben.

1.22 Beispiel für die Initialisierungseinstellung:

2.23 Parametererfassung und -einstellung nach der Initialisierung:

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

1.31collapsible, was faltbar bedeutet. Die Standardoption ist false und kann nicht gefaltet werden. Wenn der Wert auf „true“ festgelegt ist, kann der Benutzer den Inhalt der ausgewählten Registerkarte ausblenden. Sagen wir es so: Klicken Sie einmal auf Tab 2, und der Inhalt von Tab 2 wird angezeigt. Klicken Sie zu diesem Zeitpunkt erneut auf Tab 2, und der Inhaltsbereich des Tabs wird erneut reduziert der Reiter wird wieder erweitert. Verstehst du? Ich weiß, dass Sie es nicht verstehen. Wenn Sie es nicht verstehen, versuchen Sie es einfach mit dem obigen Beispiel.

1.32 Beispiel für die Initialisierungseinstellung:

1.33 Parametererfassung und -einstellung nach der Initialisierung: siehe 1.23...

1.41 Cookie-Standardwert ist null, Cookie-Plugin ist erforderlich. Speichern Sie die zuletzt ausgewählte Registerkarte in einem Cookie. Beispiele für verfügbare Optionen: (Beispiel): { expires: 7, path: '/', domain: 'jquery.com', secure: true }.

1.42 Beispiel für die Initialisierungseinstellung: $('.selector').tabs({ cookie: { Expires: 30 } });

1.43 Parametererfassung und -einstellung nach der Initialisierung: siehe 1.23...

1.51deselectable hat standardmäßig den Wert „false“ und scheint den gleichen Effekt zu haben wie „collapsible“.

1.61 deaktiviert legt fest, welche Registerkarten nicht verfügbar sind. Es handelt sich um ein Array-Beispiel [0,1,2], das die ersten, zweiten und dritten Registerkarten darstellt. Der Standardwert ist [].

1.62 Beispiel für die Initialisierungseinstellung: $('.selector').tabs({ deaktiviert: [1, 2] });

1.63 Parametererfassung und -einstellung nach der Initialisierung: siehe 1.23...

1.71 Ereignis, das Ereignis zum Wechseln der Registerkarten, die Standardeinstellung ist „Klicken“, klicken, um die Registerkarten zu wechseln.

1.72 Beispiel für die Initialisierungseinstellung: $('.selector').tabs({ event: 'mouseover' }); //Registerkarten wechseln, indem Sie mit der Maus darüber fahren

1.73 Parametererfassung und -einstellung nach der Initialisierung: siehe 1.23...

1,81 fx, Animationseffekt beim Tab-Wechsel, Standard: null, kein Animationseffekt,

1.82 Initialisierungseinstellungen: Bitte sehen Sie sich das obere Beispiel an.

1.83 Parametererfassung und -einstellung nach der Initialisierung: siehe 1.23...

1.91 idPrefix, bei Verwendung von Ajax kann die Option idPrefix eine eindeutige ID hinzufügen, der Standardwert ist: 'ui-tabs-'.

1.92 Beispiel für die Initialisierungseinstellung: $('.selector').tabs({ idPrefix: 'ui-tabs-primary' });

1.93 Parametererfassung und -einstellung nach der Initialisierung: siehe 1.23...

1.101 ausgewählt, welche Registerkarte während der Initialisierung ausgewählt wird, der Standardwert ist 0, was bedeutet, dass die erste Registerkarte ausgewählt ist.

1.102 Beispiel für die Initialisierungseinstellung: $('.selector').tabs({ selected: 3 });

1.103 Parametererfassung und -einstellung nach der Initialisierung: siehe 1.23...

1.111 Spinner: Wenn der Remote-Inhalt geladen wird (Ajax), wird der HTML-Inhalt der Spinnerzeichenfolge im Titel der Registerkarte angezeigt. (Ich bin sehr überrascht, ich habe es selbst versucht, warum funktioniert es nicht?)

1.112 Beispiel für die Initialisierungseinstellung: $('.selector').tabs({ spinner: 'Retrieving data...' });

1.113 Parametererfassung und -einstellung nach der Initialisierung: siehe 1.23...

1.121 PanelTemplate,

1.131 tabTemplate ,

2 Veranstaltungen

Geben Sie zunächst ein Beispiel für die Ereignisbindung. Bitte beachten Sie:

$('#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;
  }
});