Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.06.2014, 00:28
Аспирант
Отправить личное сообщение для culver Посмотреть профиль Найти все сообщения от culver
 
Регистрация: 10.05.2012
Сообщений: 52

autocomplete, обработка элемента списка при фокусе
Добрый день.
Делаю список autocomplete с картинками:
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li>" )
                .data( "ui-autocomplete-item", item )
                .append( "<div class=\"autocomplidiv\"><a>"+"<img class=\"autocompliimg\" src= \""+item.icon+"\"/>" +"&nbsp<br/>" +item.label + "</a></div>" )
                .appendTo( ul );

При этом пытаюсь при фокусе элемента списка добавить ему класс:
focus: function( event, ui ) {
            $(ui.item).addClass("ui-state-focus");
        }

но класс не добавляется.
Подскажите пожалуйста, что я неправильно делаю?
Ответить с цитированием
  #2 (permalink)  
Старый 29.06.2014, 01:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

culver, у фокуса
ui.item это обьект данных строки на которую навели но не сама строка

можно поискать по содержанию

focus: function( event, ui ) {

            $('li:contains("'+ui.item.label+'")').addClass("ui-state-focus");


        }
Ответить с цитированием
  #3 (permalink)  
Старый 29.06.2014, 01:20
Аспирант
Отправить личное сообщение для culver Посмотреть профиль Найти все сообщения от culver
 
Регистрация: 10.05.2012
Сообщений: 52

Спасибо, работает.
Но получается, что прямого доступа из функции, к элементу, получившему фокус нет? Странно, что-то не верится.
Ответить с цитированием
  #4 (permalink)  
Старый 29.06.2014, 01:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

culver,
выведите в консоль да посмотрите ui кроме label и value никакой больше информации
Ответить с цитированием
  #5 (permalink)  
Старый 29.06.2014, 01:37
Аспирант
Отправить личное сообщение для culver Посмотреть профиль Найти все сообщения от culver
 
Регистрация: 10.05.2012
Сообщений: 52

Вопрос почти риторический, но всё же.
Пока я не делал обработку фокуса, класс ui-state-focus добавлялся к li автоматически, подозреваю, что есть обработчик фокуса по умолчанию, где и добавляется этот класс, интересно как?
Ответить с цитированием
  #6 (permalink)  
Старый 29.06.2014, 01:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

culver,
return $( "<li>" )
return $( "<li>" , {class : 'ui-state-focus'})
и не мучать фокус
Ответить с цитированием
  #7 (permalink)  
Старый 29.06.2014, 01:52
Аспирант
Отправить личное сообщение для culver Посмотреть профиль Найти все сообщения от culver
 
Регистрация: 10.05.2012
Сообщений: 52

Если класс добавлять в _renderItem то все элементы списка его получат, а мне нужно только тот, что в фокусе.
Сейчас это выглядит у меня так:
$('.ui-menu-item').removeClass("ui-state-focus")
            $('li:contains("'+ui.item.label+'")').addClass("ui-state-focus");

а дальше с помощью стилей подсвечиваю элемент с фокусом.
.ui-autocomplete  .ui-state-focus div{
	font-weight:bold;
    background-color: #eeeeee;
}
Ответить с цитированием
  #8 (permalink)  
Старый 29.06.2014, 01:58
Аспирант
Отправить личное сообщение для culver Посмотреть профиль Найти все сообщения от culver
 
Регистрация: 10.05.2012
Сообщений: 52

Или Вы хотите сказать, что рендер отрабатывается каждый раз при фокусе, а не только при начальном формировании списка?
Ответить с цитированием
  #9 (permalink)  
Старый 29.06.2014, 02:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

culver,
может вам hover нужен

.ui-autocomplete li div:hover{
font-weight:bold;
background-color: #eeeeee;
}

и никаких add и remove
Ответить с цитированием
  #10 (permalink)  
Старый 29.06.2014, 14:30
Аспирант
Отправить личное сообщение для culver Посмотреть профиль Найти все сообщения от culver
 
Регистрация: 10.05.2012
Сообщений: 52

но hover не будет реагировать на перебор списка с помощью клавиатуры.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сохранить обработчики элемента, при изменения положения элемента в dom-дереве ? Danxil Events/DOM/Window 5 08.11.2013 23:33
как сделать чтобы при наведении draggable элемента раскрывалась категория rozmarin jQuery 0 29.08.2013 07:32
Изменения изображения при выборе из списка hayk Общие вопросы Javascript 10 30.11.2010 10:42
Добавление класса на елемент по id при фокусе на input Andrew_tl Events/DOM/Window 1 18.02.2010 19:09
раскрывать/скрывать <td> при выборе определенного элемента списка zip Элементы интерфейса 2 19.01.2009 13:58