автоматически загружать ajax загруженный контент (вкладки jquery ui) - PullRequest
Новая
       48

автоматически загружать ajax загруженный контент (вкладки jquery ui)

0 голосов
/ 27 марта 2012

Я использую jQuery UI Tabs для загрузки некоторого контента через Ajax, когда пользователь нажимает на вкладки. Я хочу автоматически загружать содержимое первой вкладки, когда страница загружается, и пользователю не нужно нажимать на вкладку. Как мне этого добиться?

Спасибо

Ответы [ 3 ]

2 голосов
/ 27 марта 2012

Просто вызовите метод загрузки вкладок для первой вкладки (0) при загрузке страницы: 

$( function() {
    $( "#tabs" ).tabs( "load" , 0 );
}

Это просто загружает контент. Если вы хотите выбрать вкладку, используйте select, которая также загружает содержимое. Это не нужно, если вы загружаете вкладку по умолчанию: 

$( function() {
    $( "#tabs" ).tabs( "select" , tabIndex );
}


Редактировать: Для более новых версий jQuery вам необходимо использовать опцию active: 

$( function() {
    $( "#tabs" ).tabs( "option", "active", tabIndex );
}

Демо: http://jsfiddle.net/jtbowden/8zkfrbee

0 голосов
/ 27 марта 2012

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

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="#tabs-2">Tab 1</a></li>
        <li><a href="ajax/content2.html">Tab 2</a></li>
        <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Hello, Tab One.</p>
    </div>
    <div id="tabs-2">
        <p>Hello, Tab Two.</p>
    </div>
</div>
0 голосов
/ 27 марта 2012 
$(document).ready(function(){
    $( "#tabs" ).tabs( "load" , 0 );
});

Если вы хотите, вы также можете сохранить предварительно загруженный контент внутри первого div, который имеет id="tabs-1", но если вы используете предварительно загруженный подход, вам не нужно использовать URL в вашем первом <a> внутри <li> вместо этого используйте 

<li><a href="#tabs-1">First tab</a><li>
...