jQuery を使用してより良いコンポーネントを作成する ユニバーサルコンポーネント定義 pattern_jquery

このパターンの利点:
jQuery オブジェクト、コンポーネント、インスタンス間で参照を維持できます。
コードは明確です。
簡単に拡張できます。
いくつかの複雑な機構を取り除き、コンポーネントを手作業で完成させることができます。
最後の点が最も興味深いです。このパターンに従えば、コンストラクターとプロトタイプ メソッドの両方を自由に制御できます。取り除くことができるのは継承されたハックの一部であり、jQuery さえも必要ありません。
手作りのものは常に最高です。
簡単なデモ

コードをコピーします コードは次のとおりです:

/*
* @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); 🎜>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) );
返してください
}
,remove : function(tag){
var me = this 、exist = function(v){ return v !=tag; };
me.input.val( $.grep(me.get(),exist) ); 🎜>、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) ); 🎜>}
返してください;
}
,has : function(tag){
return $.inArray(tag,this.get()) > 🎜>、get : function(){
var val = $.trim(this.input.val());
return 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( options || {} )._init() ;
} else {
$.data( this, name, new object( options, this ) );

2 つの呼び出しメソッド

コードをコピーします

コードは次のとおりです:


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)' });

完全なデモ:

簡単なタグ選択

タグ:

カンマで区切って最大 5 つ

汚職休暇<meta charset="UTF-8">新婚旅行<title></title>映画<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="腐败"> <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>外部 Js を導入する必要がある場合は、<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>