JQuery UI Tabs - Spinner Background Image - PullRequest
Новая
       16

JQuery UI Tabs - Spinner Background Image

4 голосов
/ 11 ноября 2009

All

Я использую вкладки JQuery UI. Когда щелкают вкладку, я хочу, чтобы вкладка показывала заголовок вкладки вместе с анимированным GIF вращающегося элемента рядом с ним. Когда вкладка загружена, изображение должно скрываться. Как мне этого добиться?

Спасибо

Ответы [ 3 ]

12 голосов
/ 15 июля 2010

Добавить опцию счетчика к tabs()

$("#tabs").tabs({
    spinner: '<img src="whatever.gif" />'
});


Добавьте <span>&nbsp;</span> в пределах <a></a> для каждой вкладки. &nbsp; требуется для правильного отображения счетчика и исчезают. 

<li><a href="urlheretoajaxload">Text Title<span>&nbsp;</span></a></li>
6 голосов
/ 11 ноября 2009

Во-первых, я бы настоятельно рекомендовал генерировать GIF-блесну из http://www.ajaxload.info/, поскольку у них есть несколько действительно хороших бесплатных.

Далее, если вы посмотрите документацию для вкладок пользовательского интерфейса JQuery, вы заметите, что вы можете настроить функцию, которая будет вызываться для различных событий. Например, вы можете использовать события select и load для его отображения (хотя я не уверен, как поместить его внутрь вкладки, я оставлю это на ваше усмотрение): 

$('#my_tabbed_area').tabs({
  select: function(event, ui) { $('#my_spinner_tab_1').fadeIn() },
  load:   function(event, ui) { $('#my_spinner_tab_1').fadeOut() }
});

Если вы можете поместить спиннер и заголовок в один и тот же промежуток, вам нужно будет заменить #my_spinner_tab_1 на #my_span_tab_1 или любой другой идентификатор, который вы выберете для использования. Однако это приведет к исчезновению и названию заголовка и счетчика.

0 голосов
/ 11 ноября 2009

Разве нельзя изменить часть ui.tabs.min.js -> "spinner", чтобы сохранить имя вкладки и включить фоновое изображение спиннера?

...