OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

轻量级的可调视图和面板分栏Layout布局工具[开源]


分享到
分类 JS开源   关键字 开源   发布 ourjs  1449710236188
注意 转载须保留原文链接,译文链接,作者译者等信息。  
Split是一个轻量级的可以动态调整的视图或面板分栏工具。没有任何外部依赖,只需要一两个有父元素的普通元素。可将页面水平或垂直分割,你不需要自己在面板之间手动插入分割条。


使用示例


此代码将两个元素左右分割,各占25%、75%,最小宽度为200px。

Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200
});


使用下面的代码拼出更为复杂的布局结构。

Split(['#ten', '#eleven']);

Split(['#twelve', '#thirteen'], {
    direction: 'vertical'
});


注* DOM关系如下

<div class="container">
  <div id="ten" class="split split-horizontal">
    <div id="twelve" class="split split-vertical">
      <p>Bacon ipsum dolor amet beef ribs meatloaf picanha pork loin pork chop rump pig sausage bacon shank boudin beef fatback. Pork loin turducken t-bone chicken.</p>
    </div>
    <div id="thirteen" class="split split-vertical">
      <p>Bacon ipsum dolor amet beef ribs meatloaf picanha pork loin pork chop rump pig sausage bacon shank boudin beef fatback. Pork loin turducken t-bone chicken.</p>
    </div>
  </div>
  <div id="eleven" class="split split-horizontal">
    <p>Brisket andouille cow ball tip. Ham ground round short loin tri-tip ribeye t-bone boudin, pork loin turkey drumstick tongue pork chop. Kielbasa doner picanha turducken, swine bacon shank pastrami andouille.</p>
  </div>
</div>


效果





浏览器支持


这个库使用了 calc(), box-sizing 和 getBoundingClientRect(),支持以下浏览器:

19+ ✔ 4+ ✔  9+ ✔  32+ ✔ 7+ ✔

IE8也可以完美显示布局,但无法动态调整。 使用IE8你需要兼容实现 Array.isArray()




演示地址 http://nathancahill.github.io/Split.js/





补充

其它一些基于jQuery的可调分栏Layout布局,基于jQuery的插件普遍兼容性更好,想兼容IE8以下的可以尝试。

jQuery UI layout plugin

功能比较丰富,项目也比较早,缺点是文件有点大

http://layout.jquery-dev.com/


Split Pane jQuery plugin

文件体积较小,初始位置需要你使用CSS手动设置,喜欢轻量级的可以尝试一下

Homepage  http://www.dreamchain.com/split-pane/
Github https://github.com/shagstrom/split-pane


jQuery Splitter Plugin

据说可不完美支持IE6

http://methvin.com/splitter/index.html





原文地址: 点此
社区评论 ( Beta版 )
  • #0 颜厅冬 1449732444078

    为什么我的,拉伸效果不好,很慢而且不能连续拉伸,甚至都不动

  • #1 ourjs 1449756350178

    @颜厅冬 #0

    最外层的容器应该是固定高度的。

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 为什么你应该选择Python编程
  2. 我被问得最多的十个JavaScript前端面试问题
  3. 推荐几个非常实用的JQuery代码片段
  4. Node.js框架之express
  5. Node.js 4.0 的 ES6 新特性
  6. 从React到Domcom: 一个提供DOM部件的web框架
  7. HTML5相关格式转换提供商对比—选择困难户的专属福利来啦!
  8. 传统JavaScript与Asm.JS的象棋大战
  9. 10个免费的HTML在线编辑工具
  10. 天猫双11前端分享系列(四):大规模 Node.js 应用
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS开源
  1. 轻量级的可调视图和面板分栏Layout布局工具
  2. HTML5相关格式转换提供商对比—选择困难户的专属福利来啦!
  3. 从React到Domcom: 一个提供DOM部件的web框架
  4. Stop-Server:用手机关闭你的电脑
  5. QRCode:用纯JavaScript实现的微信二维码图片生成器
  6. LightGL轻量级的WebGL 3D渲染库
  7. JSGraphs目前最全的JavaScrtip开源图表库集合
  8. Waveform基于JavaScript的开源多声道音乐波形编辑器
  9. Image Lazy Load:那些延时加载图片的开源插件(jQuery)
  10. NativeScript的竞争者React Native:又一个用JavaScript写原生iOS应用的项目

 关键字 - 开源
  1. Mongoose学习参考文档——基础篇
  2. 使用NodeJS搭建邮件自动发送服务器
  3. wemall app商城源码android开发MD5加密工具类
  4. 【数据可视化】基础知识贴:10大关键术语
  5. wemall app商城源码中基于PHP的ThinkPHP惯例配置文件代码
  6. Node.JS超越jQuery成为Github上第二受欢迎的开源项目
  7. wemall软件交易平台微信图文编辑器部分代码分享
  8. wemall开源商城免费商城系统部分代码(内含代码地址)
  9. Docker究竟是什么,为什么这么流行,它的优点和缺陷有哪些?
  10. GitHub2016报告AngularJS流行度下降,JavaScript活跃度为Java两倍

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号