Изменить изображение переключателей в пользовательском интерфейсе jQuery - PullRequest
Новая
       35

Изменить изображение переключателей в пользовательском интерфейсе jQuery

0 голосов
/ 21 марта 2012

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

Ответы [ 4 ]

2 голосов
/ 21 марта 2012

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

Например:

enter image description here

Кнопка справа - это кнопка jQuery UI, стилизованная под Themeroller, а кнопка слева - это кнопка jQuery UI, но с собственным значком и фоном. Вот что вам нужно сделать для выполнения пользовательской кнопки:

Начните с фонов и изображений иконок:

enter image description here enter image description here

Вот CSS, который вам нужно будет создать: 

.house{
    background-image: url("./yourIconImage.png") !important;
    width: 45px !important;
    height: 45px !important;
    margin-left: -22px !important;
    margin-top: -22px !important;
}

#houseLabel.ui-state-active
{
    background-repeat: no-repeat;
    background-position: 0px -120px;
}  


.background
{
    width: 60px !important;
    height: 60px !important;
    background-image:  url("./yourBackgroundImage.png") !important;
    border: 0px solid black !important;
    background-position: 0px 0px;
}

.background:active
{
    background-repeat: no-repeat;
    background-position: 0px -120px !important;
}
.background:hover
{
    background-repeat: no-repeat;
    background-position: 0px -60px;
}

Затем в вашем javascript при создании кнопки: 

   $("#button").button({
        text: false,
        icons: {
            primary: "house"
        }
    });
    $("#button").next(".ui-button").addClass("background").attr('id', 'houseLabel');

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

1 голос
/ 21 марта 2012

Это не изображение. Это делается с помощью css.

Просто измените CSS классов.

  • class="ui-button-text" - текст внутри кнопки.
  • class= "ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"

Или измените тему с помощью тематического ролика , который теряется легче, если вы не знаете, что такое css.
Просто имейте в виду, что вам нужно будет использовать собственный локальный файл CSS.

0 голосов
/ 06 апреля 2012

Я нашел более простое решение, которое использует div и присваивает ему значения, так же работает радио кнопка

Мне удобнее, чем использовать jquery ui

0 голосов
/ 21 марта 2012

Перейдите на страницу themeroller , выберите нужный цвет и загрузите файл css для использования в своем приложении

...