Question

我必须使用HTML5 / Jquery使用树元素准备分割窗格。这个例子将是一些那样的事情https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxsplitter/index.htm#demos/jqxsplitter/navigation.html

我是设计部门的新人，等待您的回复。

Answer 1

<script type ="text/javascript">

    var isMouseDown = false;

    $().ready(function() {
        $('#slider').mousedown(function() { isMouseDown = true; });
        $('#slider').mouseup(function() { isMouseDown = false; });
        $('#slider').mousemove(function(e) {
            if(isMouseDown)
                $('#panelLeft').width(($('#panelLeft').width() - e.pageX) +
                    e.pageX);
        });
    });

</script>

    <div id="mainSplitter"> <!-- table row -->
      <div id="innerMainSplitter"> <!-- table -->
        <div id="panelLeft"> <!-- table cell -->
          <div id="panelLeftContainer"> <!-- table -->
            <h1>Favorites</h1>
            <div id="favorites"> <!-- table-row -->
              <p class="noFavoriteFolders">No folders listed in Favorites.</p>
            </div>
            <h1>Folder List</h1>
            <div id="folderList"> <!-- table-row -->

            </div>
            <div id="viewMode"> <!-- table-row -->
              <div id="hslider"> </div>
              <a href="#inbox">Inbox</a>
              <a href="#calendar">Calendar</a>
              <a href="#contacts">Contacts</a>
              <a href="#tasks">Tasks</a>
              <a href="#notes">Notes</a>
            </div>
          </div>
        </div>
        <div id="slider" class="seamlessHeader"> <!-- table-cell -->
        </div>
        <div id="panelRight"> <!-- table-cell -->
          <h1>Today</h1>
          <!-- ... -->
        </div>
      </div>
    </div>

使用HTML5 / jquery显示树形元素的分割窗格

1 个答案: