Как создать несколько стилей кнопок с помощью jquery ui?

Ответ 1

Да, вы можете создать более одного стиля, используя одну тему пользовательского интерфейса jQuery. В приведенном ниже примере у меня есть 3 разных кнопки, каждый с другим цветом, и все используют одну и ту же тему пользовательского интерфейса по умолчанию. Для этого вам нужно переопределить класс CSS пользовательского интерфейса элемента, с которым вы работаете. Например, чтобы сделать кнопку, используя стиль пользовательского интерфейса, вам нужно включить имя класса ui-state-default. Обратите внимание, что в этом примере я включил этот же класс для всех кнопок. Чтобы переопределить этот класс пользовательского интерфейса для определенной кнопки, мы ссылаемся на кнопку, добавляя к ней еще один класс, а затем подбираем ее в нашем css и отмечаем ее как важную. Это переопределит стиль пользовательского интерфейса для класса, с которым вы работаете.

<button class="ui-state-default one">button one</button>
<button class="ui-state-default two">button two</button>
<button class="ui-state-default three">button three</button>

button{
    width:200px;
    height:50px;
    display:block;
    margin:10px;
}

.two{
    background: orange url(http://www.cyrilsframing.com.au/picts/menu.gif) repeat-x 0 0 !important;
    border:1px solid red!important;
}

.three{
    background: orange url(http://cmshuts.com/picts/background-menu-horz.gif) repeat-x 0 0 !important;
    border:1px solid yellow!important;
}

Просмотреть рабочий пример в http://jsfiddle.net/7vvhj/2/

Подробнее о том, как стилизовать элементы с помощью jQuery UI, проверьте следующие 2 ссылки

http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework

Ответ 2

Я пытаюсь сделать это недавно и в итоге выбрал базовую тему, создав новые стили для разных кнопок (например: для кнопки сохранения, см. стили ниже). Вам просто нужно добавить класс "save-button", к кнопке (в моем случае я использую якоря в качестве кнопок)

a.save-button
{
    background-image:none;
    border: 1px solid #FF0000;
    background-color:#FC8C8C;
    color:#FFFFFF;
}
a.save-button:hover
{ 
    border: 1px solid #FF0000;
    background-color:#FDB7B7;
    color:#000000;
}

UPDATE:

Мне просто нужно было сделать это еще раз, за ​​исключением того, что вы можете использовать градиенты в кнопках; Я сделал это, создав новую тему, затем скопировав градиенты (..hard.. и..soft..) и переименовав их, чтобы не путать с основной темой, то есть когда они обновляются, а затем просто добавили класс к кнопке, аналогичный приведенному выше....

a.green-button
{
    background: url(Images/GreenBGHardGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:hover
{ 
    background: url(Images/GreenBGSoftGrad.png) repeat-x center;
    border: 1px solid #132b14;
    color:#FFFFFF;
}
a.green-button:active
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
}

Ответ 3

Вы можете просто использовать виджет "button", а затем изменить класс состояния с "ui-state-default" на что-то еще [т. 'ui-state-error' или 'ui-state-highlight']. Однако эти состояния выглядят как настоящая кнопка, чем состояние по умолчанию.

$("button").button().addClass('ui-state-highlight');

ПРИМЕР: http://jsfiddle.net/dochoffiday/Kg5qn/

Кроме того, вы можете использовать более одной темы пользовательского интерфейса jQuery на странице, вводя "область видимости" пользовательского интерфейса, как продемонстрировала группа "Филамент":

http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/

Ответ 4

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

Я не тестировал это, просто пытаясь указать вам в правильном направлении: -)

Ответ 5

Единственное, что вам нужно обратить внимание, это стиль .ui-state-default.

У меня есть кнопки в диалоговом окне, которые по какой-то причине получают приложенную к ним .ui-state-default при открытии второго диалогового окна. Я предполагаю, что виджет диалогового окна пытается выполнить reset состояние по умолчанию, и это также применяется к кнопкам.

Метод 1:

В любом случае я решил, что самый простой способ - поместить стиль !important в стиль, чтобы предотвратить приоритет этого состояния по умолчанию (из стиля ролик темы).

a.green-button
{
    background-color:#FFFFFF !important;
    border: 1px solid #132b14 !important;
    color:#132b14 !important;
}

Метод 2:

В качестве альтернативы вы можете применить стиль, подобный этому, который придаст этому стилю больше очков без необходимости! important:

a.green-button, a.ui-state-default.green-button
{
    background-color:#FFFFFF;
    border: 1px solid #132b14;
    color:#132b14;
} 

Это оригинальный css, который переписывает мой стиль, если я не использую !important:

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }