jquery mobile / jqtouch изображение изображения

Question

Я хочу иметь изображение статического нижнего колонтитула с 5 кнопками навигации на веб-сайте мобильного телефона. Изображение здесь http://www.pintum.com.au/jm/footer3a.jpg.. Отказ Голубые иконки должны быть по умолчанию, желтый значок должен быть виден только для зависания или активного состояния.

Я хочу знать, как я могу сделать этот масштаб изображения в правильную ширину на всех мобильных устройствах (ландшафт и портрет) и иметь ссылки на другие страницы и создавать текущие / активные страницы значок желтого цвета?

Что я пробовал до сих пор

• Сначала я попытался сделать CSS SPRITE, но это быстро идет уродливый (сложный). Болезненная работа с шириной везде, поэтому изображение изображения правильно, так как у меня не было способа узнать высоту в пикселях, поскольку ширина динамически. Я мог бы использовать JS, чтобы найти ширину и рассчитать высоту на лету. Но это звучит как излишки.

• Затем я попытался иметь одно изображение с шириной 100%, затем поместите DIV накладки сверху изображения. Но с этим решением я не мог понять, как навигация страниц, используя событие JavaScript Click, или выяснить, как я смогу изменить значок изображения на выбранной странице http://jsbin.com/uraya5/3/ Отказ И уменьшить правильную высоту для Div

• Последний я пытался сделать каждую кнопку отдельный образ. Это похоже на пропуску души. Но jQuery Mobile добавляет кучу дополнительных стилей к кнопке, я не знаю, как удалить. Видеть http://jsbin.com/uraya5/4.

---

Так что же самый лучший / самый простой способ сделать это?

• Как я могу удалить стиль вокруг ссылок?
• Или я могу использовать одно изображение CSS с раздвижным дверным методом? Чтобы уменьшить HTTP-запрос.

Answer 1

Хорошо, я понял это

Смотрите СУМЬЮ ЗДЕСЬ http://jsbin.com/uraya5/10/Мне пришлось:

1. Установите ширину до 19% каждой кнопки по какой-то причине. Существует расстояние между каждой кнопкой, поэтому 20% не работает.
2. Установите UI-бар - фон для черного, так что скрывает пробелы между моими изображениями
3. Используйте этот код JS для навигации страниц $ .MObile.ChangePage ($ («# о»), «Флип», правда, правда);

Я все равно хотел бы использовать одно изображение вместо того, чтобы иметь 5 разных изображений для уменьшения HTTP-вызовов. Так что, если кто-то находит элигантную душу для этого, пожалуйста, дайте мне знать.