一個標籤選擇彈框

時間  2019-12-10
標籤 一個 標籤 選擇 简体版
原文   原文鏈接

1、預覽

2、代碼

1.HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="./template-web.js"></script>
    <link rel="stylesheet" type="text/css" href="./chooseItem.css">
</head>
<body>
    <!-- 按鈕觸發模態框 -->
    <input type="text" class="form-control" data-toggle="modal" data-target="#myModal" id="showModal"/>
    <p>已選中的標籤</p>
    <ol class="showItem"></ol>
    <!-- 模態框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        選擇成員
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="choose"></div>
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#apartment" data-toggle="tab">
                                 按部門選擇
                            </a>
                        </li>
                        <li><a href="#self" data-toggle="tab">按人員選擇</a></li>
                    </ul>
                    <div id="content-area"></div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="sure">
                        肯定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</body>
<script id="tem" type="text/html">
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="apartment">
            <ul>
                <li><p class="dropdow">{{level}}<input type="checkbox" class="A" id="{{id}}" /><label class="checkbox_label" for="{{id}}" onclick="addItem($(this),$(this).parent().text())"></label></p>
                    <ul>
                        {{each childlevel as A}}
                            <li><p class="dropdow">{{A["level"]}}<input type="checkbox" class="A" id="{{A['id']}}"/><label class="checkbox_label" for="{{A['id']}}" onclick="addItem($(this),$(this).parent().text())"></label></p>
                                {{if A["childlevel"].length>0}}
                                    <ul>
                                        {{each A["childlevel"] as B}}
                                            <li><p class="dropdow">{{B["level"]}}<input type="checkbox" class="A" id="{{B['id']}}"/><label class="checkbox_label" for="{{B['id']}}" onclick="addItem($(this),$(this).parent().text())"></label></p>
                                                {{if B["childlevel"].length>0}}
                                                    <ul>
                                                        {{each B["childlevel"] as C}}
                                                            <li><p>{{C["level"]}}<input type="checkbox" class="A" id="{{C['id']}}"/><label class="checkbox_label" for="{{C['id']}}" onclick="addItem($(this),$(this).parent().text())"></label></p></li>
                                                        {{/each}}
                                                    </ul>
                                                {{/if}}
                                            </li>
                                        {{/each}}
                                    </ul>
                                {{/if}}
                            </li>
                        {{/each}}
                    </ul>
                </li>
            </ul>
        </div>
        <div class="tab-pane fade" id="self">
            <div class="side">
                <ul>
                    <li><p class="dropdow">{{level}}<span style="display: none;">[]</span></p>
                        <ul>
                            {{each childlevel as A}}
                                <li><p class="dropdow">{{A["level"]}}<span style="display: none;">{{A["staf"]}}</span></p>
                                    {{if A["childlevel"].length>0}}
                                        <ul>
                                            {{each A["childlevel"] as B}}
                                                <li><p class="dropdow">{{B["level"]}}<span style="display: none;">{{B["staf"]}}</span></p>
                                                    {{if B["childlevel"].length>0}}
                                                        <ul>
                                                            {{each B["childlevel"] as C}}
                                                                <li><p class="dropdow">{{C["level"]}}<span style="display: none;">{{C["staf"]}}</span></p></li>
                                                            {{/each}}
                                                        </ul>
                                                    {{/if}}
                                                </li>
                                            {{/each}}
                                        </ul>
                                    {{/if}}
                                </li>
                            {{/each}}
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="detail">
                
            </div>
        </div>
    </div>
