Замечательный фреймворк jQuery имеет не менее замечательную библиотеку jQuery UI. С ними мне живется в общем-то хорошо, но иногда вылезают всякие забавные грабли. Об одних я расскажу двумя строчками ниже.
Нынешние грабли связаны со стандартными иконками jQueryUI. В приложении ThemeRoller они отличненько регируют на наведение мыши:
Обычно я этими иконками не пользуюсь, но вот прижало, потребовалось сделать – чтобы быстро и красиво. Иконки вставить по образу и подобию не сложно:
<ul id="icons" class="ui-widget ui-helper-clearfix"> <li class="ui-corner-all ui-state-default"> <span class="ui-icon ui-icon-circle-triangle-w"></span> </li> </ul>
Кул. НО. Не сразу, но я заметил что на hover они не реагируют. Копание в кишках UI не помогло, классы которые я пытался выдрать из примера работали (если работали) некорректно. Однако, немного порывшись в подгружаемых скриптах обнаружил следующий код:
$(function(){ //... //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); });
Как говорится, ларчик просто открывался ) Hover класс биндится средствами jQuery после загрузки страницы. А еще у этих иконок плюс в том что они выполнены одним спрайтом и на hover не приходится подгружать отдельные картинки (теоретически туда можно и что-то свое дорисовать, но еще не пробовал).
Надеюсь вам этот совет поможет сэкономить 30-60 минут и потратить их на что-то полезное.
4 Comments
Можно дорисовать, а можно самому сделать свой “пак” иконок (=
в css идет перемещение фоновой картинки в ограниченном шириной и высотой блоке:
/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
можно сделать свои значки меньше\больше размером, чем у jquery, и они будут служить столь же верно, если покопаться и изменить ширину\высоту у контейнера
другое дело стоит ли овчинка выделки…
сколько времени уйдет на все это…
Я дорисовывал иконки, но столкнулся с одной очень фиговой проблемой – белые иконки на прозрачном фоне в графических редакторах открывались как indexed colors и убивали полутона (там есть во многих иконках). Нормально они редактировались в Paint (!) но он прозрачность не показывает – и получалось белое на белом.
Попробуйте Paint.NET, тот же пайнт, только поддерживает альфа каналы, и прозрачность, +слои, да и простор для разных манипуляций хороший (Freeware)
Спасибо большое! Похоже это именно “оно”, то что надо )