在iOS风格的html5/phonegap应用程序的导航菜单中显示按钮点击状态的正确方式(包括图片)
标题有点满，但我想知道最好的方式来格式化我的div，以显示底部导航栏上的一个按钮已被按下。(不是平面设计的问题)
我的想法是在默认状态下为导航栏制作一个实体图像。我将在每个“按钮”周围设置一个div来检测按下。当按钮被按下时，我将显示按钮在按下状态下的单个图像。
我添加了一张很棒的图片来帮助说明我的问题。
另一种方法是创建8个独特的按钮。然而，我知道我见过的大多数psd都有默认和按下的导航栏，作为实心元素，上面有层叠的图标。(比如：http://dribbble.com/shots/691632-App-net-Starter-Kit?list=tags&tag=appDOTnet)
谢谢你的帮助!
回答 1
Stack Overflow用户
发布于 2013-03-08 06:17:19
老实说，这种方法对我来说似乎有点沉重。
您已经有了5个图像，那么为什么不创建一个包含每个按钮的按下状态和未按下状态的sprite，然后使用CSS "background-position“属性进行滑动呢？
您的CSS将如下所示：
div.buttons {
background-image: url(images/myimage.png);
background-position: 0 0;
position:relative;
width:64px;
}
div.buttons.dog{
background-position: 0 32px;
}
div.buttons.cat{
background-position: 0 64px;
}
div.buttons div.dog{
position:absolute;
left: 0;
top: 0;
width: 32px;
height: 32px;
border: transparent 1px solid;
}
div.buttons div.cat{
position:absolute;
left: 32px;
top: 0;
width: 32px;
height: 32px;
border: transparent 1px solid;
}将HTML设置为：
<div class="buttons">
<div class="dog"></div>
<div class="cat"></div>
</div>然后是jQuery的一些简单的东西，比如：
$('div.buttons').children().each(function(){
$(this).click(function() { $(this).parent().addClass($(this).attr('class')).removeClass($(this).siblings().attr('class'));
});更新
根据请求者的请求，这里介绍了如何在按钮层上实现div覆盖。首先，从顶部的div.buttons CSS块开始，只是在默认的“关闭”位置使用你的图片而不是精灵。
然后，这样创建四个容器(我在这里使用的是div，但是您可以使用任何为容器提供适当语义上下文的元素)。
CSS
div.buttons{
background-image: url(images/myimage.png);
background-position: 0 0;
position:relative;
width:136px; /* whatever your width for the image is */
}
div.fish, div.rabbit, div.dog, div.cat {
position: absolute;
top: 0;
background-size: cover;
height: 24px; /* Whatever the height of your buttonbar is */
}
div.cat{
width: 32px; /* Width of your button */
left: 0;
background-image: none;
}
div.on.cat {
background-image: url(path/to/catImage.png);
}
div.dog {
left: 32px; /* The width of the preceding button(s), if they exist */
width: 40px; /* Width of your button */
background-image: none;
}
div.on.dog {
background-image: url(path/to/dogImage.png);
}
div.rabbit {
left: 72px; /* The width of the preceding button(s), if they exist */
width: 32px; /* Width of your button */
background-image: none;
}
div.on.rabbit {
background-image: url(path/to/rabbitImage.png);
}
div.fish {
left: 104px; /* The width of the preceding button(s), if they exist */
width: 40px; /* Width of your button */
background-image: none;
}
div.on.fish {
background-image: url(path/to/fishImage.png);
}HTML
<div class="buttons">
<div class="cat"></div>
<div class="dog"></div>
<div class="rabbit"></div>
<div class="fish"></div>
</div>这假设您的div“包装”按钮切片有一个与其动物相匹配的类，但这显然可以是您想要的任何类型。然后，在click事件中，您只需将所需的类应用于按下的按钮。您将使用的jQuery将如下所示：
jQuery
$('.buttons > div').on('click',function(){
var t = $(this);
t.siblings.removeClass('on');
t.addClass('on');
//Whatever your button is supposed to do normally here
});https://stackoverflow.com/questions/15280871
复制相似问题
腾讯云开发者
