用jQuery做更好的組件通用組件定義模式

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 用jQuery做更好的組件通用組件定義模式

編輯：JQuery特效代碼

這個模式的優勢：
在jQuery對象和組件和實例之間可以互相保留引用。
代碼清晰。
易於擴展。
可以擺脫一些復雜的機制，手工完成組件。
最後一點是最有意思的，如果按這個模式來做，構造函數和原型方法都可以自由控制。能夠擺脫的東西就是一些繼承的hack手段，甚至jQuery也不是必須的。
手工的總是最好的。
一個簡陋DEMO
代碼如下:
/*
* @by ambar_li
* @create 2010-11-30
* 標簽選擇，驗證
*/
(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);

最重要的是最後一段。
jQueryUI對比，有初始化檢查：
代碼如下:
this.each(function() {
var instance = $.data( this, name );
if ( instance ) {
instance.option( options || {} )._init();
} else {
$.data( this, name, new object( options, this ) );
}
});

兩種調用方式
代碼如下:
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)' });

完整演示：

<!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"><a href="#" title="腐敗">腐敗</a><a href="#" title="休假">休假</a><a href="#" title="蜜月">蜜月</a><a href="#" title="電影">電影</a><a href="#" title="讀書">讀書</a><a href="#" title="蜜月">蜜月</a><a class="btn_tag_more" href="#" title="更多">更多</a> 
<div class="tags_group clearfix" style="left:203px; display:none;"> <a href="#" title="腐敗">腐敗</a><a href="#" title="休假">休假</a><a href="#" title="蜜月">蜜月</a><a href="#" title="腐敗">腐敗</a><a href="#" title="休假">休假</a><a href="#" title="蜜月">蜜月</a><a href="#" title="腐敗">腐敗</a><a href="#" title="休假">休假</a><a href="#" title="蜜月">蜜月</a><a href="#" title="腐敗">腐敗</a><a href="#" title="休假">休假</a><a href="#" title="蜜月">蜜月</a><a href="#" title="腐敗">腐敗</a><a href="#" title="休假">休假</a><a href="#" title="蜜月">蜜月</a><a href="#" title="腐敗">腐敗</a><a href="#" title="休假">休假</a><a href="#" title="蜜月">蜜月</a> </div> 
</div> 
</div> 
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script> 
<script> 
/* 
* @by ambar_li 
* @create 2010-11-30 
* 旅行頁面標簽選擇，驗證 
*/ 
(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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:jQuery數組處理詳解(含實例演示)
下一頁:jquery json 實例代碼

JQuery特效代碼

jquery 交替為表格添加樣式的代碼: 下面就是我的“作品”啊，只是簡單的實現其功能，並未做其他的功能啊運行後，需要刷新下，上面得代碼比
jquery自定義滾動條插件示例分享: . 代碼如下:<!DOCTYPE html PUBLIC -//W3C//DTD XHTML
11個用於提高排版水平的基於jquery的文字效果插件: 排版是在網頁設計當中的一個重要的元素，實現一個高層次的排版風格可以讓你的網頁設計看起來更令人歎為觀止

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章