Пользовательский интерфейс jQuery Tabs - создание более одной ссылки на вкладки внутри вкладок на одной странице - PullRequest
Новая
       19

Пользовательский интерфейс jQuery Tabs - создание более одной ссылки на вкладки внутри вкладок на одной странице

1 голос
/ 13 мая 2011

Пока мой код: 

$(function(){
        $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });                         
        $(document).ready(function() {
            var $tabs = $("#tabs").tabs();
            $('#tabs-1 a').click( function(){
                $tabs.tabs('select', 4); });

});
<div id="tabs">
        <ul>
            <li><a href="#tabs-1">Home</a></li>
          <li><a href="#tabs-2">Alarms</a></li>
            <li><a href="#tabs-3">Access Control</a></li>
            <li><a href="#tabs-4">Services</a></li>
            <li><a href="#tabs-5">Contact Us</a></li>
        </ul>
        <div id="tabs-1">
          <p><span class="bodytext">Check our services</span></p> //want to link to tab 4(services)
          <p><span class="bodytext">
          <a href="#tabs-5">Contact us</a>for free 24hours a day...</span></p>

Как видно из кода, когда вы нажимаете на текст «Контакты» на вкладке 1, есть ссылка на вкладку 5. Я хочу сделать следующее.создать ссылку с «Проверьте наши услуги» на вкладку 4. В общем, создать более 10 ссылок с вкладками, связывающими другие вкладки

Я думаю, я знаю, что мне нужно изменить $tabs.tabs('select', 4); на $tabs.tabs('select', id);, но яНе знаю, как вызвать «идентификатор» в HTML, когда я хочу создать свою ссылку.Есть предложения?

1 Ответ

1 голос
/ 13 мая 2011

Я думаю, что я бы справился с этим по-другому, используя href на самой ссылке, возможно, с классом, чтобы указать, что это ссылка внутри вкладки, чтобы определить, какую вкладку загрузить и настроить обработчики на вкладке create event.

$('#tabs').tabs({
     create: function(event,ui) {
         $('a.intra-tab',ui.panel).unbind('click').click( function() {
            var id = Number( $(this).attr('href').replace(/#tabs-/,'') ) - 1;
            $('#tabs').tabs('select',id);
            return false;
         });
     }
});

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Home</a></li>
        <li><a href="#tabs-2">Alarms</a></li>
        <li><a href="#tabs-3">Access Control</a></li>
        <li><a href="#tabs-4">Services</a></li>
        <li><a href="#tabs-5">Contact Us</a></li>
    </ul>
    <div id="tabs-1">
      <p><span class="bodytext"><a href="#tabs-4" class="intra-tab">Check our services</a></span></p>
    </div>
    ...

Вы также можете сделать это с помощью живых обработчиков. 

$('#tabs').tabs();
$('a.intra-tab').live( 'click', function() {
    var id = Number( $(this).attr('href').replace(/#tabs-/,'') ) - 1;
    $('#tabs').tabs('select',id);
    return false;     
});
...