jQuery Repeater 插件使用教程

最新推荐文章于 2025-01-10 10:49:55 发布

贡秀丽

最新推荐文章于 2025-01-10 10:49:55 发布

阅读量294

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00427/article/details/141446998

jQuery Repeater 插件使用教程

jquery.repeaterCreate a repeatable group of input elements项目地址:https://gitcode.com/gh_mirrors/jq/jquery.repeater

项目介绍

jQuery Repeater 是一个用于创建可重复表单元素的 jQuery 插件。它允许用户动态添加和删除表单组，非常适合需要用户输入多个相似数据项的场景，如地址列表、产品详情等。该插件通过简单的配置即可实现复杂的表单动态管理功能。

项目快速启动

安装

首先，你需要在你的项目中引入 jQuery 和 jQuery Repeater 插件。你可以通过以下方式引入：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.repeater.js"></script>
<link rel="stylesheet" href="path/to/jquery.repeater.css">

基本使用

以下是一个简单的示例，展示如何使用 jQuery Repeater 插件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Repeater Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="jquery.repeater.js"></script>
    <link rel="stylesheet" href="jquery.repeater.css">
</head>
<body>
    <form>
        <div class="repeater">
            <div data-repeater-list="group-a">
                <div data-repeater-item>
                    <input type="text" name="text-input" value="A"/>
                    <input data-repeater-delete type="button" value="Delete"/>
                </div>
            </div>
            <input data-repeater-create type="button" value="Add"/>
        </div>
    </form>

    <script>
        $(document).ready(function () {
            $('.repeater').repeater({
                initEmpty: false,
                defaultValues: {
                    'text-input': 'default'
                },
                show: function () {
                    $(this).slideDown();
                },
                hide: function (deleteElement) {
                    if(confirm('Are you sure you want to delete this element?')) {
                        $(this).slideUp(deleteElement);
                    }
                }
            });
        });
    </script>
</body>
</html>