jQuery模拟下拉框单选框复选Select,Checkbox,Radio

前端开发 作者: 2024-08-20 18:55:01
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: 其次html结构代码: jque
<link rel="stylesheet" href="css/reset.css" type="text/css" />
="css/jquery.inputbox.css"="css/common.css"script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
="js/jquery.inputbox.js">
<!--模拟下拉框Select开始-->
    div class="hotdiv">
        ="numberN">1.模拟下拉框Select</div="div clearfix">
            name="zhiwei"="selectbox" class="zhiwei">
                ="opts">
                    a href="javascript:;" val="职位"="selected">职位a> 
                    ="职位2">职位2>
             ="hangye"="行业">行业="互联网">互联网="div"="place"="place"="工作地点">工作地点="上海">上海> 
       >   
   >
   模拟下拉框Select开始结束-->
   
   
   模拟Checkbox开始开始-->
   ="savediv">2.Checkbox="cbt checked" name="check"  type="checkbox"="1" span ="save">保存span>
    模拟Checkbox开始结束-->
    
    
    模拟Radio开始开始="Radiodiv clearfix">3.Radio="rbt"="radiobox"="cn"="rbt checked"><>中文="en"="rbt">英文模拟Radio开始结束-->
$(function(){
        $('div[name="zhiwei"]').inputbox({ height:30,width:130});
        $('div[name="hangye"]').inputbox({ height:30,width:155});
        $('div[name="place"]').inputbox({ height:30,width:290});
        
        $('.cbt').inputbox();
        
        $('div[name="rbt"]').inputbox();
    })
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65667.html