如何使用开关代替复选框和单选按钮,如图像所示,以美化网站设计。
发布于 2014-04-16 07:44:09
希望这能有所帮助。看看这个!
$(document).ready(function() {
// Switch toggle
$('.Switch').click(function() {
$(this).toggleClass('On').toggleClass('Off');
});
});
发布于 2014-04-16 07:45:28
可以使用css设计按钮UI,也可以使用jquery的切换方法。
http://api.jqueryui.com/toggle/
在为按钮编写了css之后,您只需为按钮添加css类并删除css类即可。
发布于 2014-04-16 08:27:59
如果你想用你的手,基本上你有这样的结构:
HTML
<div class='button' id='button-0'>
<div class='button-switcher left' id='button-switcher-0'></div>
</div>
使用脚本,您可以以这样的方式激活内部div:
JQuery
var switchButton = function() {
$(this).toggleClass('left, right');
var versus = $(this).hasClass('right') ? 1 : -1;
var targetLeft = versus * parseInt($(this).parent().css('width')) / 2;
$(this).animate({
'left': '+=' + targetLeft + "px"
});
}
$('.button-switcher').on('click', switchButton);
看看工作的演示。
https://stackoverflow.com/questions/23102944
复制相似问题