</script>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="chooseItem.js"></script>
<script type="text/javascript">
    $(function(){
        var data={
            level:"讀書郎",
            id:"readboy",
            childlevel:[{
                level:"總經辦",
                id:"all",
                childlevel:[],
                staf:[
                {
                    id:"Z1",
                    level:"總經辦阿七"
                },
                {
                    id:"Z2",
                    level:"總經辦阿哥"
                },
                {
                    id:"Z3",
                    level:"總經辦阿龍"
                },
                {
                    id:"Z4",
                    level:"總經辦阿東"
                },
                {
                    id:"Z5",
                    level:"總經辦阿強"
                }]
            },{
                level:"市場營銷",
                id:"market",
                childlevel:[{
                    level:"客戶服務",
                    id:"service",
                    childlevel:[{
                        level:"400客服",
                        id:"service1",
                        childlevel:[],
                        staf:[
                            {
                                id:"K1",
                                level:"客服阿七"
                            },
                            {
                                id:"K2",
                                level:"客服阿哥"
                            },
                            {
                                id:"K3",
                                level:"客服阿龍"
                            },
                            {
                                id:"K4",
                                level:"客服阿東"
                            },
                            {
                                id:"Z5",
                                level:"客服阿強"
                            }]
                    }]
                },{
                    level:"推培部",
                    id:"teach",
                    childlevel:[{
                        level:"推培一部",
                        id:"teach1",
                        childlevel:[],
                        staf:[
                            {
                                id:"T1",
                                level:"推培一部阿七"
                            },
                            {
                                id:"T2",
                                level:"推培一部阿哥"
                            },
                            {
                                id:"T3",
                                level:"推培一部阿龍"
                            },
                            {
                                id:"T4",
                                level:"推培一部阿東"
                            },
                            {
                                id:"T5",
                                level:"推培一部阿強"
                            }]
                    },{
                        level:"推培二部",
                        id:"teach2",
                        childlevel:[],
                        staf:[
                            {
                                id:"TS1",
                                level:"推培二部阿七"
                            },
                            {
                                id:"TS2",
                                level:"推培二部阿哥"
                            },
                            {
                                id:"TS3",
                                level:"推培二部阿龍"
                            },
                            {
                                id:"TS4",
                                level:"推培二部阿東"
                            },
                            {
                                id:"TS5",
                                level:"推培二部阿強"
                            }]
                    }]
                },{
                    level:"渠道部",
                    id:"way",
                    childlevel:[{
                        level:"渠道一部",
                        id:"way1",
                        childlevel:[],
                        staf:[
                            {
                                id:"Q1",
                                level:"渠道一部阿七"
                            },
                            {
                                id:"Q2",
                                level:"渠道一部阿哥"
                            },
                            {
                                id:"Q3",
                                level:"渠道一部阿龍"
                            },
                            {
                                id:"Q4",
                                level:"渠道一部阿東"
                            },
                            {
                                id:"Q5",
                                level:"渠道一部阿強"
                            }]
                    },{
                        level:"渠道二部",
                        id:"way2",
                        childlevel:[],
                        staf:[
                            {
                                id:"QS1",
                                level:"渠道二部阿七"
                            },
                            {
                                id:"QS2",
                                level:"渠道二部阿哥"
                            },
                            {
                                id:"QS3",
                                level:"渠道二部阿龍"
                            },
                            {
                                id:"QS4",
                                level:"渠道二部阿東"
                            },
                            {
                                id:"QS5",
                                level:"渠道二部阿強"
                            }]
                    }]
                }]
            }]
        };
        var html=template('tem', data);
        $('#content-area').html(html);
        var CI=new ChooseItem();
        CI.usefor();
    })    
</script>
</html>

2.CSS部分

.form-control{
    width: 20%;
}
.modal-body{
    padding: 0px;
}
.modal-content{
    border-radius: 0px;
}
.choose{
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 95%;
    min-height: 50px;
    border: 1px solid #c9d0d9;
    border-radius: 4px;
}
.nav-tabs{
    border-top: 1px solid #c9d0d9;
    border-bottom: 1px solid #c9d0d9;
    padding-left: 15px;
}
.nav-tabs>li{
    margin-bottom: 0px;
}
/*點擊後的樣式*/
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    color: #269bec;
    font-weight: 600;
    border: 0px;
    border-bottom:3px solid #269bec;
}
a{
    color: black;
}
.btn-primary{
    background-color: #269bec;
    border: 0px;
}
.btn{
    border-radius: 0px; 
}
.tab-content{
    height: 250px;
    overflow-y: scroll;
}
.tab-content::-webkit-scrollbar {/*滾動條總體樣式*/
    width: 4px;     /*高寬分別對應橫豎滾動條的尺寸*/
    height: 4px;
}
.tab-content::-webkit-scrollbar-thumb {/*滾動條裏面小方塊*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.tab-content::-webkit-scrollbar-track {/*滾動條裏面軌道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
.tab-pane{
    width: 100%;
    height: 100%;
}
ul{
    padding-left: 30px;
}
li{
    list-style: none;
    cursor: pointer;
}
#apartment input[type="checkbox"]{
    float: right;
    display: none;
}
.checkbox_label{
    float: right;

}
.checkbox_label:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    border:1px solid #269bec;
}
input[type="checkbox"]:checked+.checkbox_label:before {
    background-color:#269bec;
}
p{
    margin-right: 15px;
}

/*下拉菜單*/
#apartment .dropdown-menu{
    left: 3%;
    width:97%;
    border: 0px;
    box-shadow: 0 0 0 transparent;
}
#apartment ul li ul{
    display: none;
}


