当前位置:主页 > JavsScript库 > 布局 >

通过拖动向元素添加可调整的间隔器 - separators.js
栏目分类:布局   发布日期:2021-08-19   浏览次数:

Spacers.js 是一个 JavaScript 库,用于将多个可调整的间隔带或不带填充和边距应用于块元素。

它提供了一种在应用程序中的两个 UI 组件之间添加额外空白的便捷方法。您可以通过拖放来调整垫片的大小和方向。

使用:

1. 加载文档中的样式表spacers.css 和JavaScript separators.js。

<link rel="stylesheet" href="spacers/spacers.css" />
<script src="spacers/spacers.js"></script>

2. 对给定元素应用间隔并在需要时覆盖默认间距(以像素为单位)。

<div class="block">
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eius, eveniet laudantium, sit soluta ipsum
  reprehenderit libero eaque ex, unde nesciunt blanditiis itaque nemo exercitationem voluptates modi
  et cumque quas. Aliquid.
</div>
spacers({
  element: '.block',
  defaultSpacing: '8', // 默认: 8
  spacingUnit: 'px', // em, rem, in, cm, ch, mm, pt, pc ..etc
})

3. 启用/禁用填充和边距。

spacers({
  element: '.block',
  padding: true,
  margin: true,
  defaultPadding: {
   'top': '20',
   'bottom': '20',
   'left': '20',
   'right': '20'
  }
  defaultMargin: {
   'top': '10',
   'bottom': '10',
   'left': '10',
   'right': '10'
  }
})

4. 确定是否只在悬停时显示间隔。默认值:false。

spacers({
  element: '.block',
  showOnHover: true,
})

5. 确定库将间隔 HTML 附加到哪个位置。可以是“begin”或“end”。默认值:null。

spacers({
  element: '.block',
  appendHtml: 'begin',
})

6. 确定是否隐藏spacer中的margin/padding值。默认值:false。

spacers({
  element: '.block',
  hideSpacingValue: true,
})

7. 确定是否显示间隔标签。默认值:false

spacers({
  element: '.block',
  showLabel: 'Spacer Label',
})

8. 确定是否锁定对面的垫片。默认值:false。

spacers({
  element: '.block',
  enableLock: true,
  lockIcon: '🔒'
  unlockIcon: '🔓'
})

9. 将额外的 CSS 类应用于间隔器。

spacers({
  element: '.block',
  spacerClass: 'my-class'
})

10. 指定容器区域。

spacers({
  element: '.block',
  containedArea: document
})

11.拖动结束时触发功能。

spacers({
  element: '.block',
  onDragEnd: function( data ) {
    console.log(data);
  }
})


官方网站:https://github.com/actuallyakash/spacers

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库