jQueryプラグインによるTwitterのようなカウントの表示

仕事でTwitterのようなカウンターっぽい表示をする必要が出たのでいろいろ探していたら、そのままばっちりのプラグインがあった。
http://cssglobe.com/post/7161/jquery-plugin-simplest-twitterlike-dynamic-character-count-for-textareas

ほとんどこの仕様で問題なかったのだけれど、カウンターが表示される際に、テキストエリアなどの後にspanを挿入するカタチで表示している。
コレは使い勝手悪いなぁと思い、好きなセレクタの位置にカウントを表示できるようにプラグインを書き換えた。

例えば、通常なら以下のように使う。

//カウンターのセット
$("#message").charCount({
    allowed: 50,		
    warning: 20,
});

//textarea#messageの後に挿入されるHTML
<span class="counter">140</span>

今回書き換えたのはこんな感じで使う。

$("#message").charCount({
	allowed: 50,		
	warning: 20,
	counterSelector: '#testCounter'
});

//指定したHTMLタグにカウンター数字（テキスト）を表示
<p id="testCounter"></p>
<textarea id="message"></textarea>

他人のプラグインなので、ココではプラグインの修正方法だけ紹介しておこうと思う。
と言ってもたいしたことないです。

まず、デフォルト値のセット部分に「counterSelector」とかなんかオリジナルのパラメータを追加する。

var defaults = {	
	allowed: 140,		
	warning: 25,
	css: 'counter',
	counterElement: 'span',
	cssWarning: 'warning',
	cssExceeded: 'exceeded',
	counterText: '',
	counterSelector: ''//←こういう感じ
}; 

次に、function calculate(obj)のHTML挿入部分にif文を入れて「counterSelector」がセットされてる場合はそこに書き込まれるように書いとく。

if(options.counterSelector){//←追加
	cElement=$(options.counterSelector);//←追加
}else{
	cElement=$(obj).next();
}

一番下に書かれてる、this.each(function() {});にも同じように追加しておきます。

if(options.counterSelector){//←追加
	$(options.counterSelector).html(options.counterText);//←追加
}else{
	$(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
}

こんな感じで自分の好きなところにカウンターを表示できます。
以上です。

Tweet