1

我想在我的手机网站上有一个带有 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 请求。
4

1 回答 1

1

好的，我想通了

在这里查看灵魂http://jsbin.com/uraya5/10/ 我不得不：

  1. 出于某种原因，将每个按钮的宽度设置为 19%，每个按钮之间存在间距，因此 20% 不起作用。
  2. 将 ui-bar-a 背景设置为黑色，以便隐藏我的图像之间的空间
  3. 使用此 JS 代码导航页面 $.mobile.changePage($("#about"), "flip", true, true);

I would still like to use a single image instead of having 5 different images to reduce http calls. So if anyone finds a eligant soultion for this please let me know.

于 2011-01-07T05:16:07.090 回答