您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > Javascript(JQuery)

利用jQuery插件Cloneya动态添加表单

作者:UncleToo  来源:原创  日期:2014-05-14 8:23:04
收藏  评论:( 0 )  阅读:454

Cloneya是一个很简单的jQuery插件,它可以用来方便地克隆DOM元素。本章教程将展示利用Cloneya克隆页面的表单。

查看演示


HTML代码:

<div id="simple-clone" class="demo-wrap">
            <h2>动态添加表单</h2>
            <form class="form" method="post">
                <div class="toclone">
                    <p class="name">
                        <input type="text" name="name[]" id="sname" />
                        <label for="name">Name</label>
                    </p>
                    <p class="email">
                        <input type="text" name="email[]" id="semail" />
                        <label for="email">E-mail</label>
                    </p>
                    <p class="web">
                        <input type="text" name="web[]" id="sweb" value="http://www.uncletoo.com" />
                        <label for="web">Website</label>
                    </p> 
                    <a href="#" class="clone">添加</a>
                    <a href="#" class="delete">删除</a>
                </div>
                <p class="submit">
                    <input type="submit" value="提交" />
                </p>
            </form>
        </div>


JavaScript代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script src="jquery-cloneya.js"></script>
<script>
     $('#simple-clone').cloneya();
</script>


查看演示        下载代码





除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/jsjquery/940.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论