阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.pep.js 中文 API 文档

      插件 jQuery.pep 中文 API 文档

      https://github.com/briangonzalez/jquery.pep.js

      演示以及 http://pep.briangonzalez.org 上的更多内容。

      用法

      Pep 有很多选择。在这里,它们是完整的,具有默认值。需要一点帮助?请问。

      名称默认描述
      发起function(){}在对象上触发第一次触摸 / 单击事件时调用 [≘touchstart/ mousedown]
      开始function(){}拖动开始时调用;何时 dx 或 dy 大于 startThreshold[ 0] 或 startThreshold[ 1]
      拖动function(){}在拖动对象时连续调用 [≘touchmove/ mousemove]
      function(){}拖动停止时调用 [≘touchend/ mouseup]
      缓解function(){}在对象缓和时调用
      休息function(){}拖动停止后调用,对象已经停止
      搬去false自定义方法,以覆盖默认的 moveTo 功能。
      callIfNotStarted[‘stop’, ‘rest’]如果对象没有移动到对象之外,则无论如何都要 startThreshold 调用用户提供的 stop 或 restfxn,或者同时调用它们
      startThreshold[ 0,0]在调用用户’start’函数之前,对象应该在 [ x,y] 方向上移动多远
      [ 0,0]为要移动的对象定义 [ x,y] 网格
      还原false恢复到初始位置
      revertAfterstop在给定事件后恢复 - ‘stop’或’ease’
      revertIffunction(){ return true; }返回 false/ true 从此函数有条件地还原对象
      可弃falseCSS 选择器可以删除此元素,false 表示禁用
      droppableActiveClass‘pep-dpa’要添加到活动可放置父级的类,默认为 pep-dpa(可放置父级有效); this.activeDropRegions 在每个功能中检查有价值的信息
      overlapFunctionfalse覆盖 pep 的默认重叠函数;取两个 args:a&b 如果重叠则返回 true
      cssEaseStringcubic-bezier(0.190,1.000,0.220,1.000)从 [ http://matthewlein.com/ceaser/ ] 获得更多 css ease params
      cssEaseDuration750对象从停止到休息需要多长时间(以毫秒为单位)?
      constrainTofalse约束对象’window’或’parent’或 [top, right, bottom, left]; 使用 CSSTranslation 设置为 false 时效果最佳
      null将对象约束为“x”或“y”轴。设置为’auto’自动约束 x 轴或 y 轴,具体取决于用户拖动的方向
      调试false在页面的右下角显示调试值和事件
      activeClass‘pep-active’拖动时添加到 pep 元素的类
      startClass‘pep-start’拖动开始时添加到 pep 元素的类。(如果 startThreshold 定义了一个选项,则只有在超过阈值后才会添加此类。)
      easeClass‘pep-ease’在缓和时添加到 pep 元素的类
      乘数1+/- 此数字可修改为手指 / 鼠标移动与 el 移动的 1:1 比率
      velocityMultiplier1.9+/- 此数字用于修改对象的弹性以释放它
      shouldPreventDefaulttrue在某些情况下,我们不希望阻止我们的 Pep 对象上的默认 mousedown / touchstart
      allowDragEventPropagationtrue设置为 false 以阻止拖动事件通过 DOM 树冒泡
      stopEvents''以空格分隔的一组事件,以编程方式使对象停止
      hardwareAcceleratetrue应用 CSS3 银弹方法来加速 pep 对象:http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/
      useCSSTranslationtrue使用 CSS 变换翻译而不是顶部 / 左侧
      disableSelecttrue将 user-select: none(CSS)应用于对象
      removeMarginstrue删除边距以获得更好的对象放置
      shouldEasetrue禁用 / 启用缓动
      地点true绕过 pep 的对象放置逻辑
      deferPlacementfalse延迟对象放置直到启动事件发生
      forceNonCSS3Movementfalse不要使用:这是受欢迎的。使用风险由您自己承担
      elementsWithInteraction‘input’Pep 对象中元素的有效 CSS / jQuery 选择器,应允许用户交互,从而传播以允许移动
      ignoreRightClicktrue如果通过右键单击触发,将忽略启动事件
      startPos{ left: null, top: null }设置默认的左 / 上坐标以在加载时定位对象
      useBoundingClientRectfalse使用 getBoundingClientRect()来检索元素维度而不是 jQuery 的。outerWidth()和。outerHeight()(当你的元素通过 CSS 转换缩放时很有用)

      API

      // Toggle functionality of all Pep objects on the page
      $.pep.toggleAll()
      
      // Explicitly disable all Pep objects on the page
      $.pep.toggleAll(false)
      
      // Explicitly enable all Pep objects on the page
      $.pep.toggleAll(true)
      
      // Unbind Pep completely from the object
      var $pep = $('.pep');
      $pep.pep();               // bind
      $.pep.unbind( $pep );     // unbind
      $pep.pep();               // bind
      

      班级申请

      对应于 pep 对象上发生的事件,应用以下类:

      • pep-active - 触发启动事件时应用;轻松完成后删除
      • pep-start - 触发启动事件时应用;停止事件发生时删除
      • pep-ease - 触发停止事件时应用;轻松完成后删除

      关于 droppable 选项的说明

      在 pep 提供的每个函数的上下文中有一个便利对象(拖动,休息,缓和等)被调用 activeDropRegions,这是 pep 对象当前“结束”的 jQuery 对象的数组。

      $('.pep').pep({
        droppable:   '.drop-target',
        drag: function(ev, obj){
          console.log('There are ' + this.activeDropRegions.length + 'active drop regions.')
        },
        revert: true,
        revertIf: function(ev, obj){
          return !this.activeDropRegions.length;
        }
      })
      
      目录
      目录