[JS]ウェブページのUIエレメントにちょっとだけ便利な機能を加えるスクリプト -minjs

フォーム、テーブル、カレンダーなど、ウェブページで使用するUIエレメントに便利な機能を加えるjQueryのプラグインを紹介します。

minjs - Minimalist JavaScript

[ad#ad-2]

minjsは現在、3つのモジュールが公開されています。

• minform
• longtable
• drcal

minform

HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。

デモ

ダウンロード

minform -GitHub

[ad#ad-2]

minformの使い方

minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。

• placeholders

  入力欄にヒントのテキストを表示します。

• autofocus

  入力欄をフォーカスします。

• required

  必須入力の欄で、未入力の場合はその欄をフォーカスします。

longtable

既存のHTMLのテーブルをページネーション付きのテーブルに変換します。

デモ

ダウンロード

longtable -GitHub

longtableの使い方

スクリプトを外部として記述し、下記のコードを記述します。

<script type="text/javascript">
  $('#your-table').longtable();
</script>

ページネーションはCSSで自由にデザインできます。

<style type="text/css">
  .paging-controls {text-align: center;}
  .paging-controls a {color: green;}
  .paging-controls a:visited {color: #0069D6;}
  .paging-controls .prev {float: left;}
  .paging-controls .prev:before {content: "< prev";}
  .paging-controls .next {float: right;}
  .paging-controls .next:after {content: "next >";}
  .paging-controls .elide:before {content: " ... ";}
</style>

drcal

シンプルなものから、月送り機能付きのカレンダー（キャプチャ）まで、カレンダーを簡単に設置できます。

デモ

ダウンロード

drcal -GitHub

drcalの使い方

空のdivを設置するだけで、指定した場所にtableベースのカレンダーを生成します。

<div id="drcal1"></div>
<script type="text/javascript">
  $(function () {
    var cal = $.drcal();
    cal.bind('drcal.monthRender', function () {
      cal.find('td').each(function (_, td) {
        $(td).append('<div><div class="daynum">'
                   + $(td).attr('day')
                   + '</div></div>');
      });
    }).changeMonth(new Date());
    $('#drcal1').append(cal);
  });
</script>
<style type="text/css">
</style>