идентификатор доступа jquery против класса? - PullRequest
Новая
       13

идентификатор доступа jquery против класса?

3 голосов
/ 11 мая 2011

по этой ссылке: http://jqueryui.com/demos/tabs/ когда мы смотрим "просмотреть исходный код", мы имеем: 

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">...</a></li>
        <li><a href="#tabs-2">...</a></li>
        <li><a href="#tabs-3">...</a></li>
    </ul>
    <div id="tabs-1">...</div>
    <div id="tabs-2">...</div>
    <div id="tabs-3">...</div>
</div>

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

Ответы [ 5 ]

4 голосов
/ 11 мая 2011

для динамического добавления вкладок, есть метод add, который автоматически присваивает вам ваши элементы управления вкладками, позволяя вам многократно использовать код создания вкладок.

Когда вкладка добавляется на страницу, она запускает событие добавления, как показано на странице документа вкладок: 

var $tabs = $('#example').tabs({
    add: function(event, ui) {
        $tabs.tabs('select', '#' + ui.panel.id);
    }
});

от http://jqueryui.com/demos/tabs/#default

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

Вы можете использовать addClass метод 

$('#some_ul_id li').addClass(function(i, curr) {
  return "item-" + i;
});
1 голос
/ 11 мая 2011

Это просто невозможно.

привязка ссылки работает с идентификатором, который должен быть уникальным.

если у вас есть несколько вкладок с одинаковыми классами (одинаковыми для кнопок), какие вкладки следует открывать при нажатии кнопки? Я сомневаюсь, что вы ответите «все».

если это вопрос стиля (css), вам нужно просто добавить класс вместе с идентификатором.

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

К сожалению, встроенные вкладки, связанные с пользовательским интерфейсом jquery, кодируются статически в зависимости от идентификатора.

Когда вы превращаете div в вкладку jqueryui, он делает большую работу за кулисами.

Атрибут href ссылки на самой вкладке кодируется для поиска определенного содержимого div.следовательно, href = "# tab-1" всегда будет показывать div с идентификатором "# tab-1".

Вот как это работает.Если вы хотите использовать класс вместо этого, вам нужно изменить / расширить функциональность вкладки jquery ui в библиотеке jqueryui.Или вы можете написать свой собственный плагин для вкладки Jquery.

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

Элемент управления вкладки jquery ui должен однозначно идентифицировать и получать доступ к этим элементам div, поэтому классы не являются опцией.Просто убедитесь, что вы предоставили уникальные идентификаторы, прежде чем отправлять HTML клиенту.

Вы можете без проблем иметь несколько вкладок на своей странице. 

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

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">...</a></li>
            <li><a href="#tabs-2">...</a></li>
            <li><a href="#tabs-3">...</a></li>
        </ul>
        <div id="tabs-1">...</div>
        <div id="tabs-2">...</div>
        <div id="tabs-3">...</div>
    </div>

    <div id="tabs2">
        <ul>
            <li><a href="#tabs2-1">...</a></li>
            <li><a href="#tabs2-2">...</a></li>
            <li><a href="#tabs2-3">...</a></li>
        </ul>
        <div id="tabs2-1">...</div>
        <div id="tabs2-2">...</div>
        <div id="tabs2-3">...</div>
    </div>
...