2012-02-11 2 views
1

автозаполнения выводит данные в следующем формате:В автозаполнении пользовательского интерфейса JQuery как изменить классы элементов?

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all"> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 1</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 2</a> 
    </li> 
    <li class="ui-menu-item"> 
    <a class="ui-corner-all">item 3</a> 
    </li> 
</ul> 

, где я могу изменить его, чтобы сделать выход это следующим образом:

<ul class="pageitem"> 
    <li class="menu"> 
    <a class="name">item 1</a> 
    </li> 
    <li class="menu"> 
    <a class="name">item 2</a> 
    </li> 
    <li class="menu"> 
    <a class="name">item 3</a> 
    </li> 
</ul> 

? Я даже пытался изменить сценарий jquery, но для меня это слишком сложно, что мне нужно изменить?

+0

Зачем вам это нужно? Почему вы используете интерфейс jQuery в первую очередь? – Richard

ответ

2

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

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

повторяю, не удалить эти классы ...

Если вы хотите добавить пролетом в ЛИС, после того, как якоря, используйте функцию обратного вызова «открытой», что-то вроде этого:

$(".selector").bind("autocompleteopen", function(event, ui) { 
    $(this).find('li.ui-menu-item').each(function(index){ 
     var span = $('<span>'); 
     $(span).text('whatever you want'); 
     $(this).append($(span)); 
    }); 
}); 
+0

Да, я могу жить с этим, но как мне добавить к нему что-то? например, если я хочу, чтобы он вывел дополнительный в списке? –

+0

см. Мое редактирование –

+0

Используйте класс добавления, как уже упоминалось. и пропустить '.removeClass()' –

0
$('.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all').addClass('pageitem').removeClass('ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all'); 

$('.ui-menu-item').addClass('menu').removeClass('ui-menu-item'); 

$('.ui-corner-all').addClass('name').removeClass('ui-corner-all'); 
+0

Это лучше; '$ ('ul.ui-autocomplete'). RemoveClass(). AddClass ('pageitem');' '$ ('. Ui-menu-item'). RemoveClass(). AddClass ('menu'). ; ' ' $ ('. Ui-corner-all'). RemoveClass.addClass ('name'); ' – Richard

0

Я работал в шаблоне для opencart, и в определенном tpl, tracking.tpl У меня была проблема с позицией списка автозаполнения.

Может быть очень просто для тех, кто знает javascrit, плохо. У меня нет много знаний.

Было немного трудно найти точку, где она создана.

Ну, я понял. Я сделал поиск по нему: zIndex (this.element.zIndex() + 1) .css ({top: 0, left: 0}) в jquery-ui-1.8.16.custom.min.js изменить только верхнюю и левую позиции, чтобы изменить позицию или что вам нужно.

Я знаю, его очень просто плохо не так просто найти.

Надеюсь, это поможет другим людям с той же проблемой.

Смежные вопросы