Поведение нажатой кнопки jQuery на мобильном устройстве

У меня есть кнопка ссылки с jQuery mobile. Я хочу иметь возможность настроить его так, чтобы он постоянно нажимался или не нажимался. Я попробовал этот код для нажатия:

$(this).css('background-color', '#e0e0e0');

и этот код для невыжатого:

$(this).css('background-color', '#f6f6f6');

Но при наведении на ненажатую кнопку больше не подсвечивается. Итак, я попытался:

$(this).addClass('ui-button-active');

Но кнопка приобретает синий цвет, а я хочу темно-серый цвет. Какие-либо предложения?


jquery-mobile jquery-mobile-button
person Joe    schedule 02.07.2014    source источник

Ответы (2)


arrow_upward
0
arrow_downward

В jQuery Mobile 1.4.2 CSS вы можете обратите внимание, что существуют стили кнопок для нормального/наведения/активного состояния (для каждой темы) и стиль активный, который меняет цвет кнопки (в вашем случае на синий).

Чтобы имитировать «постоянно нажатую» кнопку, вы должны добавить класс для каждой темы (a и b) на основе класса кнопки :active и переопределить цвет фона:

.button-pressed-a { background-color: #e8e8e8 !important; }
.button-pressed-b { background-color: #404040 !important; }

Затем в вашем скрипте вы можете переключать состояние «нажато» с помощью:

$("#button").toggleClass('button-pressed-a');
person Sga    schedule 02.07.2014

arrow_upward
0
arrow_downward

Вы были на ThemeRoller? Там вы можете попробовать разные стили.

Добавление пользовательской темы

Еще один хороший способ настроить кнопку jQuery Mobile — добавить пользовательскую тему.

<a data-role="button" data-theme="my-site">Button</a>

Это даст вам больше контроля над различными элементами и состояниями кнопки. Например, вы можете указать различные состояния кнопки в CSS, написав код для класса, связанного с именем вашей пользовательской темы (они автоматически добавляются к кнопке):

.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }

Имейте в виду, что кнопки по умолчанию состоят из границ, теней и, конечно же, фонового градиента. В дополнение к этому внутри кнопки есть другие элементы HTML, которые автоматически генерируются фреймворком. В зависимости от того, что именно вы хотите настроить, вам может потребоваться настроить таргетинг на другие классы внутри кнопки (например, ui-icon, ui-btn-text, ui-btn-inner и т. д.).

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

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

person Izekid    schedule 02.07.2014
comment
Спасибо, на самом деле я хочу не новый стиль, а изменение функциональности кнопки. Почему, когда я использую $(this).addClass('ui-button-down'); кнопка не остается нажатой? - person Joe; 02.07.2014