AlkantarClanX12

Your IP : 3.137.169.14


Current Path : /home/thanudqk/128shen.com/wp-content/plugins/o017r0ok/public/vendors/split/docs/
Upload File :
Current File : /home/thanudqk/128shen.com/wp-content/plugins/o017r0ok/public/vendors/split/docs/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="description" content="< 2kb unopinionated utility for resizeable split views">
    <title>Split.js</title>
    <link rel="stylesheet" type="text/css" href="./gist.css">
    <link rel="stylesheet" type="text/css" href="./index.css">
    <link rel="stylesheet" type="text/css" href="./splitjs.css">
    <link rel="stylesheet" type="text/css" href="./font.css">
    <style>
.gist-file {
  margin-bottom: 2em !important;
}

.gist .gist-data {
  border-bottom: 0 !important;
}

.gist-meta {
  display: none;
}

.gist-data tr:last-child .blob-num {
  border: none;
}
#logo-1, #logo-2,
#js-1, #css-1, #html-1,
#js-2, #css-2, #html-2 {
    float: left;
}
#logo-1, #logo-2 {
    height: 178px;
}
.gutter.logo-gutter {
    background-color: #34495E;
    margin-top: 0;
}
.gutter {
    float: left;
    background-color: #eee;
    margin-top: 27px;
    cursor: ew-resize;
}
.split-parent:after {
  content: "";
  display: table;
  clear: both;
}

.clearfix::before {
  display: table;
  content: ""; }

.clearfix::after {
  display: table;
  clear: both;
  content: ""; }
    </style>
</head>
<body>
<div><header role="banner" class="jumbotron"><div class="container" style="position:relative">
<div class="split-parent">
    <div id="logo-1">
        <div style="max-width:490px;height:100%;position:relative;overflow:hidden;">
            <div style="overflow:hidden;width:208px;position:absolute;right:0;height:100%">
                <img alt="Split.js" title="Split.js" src="./logo.svg" style="width:430px;max-width:430px;position:absolute;right:-223px;top:0;bottom:0">
            </div>
        </div>
    </div>
    <div id="logo-2" style="position:relative">
        <div style="max-width:490px;height:100%;position:absolute;right:0;width:100%;overflow:hidden;">
            <div style="overflow:hidden;width:208px;position:absolute;left:0;height:100%">
                <img title="Split.js" src="./logo.svg" style="width:430px;max-width:430px;position:absolute;left:-222px;top:0;bottom:0">
            </div>
        </div>
    </div>