#self ul li ul{
    display: none;
}
#self{
    display: flex;
}
#self .side{
    flex: 0 0 35%;
    width: 35%;
    height: 100%;
    overflow-y: scroll;
}
#self .side::-webkit-scrollbar {/*滾動條總體樣式*/
    width: 7px;     /*高寬分別對應橫豎滾動條的尺寸*/
    height: 7px;
}
#self .side::-webkit-scrollbar-thumb {/*滾動條裏面小方塊*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
#self .side::-webkit-scrollbar-track {/*滾動條裏面軌道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
#self .detail{
    flex: 1;
    height: 100%;
}


#self .line{
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0px;
}
#self .A{
    float: right;
    display: none;
}
.choosebox{
    position: relative;
    margin: 2px;
    padding:2px;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
}
.choosebox .delete{
    display: block;
    position: absolute;
    top: -7px;
    right: -7px;
    width:15px;
    height: 15px;
    background-color: white;
    border:1px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
}
.isExit{
    display: none;
}

3.JS部分

;(function($, window, document) {
    function ChooseItem(){
        this.Arr=[];//左邊標籤頁的左邊欄每一個下拉菜單隱藏的右邊框須要顯示的數據
        this.showModal=$("#showModal");
        this.apDropDow=$("#apartment .dropdow");
        this.seDropDow=$("#self .dropdow");
        this.sure=$("#sure");
    };
    ChooseItem.prototype.usefor=function(){
        this.showModal.click(function(){//點擊輸入框清除全部checkbox選擇狀態
            $("input[type='checkbox']").attr("checked",false);
        });
        //左邊標籤頁的下拉菜單功能
        this.apDropDow.click(function(){
            if($(this).parent().children("ul").is(':hidden')==true){
                $(this).parent().children("ul").css({"display":"block"});
            }else{
                $(this).parent().children("ul").css({"display":"none"});
            }
        })
        //右邊標籤頁的下拉菜單功能
        this.seDropDow.click(function(){
            if($(this).parent().children("ul").is(':hidden')==true){
                $(this).parent().children("ul").css({"display":"block"});
            }else{
                $(this).parent().children("ul").css({"display":"none"});
            }
            if($(this).find("span").text()=="[]"||$(this).find("span").text()==""){
            }else{
                this.Arr=JSON.parse($(this).find("span").text());
                $("#self .detail").children().remove();//在右邊欄生成列表以前，必須清除掉原來右邊欄的checkbox
                //獲取已選擇的checkbox的長度
                var ChooseBoxLen=$(".isExit").length||0;
                for(var i=0;i<this.Arr.length;i++){//在循環生成checkbox的同時，也要判斷一下checkbox的選擇狀態
                    var h=$("<p class='line'>"+this.Arr[i]["level"]+"<input type='checkbox' class='A' id='"+this.Arr[i]["id"]+"'/><label class='checkbox_label' for='"+this.Arr[i]["id"]+"' onclick='addItem($(this),$(this).parent().text())'></label></p>");
                    var isChecked=false;//點擊左邊欄生成右邊欄時判斷checkbox的狀態
                    for(var j=0;j<ChooseBoxLen;j++){
                        if($(".choosebox").eq(j).find("span").eq(0).text()==this.Arr[i]["id"]){
                            isChecked=true;
                        }
                    }
                    h.find("input").attr("checked",isChecked);
                    $("#self .detail").append(h);
                }
            }
        })
        //肯定按鈕，點擊肯定按鈕以後獲取已選擇的checkbox信息，將信息添加到彈框外面，而後清除彈框裏面的操做數據
        this.sure.on("click",function(){
            for(var n=0;n<$(".choosebox").length;n++){
                $(".showItem").append("<li>"+$(".choosebox").eq(n).find("span").eq(1).text()+"</li>");
            }
            $(".choose").empty();
            $(this).attr({"data-dismiss":"modal","aria-hidden":"true"})
        })
    };


    //在choose框添加項目
    window.addItem=function(obj,text){
        var chooseLen=$(".isExit").length;//判斷選中框元素的個數
        var isExit=false;//判斷選中的checkbox是否已經在選中框中
        for(var i=0;i<chooseLen;i++){
            if($(".isExit").eq(i).text()==obj.parent().find("input").attr("id")){//只要有存在，那麼就是true
                isExit=true;
            }
        }
        if(isExit){
            obj.parent().find("input").on("click",function(e){//若是已經存在的話，那麼CheckBox就處於選中的狀態
                e.preventDefault();
            })
        }else{
            var T=$("<p class='choosebox'><span class='isExit'>"+obj.parent().find("input").attr("id")+"</span><span>"+text+"</span><span class='delete' onclick='removeItem($(this))'>x</span></p>");//<span>標籤是一個佔位符，裏面存放的是選中的checkbox的id
            $(".choose").append(T);    
        }
    }
    //移除choose框的項目
    window.removeItem=function(obj){
        var ALen=$(".A").length;//判斷checkbox的總數
        var chooseId=obj.parent().find("span").eq(0).text();//要刪除的選項的id
        for(var m=0;m<ALen;m++){
            if($(".A").eq(m).attr("id")==chooseId){
                obj.parent().remove();
                $(".A").eq(m).attr("checked",false);
            }
        }
    }
    ChooseItem.case = function() {
        return new ChooseItem();
    };
    if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
        define(function() {
            return ChooseItem;
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = ChooseItem.case;
        module.exports.ChooseItem = ChooseItem;
    } else {
        window.ChooseItem = ChooseItem;
    }
})(jQuery,window,document);

3、分析

這個彈框的數據渲染採用的是ArtTemplate來渲染的，具體用法參照以下地址：javascript

https://www.awesomes.cn/repo/aui/arttemplate#%E6%9B%B4%E6%96%B0%E6%97%A5%E5%BF%97css

這個小demo在編寫過程當中遇到了幾個小問題：html

1.如何讓checkbox一直處於被點擊狀態java

解決：最後仍是想到用e.preventDefault()來解決jquery

2.如何修改checkbox的樣式git

解決：思路是這樣的，創建<input type="checkbox" id="test"/>和<label for="test"></label>，而後隱藏掉<input/>，咱們修改的實際上是label的樣式，checkbox的樣式是沒辦法直接修改的。github

#apartment input[type="checkbox"]{
    float: right;
    display: none;
}
.checkbox_label{
    float: right;
}
.checkbox_label:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    border:1px solid #269bec;
}
input[type="checkbox"]:checked+.checkbox_label:before {
    background-color:#269bec;
}

