首页 > 电脑 > 程序开发 > web > JavaScript > 正文
jquery动态增删行插件
2013-05-01 13:39:50    发布(作)者:    来源:     我来说两句      
收藏    我要投稿

核心提要:[javascript]//动态内容区JS by 尘絮缘 2012 qq:80213876(function ($) { var defaults = { container: ".dynamicCon", //最外层的容器class temp: ".temp", //模板层class i...


  [javascript]
   //动态内容区JS by 尘絮缘 2012 qq:80213876
  
   (function ($) {
   var defaults = {
   container: ".dynamicCon", //最外层的容器class
   temp: ".temp", //模板层class
   items: ".items", //具体行class
   minCount: 1, //具体行的最小数量 (初始始化时有个隐藏的模板行,在具体算的时候需要+1)
   maxCount: 50, //具体行的最大数量(初始始化时有个隐藏的模板行,在具体算的时候需要+1)
   addBtn: ".addBtn", //添加按钮class
   delBtn: ".delBtn"//删除按钮class
   }
   $.extend({
   DynamicCon: function (options) {
   options = $.extend(defaults, options);
   $con = $(options.container);
   $temp = $con.find(options.temp); //模板行
   $temp.attr({ "class": options.items.substring(1, options.items.length) }).wrap("

");
   var tempHtml = escape($temp.parent().html());
   $temp.hide();
   //添加行事件
   $con.find(options.addBtn).live("click", function () {
   if ($con.find(options.items).length == options.maxCount + 1) {
   alert("最多只能添加" + options.maxCount + "行!"); return false;
   }
   $(this).closest(options.items).after(unescape(tempHtml));
   });
   //删除行事件
   $con.find(options.delBtn).live("click", function () {
   if ($con.find(options.items).length == options.minCount + 1) {
   alert("最少要有" + options.minCount + "行!"); return false;
   }
   $(this).closest(options.items).remove();
   });
   }
   });
   })(jQuery);

  

  Demo:
   [html]


  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

   注:字段名只能为汉字或数字或字母或下划线组成的字符串;权重只能为非负数! 字段名为空时,将不进行添加!权重为空时默认为0。简易版无需填写权重信息!!
  
字段名 权重(单个积分) 操作

  

  
添加 删除
添加 删除

  

  $.DynamicCon({ maxCount: 25 });


   摘自 尘絮缘——BLOG
关键字:1

点击复制链接 与好友分享!回本站首页
分享到:
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:Node.js集成开发环境Cloud9搭建及CoffeeScript插件使用
下一篇:构造网站后台,我的EXT+EFS模式(一)----配置环境与初试动态生成控件
相关文章
图文推荐
美图推荐
热文推荐