jquery UI tabs_jquery에 대한 이해에 대해 이야기해 보세요.

jquery ui를 다운로드하려면 여기를 클릭하세요. 공식 웹사이트로 이동하여 설명서 도움말을 볼 수도 있습니다.

속성 1개

1.11 ajaxOptions, 탭이 콘텐츠를 로드할 때 ajax 옵션을 추가합니다. 추가된 ajax 옵션은 ajax를 사용할 때만 작동합니다. 기본값은 널입니다. 위의 예에서는 beforeSend와 Success라는 두 가지 옵션이 추가되었습니다. Ajax에는 몇 가지 다른 옵션이 있습니다. 여기에서는 자세히 설명하지 않으므로 jquery ajax를 참조하세요. . .

1.12 초기화 설정 예: $('.selector')는 탭의 클래스 이름임을 참고하세요. 이 예에서는 .selector=#tabs에 대해서는 다시 설명하지 않습니다.

$('.selector').tabs({ ajaxOptions: { async: false } }) //여기서는 비동기식을 동기식으로 변경합니다.

1.13 초기화 후 매개변수 획득 및 설정: 참고: getter는 획득을 의미하며 Getter로 발음되고 setter는 설정을 의미하며 Setter로 발음됩니다. 이에 대해서는 앞으로 설명하지 않습니다.

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

1.21 캐시의 기본값은 false이며 캐시가 없습니다. 이 옵션은 ajax 호출에 사용됩니다. 간단히 말해서 캐시가 없다는 것은 요청이 캐시로 전송될 때마다 새로 고쳐지고, 첫 번째 요청에서 새로 고쳐지고 나중에는 페이지가 닫히지 않음을 의미합니다. 문제.

ajaxOptions:{cache:false}는 이와 동일한 기능을 가져야 합니다.

1.22 초기화 설정 예시:

2.23 초기화 후 매개변수 획득 및 설정:

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

1.31collapsible은 접을 수 있다는 뜻입니다. 기본 옵션은 false이며 접을 수 없습니다. true로 설정하면 사용자가 선택한 탭의 콘텐츠를 축소할 수 있습니다. 이렇게 말하면 탭 2를 한 번 클릭하면 탭 2의 내용이 표시됩니다. 이때 다시 탭 2를 클릭하면 탭 2의 내용 영역이 다시 축소되고 내용 영역이 표시됩니다. 탭이 다시 확장됩니다. 이해했나요? 이해가 안 되시면 위의 예를 들어보세요.

1.32 초기화 설정 예시:

1.33 초기화 후 파라미터 획득 및 설정: 1.23을 참고하세요...

1.41 쿠키 기본값은 null이며 쿠키 플러그인이 필요합니다. 마지막으로 선택한 탭을 쿠키에 저장합니다. 사용 가능한 옵션의 예: (예): { 만료: 7, 경로: '/', 도메인: 'jquery.com', 보안: true }.

1.42 초기화 설정 예시: $('.selector').tabs({ cookie: {expires: 30 } });

1.43 초기화 후 파라미터 획득 및 설정: 1.23을 참고하세요...

1.51deselectable의 기본값은 false이며 접을 수 있는 것과 동일한 효과가 있는 것 같습니다.

1.61 비활성화된 탭은 첫 번째, 두 번째, 세 번째 탭인 배열 예제 [0,1,2]입니다. 기본값은 []입니다.

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({ spinner: 'Retrieving data...' });

1.113 초기화 후 파라미터 획득 및 설정 : 1.23을 참고하세요...

1.121 패널템플릿,

1.131 탭템플릿,

이벤트 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;
  }
});