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

最新推荐文章于 2021-03-17 11:04:47 发布
最新推荐文章于 2021-03-17 11:04:47 发布
阅读量432 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mercury8862/article/details/24394829
版权

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

这里还做了一个模拟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;
}


兔小几
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jsp选择文件夹路径
02-23
在windows系统中，使用struts2的file属性不支持选择文件夹，只能选择到具体文件，通过js及ie浏览器配置则可实现选择到文件夹操作
jQuery easyui 创建仿Windows界面
oldhelps的CSDN博客
08-07 380
jQuery easyui 创建仿Windows界面
获取file框里面的文件路径
shanshu12的专栏
05-20 7934
     今天在做一个应用，想要获取file框里面的文件路径，因为不需要对提交的文件进行保存之类的操作，只要获取文件路径就行了。开始是按以前的一般做法：使用enctype="multipart/form-data"格式的form。然后在Struts里面通过httpServletRequest对象把<input type="file" name="importFile"/>里面的importFile的值提取出来：String path = httpServletRequest.getParameter("im
jQuery EasyUI filebox的文件路径错误
rainyspring4540的专栏
05-26 9818
环境 ：jQuery EasyUI 1.4.1   问题如图： 经过反复测试,在控件的demo里直接使用，可以正常显示路径，在IE11  ，firefox任意版本，chrome任意版本都可以（firefox只显示文件名，故也算作正确） 但是IE9 总是无法正确显示路径，路径如图： 百度了解决方法：   //文件输入框，解决C:\\fakepath\\的错误路径问题...
Android自定义底部弹出框ButtomDialog
08-25
Android自定义底部弹出框ButtomDialog需要使用动画来实现弹出和关闭的效果。首先，在res文件夹下创建一个anim文件夹，并在其中创建两个文件：slide_in_bottom.xml和slide_out_bottom.xml。slide_in_bottom.xml文件...
asp.net弹出框Jq插件用法模板
05-30
JQuery是一个强大的JavaScript库，它提供了丰富的插件来实现各种弹出框效果。本文将详细介绍如何在ASP.NET环境中结合JQuery插件实现弹出框功能，并通过具体的例子——"asp.net弹出框Jq插件用法模板"进行讲解。 首先...
手机移动端的分享弹出框
01-13
- **CSS 样式**：`css`文件夹中的样式表用于定义弹出框的布局、动画效果和交互状态。弹出框通常会使用定位（positioning）使其从屏幕底部弹出，同时考虑过渡和动画效果以增强用户体验。 - **JavaScript 交互**：`...
打开页面右下角出现弹出框
08-21
`images`文件夹可能包含了弹出框中使用的图片资源，而`js`文件夹可能包含了一个或多个JavaScript文件，这些文件包含了处理弹出框逻辑的函数和事件处理程序。 实现弹出框的步骤通常包括以下几步： 1. 创建HTML结构，...
jquery 弹出框jbox文件
11-17
在`jbox-demo-depends`文件夹中，包含了JBox运行所依赖的其他文件，如`jBox.js`和`jBox.css`，这些都是实现弹出框效果必不可少的。 JBox的一个显著特点是其强大的自定义能力。通过调整CSS样式，你可以改变弹出框的...
jsp_选择文件夹的路径
03-29
在jsp下选择文件夹后取得文件夹下所有的文件，返回文件集。
java 弹出选择目录框（选择文件夹），获取选择的文件夹路径
lixingshi的专栏
12-31 9870
JFileChooser fileChooser = new JFileChooser("D:\\");   fileChooser.setFileSelectionMode(JFileChooser.DIRECTORIES_ONLY);   int returnVal = fileChooser.showOpenDialog(fileChooser);   if(returnVal ==
前端学习:ElementUI upload组件,在弹出文件选择窗口之前做操作
qq1274323054的博客
03-17 4097
项目场景 因为上传Excel会覆盖当前表格中的内容,所以需要给用户一个提示后 确认后才能进行上传Excel的流程; 问题描述 在准备上传文件的时候,点击按钮,文件选择框直接弹出,与我们所需要的操作不符,需要在弹出之前作出判断; 原因分析 ElementUI的上传组件似乎没有一个上传窗口弹出前的方法,所以before-upload并不能作用于此,选择文件的窗口还是会弹出来,因为这个问题是以前就解决过一次,在网上也看到过,所以大脑中有这个的解决办法; 解决方案 首先我们需要将template中的代码给替
点击按钮弹出文件夹选择框的实现
zcc_0015的专栏
10-18 5689
在Asp.net网站实际的开发中，比如：需要实现点击一个类似于FileUpload的浏览...按钮，弹出文件夹选择框，然后选择本地路径下的某一文件夹，将该路径值付给TextBox。参考了好多网络资料，但是其主要实现方式是通过FileUpload，但是这种文件上传方式去不能很好的解决该功能需求；只好寻求别的解决方法。在不断深入的学习中，发现可以通过JS的方式来得以实现该需求。下面是详细的实现过程，供
webuploader在bootstrap模态对话框中选择文件按钮无效的问题
mengxp的博客
05-25 3817
搜了很多，网上主要的说法是 当一个元素是hidden时，addbutton绑定是会失败的，所以单击选择文件按钮就无效了 而bootstrap模态框一开始是隐藏的，因此必须在其显示完毕后才可以初始化webuploader http://www.cnblogs.com/guohu/p/6483043.html 可参考上述帖子内容解决 var uploader; //在
[MFC]选择目录对话框和选择文件对话框
热门推荐
scu_zhongxq的专栏
03-07 2万+
在MFC编程中经常会需要用到选择目录和选择文件的界面，以下总结一下本人常用的这两种对话框的生成方法：选择目录对话框//选择目录按钮void CDcPackerDlg::OnBnClickedDecgen()    <img id="Codehighlighter1_52_656_Open_Image" onclick="function onclick(){this.style.dis
上门预约v4.7.80小程序前端下载
最新发布
07-10
### 回答1： 要预约v4.7.80小程序的前端下载，您可以通过以下步骤进行： 1. 首先，在您的电脑或移动设备上打开微信开发者工具。 2. 在微信开发者工具中，点击左上角的"小程序项目"按钮。 3. 在新建小程序项目页面中，选择"导入项目"选项，并点击"下一步"按钮。 4. 在导入项目页面中，填写小程序的AppID，并选择本地项目文件的存放路径。如果还没有AppID，您可以参考微信官方文档获取。 5. 点击"下载新版"按钮下载v4.7.80小程序的前端代码，并选择一个合适的存放位置。 6. 下载完成后，解压缩前端代码包，并将解压后的文件复制到您的项目文件夹中。 7. 返回微信开发者工具，在导入项目页面中，点击"完成"按钮，完成项目导入。 8. 在微信开发者工具的顶部菜单栏中，选择"预览"按钮。 9. 在预览页面中，您可以选择在真机上预览小程序的效果，或者在模拟器上预览。 10. 进行必要的调试和修改后，您可以点击"上传"按钮，将您的小程序代码提交到微信小程序的后台审核和发布。 希望以上步骤可以帮助您顺利进行v4.7.80小程序前端的下载和预约。如有任何问题，请随时向我求助。 ### 回答2： 您好，想要上门预约v4.7.80小程序前端下载，可以按照以下步骤进行操作： 1. 打开微信小程序商店。在微信主界面上方的搜索框中输入"微信小程序"，点击进入微信小程序商店。 2. 搜索v4.7.80小程序前端。在微信小程序商店的搜索框中输入"v4.7.80小程序前端"，点击搜索。 3. 查找并选择合适的小程序。根据搜索结果，找到v4.7.80小程序前端，并点击进入小程序详情页面。 4. 下载小程序。在v4.7.80小程序前端的详情页面，点击"下载"按钮进行下载。请确保您的手机已连接网络，并且有足够的存储空间。 5. 等待下载完成。根据网络状况和手机性能，下载时间可能会有所不同，请耐心等待下载完成。 6. 安装小程序。下载完成后，可以在手机的通知栏中找到下载完成的提示，点击打开或者在微信小程序商店的“管理”界面找到下载的小程序进行安装。 以上是关于如何上门预约v4.7.80小程序前端的下载过程，希望对您有所帮助！如果有任何问题，请随时与我们联系。 ### 回答3： 上门预约v4.7.80小程序前端下载，您可以按照以下步骤进行操作： 1. 打开微信小程序商店，搜索并进入小程序“上门预约”官方页面。 2. 在官方页面中，找到小程序的版本号为v4.7.80，确保选择正确的版本。 3. 在小程序页面中，找到下载按钮，并点击下载按钮。系统会自动开始下载小程序前端文件包。 4. 下载完成后，您可以在手机文件管理器中找到该文件包。建议将文件包保存在易于查找的位置。 5. 打开微信小程序开发工具，在工具的顶部菜单栏中选择“文件”-“导入项目”。 6. 在弹出窗口中，选择之前保存的文件包，点击确定。开发工具会自动导入小程序前端代码。 7. 导入完成后，您可以在开发工具中预览上门预约小程序前端界面，并进行相应的修改或开发工作。 8. 若您需要在手机上进行真机调试，可以点击开发工具顶部的真机预览按钮，扫描弹出的二维码，即可在手机上预览小程序前端界面。 通过以上步骤，您可以成功下载并开发上门预约v4.7.80小程序前端。若您遇到任何问题，可以参考微信小程序开发文档或联系上门预约官方客服进行咨询。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值