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

Question

Есть ли способ с помощью ролика тем jquery ui или иным способом создать более одного стиля для кнопок (в частности, кнопок jquery ui)? Если вы посмотрите на сгенерированные темы - кажется, что разрешен только один стиль кнопки.

Ключевые слова, являющиеся "jquery ui"; Я понимаю, как это сделать в css, но использование jquery ui помогает поддерживать приятную игру виджетов / css.

Answer 1

Да, вы можете создать более одного стиля, используя одну тему пользовательского интерфейса jQuery. В приведенном ниже примере у меня есть 3 разные кнопки, каждая из которых имеет свой цвет, и все используют одну и ту же тему пользовательского интерфейса по умолчанию. Для этого вам нужно переопределить UI 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, смотрите следующие 2 ссылки

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

Answer 2

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

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;
}

Answer 3

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

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

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

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

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

Answer 4

Одна вещь, на которую нужно обратить внимание - это стиль .ui-state-default.

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

Метод 1:

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

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

Метод 2:

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

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; }

Answer 5

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

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