jQuery Mobile/jqTouch Ширина изображения

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

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

То, что я пытался до сих пор

я впервые попытался сделать CSS Sprite, но которые идут уродливые (комплекс) быстро. Болезненная работа с шириной везде, поэтому изображение масштабируется правильно, так как я не знал высоты в пикселях, так как ширина динамическая. Я мог бы использовать JS, чтобы найти ширину и вычислить высоту на лету. Но это звучит как излишество.
Далее я попытался создать одно изображение шириной 100%, а затем поместить div наложения поверх изображения. Но с этим решением я не мог понять, как перемещаться по страницам с помощью события кликов JavaScript, или выяснить, как я могу изменить значок изображения на выбранной странице http://jsbin.com/uraya5/3/. И отмена правильной высоты для div
Последнее, что я попытался сделать каждую кнопку отдельным изображением. Это похоже на облегчение души. Но jQuery Mobile добавляет кучу дополнительных стилей к кнопке, которую я не знаю, как удалить. См http://jsbin.com/uraya5/4

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

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

источник

2011-01-06 Daveo

Это последнее решение с зависанием, работающим для каждого значка http://jsbin.com/uraya5/10. Это работает, но означает, что я должен сделать запрос 10 изображений (нормальный и зависающий) для каждого значка вместо 1. – Daveo

Просто мысль: почему вы хотите, чтобы эти значки были настолько большими? – naugtur

@naugtur иконки отлично смотрятся, когда телефон является портретом, но большой, когда телефон является ландшафтом. Я думаю, что я могу перестать бороться с фреймворком и просто использовать его, как он должен был использоваться, следуя примеру здесь: http://jquerymobile.com/demos/1.0a2/#docs/toolbars/docs-navbar.html под сторонним Наборы значков – Daveo

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

См soultion здесь http://jsbin.com/uraya5/10/ мне пришлось:

ширина Набор до 19% от каждой кнопки для какой-то причине есть расстояние между каждой кнопки так 20% не работает.
Set UI-бар-фон в черный так скрывает пространство между моих изображений
Используйте этот JS-код для перемещения страниц $ .mobile.changePage ($ ("# о"), "флип" , правда правда);

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

источник

2011-01-07 05:16:07 Daveo

Хорошая работа с этим. Почему нужен пункт 3? – naugtur

@naugtur, когда я обертываю тег «href» вокруг изображения. JQuery Mobile добавляет тонну нежелательных тегов и стилей, которые разрушают мой макет. Посмотрите, что происходит с 1-й иконой как ссылка http://jsbin.com/uraya5/11 – Daveo

o. это плохо ... переопределение CSS может быть возможным, но я не уверен. – naugtur

ответ

Смежные вопросы