這段代碼裏面能夠看出，點擊後的checkbox樣式是採用:checked僞類選擇器和+選擇器來獲取到當前被點擊的checkbox的。web

3.如何修改滾動條的樣式bootstrap

.tab-content{
    height: 250px;
    overflow-y: scroll;
}
.tab-content::-webkit-scrollbar {/*滾動條總體樣式*/
    width: 4px;     /*高寬分別對應橫豎滾動條的尺寸*/
    height: 4px;
}
.tab-content::-webkit-scrollbar-thumb {/*滾動條裏面小方塊*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.tab-content::-webkit-scrollbar-track {/*滾動條裏面軌道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

4.代碼編寫思路app

①首先，數據最多隻能有四個級別，每一個級別/我的必需要有本身特定的id，這樣在後面進行移除標籤的時候才方便移除。每一個能夠選中的選項都有相同的css樣式類A,這樣方便對全部能夠選中的checkbox進行遍歷；

②在「按人員選擇標籤頁」中，要實現點擊左邊欄的菜單，在右邊欄就出現相應的信息，這就須要在渲染的時候綁定各自的詳細數據，咱們來經過一張圖看一下是怎麼實現的

在具備信息的菜單項裏面，藏入一個display爲none的<span>標籤，裏面存放相應的數據，而後在點擊的時候，經過$(this)和其餘選擇器獲取到這個span的數據，而後放到右邊欄中。記住，在每次獲取span裏面的數據放到右邊欄以前，必須遍歷這些數據，看看最上面已經被選擇的標籤當中是否出現這些數據，而後設置其對應的點擊狀態；

③在選擇checkbox以後，最上面的已選擇框中會出現這些數據，這時也須要對選中框中每一個標籤進行綁定

K1是客服阿七對應的id，咱們把它藏到這個標籤裏面，獲取的時候一樣經過$(this)獲取；

④刪除標籤的時候經過第三點綁定的id，遍歷全部具備類A的checkbox，而後設置各自的checkbox狀態。

4、github地址

https://github.com/Nangxif/ChooseItem

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程