文字を直接編集できるJavaScript UIライブラリx-editableが素敵

シェアする

  • このエントリーをはてなブックマークに追加

x-editableは、表示されている内容をその場で編集することができるJavaScriptライブラリです。

 

x-editableを使うと、変更したい文字をクリック→編集が簡単に実装できます。

 

↓クリックすると・・・

before

 

↓編集モードに変わります。

after

 

テキストボックスだけではなく、セレクトボックスやテキストエリア、日付ピッカーなどなど、対応している入力タイプが豊富なのが特徴の1つです。

↓こんな感じ。

http://vitalets.github.io/x-editable/demo-bs3.html?c=inline

 

また、Bootstrap3、Bootstrap2、jQueryUIに対応していることも特徴の1つです。

 

 

先日、公開したクリニック・診療所のホームページ作成サービスで導入してみました。

これが使い勝手、いいんです。入力フォーム→確認画面→登録終了画面ってよくある画面遷移を実装しなくてよいです。

 

導入から、組み込み方までご紹介します。

 

スクリーンショット 2014-02-04 22.53.34

 

まずは、公式ページからダウンロードします。

http://vitalets.github.io/x-editable/index.html

 

Bootstrap3を読み込んでいるサイトなら「Download BS3 build」をクリックします。

download

 

ダウンロードしたファイルを解凍し、サイトにアップします。

 

 

先にBootstrapを読み込みます。

<link href=”css/bootstrap.min.css” rel=”stylesheet”>

<script src=”js/jquery-1.10.2.min.js”></script>

<script src=”js/bootstrap.min.js”></script>

 

 

次にx-editableを読み込みます。

<link href=”css/bootstrap-editable.css” rel=”stylesheet”>
<script src=”js/bootstrap-editable.min.js”></script>

 

 

 

編集方法には、インラインとポップアップ(デフォルト)があって、どちらかを設定します。

// inline or popup (default)

$.fn.editable.defaults.mode = ‘inline’;

 

直接編集したい要素を、以下のようにaタグで囲んで、

<a href=”#” id=”username”>superuser</a> 

 

jsで、以下のように記述すると完了です。ユーザー名を直接編集できるようになりました。

$(‘#username’).editable({

type: ‘text’,

pk   : 1,

url   : ‘/post’

});

 

urlのところに、Ajaxの処理を記述すると、APIにデータを渡すことができます。

Ajaxのサンプルと、その他の入力タイプのサンプルはまた次の記事に。

 

 

シェアする

  • このエントリーをはてなブックマークに追加

フォローする