个人中心
gpt4 book ai didi

Problem with the responsiveness of a branched treeview when displayed on mobile screens(分支树视图在移动屏幕上显示时的响应性问题)

转载 作者：bug小助手 更新时间：2023-10-25 21:56:02 25 4
gpt4 key购买 nike 





    $.fn.extend({
        treed: function (o) {

          var openedClass = 'fa-minus-circle';
          var closedClass = 'fa-plus-circle';

          if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
            openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
            closedClass = o.closedClass;
            }
          };

            //initialize each of the top levels
            var tree = $(this);
            tree.addClass("tree");
            tree.find('li').has("ul").each(function () {
                var branch = $(this); //li with children ul
                branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
                branch.addClass('branch');
                branch.on('click', function (e) {
                    if (this == e.target) {
                        var icon = $(this).children('i:first');
                        icon.toggleClass(openedClass + " " + closedClass);
                        $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>");         
                          setTimeout(()=>{
                            $(this).find('.loading').remove();
                            $(this).children().children().slideToggle(400);
                          }, 400)
                    }
                })
                branch.children().children().toggle();
            });
            //fire event from the dynamically added icon
          tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
          });
            //fire event to open branch if the li contains an anchor instead of text
            tree.find('.branch>a').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
            //fire event to open branch if the li contains a button instead of text
            tree.find('.branch>button').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
        }
    });

    //Initialization of treeviews

    $('#tree1').treed();
$.fn.extend({
  treed: function (o) {

    var openedClass = 'fa-minus-circle';
    var closedClass = 'fa-plus-circle';

    if (typeof o != 'undefined'){
      if (typeof o.openedClass != 'undefined'){
      openedClass = o.openedClass;
      }
      if (typeof o.closedClass != 'undefined'){
      closedClass = o.closedClass;
      }
    };

//initialize each of the top levels
      var tree = $(this);
      tree.addClass("tree");
      tree.find('li').has("ul").each(function () {
          var branch = $(this); //li with children ul
          branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
          branch.addClass('branch');

          // declare a flag to toggle
          let flag = false;
          branch.on('click', function (e) {
              if (this == e.target) {
                  // toggle on click
                  flag = !flag;
                  var icon = $(this).children('i:first');
                  icon.toggleClass(openedClass + " " + closedClass); 

                  // show loader only when its opened, and collpase once toggled   
                  if(flag) {
                    $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>"); 
                    setTimeout(()=>{
                      $(this).find('.loading').remove();
                      $(this).children().children().slideToggle(400);
                    }, 400)
                  } else {
                    $(this).children().children().slideToggle(400);
                  }
              }
          })
          branch.children().children().toggle();
      });

//fire event from the dynamically added icon
    tree.find('.branch .indicator').each(function(){
      $(this).on('click', function () {
          $(this).closest('li').click();
      });
    });
      //fire event to open branch if the li contains an anchor instead of text
      tree.find('.branch>a').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
          });
      });
      //fire event to open branch if the li contains a button instead of text
      tree.find('.branch>button').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
              });
          });
      }
    });
    
    //Initialization of treeviews
    
    $('#tree1').treed();
    
    $('#tree2').treed({openedClass:'fa-folder-open', closedClass:'fa-folder'});

    .tree, .tree ul {
      margin:0;
      padding:0;
      list-style:none;
      margin-left:10px;
    }
    .tree ul {
      margin-left:1em;
      position:relative
    }
    .tree ul ul {
      margin-left:.5em
    }
    .tree ul:before {
      content:"";
      display:block;
      width:0;
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      border-left:1px solid
    }
    .tree li {
      margin:0;
      padding:0 1em;
      line-height:2em;
      color:#369;
      font-weight:700;
      position:relative;
    }
    .tree ul li:before {
      content:"";
      display:block;
      width:10px;
      height:0;
      border-top:1px solid;
      margin-top:-1px;
      position:absolute;
      top:1em;
      left:0
    }
    .tree ul li:last-child:before {
      background:#fff;
      height:auto;
      top:1em;
      bottom:0
    }
    .indicator {
      margin-right:5px;
    }
    .tree li a {
      text-decoration: none;
      color:#369;
    }
    .tree li button, .tree li button:active, .tree li button:focus {
      text-decoration: none;
      color:#369;
      border:none;
      background:transparent;
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
      outline: 0;
    }

    .loading {
      font-style: italic;
    }
.timeline {
  border-left: 1px solid hsl(0, 0%, 90%);
  position: relative;
  list-style: none;
}

.timeline .timeline-item {
  position: relative;
}

.timeline .timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .timeline-item:after {
  background-color: hsl(0, 0%, 90%);
  left: -38px;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";

}

  

