软件开发培训班 >> 编程开发 >> JavaScript

用jQuery做更好的组件通用组件定义模式

　　本文标签：通用组件,定义模式

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>简易的标签选择</title> 
<style type="text/css"> 
.tag_group a{margin:0 3px;} 
</style> 
</head> 
<body> 
<div class="filed"> 
<div class="filed_label">标签：</div> 
<input type="text" name="tags" id="tb_tags" class="inp_txt" /> 
<span class="filed_tip">最多5个，用逗号隔开</span> 
<div class="tag_group">腐败休假蜜月电影读书蜜月更多 
<div class="tags_group clearfix" style="left:203px; display:none;"> 腐败休假蜜月腐败休假蜜月腐败休假蜜月腐败休假蜜月腐败休假蜜月腐败休假蜜月 </div> 
</div> 
</div>

(function($){ 
var tagSelector = function(input,options){ 
var me = this; 
var opt = me.opt = $.extend({ 
limit : 5 
,tags : null 
,delimiter : , 
}, options || {}); 
var $el = me.input = $(input); 
var $tags = me.tags = $(opt.tags);

if(!$el.length || !$tags.length) return;

$tags.click(function(e){ 
e.preventDefault(); 
var tag = $(this).text(); 
me[me.has(tag)?remove:add](tag); 
}); 
}; 
tagSelector.prototype = { 
add : function(tag){ 
if(tag){ 
var me = this, tags = me.get(), del = me.opt.delimiter; 
tags.push(tag); 
me.input.val( tags.join(del) ); 
} 
return me; 
} 
,remove : function(tag){ 
var me = this, exist = function(v){ return v !=tag; }; 
me.input.val( $.grep(me.get(),exist) ); 
return me; 
} 
,cleanify : function(){ 
return this.remove(); 
} 
,limit : function(){ 
var me = this, tags = me.cleanify().get() 
,len = tags.length, max = me.opt.limit; 
if(len>max){ 
me.input.val( tags.slice(0,max) ); 
} 
return me; 
} 
,has : function(tag){ 
return $.inArray(tag,this.get()) > -1; 
} 
,get : function(){ 
var val = $.trim(this.input.val()); 
return val ? $.map( val.split(/[,，]+/), $.trim ) : []; 
} 
};

$.fn.tagSelector = function(options){ 
return this.each(function(){ 
$(this).data(tagSelector,new tagSelector(this,options)); 
}); 
}; 
})(jQuery);

$(function(){ 
var $input = $(#tb_tags).tagSelector( { tags:div.tag_group a:not(.btn_tag_more)} ); 
var api = $input.data(tagSelector); 
// var api = new tagSelector(#tb_tags,{ tags :div.tag_group a:not(.btn_tag_more) }); 
}); 
</script> 
</body> 
</html>

技术文章快速查找

JS实现self的resend

分享XmlHttpRequest调用Webservice的一点心得

Javascript实例教程(19) 使用HoTMetal(7)

借助JavaScript脚本判断浏览器Flash Player信息的方法

回车直接实现点击某按钮的效果即触发单击事件

JS OOP包机制,类创建的方法定义

Jquery实现无刷新DropDownList联动实现代码

Jquery 数组操作大全个人总结

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

用jQuery做更好的组件 通用组件定义模式

用jQuery做更好的组件通用组件定义模式