in Профессиональное |

Иконки в jQuery UI. Небольшой хинт по смене классов ui-state-default/ui-state-hover.

Замечательный фреймворк 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 минут и потратить их на что-то полезное.

Published

Write a Comment

Comment

ERROR: si-captcha.php plugin: GD image support not detected in PHP!

Contact your web host and ask them to enable GD image support for PHP.

ERROR: si-captcha.php plugin: imagepng function not detected in PHP!

Contact your web host and ask them to enable imagepng for PHP.

  1. Можно дорисовать, а можно самому сделать свой “пак” иконок (=

    в 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, и они будут служить столь же верно, если покопаться и изменить ширинувысоту у контейнера

    другое дело стоит ли овчинка выделки…
    сколько времени уйдет на все это…

    Reply to werdes

    • Я дорисовывал иконки, но столкнулся с одной очень фиговой проблемой – белые иконки на прозрачном фоне в графических редакторах открывались как indexed colors и убивали полутона (там есть во многих иконках). Нормально они редактировались в Paint (!) но он прозрачность не показывает – и получалось белое на белом.

      Reply to hudson

  2. Попробуйте Paint.NET, тот же пайнт, только поддерживает альфа каналы, и прозрачность, +слои, да и простор для разных манипуляций хороший (Freeware)

    Reply to werdes

    • Спасибо большое! Похоже это именно “оно”, то что надо )

      Reply to hudson

  4. а чем Вас не устроил метод который JQuery UI сами предлагают?

    $( “.minus” ).button({
    icons: {
    primary: “ui-icon-minus”
    },
    text: false
    });

    Всплывающая подсказка

    Reply to Grey2k 
  5. $( ".minus" ).button({
            icons: {
                primary: "ui-icon-minus"
            },
            text: false
        });

Всплывающая подсказка
    Reply to Grey2k

    • В смысле? ) Проблема была в том, что hover класс скриптом присваивается и отнимается – чего я не знал. Ну или не дочитал…

      Reply to hudson