「X-editable」を利用してその場で編集するUI（Edit In Place）を導入する

X-editableプラグインを利用することで、その場で編集するUI（Edit In Place）を簡単に導入することができます。
ダウンロードとデモはこちらから。

X-editableプラグインはBootstrapとjQuery UI、jQueryのすべてに対応しているプラグインです。

一番簡単なBootstrap版の使い方

BootstrapとX-editableのCSSを読み込みます

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>

jQueryとBootstrapとX-editableのJavaScriptを読み込みます

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>

JavaScriptを記述します

<script>
$(document).ready(function() {
    //toggle `popup` / `inline` mode
    $.fn.editable.defaults.mode = 'popup';     

    //make username editable
    $('#username').editable();

    //make status editable
    $('#status').editable({
        type: 'select',
        title: 'Select status',
        placement: 'right',
        value: 2,
        source: [
            {value: 1, text: 'status 1'},
            {value: 2, text: 'status 2'},
            {value: 3, text: 'status 3'}
        ]
        /*
        //uncomment these lines to send data on server
        ,pk: 1
        ,url: '/post'
        */
    });
});
</script>

HTMLを記述します

      <div>
        <span>Username:</span>
        <a href="#" id="username" data-type="text" data-placement="right" data-title="Enter username">superuser</a>
      </div>

      <div>
        <span>Status:</span>
        <a href="#" id="status"></a>
      </div>