ecomp-portal-FE/client/bower_components/jqTree/_examples/07_autoscroll.html

   1 ---
   2 title: Javascript tree with autoscroll
   3 layout: page
   4 js: examples/autoscroll.js
   5 css: example.css
   6 ---
   7
   8 <p id="nav">
   9     <a href="../06_autoescape/">&laquo; Example 6</a>
  10     <a href="../08_multiple_select/" class="next">Example 8 &raquo;</a>
  11 </p>
  12
  13 <h1>Example 7 - autoscroll</h1>
  14
  15 <div id="scroll-container">
  16     <div id="tree1"></div>
  17 </div>
  18
  19 <p>
  20     This is an example of autoscroll. The tree will scroll automatically if you drag an item outside of the tree.
  21     <br />
  22     Autoscroll will work automatically. There is no option for it.
  23 </p>
  24
  25 <h3>html</h3>
  26
  27 {% highlight html %}
  28 <div id="scroll-container">
  29     <div id="tree1"></div>
  30 </div>
  31 {% endhighlight %}
  32
  33 <h3>css</h3>
  34
  35 {% highlight css %}
  36 #scroll-container {
  37   height: 200px;
  38   overflow-y: scroll;
  39   user-select: none;
  40 }
  41 {% endhighlight %}
  42
  43 <h3>js</h3>
  44
  45 {% highlight js %}
  46 $('#tree1').tree({
  47     data: ExampleData.example_data
  48 });
  49 {% endhighlight %}