jQuery를 사용하여 더 나은 구성요소 만들기 범용 구성요소 정의

이 패턴의 장점:
jQuery 객체, 구성 요소 및 인스턴스 간에 참조를 유지할 수 있습니다.
코드가 명확합니다.
확장하기 쉽습니다.
복잡한 메커니즘을 제거하고 구성 요소를 손으로 완성할 수 있습니다.
마지막 점이 가장 흥미롭습니다. 이 패턴을 따르면 생성자와 프로토타입 메서드를 모두 자유롭게 제어할 수 있습니다. 제거할 수 있는 것은 상속된 해킹이며 심지어 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 : ','
}, 옵션 || {});
var $el = me.input = $(input)
var $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 = {
추가: 함수(태그){
if(태그){
var me = this, Tags = me.get(), del = me.opt.delimiter
tags.push(tag) ;
me.input.val( tagged.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 = tagged.length, max = me.opt.limit;
if(len>max){
me.input.val(tag.slice(0,max) ); 🎜>}
return me;
}
,has: function(tag){
return $.inArray(tag,this.get())
}
, 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 인스턴스 = $.data( this, name ); if ( 인스턴스 ) { instance.option( 옵션 || {} )._init() ;

} else {

$.data( this, name, new object( options, this ) )


두 가지 호출 방법




코드 복사

코드는 다음과 같습니다.

var $input = $('#tb_tags' ).tagSelector( { 태그 :'div.tag_group a:not(.btn_tag_more)'} ) var api = $input.data('tagSelector') // var api = new tagSelector(' #tb_tags',{ 태그 :'div.tag_group a:not(.btn_tag_more)' }) 전체 데모:

손쉬운 태그 선택

태그: <meta charset="UTF-8"> <title> </title>최대 5개, 쉼표로 구분<style type="text/css"> .tag_group a{margin:0 3px;} </style> 부패<div class="filed"> <div class="filed_label">휴가</div> <input type="text" name="tags" id="tb_tags" class="inp_txt">신혼여행<span class="filed_tip"></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="休假"> <br> <input onclick="runEx('runcode70077')" type="button" value="运行代码"><input onclick="doCopy('runcode70077')" type="button" value="复制代码"><input onclick="doSave(runcode70077)" type="button" value="保存代码"> </a><a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A 모두 선택 참고: </div>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <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> </div> </div>