前端入坑纪 20

最近上火了，喉咙都开始痛了。一定是最近更新少了，把自个儿给急的。这不，我来了！！

再朴素不过的效果图

这是mac上的预览截图，所以原生表单的效果可能会和window上有所差别

OK，first things first！项目链接

HTML 结构

    <div class="mainWrp">
        <p> 原来的样子</p>
        <div class="tbRow">

            <label for="man">男</label>
            <input id="man" type="radio" name="sex" value="male">
            <br>
            <label for="woman">女</label>
            <input id="woman" type="radio" name="sex" value="female">
        </div>
        <div class="tbRow">
            <label for="fav_fruit">最爱的水果: </label>
            <select name="" id="fav_fruit">
                <option value="苹果">苹果</option>
                <option value="香蕉">香蕉</option>
                <option value="香梨">香梨</option>
                <option value="山竹">山竹</option>
                <option value="草莓">草莓</option>
            </select>
        </div>
        <p> 模拟的样子</p>
        <div class="tbRow manmd">

            <label for="man1">男</label>
            <input id="man1" type="radio" name="sex" value="male">
            <br>
            <label for="woman1">女</label>
            <input id="woman1" type="radio" name="sex" value="female">
        </div>
        <div class="tbRow sectWrp clearfix">
            <label>最爱的水果: </label>
            <section id="fav_fruit1">
                苹果
            </section>
            <div id="sectBox">
                <div>苹果</div>
                <div>香蕉</div>
                <div>香梨</div>
                <div>山竹</div>
                <div>草莓</div>
            </div>
        </div>


    </div>

之所以做模拟的单选和下拉，因为它们相对于原生更加方便定义外观。

CSS 结构

        body {
            font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
        }
        
        html,
        body,
        ul,
        li {
            margin: 0;
            padding: 0
        }
        
        body {
            padding-top: 1px
        }
        
        .clearfix::after {
            content: "";
            display: table;
            clear: both
        }
        
         ::-webkit-scrollbar {
            display: none
        }
        
        ul,
        li {
            list-style: none
        }
        
        input,
        select {
            outline: none;
        }
        
        .mainWrp {
            width: 90%;
            margin: 0 auto;
            background-color: #fefefe;
            color: #333;
        }
        
        .tbRow {
            width: 100%;
            box-sizing: border-box;
            padding: 0 1rem;
            margin: 3% auto;
            line-height: 45px;
            border: 1px dotted #ddd;
        }
        
        .manmd label {
            background-image: url("http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/select_of.png");
            background-repeat: no-repeat;
            background-size: 20px;
            background-position: right center;
            display: inline-block;
            width: 50px;
        }
        
        .manmd label.on {
            background-image: url("http://sandbox.runjs.cn/uploads/rs/113/ajzbmzhg/select_on.png");
        }
        
        .sectWrp label {
            float: left;
        }
        
        .sectWrp {
            position: relative;
        }
        
        .sectWrp section {
            float: left;
            margin-left: 1rem;
            width: 37%;
            height: 45px;
            text-align: center;
        }
        
        #sectBox {
            display: none;
            position: absolute;
            top: 45px;
            left: 0;
            width: 100%;
            box-shadow: 0 0 1px #ccc;
            line-height: 45px;
            text-align: center;
            background-color: #fefefe
        }

布局很明朗，没啥好细说的，就是模拟的下拉做了绝对定位

JS 结构

        var labs = document.getElementsByClassName("manmd")[0].getElementsByTagName("label");
        for (var i = 0; i < labs.length; i++) {
            labs[i].onclick = function() {
                //点击的时候，清楚所有的为 on 的class，这里我故意不隐藏原生的radio，项目时可以加hidden
                for (var j = 0; j < labs.length; j++) {
                    labs[j].className = "";
                }
                // 这里自然就是给当前点击项加on咯
                this.className = "on"
            }
        }
        //console.log(labs)

        var sectBtn = document.getElementById("fav_fruit1");
        var sectBox = document.getElementById("sectBox");
        sectBtn.onclick = function() {
            sectBox.style.display = "block";
            console.log("sectBox toggle")
        }
        var boxs = sectBox.getElementsByTagName("div");
        // 给每个下拉菜单里的选项添加点击事件
        for (var m = 0; m < boxs.length; m++) {
            boxs[m].onclick = function() {
                sectBtn.innerText = this.innerText;
                sectBox.style.display = "none";
            }
        }

代码里的循环啊，添加点击事件啊，都是前面很多篇幅里的老套路了。关键还是模拟表单里的东东，有兴趣的小伙伴，可以跟进下，研究下。