jQuery Mobile/ jqTouch 图像宽度
我想要一个带有 5 个按钮的静态页脚图像，用于在我的手机网站中进行导航。图片在这里 http://www.pintum.com.au/jm/footer3a.jpg 。蓝色图标应该是默认图标，黄色图标应该仅在悬停或活动状态下可见。
我想知道如何使该图像在所有移动设备（横向和纵向）上缩放到正确的宽度，并具有指向其他页面的链接并使当前/活动页面图标为黄色？
< strong>到目前为止我已经尝试过
我首先尝试制作一个 CSS Sprite，但是很快就变得丑陋（复杂）。处理到处的宽度都很痛苦，因此图像可以正确缩放，因为宽度是动态的，所以我无法知道以像素为单位的高度。我可以使用 JS 来动态查找宽度并计算高度。但这听起来有点矫枉过正。
接下来我尝试制作宽度为 100% 的单个图像，然后将 div 覆盖层放置在图像顶部。但通过这个解决方案，我无法弄清楚如何使用 JavaScript 单击事件导航页面，或者弄清楚如何更改所选页面上的图像图标 http://jsbin.com/uraya5/3/ .并确定 div 的正确高度
最后我尝试使每个按钮成为单独的图像。这些看起来像是简单的灵魂。但是 jQuery Mobile 向按钮添加了一堆额外的样式，我不知道如何删除。请参阅 http://jsbin.com/uraya5/4
那么最好/最简单的方法是什么？
- 如何删除周围的样式 链接？
- 或者我可以使用单图像CSS滑动门方法吗？减少HTTP请求。
I want to have a static footer image with 5 buttons for navigation in my mobile phone website. The image is here http://www.pintum.com.au/jm/footer3a.jpg. The blue icons should be the default, the yellow icon should only be visible for the hover or active state.
I want to know how can I make this image scale to the correct width on all mobile devices (landscape and portrait) and have links to other pages and make the current/active pages icon the yellow color?
What I have tried so far
I first tried to make a CSS Sprite but that go ugly (complex) quickly. Painful working with widths everywhere so the image scales correctly as I had no way of knowing the height in pixels since the width is dynamic. I could use JS to find the width and calculate height on the fly. But this sounds like overkill.
Next I tried to have a single image with a width of 100% then place div overlays on top of the image. But with this solution I could not figure out how to navigate pages using JavaScript click event, or figure out how I would be able to change the image icon on the selected page http://jsbin.com/uraya5/3/ . And detrmining the correct height for the div
Last I tried to make each button a seperate image. These seems like the easist soultion. But jQuery Mobile adds a bunch of extra styles to the button I do not know how to remove. See http://jsbin.com/uraya5/4
So whats the best/easiest way to do this?
- How can I remove the style around
links? - Or can I use a single image CSS sliding door method? To reduce HTTP request.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
好吧，我想出来了，
请参阅此处 http://jsbin.com/uraya5/10/
我必须：
由于某种原因，之间存在间距
每个按钮所以 20% 不起作用。
它隐藏了我之间的空间
使用此 JS代码
“翻转”，真实，真实）；
我仍然想使用单个图像而不是 5 个不同的图像来减少 http 调用。因此，如果有人为此找到了优雅的灵魂，请告诉我。
Ok I figured it out
See soultion here http://jsbin.com/uraya5/10/
I had to:
some reason there is spacing between
each button so 20% does not work.
it hides the spaces between my
images
"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.