<section class="content">


  <div class="container-fluid">


  <div class="card">


    <div class="card-body">              


      <div class="row">


        <div class="col-md-4">


        <ul id="tree2">


          <li>


          <a href="#">TECH</a>


          <ul>


            <li>Company Maintenance</li>


            <li>


              Employees


              <ul>


                <li>


                Reports


                <ul>


                  <li>Report1


                  <ul>


                  <li>Report1


                  <ul>


                  <li>Report1


                  <ul>


                  <li>Report1</li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                </li>


                <li>Employee Maint.</li>


              </ul>


            </li>


            <li>Human Resources</li>


          </ul>


          </li>


             </ul>


      </div>        


      </div>


   </div>


  <div class="card-footer text-body-secondary">


</div> 


</div>  <!-- /.container-fluid -->


   </section>


                    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>




I have a treeview with several internal branches that work well on large computer screens, but the problem I am facing is that when I display it on mobile phone screens, it appears very poorly and completely uncoordinated. The letters also appear very fragmented and irregular. Please help me with the necessary formatting and adjustments to make the treeview work smoothly on mobile screens. I will include the captured images when displayed on computer screens and mobile screens to show the problem I am facing.
desktop
mobile

我有一个有几个内部分支的TreeView，在大电脑屏幕上运行得很好，但我面临的问题是，当我在手机屏幕上显示它时，它看起来非常糟糕，完全不协调。这些字母看起来也非常零碎和不规则。请帮助我进行必要的格式设置和调整，以使TreeView在移动屏幕上顺利工作。我会将捕捉到的图像显示在计算机屏幕和移动屏幕上，以显示我面临的问题。


更多回答
优秀答案推荐

Well, apparently it cannot fit the screen, so you might make it a scrollable container with overflow (for the tree container) and without text wrapping (for the branches):

显然，它不适合屏幕，所以您可以使它成为一个带有溢出的可滚动容器(对于树容器)，并且没有文本换行(对于分支)：


.tree {
  overflow-x: auto;
}

.branch {
  white-space: nowrap;
}



$.fn.extend({
        treed: function (o) {

          var openedClass = 'fa-minus-circle';
          var closedClass = 'fa-plus-circle';

          if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
            openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
            closedClass = o.closedClass;
            }
          };

            //initialize each of the top levels
            var tree = $(this);
            tree.addClass("tree");
            tree.find('li').has("ul").each(function () {
                var branch = $(this); //li with children ul
                branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
                branch.addClass('branch');
                branch.on('click', function (e) {
                    if (this == e.target) {
                        var icon = $(this).children('i:first');
                        icon.toggleClass(openedClass + " " + closedClass);
                        $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>");         
                          setTimeout(()=>{
                            $(this).find('.loading').remove();
                            $(this).children().children().slideToggle(400);
                          }, 400)
                    }
                })
                branch.children().children().toggle();
            });
            //fire event from the dynamically added icon
          tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
          });
            //fire event to open branch if the li contains an anchor instead of text
            tree.find('.branch>a').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
            //fire event to open branch if the li contains a button instead of text
            tree.find('.branch>button').each(function () {
                $(this).on('click', function (e) {
                    $(this).closest('li').click();
                    e.preventDefault();
                });
            });
        }
    });

    //Initialization of treeviews

    $('#tree1').treed();
$.fn.extend({
  treed: function (o) {

    var openedClass = 'fa-minus-circle';
    var closedClass = 'fa-plus-circle';

    if (typeof o != 'undefined'){
      if (typeof o.openedClass != 'undefined'){
      openedClass = o.openedClass;
      }
      if (typeof o.closedClass != 'undefined'){
      closedClass = o.closedClass;
      }
    };

//initialize each of the top levels
      var tree = $(this);
      tree.addClass("tree");
      tree.find('li').has("ul").each(function () {
          var branch = $(this); //li with children ul
          branch.prepend("<i class='indicator fas " + closedClass + "'></i>");
          branch.addClass('branch');

          // declare a flag to toggle
          let flag = false;
          branch.on('click', function (e) {
              if (this == e.target) {
                  // toggle on click
                  flag = !flag;
                  var icon = $(this).children('i:first');
                  icon.toggleClass(openedClass + " " + closedClass); 

                  // show loader only when its opened, and collpase once toggled   
                  if(flag) {
                    $(this).append("<div class='loading'><span class='fa fa-spinner fa-spin'</span></div>"); 
                    setTimeout(()=>{
                      $(this).find('.loading').remove();
                      $(this).children().children().slideToggle(400);
                    }, 400)
                  } else {
                    $(this).children().children().slideToggle(400);
                  }
              }
          })
          branch.children().children().toggle();
      });

//fire event from the dynamically added icon
    tree.find('.branch .indicator').each(function(){
      $(this).on('click', function () {
          $(this).closest('li').click();
      });
    });
      //fire event to open branch if the li contains an anchor instead of text
      tree.find('.branch>a').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
          });
      });
      //fire event to open branch if the li contains a button instead of text
      tree.find('.branch>button').each(function () {
          $(this).on('click', function (e) {
              $(this).closest('li').click();
              e.preventDefault();
              });
          });
      }
    });
    
    //Initialization of treeviews
    
    $('#tree1').treed();
    
    $('#tree2').treed({openedClass:'fa-folder-open', closedClass:'fa-folder'});

