前端入坑紀(jì) 20

最近上火了寻咒，喉嚨都開始痛了。一定是最近更新少了颈嚼，把自個(gè)兒給急的毛秘。這不，我來了Ｗ杩巍叫挟！

再樸素不過的效果圖

這是mac上的預(yù)覽截圖，所以原生表單的效果可能會(huì)和window上有所差別

OK限煞，first things first抹恳！項(xiàng)目鏈接

HTML 結(jié)構(gòu)

    <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>

之所以做模擬的單選和下拉，因?yàn)樗鼈兿鄬?duì)于原生更加方便定義外觀署驻。

CSS 結(jié)構(gòu)

        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
        }

布局很明朗适秩，沒啥好細(xì)說的，就是模擬的下拉做了絕對(duì)定位

JS 結(jié)構(gòu)

        var labs = document.getElementsByClassName("manmd")[0].getElementsByTagName("label");
        for (var i = 0; i < labs.length; i++) {
            labs[i].onclick = function() {
                //點(diǎn)擊的時(shí)候硕舆，清楚所有的為 on 的class秽荞，這里我故意不隱藏原生的radio，項(xiàng)目時(shí)可以加hidden
                for (var j = 0; j < labs.length; j++) {
                    labs[j].className = "";
                }
                // 這里自然就是給當(dāng)前點(diǎn)擊項(xiàng)加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");
        // 給每個(gè)下拉菜單里的選項(xiàng)添加點(diǎn)擊事件
        for (var m = 0; m < boxs.length; m++) {
            boxs[m].onclick = function() {
                sectBtn.innerText = this.innerText;
                sectBox.style.display = "none";
            }
        }

代碼里的循環(huán)啊抚官，添加點(diǎn)擊事件啊扬跋，都是前面很多篇幅里的老套路了。關(guān)鍵還是模擬表單里的東東凌节，有興趣的小伙伴钦听，可以跟進(jìn)下洒试，研究下。