dlds/yii2-jqhooks

Yii2 jQuery 动作钩子

维护者

详细信息

github.com/dlds/yii2-jqhooks

源代码

问题

维基

安装次数: 2,337

依赖关系: 0

建议者: 0

安全性: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言：JavaScript

类型：yii2-extension

2.0 2017-02-07 09:00 UTC

Requires

Requires (Dev)

BSD 00ab2daf0f04aca8ffa8135563950ef74371fe1c

  • Jiri Svoboda <jiri.svoboda.woop@dlds.cz>

jqueryhelpersyii2

This package is not auto-updated.

Last update: 2024-09-14 19:53:09 UTC

README

动作钩子是一个简单的 jQuery 辅助库。当需要将类似 show、hide、toggle 等jQuery操作与条件能力关联时使用。

安装

安装此扩展的首选方式是通过 composer。

运行以下命令之一

$ composer require dlds/yii2-jqhooks

或将以下内容添加到您的 composer.json 文件的 require 部分。

"dlds/yii2-jqhooks": "~1.0"

用法

当用户点击 'trigger' HTML 元素时，您想显示 'overlay' HTML 元素。使用动作钩子，您需要做以下操作

  1. 注册钩子
<div class="my-custom-overlay-class" data-hook="overlay"></div>
  1. 注册触发器
<a class="my-custom-trigger-class" data-had="{"click":[["show","overlay"]]}"></div>

每个注册的钩子都必须具有 data-hook="{hookName}" 属性。每个触发元素都必须具有 data-had="{hookActionDefinition}" 属性

格式

钩子动作定义（data-had）的格式

{
  'jqEevent' => [
    ['hookActionName' 'hookName', 'hookActionCondition'],
  ]
}

属性

  1. jqEvent 是经典 jQuery 事件，如 'change'、'click' 等。
  2. hookActionName 是 jqhooks 动作方法名称（doClose、doOpen、doToggle 等）。
  3. hookName 是反映分配给目标元素的 'data-hook' 属性值的自定义字符串。
  4. hookActionCondition 是回调或简单的 fn 定义，将被处理为 js 函数。此条件允许您定义何时执行操作。

动作

  1. doOpen 向钩子元素添加类 'open'
  2. doClose 从钩子元素中删除类 'open'
  3. doShow 显示钩子元素（调用 $.show()）
  4. doHide 隐藏钩子元素（调用 $.hide()）
  5. doToggle 切换钩子元素（调用 $.toggle()）
  6. doCheck 向钩子元素添加属性 'checked=true'
  7. doUncheck 从钩子元素中删除属性 'checked=true'

三元使用

您可以指定类似以下的三元条件

{
  'click' => [
      ['show:hide' 'overlay', 'return this.val() === 1'],
  ]
}

此定义在点击元素值为 1 时运行 'show' 动作，否则运行 'hide' 动作。

辅助工具

您可以使用 JqHooks::attach() 简单地注册适当的 js 并在文档就绪时运行初始化。

JqHooks::attach([
  'click' => [
      ['show:hide' 'overlay', 'return this.val() === 1'],
  ]
])