Пользовательская кнопка изображения с jQuery Mobile

Я пытаюсь создать интерфейс для своего первого мобильного приложения, и приложение должно работать как на Android, так и на Windows Phone, поэтому я использую PhoneGap + jQuery Mobile.

Над разработкой пользовательского интерфейса я работаю с Appery.

Что мне нужно сделать, так это иметь что-то вроде полноэкранной кнопки переключения с пользовательским изображением на ней.

У меня есть 3 копии изображения, по одной на каждый статус.

Допустим, у меня есть:

  • Изображение on.png для статуса включения
  • Изображение off.png для выключенного состояния
  • Изображение press.png будет отображаться до тех пор, пока пользователь не отпустит кнопку

Я использую этот код, чтобы показать первое изображение на кнопке:

$("[name='toggleOnOff']").text("").append("<img height=\"300\" src=\"off.png\" width=\"280\"/>").button();

но я не знаю, как сделать разные состояния, чтобы настроить мою кнопку.

Я пробовал с ThemeRoller, но он просто позволяет мне изменить цвет кнопки, а это не то, что мне нужно.

РЕДАКТИРОВАТЬ: это HTML для кнопки:

<a data-role="button" name="toggleOnOff" dsid="toggleOnOff" class='  mobilebutton2'
    id='j_5' data-corners="true" data-mini="false" data-theme="a" tabIndex="2">
    Button
</a>

cordova jquery css jquery-mobile jquery-mobile-button
person StepTNT    schedule 13.05.2013    source источник
comment
Покажите нам html кнопки, которую вы пытаетесь изменить.   -  person Gajotres    schedule 13.05.2013
comment
Добавил код кнопки.   -  person StepTNT    schedule 13.05.2013
comment
Вы можете просто использовать переменные JS или классы CSS для определения состояний. Либо установите значение say.. для переменной состояния off/on/pressed, либо используйте addClass/removeClass для добавления/удаления класса .on/.off/.pressed. Затем вы можете либо установить фоновое изображение в CSS, либо использовать . добавить, как вы, в сочетании с коллекцией операторов if, чтобы определить, какое изображение добавить/удалить   -  person Calvin    schedule 13.05.2013
comment
Должна ли кнопка также иметь размеры 280px * 300px?   -  person Gajotres    schedule 13.05.2013
comment
Да, кнопка и изображение должны иметь одинаковый размер, но я открыт для любого альтернативного решения. @Calvin, вы говорите что-то вроде создания 3 классов CSS, по одному для каждого состояния кнопки, а затем меняете класс кнопки каждый раз, когда я нажимаю на кнопку? Appery не дает мне выпущенное событие, поэтому я просто нажимаю, нажимаю и удерживаю. Можете ли вы предоставить рабочий образец того, что вы имеете в виду?   -  person StepTNT    schedule 13.05.2013
comment
@StepTNT вот действительно простой пример: jsfiddle.net/j58Jw/4   -  person Calvin    schedule 13.05.2013

Ответы (1)


arrow_upward
4
arrow_downward

Рабочий пример: http://jsfiddle.net/Gajotres/GFnyg/

HTML:

<a data-role="button" class="toggleOnButton" id='toggleButton' data-corners="true" data-mini="false" data-theme="a" tabIndex="2"></a>

CSS:

.toggleOnButton {
    width: 280px !important;    
    height: 300px !important;   
    background: transparent url('http://www.projectpuppylove.org/wp-content/uploads/2013/01/cropped-puppy_vet.jpg') no-repeat center center !important; 
}

.toggleOffButton {
    background: transparent url('http://www.strawberryreef.com/images/Accessories/G4animals/cat2_pink.jpg') no-repeat center center !important;   
}

.toggleOnButton:active {
    background: transparent url('http://talliscountry.co.uk/uploads/Small%20Pets.jpg') no-repeat center center !important; 
}

JavaScript:

$(document).on('pagebeforeshow', '#index', function(){ 
    $("#toggleButton").on("click", function(){
        $(this).toggleClass("toggleOffButton");
    });    
});
person Gajotres    schedule 13.05.2013
comment
Оно работает! +1 за изображения: D Просто небольшой вопрос: что, если я хочу, чтобы размер этих изображений был относительно разрешения экрана? Я пытаюсь с width: 90% !important; height: 70% !important; безуспешно! - person StepTNT; 14.05.2013
comment
Вы хотите, чтобы кнопка соответствовала разрешению экрана или изображениям, потому что изображения — это просто фон кнопки? - person Gajotres; 14.05.2013
comment
Извините, я говорил о кнопках! Ваш css идеально подходит для экрана 320x480, но не так хорош для экрана 400x800 (по крайней мере, согласно предварительному просмотру Appery!) - person StepTNT; 14.05.2013
comment
Я обновил свой jsFiddle. Посмотри. Я добавил еще одну строку css, она позаботится о том, чтобы изображение всегда растягивалось вместе с изображением. Таким образом, вы можете использовать любые размеры кнопки, и изображение будет следовать за ним. Теперь ваш другой вопрос относительно измерений %. Они могут вызвать некоторые проблемы, особенно в случае с моим примером jsFiddle. Если вы используете % size, он рассмотрит родительский контейнер, а это наш контейнер data-role=content. Но контейнер div data-role=content не будет покрывать всю высоту страницы, если вы не поместите в него какой-либо контент. Без содержания его высота составляет около 50 пикселей. - person Gajotres; 14.05.2013
comment
Итак, если ваша картинка имеет высоту 90%, ее окончательная высота будет 90% от 50 пикселей. - person Gajotres; 14.05.2013