.tree {
  overflow-y: auto;
}
.branch {
  white-space: nowrap;
}

.tree, .tree ul {
      margin:0;
      padding:0;
      list-style:none;
      margin-left:10px;
    }
    .tree ul {
      margin-left:1em;
      position:relative
    }
    .tree ul ul {
      margin-left:.5em
    }
    .tree ul:before {
      content:"";
      display:block;
      width:0;
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      border-left:1px solid
    }
    .tree li {
      margin:0;
      padding:0 1em;
      line-height:2em;
      color:#369;
      font-weight:700;
      position:relative;
    }
    .tree ul li:before {
      content:"";
      display:block;
      width:10px;
      height:0;
      border-top:1px solid;
      margin-top:-1px;
      position:absolute;
      top:1em;
      left:0
    }
    .tree ul li:last-child:before {
      background:#fff;
      height:auto;
      top:1em;
      bottom:0
    }
    .indicator {
      margin-right:5px;
    }
    .tree li a {
      text-decoration: none;
      color:#369;
    }
    .tree li button, .tree li button:active, .tree li button:focus {
      text-decoration: none;
      color:#369;
      border:none;
      background:transparent;
      margin:0px 0px 0px 0px;
      padding:0px 0px 0px 0px;
      outline: 0;
    }

    .loading {
      font-style: italic;
    }
.timeline {
  border-left: 1px solid hsl(0, 0%, 90%);
  position: relative;
  list-style: none;
}

.timeline .timeline-item {
  position: relative;
}

.timeline .timeline-item:after {
  position: absolute;
  display: block;
  top: 0;
}

.timeline .timeline-item:after {
  background-color: hsl(0, 0%, 90%);
  left: -38px;
  border-radius: 50%;
  height: 11px;
  width: 11px;
  content: "";

}

<section class="content">


  <div class="container-fluid">


  <div class="card">


    <div class="card-body">              


      <div class="row">


        <div class="col-md-4">


        <ul id="tree2">


          <li>


          <a href="#">TECH</a>


          <ul>


            <li>Company Maintenance</li>


            <li>


              Employees


              <ul>


                <li>


                Reports


                <ul>


                  <li>Report1


                  <ul>


                  <li>Report1


                  <ul>


                  <li>Report1


                  <ul>


                  <li>Report1</li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                  </li>


                  <li>Report2</li>


                  <li>Report3</li>


                </ul>


                </li>


                <li>Employee Maint.</li>


              </ul>


            </li>


            <li>Human Resources</li>


          </ul>


          </li>


             </ul>


      </div>        


      </div>


   </div>


  <div class="card-footer text-body-secondary">


</div> 


</div>  <!-- /.container-fluid -->


   </section>


                    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css">
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>




更多回答

Thank you, great answer. Do I need to padding the treeview a little to the left or is it not necessary?

谢谢你，回答得很好。我需要将树视图向左填充一点吗？还是不需要？

well, it depends on the whole layout and design, but removing padding/margins would add more space, so yeah, it should be useful. Try it and see how it looks, I think you can remove margin-left: 10px; from .tree, that should move it to the left a bit, and you might use BS utilities, add p-0 on card-body, but that's now fine tuning

嗯，这取决于整个布局和设计，但删除填充/页边距会增加更多空间，所以是的，它应该是有用的。试一试，看看它是什么样子，我想你可以去掉.tree中的空格-Left：10px；，这应该会将它向左移动一点，你可以使用BS实用程序，在Card-Body上添加p-0，但这现在是微调

great , Thank you

太好了，谢谢

25 4 0
文章推荐： How to specify spot instance type for the `aws emr create-cluster` command?(如何为`aws emr create-cluster`命令指定Spot实例类型？)
文章推荐： Why do we need DTOs and interfaces both in NestJS(为什么我们需要在NestJS中同时使用DTO和接口)
文章推荐： Nest can't resolve dependencies of the JwtAuthGuard(Nest无法解析JwtAuthGuard的依赖项)
文章推荐： Reactjs routing composed routes(Reactjs路由组成的路由)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com