</div>
<div style="margin-top:20px;text-align:center;" class="ui-font"><a class="btn btn-large" href="#get-started" style="margin-right:8px;">Get Started</a><div class="clearfix" style="display:inline-block;vertical-align:middle;"><a class="btn btn-large btn-with-count" role="button" href="https://github.com/nathancahill/split/"><svg class="octicon" version="1.1" viewBox="0 0 14 16" ariahidden="true" width="20" height="20" children=""><path fillRule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74z"></path></svg> Star</a><a class="social-count" style="display:inline-block;vertical-align:middle;">3,253</a></div></div></div></header>
<main class="container">
Split.js is a <b>2kb unopinionated utility</b> for resizeable split views (also called panes or frames). It <b>handles weird edge cases</b> so you don't have to. Split.js is <b style="white-space: nowrap">CSS-driven</b>,
only using JS to recalculate CSS styles on drag. Split.js <b>does not attach any window event listeners</b>, instead relying on CSS for the layout when the window size changes. This keeps the JS overhead extremely low.
<a name="get-started"></a>
<h2>Get Started</h2>
Create a split view with an array of selectors or HTML elements. By default, Split.js modifies <b>the CSS width property and nothing else</b>. You are responsible for adding other CSS properties to create a layout. A simple way to place elements side-by-side is with a <code>float</code> rule. Other layout options besides <code>width-float</code> are possible (and encouraged), see the <a href="#advanced">Advanced</a> section below.
<br /><br />
<div class="split-parent">
    <div id="js-1">
        <h6 style="margin:0">JS</h6>
        <div class="gist">
        <div class="gist-file" style="height:139px;">
        <div class="gist-data">
        <div itemprop="text" class="blob-wrapper data type-javascript">
              <table class="highlight tab-size js-file-line-container" data-tab-size="8">
              <tr>
                <td class="blob-num" data-line-number="1"></td>
                <td class="blob-code blob-code-inner js-file-line"><span class="pl-en">Split</span>([<span class="pl-s"><span class="pl-pds">&#39;</span>#one<span class="pl-pds">&#39;</span></span>, <span class="pl-s"><span class="pl-pds">&#39;</span>#two<span class="pl-pds">&#39;</span></span>]);</td>
              </tr>
        </table>
        </div>
        </div>
        </div>
        </div>
    </div>
    <div id="html-1">
        <h6 style="margin:0">HTML</h6>
        <div class="gist">
        <div class="gist-file" style="height:139px;">
        <div class="gist-data">
        <div itemprop="text" class="blob-wrapper data type-html">
              <table class="highlight tab-size js-file-line-container" data-tab-size="8">
              <tr>
                <td class="blob-num" data-line-number="1"></td>
                <td class="blob-code blob-code-inner js-file-line">&lt;<span class="pl-ent">div</span>&gt;</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="2"></td>
                <td class="blob-code blob-code-inner js-file-line">    &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>split<span class="pl-pds">&quot;</span></span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>one<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="3"></td>
                <td class="blob-code blob-code-inner js-file-line">    &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>split<span class="pl-pds">&quot;</span></span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">&quot;</span>two<span class="pl-pds">&quot;</span></span>&gt;&lt;/<span class="pl-ent">div</span>&gt;</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="4"></td>
                <td class="blob-code blob-code-inner js-file-line">&lt;/<span class="pl-ent">div</span>&gt;</td>
              </tr>
        </table>
        </div>
        </div>
        </div>
        </div>
    </div>
    <div id="css-1">
        <h6 style="margin:0">CSS</h6>
        <div class="gist">
        <div class="gist-file" style="height:139px;">
        <div class="gist-data">
        <div itemprop="text" class="blob-wrapper data type-css">
              <table class="highlight tab-size js-file-line-container" data-tab-size="8">
              <tr>
                <td class="blob-num" data-line-number="1"></td>
                <td class="blob-code blob-code-inner js-file-line"><span class="pl-e">.split</span>, <span class="pl-e">.gutter.gutter-horizontal</span> {</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="2"></td>
                <td class="blob-code blob-code-inner js-file-line">    <span class="pl-c1"><span class="pl-c1">float</span></span>: <span class="pl-c1">left</span>;</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="3"></td>
                <td class="blob-code blob-code-inner js-file-line">}</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="4"></td>
                <td class="blob-code blob-code-inner js-file-line"><span class="pl-e">.gutter.gutter-horizontal</span> {</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="5"></td>
                <td class="blob-code blob-code-inner js-file-line">    <span class="pl-c1"><span class="pl-c1">cursor</span></span>: <span class="pl-c1">ew-resize</span>;</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="6"></td>
                <td class="blob-code blob-code-inner js-file-line">}</td>
              </tr>
        </table>
        </div>
        </div>
        </div>
        </div>
    </div>
</div>
<a name="advanced"></a>
<h2>Advanced</h2>
By overriding the default <code>elementStyle</code> and <code>gutterStyle</code> hooks, it's easy to change the CSS rules that Split.js modifies to support <code>flex</code>, <code>grid</code> and other CSS layouts:
<br /><br />
<div class="split-parent" style="display:flex">
    <div id="js-2">
        <h6 style="margin:0">JS</h6>
        <div class="gist">
        <div class="gist-file" style="height:185px;">
        <div class="gist-data">
        <div itemprop="text" class="blob-wrapper data type-javascript">
              <table class="highlight tab-size js-file-line-container" data-tab-size="8">
              <tr>
                <td class="blob-num" data-line-number="1"></td>
                <td class="blob-code blob-code-inner js-file-line"><span class="pl-en">Split</span>([<span class="pl-s"><span class="pl-pds">&#39;</span>#one<span class="pl-pds">&#39;</span></span>, <span class="pl-s"><span class="pl-pds">&#39;</span>#two<span class="pl-pds">&#39;</span></span>], {</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="2"></td>
                <td class="blob-code blob-code-inner js-file-line">    <span class="pl-en">elementStyle</span><span class="pl-k">:</span> (<span class="pl-smi">dimension</span>, <span class="pl-smi">size</span>, <span class="pl-smi">gutterSize</span>) <span class="pl-k">=&gt;</span> ({</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="3"></td>
                <td class="blob-code blob-code-inner js-file-line">        <span class="pl-s"><span class="pl-pds">&#39;</span>flex-basis<span class="pl-pds">&#39;</span></span><span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">`</span>calc(<span class="pl-s1"><span class="pl-pse">${</span>size<span class="pl-pse">}</span></span>% - <span class="pl-s1"><span class="pl-pse">${</span>gutterSize<span class="pl-pse">}</span></span>px)<span class="pl-pds">`</span></span>,</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="4"></td>
                <td class="blob-code blob-code-inner js-file-line">    }),</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="5"></td>
                <td class="blob-code blob-code-inner js-file-line">    <span class="pl-en">gutterStyle</span><span class="pl-k">:</span> (<span class="pl-smi">dimension</span>, <span class="pl-smi">gutterSize</span>) <span class="pl-k">=&gt;</span> ({</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="6"></td>
                <td class="blob-code blob-code-inner js-file-line">        <span class="pl-s"><span class="pl-pds">&#39;</span>flex-basis<span class="pl-pds">&#39;</span></span><span class="pl-k">:</span>  <span class="pl-s"><span class="pl-pds">`</span><span class="pl-s1"><span class="pl-pse">${</span>gutterSize<span class="pl-pse">}</span></span>px<span class="pl-pds">`</span></span>,</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="7"></td>
                <td class="blob-code blob-code-inner js-file-line">    }),</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="8"></td>
                <td class="blob-code blob-code-inner js-file-line">})</td>
              </tr>
        </table>
        </div>
        </div>
        </div>
        </div>
    </div>
    <div id="html-2">
        <h6 style="margin:0">HTML</h6>
        <div class="gist">
        <div class="gist-file" style="height:185px;">
        <div class="gist-data">
        <div itemprop="text" class="blob-wrapper data type-css">
              <table class="highlight tab-size js-file-line-container" data-tab-size="8">
              <tr>
                <td class="blob-num" data-line-number="1"></td>
                <td class="blob-code blob-code-inner js-file-line">&lt;<span class="pl-ent">div</span> class=&quot;flex&quot;<span class="pl-k">&gt;</span></td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="2"></td>
                <td class="blob-code blob-code-inner js-file-line">    &lt;<span class="pl-ent">div</span> id=&quot;one&quot;<span class="pl-k">&gt;</span>&lt;/<span class="pl-ent">div</span><span class="pl-k">&gt;</span></td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="3"></td>
                <td class="blob-code blob-code-inner js-file-line">    &lt;<span class="pl-ent">div</span> id=&quot;two&quot;<span class="pl-k">&gt;</span>&lt;/<span class="pl-ent">div</span><span class="pl-k">&gt;</span></td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="4"></td>
                <td class="blob-code blob-code-inner js-file-line">&lt;/<span class="pl-ent">div</span><span class="pl-k">&gt;</span></td>
              </tr>
        </table>
        </div>
        </div>
        </div>
        </div>
    </div>
    <div id="css-2">
        <h6 style="margin:0">CSS</h6>
        <div class="gist">
        <div class="gist-file" style="height:185px;">
        <div class="gist-data">
        <div itemprop="text" class="blob-wrapper data type-css">
              <table class="highlight tab-size js-file-line-container" data-tab-size="8">
              <tr>
                <td class="blob-num" data-line-number="1"></td>
                <td class="blob-code blob-code-inner js-file-line"><span class="pl-e">.flex</span> {</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="2"></td>
                <td class="blob-code blob-code-inner js-file-line">    <span class="pl-c1"><span class="pl-c1">display</span></span>: <span class="pl-c1">flex</span>;</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="3"></td>
                <td class="blob-code blob-code-inner js-file-line">    <span class="pl-c1"><span class="pl-c1">flex-direction</span></span>: <span class="pl-c1">row</span>;</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="4"></td>
                <td class="blob-code blob-code-inner js-file-line">}</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="5"></td>
                <td class="blob-code blob-code-inner js-file-line"><span class="pl-e">.gutter.gutter-horizontal</span> {</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="6"></td>
                <td class="blob-code blob-code-inner js-file-line">    <span class="pl-c1"><span class="pl-c1">cursor</span></span>: <span class="pl-c1">ew-resize</span>;</td>
              </tr>
              <tr>
                <td class="blob-num" data-line-number="7"></td>
                <td class="blob-code blob-code-inner js-file-line">}</td>
              </tr>
        </table>
        </div>
        </div>
        </div>
        </div>
    </div>
</div>
<h2>React</h2>
Split.js is also available as a React component: <a href="https://github.com/nathancahill/split/tree/master/packages/react-split">react-split</a>. The component
accepts the same options as the Split.js constructor:
<br /><br />
<h6 style="margin:0">JS</h6>
<div class="gist">
    <div class="gist-file">
      <div class="gist-data">
  <div itemprop="text" class="blob-wrapper data type-javascript ">
      <table class="highlight tab-size js-file-line-container" data-tab-size="8">
      <tbody><tr>
        <td class="blob-num" data-line-number="1"></td>
        <td class="blob-code blob-code-inner js-file-line"><span class="pl-k">import</span> <span class="pl-smi">Split</span> <span class="pl-k">from</span> <span class="pl-s"><span class="pl-pds">'</span>react-split<span class="pl-pds">'</span></span></td>
      </tr>
      <tr>
        <td class="blob-num" data-line-number="2"></td>
        <td class="blob-code blob-code-inner js-file-line">
</td>
      </tr>
      <tr>
        <td class="blob-num" data-line-number="3"></td>
        <td class="blob-code blob-code-inner js-file-line"><span class="pl-smi">ReactDOM</span>.<span class="pl-en">render</span>(</td>
      </tr>
      <tr>
        <td class="blob-num" data-line-number="4"></td>
        <td class="blob-code blob-code-inner js-file-line">    <span class="pl-k">&lt;</span>Split sizes<span class="pl-k">=</span>{[<span class="pl-c1">25</span>, <span class="pl-c1">75</span>]}<span class="pl-k">&gt;</span></td>
      </tr>
      <tr>
        <td class="blob-num" data-line-number="5"></td>
        <td class="blob-code blob-code-inner js-file-line">        <span class="pl-k">&lt;</span>Component <span class="pl-k">/</span><span class="pl-k">&gt;</span></td>
      </tr>
      <tr>
        <td class="blob-num" data-line-number="6"></td>
        <td class="blob-code blob-code-inner js-file-line">        <span class="pl-k">&lt;</span>Component <span class="pl-k">/</span><span class="pl-k">&gt;</span></td>
      </tr>
      <tr>
        <td class="blob-num" data-line-number="7"></td>
        <td class="blob-code blob-code-inner js-file-line">    <span class="pl-k">&lt;</span><span class="pl-k">/</span>Split<span class="pl-k">&gt;</span></td>
      </tr>
      <tr>
        <td class="blob-num" data-line-number="8"></td>
        <td class="blob-code blob-code-inner js-file-line">)</td>
      </tr>
</tbody></table>
  </div>
      </div>
    </div>
</div>
<br /><br />
<h2>Docs &amp; API</h2>
Docs are available in <a href="http://github.com/nathancahill/split/">README.md on GitHub</a>.
<br /><br />
</main>
<div class="container" style="margin: 30px auto">&copy; 2018 <a href="http://nathancahill.com/">Nathan Cahill</a>. <a href="https://github.com/nathancahill/split/tree/master/splitjs#license">MIT license</a>.</div>
<script async defer type="text/javascript" src="./web-font.js"></script>
<script type="text/javascript" src="./split.min.js"></script>
<script>
Split(['#logo-1', '#logo-2'], {
    minSize: 0,
    gutter: function (index, direction) {
        var gutter = document.createElement('div')
        gutter.className = 'gutter gutter-' + direction + ' logo-gutter'
        gutter.style.height = '144px'
        return gutter
    },
    gutterSize: 12,
})
Split(['#js-1', '#html-1', '#css-1'], {
    gutter: function (index, direction) {
        var gutter = document.createElement('div')
        gutter.className = 'gutter gutter-' + direction
        gutter.style.height = '139px'
        return gutter
    },
    gutterSize: 2,
})
Split(['#js-2', '#html-2', '#css-2'], {
    sizes: [50, 25, 25],
    gutter: function (index, direction) {
        var gutter = document.createElement('div')
        gutter.className = 'gutter gutter-' + direction
        gutter.style.height = '185px'
        return gutter
    },
    gutterSize: 2,
    elementStyle: function (dimension, size, gutterSize) {
        return {
            'width': 'calc(' + size + '% - ' + gutterSize + 'px)',
        }
    },
    gutterStyle: function (dimension, gutterSize) {
        return {
            'width': gutterSize + 'px',
        }
    }
})
const x = new XMLHttpRequest()
x.open('GET', 'https://api.github.com/repos/nathancahill/split')
x.onload = () => {
    var stars = JSON.parse(x.responseText).stargazers_count
    document.querySelector('.social-count').textContent = stars.toLocaleString()
}
x.send()
</script>
</body>
</html>