addel – 动态添加和删除HTML元素jQuery插件

用法

载入文件

载入 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	target 的 classes.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();
    }
});

演示