网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

web app模拟checkbox与radio实例代码下载

关注我吧
 2015/9/23 17:27:19 阅读次数:2427

一、开篇

现在经常可以在网络上看到一些非常奇特的表单元素,例如Checkbox复选框和Radiobox单选框,而且更让 人蛋疼的是各个浏览器的样式还不统一,今天做了一个用标签模拟checkbox与radio的实例,主要是是近做手机 web App时发现默认的样式很不好看。所以突然就做了下,先来看看 预览图:

web app模拟checkbox与radio实例代码下载

 

二、主要思路

模拟的作用是为了给用户更好的体验效果,在代码中使用的时候隐藏真实checkbox或radio按钮。然后用相关标签做效果并且结合JS实现真实的input与效果的值是统一的。

如下源代码:

<span class="label"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>我最喜欢的书籍</span>

以上代码的用法说明(从外到内)
1、最外层的span 加上一个label的样式就是模拟label效果点击span内的都可以选中该值。
2、em是用来添加是radio还是checkbox样式的。这样JS判断比较方便,当然你也可以通过里面的input type属性判断。
3、input按钮是隐藏的,b标签是模拟外边框的,i标签是模拟中间的选中效果的。后面的文字是为了模拟label里面的文字。

三、源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>
<title>checkbox特效</title>
<style>
body{margin:0;padding:0;}
.ex{padding:15px;}
span.label,span.label em.checkbox{display:inline-block;}
span.label em.checkbox input{display:none;}
span.label em.checkbox  b{border:1px solid #1f5641;width:20px;height:20px;line-height:20px;display:inline-block;border-radius:5px;background:#fff;vertical-align:middle;margin:-3px 10px 0 0;}
span.label em.checkbox.checked b{background-color:#1f5641;}
span.label em.checkbox.checked b i{background:url(http://www.86y.org/demo/checkbox/selected.png) no-repeat center center;background-size:15px auto;width:20px;height:20px;display:block;}

span.label em.checkbox.style2 b{border-color:#f80;}
span.label em.checkbox.style2 b i{background-color:#f80;}

span.label em.radio input{display:none;}
span.label em.radio  b{border:1px solid #1f5641;width:20px;height:20px;line-height:20px;display:inline-block;border-radius:10px;background:#fff;vertical-align:middle;margin:-3px 10px 0 0;}
span.label em.radio.checked b{border-color:#1f5641;}
span.label em.radio.checked b i{width:10px;height:10px;display:block;border-radius:5px;background:#1f5641;margin:5px auto;}

span.label em.radio.style2 b{border-color:#f80;}
span.label em.radio.style2 b i{background:#f80;}



dl dt{font-size:16px;line-height:40px;}
dl dd{margin-left:0px;line-height:30px;font-size:14px;}
</style>
</head>

<body>
<div class="ex">
	<dl>
		<dt>请选择你喜欢的书籍:(风格1)</dt>
		<dd><span class="label disable"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>三国演义</span></dd>
		<dd><span class="label"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>水浒传</span></dd>
		<dd><span class="label"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>西游记</span></dd>
		<dd><span class="label"><em class="checkbox"><input type="checkbox"  /><b><i></i></b></em>红楼梦</span></dd>
	</dl>
	
	<dl>
		<dt>请选择你喜欢的书籍:(风格2)</dt>
		<dd><span class="label disable"><em class="checkbox style2"><input type="checkbox"  /><b><i></i></b></em>三国演义</span></dd>
		<dd><span class="label"><em class="checkbox style2"><input type="checkbox"  /><b><i></i></b></em>水浒传</span></dd>
		<dd><span class="label"><em class="checkbox style2"><input type="checkbox"  /><b><i></i></b></em>西游记</span></dd>
		<dd><span class="label"><em class="checkbox style2"><input type="checkbox"  /><b><i></i></b></em>红楼梦</span></dd>
	</dl>
	
	<dl>
		<dt>选择你的性别:(风格1)</dt>
		<dd><span class="label disable"><em class="radio"><input type="radio" name="radio_style1" /><b><i></i></b></em>男</span></dd>
		<dd><span class="label"><em class="radio"><input type="radio" name="radio_style1" /><b><i></i></b></em>女</span></dd>
		<dd><span class="label"><em class="radio"><input type="radio" name="radio_style1" /><b><i></i></b></em>保密</span></dd>
	</dl>
	
	<dl>
		<dt>选择你的性别:(风格2)</dt>
		<dd><span class="label disable"><em class="radio style2"><input type="radio" name="radio_style2" /><b><i></i></b></em>男</span></dd>
		<dd><span class="label"><em class="radio style2"><input type="radio" name="radio_style2" /><b><i></i></b></em>女</span></dd>
		<dd><span class="label"><em class="radio style2"><input type="radio" name="radio_style2" /><b><i></i></b></em>保密</span></dd>
	</dl>
</div>
<script src="http://www.86y.org/js/jquery.min.js" type="text/javascript"></script>
<script>
$("span.label").click(function(){
    if(!$(this).hasClass("disable"))
    {
        if($(this).find(".checkbox").length>0)
        {
            if(!$(this).find(".checkbox").eq(0).hasClass("checked"))
            {
                $(this).find(".checkbox").eq(0).addClass("checked");
                $(this).find("input").eq(0).attr("checked",true);
            }
            else
            {
                $(this).find(".checkbox").eq(0).removeClass("checked");
                $(this).find("input").eq(0).attr("checked",false);
            }
        }
        if($(this).find(".radio").length>0)
        {
            var st=$(this).find("input").eq(0).attr("name");
            $("input[name="+st+"]").parent().removeClass("checked");
            $(this).find("input").eq(0).attr("checked",true);        
            $(this).find(".radio").eq(0).addClass("checked");        
        }
    }
});
</script>
</body>
</html>

四、结语

预览地址:http://www.86y.org/demo/checkbox/
源代码地址下载:http://pan.baidu.com/s/1pKGazNX  密码: dc5z

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