株式会社八角研究所 > jQuery の In Place Editor プラグインを作ってみた

In Place Editor ライブラリをひとつ jQuery プラグインとして公開してみました。

xfanIpe jQuery plugin

この記事を参考にいくつか既存のライブラリをいじってみたのですが、とにかくいろいろなタイプの入力フォームを Edit In Place したいという個人的な要件を満たすものがなかったのです。JEIP にラジオボタンを追加とか一応してみたのですが、元々そういう拡張ができるような抽象化されたコードにはなっていなかったので、ぐちゃぐちゃになってしましました。

特徴

xfanIpe の特徴は、以下に挙げるように、さまざまな入力フォームを利用できること、そして、自分で簡単にあたらしい入力フォームを追加できてしまうことです。

• インラインテキスト
• テキストエリア
• ラジオボタン
• セレクトボックス
• チェックボックス
• パスワード入力（再入力用フィールド付）
• 日付（年月日のセレクトボックス）
• 日付（jQuery UI の datepicker を利用）
• TinyMCE

こちらにデモが。

今回は詳細説明は省きますが、上記ページの一番最後に紹介している名前入力フィールドは、ライブラリに含まれているものではなく、デモ用にさくっと拡張したものです。この拡張のためのコードは次のような感じ。とても簡潔です（よね？）。

xfan.ipe.register("name", {
 
  toLabel: function(v) {
    return v.first + " " + v.last;
  },
  
  val: function(v) {
    if (v) {
      this.fName.val(v.first);
      this.lName.val(v.last);
    } else {
      return { first: this.fName.val(), last: this.lName.val() };
    }
  },
  
  createInput: function() {
    this.fName = $("<input type=\"text\" />").attr("size", 15);
    this.lName = $("<input type=\"text\" />").attr("size", 15);
    return $("<span></span>").append(this.fName).append(this.lName);
  }

});

とりあえず使い方

ここから jquery.xfan.ipe-xxx.js ファイルをダウンロードして使えばいいのですが、ひとつだけ必須の依存ライブラリがあります。同じく Google Code で公開されているJSONデータ処理ライブラリ jquery-json です。これもダウンロードして script タグでロードしておきましょう。

それ以外にも、利用する入力フォームによって、別のライブラリが必要だったりします。

さて、とりあえず一番簡単なテキストフィールドです。

<script type="text/javascript">
$(function() {
  $("#description").xfanIpe("/save.php", {
    init: "Hello, xfanIpe jQuery plugin world",
    fieldSize: 30
  });
});
</script>

<p id="description"></p>

xfanIpe 関数の第一引数はサーバのURLです。そして第二引数にさまざまなオプションを指定するわけですが、どの入力フォームでも利用される重要オプションのひとつが "init" です。これは、このエディタで編集するデータの初期値になります。普通、初期値はHTMLマークアップの中（この例だと id="description" の p 要素の中）に直接記述するケースが多いと思うので、すこし直感的ではないかもしれません。これは、初期値として与えるデータが、常にただのテキストとは限らないからです。たとえばチェックボックスは複数の値をもてるので、初期値には JavaScript の配列を使います。

ついでにもうひとつサンプルを。今度は日付入力です。上述のとおり、日付入力フィールドのIPEをつかうには dateformat.js が必要なのでダウンロードして script タグを追加しておきましょう。

<script type="text/javascript">
$(function() {
  $("#birthday").xfanIpe("/save.php", {
    formType: "date",
    init: { year: 1986, month: 9, day: 3 }
  });
});
</script>

<p id="birthday"></p>

今度はオプションに formType というのを指定しています。これが入力フォームの種類を指定するためのオプションです。デフォルト値はテキストフィールドをあらわす "text" なので、先ほどの例では指定する必要がなかったのですが、テキストフィールド以外の入力フォームを用いる場合は必ず指定します。

初期値をあらわす init オプションには JavaScript オブジェクトを指定しています。このように、IPE が編集の対象とするデータの型は、入力フォームごとに異なります。つかいたい入力フォームがどのような型のデータを取り扱うのかはリファレンスで調べましょう。リファレンスとか、まだありませんけど。

ぼちぼち、ドキュメントを整備していく予定です。