iphone - jQuery Mobile/jqTouch 图片宽度

Question

我想在我的手机网站上有一个带有 5 个导航按钮的静态页脚图像。图片在这里http://www.pintum.com.au/jm/footer3a.jpg .蓝色图标应该是默认图标，黄色图标应该只在悬停或事件状态下可见。

我想知道如何使此图像在所有移动设备(横向和纵向)上缩放到正确的宽度并具有指向其他页面的链接并将当前/事件页面图标设为黄色？

到目前为止我尝试了什么

• 我首先尝试制作一个 CSS Sprite，但很快就变得丑陋(复杂)了。在任何地方使用宽度都很痛苦，所以图像可以正确缩放，因为宽度是动态的，我无法知道以像素为单位的高度。我可以使用 JS 动态查找宽度并计算高度。但这听起来有些矫枉过正。

• 接下来，我尝试使用宽度为 100% 的单个图像，然后将 div 叠加层放置在图像的顶部。但是使用这个解决方案，我无法弄清楚如何使用 JavaScript 单击事件导航页面，或者弄清楚如何更改所选页面上的图像图标 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-bar-a 背景为黑色 它隐藏了我之间的空间 图片
3. 使用此 JS 代码导航页面 $.mobile.changePage($("#about"), “翻转”，真，真)；

我仍然希望使用单个图像而不是使用 5 个不同的图像来减少 http 调用。因此，如果有人为此找到合适的解决方案，请告诉我。