addel 是一个简单而轻量的 jQuery 插件,用于美化 UI,允许动态添加和删除 HTML 元素,并可以应用到表单元素中。它可以自定义动画,也可以通过键盘方便的智能聚焦。

用法

载入文件

载入 addel.jquery.js 或 addel.jquery.min.js

<script src="/path/to/file/addel.jquery.min.js"></script>
初始化
$('.addel-container').addel({
    // optional options object
});
HTML
<div class="addel-container">
    <div class="addel-target">
        <button class="addel-del"></button>
    </div>
    <button class="addel-add"></button>
</div>
  • .addel-container 必须 使元素 addel 被初始化
  • .addel-container 必须 包含所有: .addel-target, .addel-delete & .addel-add
  • .addel-target 应该 也包含你自己的元素
  • .addel-delete 必须 容器 .addel-container.addel-target 的后代
  • .addel-add 必须 是容器 .addel-container 的后代,不能是 .addel-target 的后代

注意:类名仅供参考,并且可完全自定义。

选项

名称 类型 默认值 信息
hide boolean false 是否初始隐藏 target (禁用其表单元素)
add integer 1 targetclasses.add 数量将被添加到 DOM
classes.target string addel-target 动态元素类名 addeled
classes.add string addel-add 点击时添加元素 target 的类名
classes.delete string addel-delete 点击时删除元素 target 的类名
animation.duration integer 0 addeling™ 的动画持续时间(以毫秒为单位)
animation.easing string swing addeling™ 时的 easing 动画
events.add callback 详细说明事件部分
events.added callback 详细说明事件部分
events.delete callback 详细说明事件部分
events.deleted callback 详细说明事件部分

有关 animation.duration 和 animation.easing 的更多信息,请参阅 jQuery 的 .fadeIn() 和 .fadeOut() 。
注意,可以使用 data-attribute 为每个元素设置 add 选项,如 data-attributes 部分所述。

选项示例
$('.people').addel({
    hide: true,
    add: 2,
    classes: {
        target: 'person',
        add: 'btn-add',
        delete: 'btn-del'
    },
    animation: {
        duration: 300,
        easing: 'linear'
    }
});
数据属性

除了事件回调,所有上面的选项可以声明性地设置为 HTML 元素上的数据属性:

选项 等价数据属性 定位
hide data-addel-hide .addel-container
add data-addel-add=<integer> .addel-container
classes.target data-addel-target classes.target
classes.add data-addel-add or data-addel-add="<number>" classes.add
classes.delete data-addel-delete classes.delete
animation.duration data-addel-animation-duration .addel-container
animation.easing data-addel-animation-easing .addel-container
  • 在 .addel-container 上设置 data-addel-add =“5” 将使得所有的 .addel-add / data-addel-add 元素在其中添加5个目标。
  • 另外,在指定 .addel-add / data-addel-add 上指定 data-addel-add =“10” 将使该特定元素添加10个目标,覆盖容器上早先设置的默认5。
  • 请注意,对于要作为添加目标的按钮的元素,你需要向元素添加 data-addel-add 或 data-addel-add = ,不需要两者同时添加。

数据属性示例

<div class="addel" data-addel-hide="true" data-addel-add="2">
    <div data-addel-target>
        <button data-addel-delete></button>
    </div>
    <button data-addel-add="1"></button>  // adds 1 data-addel-target, as expected
    <button data-addel-add></button>      // adds 2 data-addel-target due to default set on .addel
    <button data-addel-add="3"></button>  // adds 3 data-addel-target on click, as expected
</div>
<script>
    $(function() {
        $('.addel').addel();
    });
</script>
全局覆盖

覆盖整个options对象:

$.fn.addel.defaults = {
    // options
}

或特定选项:

$.fn.addel.defaults.option = value

事件

事件 在…时触发 原型
addel:add classes.add is clicked event.target
addel:added classes.target is added to the DOM event.target, event.added
addel:delete classes.delete is clicked event.target
addel:deleted classes.target is removed from the DOM event.target

所有事件都是在元素模型上触发的,初始化为(AKA .adele-container)。

事件示例

删除前请先确认:

$('.addel-container').addel({
    // other options
    events: {
        delete: function (event) {
            if (!window.confirm('Are you absolutely positively sure?')) {
                event.preventDefault();
            }
  }})

或自行绑定事件:

$('.addel-container').addel({
    // other options
})
.on('addel:delete', function (event) {
    if (!window.confirm('Are you absolutely positively sure?')) {
        event.preventDefault();
    }
});

演示

Addel