Блог

Главная - Вопросы по программированию - Вкладки пользовательского интерфейса jQuery: URL вместо AJAX не работает должным образом

Вкладки пользовательского интерфейса jQuery: URL вместо AJAX не работает должным образом

#jquery-ui

#jquery-ui

Вопрос:

Я написал, как там:http://jqueryui.com/demos/tabs/#…follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

 <script type="text/javascript">
    $(function(){
        $("#tabs").tabs({
            select: function(event, ui) {
                var url = $.data(ui.tab, 'load.tabs');
                if( url ) {
                    location.href = url;
                    return false;
                }
                return true;
            }
        });
    });
</script>

<div id="tabs">
    <ul>
        <li>
            <a href="/default.htm">Home</a>
        </li>
        <li>
            <a href="/about.htm">About</a>
        </li>
    </ul>
</div>

Вкладки создаются, но также отображается начальный список (div, ul, li). Другая проблема: при наведении курсора мыши на вкладку я вижу URL типа /default.htm#ui-tabs-1, / default.htm #ui-tabs-2 и т.д. Но я хочу видеть URL «/default.htm «поверх 1-й вкладки и URL»/about.htm «на 2-й вкладке.
Что я мог бы сделать, чтобы решить мою проблему?

ОБНОВЛЕНИЕ В версии 1.9 появился мощный виджет «меню».

Ответ №1:

Вы пропускаете интерпретацию вкладок пользовательского интерфейса jQuery.

Эти вкладки предназначены для скрытия / отображения содержимого, а при использовании ajax извлекают информацию о странице и показывают ее по запросу.

если вы хотите, чтобы эти вкладки действовали как меню… тогда вам нужно меню, а не вкладки пользовательского интерфейса jQuery.

Если ваша идея, если использовать эти вкладки, но для извлечения /about.htm в качестве нового содержимого, то вы можете использовать пример ajax

http://jqueryui.com/demos/tabs/#ajax

имейте в виду, что он будет извлекать весь контент, поэтому на /about.htm странице не должно быть <html> ни <body> тегов

Комментарии:

1. Да, я хочу меню, которое выглядит как эти вкладки, потому что мне это нравится. Я думал, что вкладки могут вести себя как меню, но это не так. Итак, я выбрал неправильный виджет.

2. да, как я уже сказал, вы можете легко скопировать <ul> и применить тот же класс, чтобы у вас был тот же внешний вид, но tabs поведение меню немного отличается. Кстати, если мой вопрос правильный или был важен, проголосуйте или / и выберите его как правильный ответ.

3. Да, я уже это сделал — скопировал расположение вкладок. Я не могу голосовать, потому что у меня низкая репутация.

Ответ №2:

Я не хочу поощрять вас к этому, но решение в настоящее время доступно на веб-сайте jQuery UI: http://jqueryui.com/demos/tabs/#…follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

Вы можете немного расширить его, чтобы переходить только по определенным URL:

 select: function(e, ui)
{
    var tab = $(ui.tab);
    var url = $.data(ui.tab, 'load.tabs');
    if(url amp;amp; tab.attr('data-ajax') == 'false')
    {
        location.href = url;
        return false;
    }
    return true;
}

Затем, при определении вкладок:

 <li><a href="..." data-ajax="false">...</a></li>