bootstrap+jquery实现一个文件夹选择文件的选择器效果代码-html代码-BFW代码库

代码语言：html

所属分类：选择器

代码描述：bootstrap+jquery实现一个文件夹选择文件的选择器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
    #folioModalBody{border: 1px solid #ccc;width: 100%;overflow: hidden;}
#folioModalBody>div{overflow: auto;max-height: 204px;width: 104%;}
#folioModal .modal-footer>.btn{padding-left:  30px;padding-right: 30px;}
#folioModal .modal-footer>.btn.btn-primary{
    background-color: #3b8cff;
    border: 1px solid #3b8cff;
}
#folioModal .modal-footer>#creatFolio{
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    color: #3b8cff;
    border: 1px solid #3b8cff;
}
#folioModalBody i.fa{
    font-size: 15px;
    width: 18px;
    text-align: center;
    height: 18px;
    line-height: 18px;
    box-sizing: border-box;
    font-weight: 600;
    color: #090909;
}
#folioModalBody i.fa-spinner{
    top: 0;
    left: 0;
}
#folioModalBody div.p{
    height: 34px;
    line-height: 34px;
    cursor: pointer;
    margin: 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

#folioModalBody div.p:hover{
    border-top: 1px solid #c7d8ec;
    border-bottom: 1px solid #c7d8ec;
    background: #f2f8ffd9;
}
#folioModalBody div.p.active-p:hover{
    border-top: 1px solid #9acdfd;
    border-bottom: 1px solid #9acdfd;
    background: #e5f0fb;
}
.active-p{
    border-top: 1px solid #9acdfd;
    border-bottom: 1px solid #9acdfd;
    background: #e5f0fb;
}
#folioModalBody .fa.fa-folder,#folioModal .fa.fa-folder-open{
    color: #ffd65a;
    font-size: 18px;
}
#folioModalBody div.childrenDiv [name=fileName]{
    height: 26px;
}
#folioModalBody div.p>i:nth-of-type(2){
    margin-right: 5px;
}
/* ¡Ì¡Á °´Å¥*/
.spanOption {
    font-weight: 600;
    color: #3b8cff;
    width: 23px;
    height: 23px;
    line-height: 23px;
    display: inline-block;
    font-family: verdana;
    box-shadow: 0 0 1px 1px;
    margin: 0 3px;
    box-sizing: border-box;
    cursor: pointer;
}
.abcsadas{
    color: rgb(246, 246, 246);
}
</style>

<body>
	

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#folioModal" style="margin: 50px">
  打开文件夹
</button>	
<div id="folioModal" class="modal fade" tabindex="11" role="dialog" style="top: 90px;">
    <div class="modal-dialog" role="document" style="width: 500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h5 class="modal-title">文件创建</h5>
            </div>
            <div class="modal-body">
                <div id="folioModalBody">
                    <div data-parentDir="0" class="folioAll childrenDiv">
                        <div class="p active-p" style="border-color: rgb(154, 205, 253);">
                            <i class="fa fa1 fa-minus-square-o" data-folioid="0"></i>
                            <i class="fa fa2 fa-folder-open"></i>
                            <span>全部文件</span>
                            <!--<i class="fa fa-plus-square-o" aria-hidden="true"></i>+
                            <i class="fa fa-minus-square-o" aria-hidden="true"></i>-
                            <i class="fa fa-spinner" aria-hidden="true"></i>0
                            <i class="fa fa-folder"></i>
                            <i class="fa fa-folder-open" aria-hidden="true"></i>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="creatFolio" class="btn btn-default">新建文件夹</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.3.3.7.js"></script>
<script type="text/javascript" >
    
    $(function(){
    $("#folioModal").modal("show");//模态框初始化就显示了

    getFolioToParentDir(0,$("#folioModalBody .folioAll"));//初始化时得到根目录下的文件夹

    var $div =$("#folioModalBody>div:eq(0)");
    $div.on('click',"div.p:not(.now)",function(){
        $("div.p").removeClass("active-p").css("border-color","rgba(0,0,0,0)");
        $(this).addClass("active-p").css("border-color","#9acdfd");

        var $fa1=$(this).find(".fa1:eq(0)");
        if($fa1.hasClass("fa-plus-square-o")){
            $fa1.addClass("fa-minus-square-o").removeClass("fa-plus-square-o fa-spinner");
            //$fa1.parents(".p").siblings(".childrenDiv").show();
            $fa1.siblings(".fa2").removeClass("fa-folder").addClass("fa-folder-open");
            if($(this).parent().hasClass("childrenDiv"))//多做一步优化 - 得到该文件夹的子文件夹
                getFolioToParentDir($fa1.attr("data-folioId"),$fa1.closest(".childrenDiv"));
        }else if($fa1.hasClass("fa-minus-square-o")){
            $fa1.addClass("fa-plus-square-o").removeClass("fa-minus-square-o fa-spinner");
            $fa1.parents(".p").siblings(".childrenDiv").hide();
            $fa1.siblings(".fa2").remove.........完整代码请登录后点击上方下载按钮下载查看