怎么安装Split

这篇文章主要讲解了“怎么安装Split”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么安装Split”吧!

  Split.js是一款可调节大小的拆分视图面板纯JavaScript插件。该插件的特点是轻量级,无需任何外部依赖。Split.js可以轻松的制作出拆分视图(或分割面板)效果。

  Split.js安装

  可以使用bower或npm来安装Split.js插件。

  bowerinstallSplit.js

  npminstallsplit.js

  使用方法

  使用该插件需要引入split.js文件。

  <scriptsrc="js/split.js"charset="utf-8"></script>

  HTML结构

  split.js使用嵌套<div>的HTML结构

  <divclass="example">

  <divid="one"class="splitsplit-horizontal">

  <p>......</p>

  </div>

  <divid="two"class="splitsplit-horizontal">

  <p>......</p>

  </div>

  </div>

  split.js插件所必须的一些CSS样式

  .gutter{

  background-color:#eee;

  background-repeat:no-repeat;

  background-position:50%;

  cursor:move;

  cursor:grab;

  cursor:-moz-grab;

  cursor:-webkit-grab;

  }

  .gutter.gutter-horizontal{

  background-image:url('grips/vertical.png');

  }

  .gutter.gutter-vertical{

  background-image:url('grips/horizontal.png');

  }

  .split{

  -webkit-box-sizing:border-box;

  -moz-box-sizing:border-box;

  box-sizing:border-box;

  overflow-y:auto;

  overflow-x:hidden;

  }

  .split,.gutter.gutter-horizontal{

  height:100%;

  float:left;

  }

感谢各位的阅读,以上就是“怎么安装Split”的内容了,经过本文的学习后,相信大家对怎么安装Split这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!