【小效果们】选择文件夹的弹出框

本文介绍了一个基于HTML、CSS和JavaScript实现的文件夹选择弹窗。该弹窗包括加载动画、文件夹展开与收起功能及确认按钮。通过点击事件触发弹窗显示与隐藏,并实现了文件夹树状结构的动态加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里的样式和文件夹是直接写死的,具体数据可以通过和后台交互取到。

这里还做了一个模拟loading.

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="popup.css">
        <script type="text/javascript" src="js/jquery-2.0.0.js"></script>
        <title></title>
    </head>
    <body>
      <a href="javascript:void(0)" id="change">Change</a>
      <div id="backgroundPopup"></div>
      <div id="popup">
        <div id="folder-title">
          Choose your destination folder
          <div id="close-popup">
            <div class="close"></div>
          </div>
        </div>
        <div id="folder-content">
          <div class="folder-parent">
            <a href="javascript:void(0)" class="trangle tr-empty"></a>
            <div class="folder-each">
              <div class="folder-height">{userfolder}</div>
            </div>

          </div>
          <div class="folder-parent">
            <a href="javascript:void(0)" class="trangle tr-empty"></a>
            <div class="folder-each">
              <div class="folder-height">{userfolder}</div>
              <div class="child">
                <div class="folder-parent">
                  <a href="javascript:void(0)" class="trangle tr-empty"></a>
                  <div class="folder-each">
                    <div class="folder-height">{userfolder}</div>
                  </div>
                </div>
                <div class="folder-parent">
                  <a href="javascript:void(0)" class="trangle tr-empty"></a>
                  <div class="folder-each">
                    <div class="folder-height">{userfolder}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="folder-parent">
            <a href="javascript:void(0)" class="trangle tr-empty"></a>
            <div class="folder-each">
              <div class="folder-height">{userfolder}</div>
              <div class="child">
                <div class="folder-parent">
                  <a href="javascript:void(0)" class="trangle tr-empty"></a>
                  <div class="folder-each">
                    <div class="folder-height">{userfolder}</div>
                  </div>
                </div>
                <div class="folder-parent">
                  <a href="javascript:void(0)" class="trangle tr-empty"></a>
                  <div class="folder-each">
                    <div class="folder-height">{userfolder}</div>
                    <div class="child">
                      <div class="folder-parent">
                        <a href="javascript:void(0)" class="trangle tr-empty"></a>
                        <div class="folder-each">
                          <div class="folder-height">{userfolder}</div>
                        </div>
                      </div>
                      <div class="folder-parent">
                        <a href="javascript:void(0)" class="trangle tr-empty"></a>
                        <div class="folder-each">
                          <div class="folder-height">{userfolder}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="folder-parent">
            <a href="javascript:void(0)" class="trangle tr-empty"></a>
            <div class="folder-each">
              <div class="folder-height">{userfolder}</div>
              <div class="child">
                <div class="folder-parent">
                  <a href="javascript:void(0)" class="trangle tr-empty"></a>
                  <div class="folder-each">
                    <div class="folder-height">{userfolder}</div>
                  </div>
                </div>
                <div class="folder-parent">
                  <a href="javascript:void(0)" class="trangle tr-empty"></a>
                  <div class="folder-each">
                    <div class="folder-height">{userfolder}</div>
                    <div class="child">
                      <div class="folder-parent">
                        <a href="javascript:void(0)" class="trangle tr-empty"></a>
                        <div class="folder-each">
                          <div class="folder-height">{userfolder}</div>
                        </div>
                      </div>
                      <div class="folder-parent">
                        <a href="javascript:void(0)" class="trangle tr-empty"></a>
                        <div class="folder-each">
                          <div class="folder-height">{userfolder}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>




        </div>
        <a href="javascript:void(0)" id="folder-confirm">CONFIRM</a>
      </div>

    </body>

    <script type="text/javascript">
    $(function(){

      //create popup
      var popupStatus = 0;
      function loadPopup(){
        if(popupStatus==0){
          $("#backgroundPopup").css({
              "opacity": "0.6"
          });
          $("#backgroundPopup").fadeIn("slow");
          $("#popup").fadeIn("slow");
          popupStatus = 1;
        }
      }

      function disablePopup(){
        if(popupStatus==1){
          $("#backgroundPopup").fadeOut("slow");
          $("#popup").fadeOut("slow");
          popupStatus = 0;
        }
      }

      function centerPopup(){
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var popupHeight = $("#popup").height();
        var popupWidth = $("#popup").width();
        $("#popup").css({
            "position": "fixed",
            "top": windowHeight/2-popupHeight/2,
            "left": windowWidth/2-popupWidth/2
        });
        $("#backgroundPopup").css({
            "height": windowHeight
        });
      }

      $("#change").click(function(){
        centerPopup();
        loadPopup();
      });

      $("#close-popup").click(function(){
        disablePopup();
      });

      $("#backgroundPopup").click(function(){
        disablePopup();
      });

      $(document).keypress(function(e){
          if(e.keyCode==27 && popupStatus==1){
              disablePopup();
          }
      });

      //operate on trangle
      function clickTrangle(a){
        var foeh = a.siblings('.folder-each')
        var child = foeh.children('.child');
        var el = a.siblings('.folder-each').children('.child');
        var elem = el.clone().css({"height":"auto"}).appendTo("body");
        var height = elem.css("height");
        elem.remove();
        if(child.hasClass('open')){
          child.animate({height:'0'}, 200);
          child.removeClass('open');
        }else {
          child.animate({height:height}, 200,function(){
            child.css('height','auto');
          });
          child.addClass('open');
        }
        a.siblings('.folder-each').children('.folder-height').toggleClass('fo-click');
        //about subfile
        if(foeh.children().hasClass('child')){
          a.toggleClass('tr-click');
          a.toggleClass('tr-empty');
        }else{
          a.remove();
        }
      }




      $('.trangle').click(function(){
        event.stopPropagation();
        var that = $(this);
        if($(this).hasClass('tr-empty')){
          $(this).addClass('loading');

          setTimeout(function () {
          clickTrangle(that);
          that.removeClass('loading');
          },500);
        }else{
          clickTrangle(that);

        }


      });

      //operate on folder

      function foDblclick(b){
        if(b.siblings().hasClass('child')){
            b.parent('.folder-each').siblings('.trangle').toggleClass('tr-click');
            b.parent('.folder-each').siblings('.trangle').toggleClass('tr-empty');
          }else{
            b.parent('.folder-each').siblings('.trangle').remove();
          }

          b.toggleClass('fo-click');

          var el = b.siblings('.child');
          var elem = el.clone().css({"height":"auto"}).appendTo("body");
          var height = elem.css("height");
          elem.remove();
          var child = b.siblings('.child');
          if(child.hasClass('open')){
            child.animate({height:'0'}, 200);
            child.removeClass('open');
          }else {
            child.animate({height:height}, 200,function(){
              child.css('height','auto');
            });
            child.addClass('open');
          }
        }

      $('.folder-height').bind({
        click:function(){
          $('.selected').removeClass('selected');
          $(this).toggleClass('selected');
          $('#folder-confirm').css('background-color','#2D93E5');
          event.stopPropagation();
        },
        dblclick:function(){
          var that = $(this);

          event.stopPropagation();
          $('.selected').removeClass('selected');
          that.toggleClass('selected');
          $('#folder-confirm').css('background-color','#2D93E5');
          //about subfile
          if(that.parent('.folder-each').siblings('.trangle').hasClass('tr-empty')){
            that.parent('.folder-each').siblings('.trangle').addClass('loading');
            setTimeout(function () {
            foDblclick(that);
            that.parent('.folder-each').siblings('.trangle').removeClass('loading');
            },500);
          }else{
            foDblclick(that);
          }
        }
      });

      //blur
      $('#popup').bind('click', function(){
        //console.dir(event);
        if(!$(event.target).hasClass('trangle,folder-each')){
          $('.selected').removeClass('selected');
          $('#folder-confirm').css('background-color','#aaa');
        }

      });








    });


    </script>
