限时优惠活动
亲爱的苦力吧用户,我们为了回馈新老用户一直以来的鼎力支持,即日起(2025-02-06至2025-03-06)凡是购买苦力吧VIP/充值K币的新老用户,都直接可获得买一送一的优惠馈赠。例如:购买一个月的VIP会员可直接获得两个月的VIP会员;充值100K币可直接获得200K币,以此类推!有任何疑问可联系在线客服,感谢各位用户对苦力吧素材的信任与厚爱,我们将一如既往的给大家上新更多优质的素材源码,祝大家开工大吉、工作顺利、心想事成。

jquery可无限克隆添加文本框插件

所属分类: 网页特效-其它&杂项    2023-08-02 11:08:26

jquery可无限克隆添加文本框插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery可无限克隆添加文本框插件(共3个文件)

    • jquery.simpleClone.js
    • jquery.simpleClone.min.js
    • index.html

使用方法

(function ($) {
	'use strict';

	$.fn.simpleClone = function (options) {
		const opts = $.extend({}, $.fn.simpleClone.defaults, options);
		const elems = this;

		return elems.each(function () {
			$(this).on('click', function (e) {
				e.preventDefault();

				const $self = $(this);
				const $wrap = $self.closest('.' + opts.addButtonWrapClass);
				const $targetWrap = $wrap.prev();
				const $targets = $targetWrap.find('.' + opts.targetClass);
				const $target = $targets.first();
				const count = $target.parent().children('.' + opts.targetClass).length + 1;

				if (opts.cloneLimit === false || (typeof opts.cloneLimit === 'number' && count <= opts.cloneLimit)) {
					let $clone = $target.clone(true);
					const rmvButton = document.createElement('button');
					rmvButton.type = 'button';
					rmvButton.className = opts.removeButtonClass === null ? $.fn.simpleClone.defaults.removeButtonClass : $.fn.simpleClone.defaults.removeButtonClass + ' ' + opts.removeButtonClass;
					rmvButton.innerText = opts.removeButtonText;

					$clone.append(rmvButton);

					$clone.find('select').each(function(index, item) {
						$(item).val($target.find('select').eq(index).val());
					});

					if (opts.copyValue === false) {
						$clone.find('input:not("input[type=radio], input[type=button], input[type=submit]"), textarea, select').each(function(index, item) {
							$(item).val('');
						});
					}

					if ($.isFunction(opts.filterCloneElement)) {
						$clone = opts.filterCloneElement.call(elems, $clone, opts);
					}

					if ($.isFunction(opts.onClone)) {
						opts.onClone.call(elems, $clone, opts);
					}

					$target.parent().append($clone);

					if ($.isFunction(opts.onComplete)) {
						opts.onComplete.call(elems, $clone, opts);
					}
				} else {
					const message = document.createElement('span');
					message.className = opts.limitMessageClass;
					message.innerText = opts.limitMessageText;

					if ($self.next('.' + opts.limitMessageClass).length === 0) {
						$self.after(message);

						setTimeout(function () {
							$self.next('.' + opts.limitMessageClass).fadeOut().remove();
						}, 4000);
					}
				}
			});

			$(document).on('click', '.' + $.fn.simpleClone.defaults.removeButtonClass, function (e) {
				e.preventDefault();

				const $self = $(this);

				if ($.isFunction(opts.onRemove)) {
					opts.onRemove.call(elems, opts);
				}

				$self.parent().remove();

				if ($.isFunction(opts.onCompleteRemove)) {
					opts.onCompleteRemove.call(elems, opts);
				}
			});
		});
	};

	$.fn.simpleClone.defaults = {
		copyValue         : true,
		cloneLimit        : false,
		limitMessageClass : 'simpleClone-clnLmt',
		limitMessageText  : 'Maximum count has been reached.',
		targetClass       : 'simpleClone-clnElem',
		addButtonWrapClass: 'simpleClone-btnWrap',
		removeButtonClass : 'simpleClone-rmvBtn',
		removeButtonText  : '移除',
		filterCloneElement: null,
		onClone           : null,
		onComplete        : null,
		onRemove          : null,
		onCompleteRemove  : null
	};
})(jQuery);

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 其它&杂项

javascript实现增强平滑的页面滚动特效

一款增强滚动平滑度特效代码,可实现鼠标滚轮交互上的平滑滚动,它的工作原理是以平滑顺畅的调整网页滚动位置,从而滚动页面时不会那么生硬,有助于增强用户体验。
  其它&杂项
 6277  0

jquery可自定义控制开关的元素拖动插件

Draggable Touch是一个基于jQuery的移动端触摸拖放库,它作用于任何DOM元素都可以通过触摸事件进行拖动。
  其它&杂项
 2438  0

javascript支持加减数量的购物车代码

一款简单的实现购物车代码,点击商品图片下方“加入购物车”,即可将商品加入到购物车当中,随即按钮文字变为“已加入”。使用加号/减号按钮添加产品和更新数量。
  其它&杂项
 6300  0

jquery获取外部网站RSS数据插件

FeedEk是获取第三方网站RSS数据插件,可自定义设置获取数据条数、标题、摘要、日期等。
  其它&杂项
 7273  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论