[jQueryプラグイン]jCounterを作りました。

たまに管理画面内のログを見るのですが、以外とjQueryで数字カウントを検索している方がいらっしゃるみたいでしたので、勢いで作ってみました。

jCounterについて

jCounterはカウントアップ、カウントダウンの両方を備えた入力値カウンターです。

プラグインなので、簡潔にカウンターを実装する事が出来ます。

ダウンロードはこちらから。

jCounterデモ

デモページにて動きを確認する事が出来ます。

jCounterの使い方

jQueryプラグインですので、以下のようにscriptタグで呼び出します。

<script type="text" src="jquery.js"></script>
<script type="text" src="jcounter/jcounter.js"></script>

次に以下のように文字数をカウントしたい要素のID等を指定してあげます。

<script type="text/javascript">
jQuery(function(){
    jQuer("[:[selector]:]").jcounter({settings...}) ;
});
</script>

以上で入力カウンターを実装出来ます。

jCounterの設定項目

jCounterはいくつかの設定項目と、コールバック関数がついています。

その項目を以下の挙げます。

• maxlen：入力制限文字数 初期値は「140」
• insertAfter：カウンターの挿入位置。「true」で要素の手前に、「false」で要素の後にカウンタを表示
  初期値では「true」
• classes：カウンターコンテナに付加するクラス名
  初期値は「jc-counter-text」
• message：設定字数を超えた場合に表示するエラーメッセージ
  初期値は「入力文字数が多すぎます！！」
• countDown ：カウンターの挙動。「true」でカウントダウン、「false」でカウントアップ
  初期値は「true」
• slideSpeed：エラーメッセージの表示速度
  初期値は「1200ミリ秒」
• onSaftyLength : コールバック関数 入力値以内の場合に呼び出される。
• onOverLength：コールバック関数 入力値が超えた場合に呼び出される。

この設定項目は配列で渡すことで適用されます。

jCounterを利用するに当たって

jCounterは自由に使っていただいてかまいませんが、当プラグインを利用して発生した損害などについては責任を負いかねますので
自己責任にてご利用下さい。

追記

ちょっと個人的に満足がいかなかった箇所があったので、一時的に記事を非表示にし、修正後のデータを反映させました。

すでにダウンロードされている方がいましたら、以前のファイルは削除していただいて、再度新しいファイルをダウンロード頂けますようよろしくお願いいたします。