</html>

CSS

body,html {
  font: 14px "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", 'sans-serif', 'arial', 'helvetica';;
  background-color: #ddd;
}

* {
  background-repeat: no-repeat;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: rgba(0,0,0,0.5);
}

#change {
  display: block;
  width: 100px;
  margin: 0 auto;
  color: #2D93E5;
}

#popup {
  height: 460px;
  width: 330px;
  margin: 0 auto;
  box-shadow: 1px 1px 10px #aaa;
  border-radius: 3px;
  position: relative;
  z-index:2;
  display: none;
}

#backgroundPopup{
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background:#fff;
  border:1px solid #cecece;
  z-index:1;
  display: none;
}


#folder-title {
  color: #fff;
  height: 56px;
  line-height: 56px;
  padding-left: 56px;
  background-color: #2D93E5;
  border-radius: 3px 3px 0 0;
  background-image: url(images/icons.png);
  background-size: 56px;
  background-position: 5px -783px;
  position: relative;
}

#close-popup {
  height: 30px;
  width: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

.close, .close:after {
  position: absolute;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-color: #fff;
}

.close {
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close:after {
  content:"";
  top: 15px;
  left: 15px;
  border-width: 1px 0 0 1px;
}

#folder-content {
  height: 300px;
  width: 250px;
  margin: 26px auto 18px;
  overflow-x: hidden;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.folder-height {
  height: 28px;
  line-height: 28px;
  padding-left: 35px;
  margin-left: 20px;
  background-size: 30px;
  background-position: 0px -273px;
  cursor: pointer;
  background-image: url(images/icons.png);
}

.folder-each {
  height: auto;
}

.child {
  height: 0;
  margin-left: 30px;
  overflow-y: hidden;
  transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
}

.open {
  height: auto;
}

.trangle {
  cursor: pointer;
  height: 28px;
  width: 15px;
  z-index: 99;
  display: block;
  background-size: 20px;
  background-position: 0 0;
  float: left;
  transition: all .2s ease-out;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
}

.tr-empty {
  background-image: url(images/tri-empty.png);
}

.loading {
  background-image: url(images/loading_b.gif);
  background-size: 15px;
  background-position: 0 4px;
}

.tr-click {
  background-image: url(images/tri-black.png);
  transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform-origin: 70% 35%;
  -webkit-transform-origin: 70% 35%;
  -o-transform-origin:70% 35%;
  -moz-transform-origin: 70% 35%;
}

.fo-click {
  background-position: 0px -243px;
}

.selected {
  background-color: rgba(46, 147, 229, 0.2);
}









#folder-confirm {
  height: 40px;
  width: 240px;
  margin: 0 auto;
  border-radius: 3px;
  background-color: #aaa;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
  display: block;
  text-decoration: none;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值