今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. マウスオーバーでサイズが変化するパネルを実装する「Kwicks」
  3. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  4. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  5. アニメ効果がおもしろいモーダルボックス「Avgrund Modal」

指定した要素がなんでも編集できちゃう「trocar.js」

スポンサーリンク

指定した要素が編集できるjQueryプラグイン「trocar.js」を紹介します。

jQueryプラグイン「trocar.js」

このプラグインを使えば、指定した要素を編集できるようにしてくれます。ExcelのようにTableが編集できちゃうjQueryプラグイン「Handsontable」と少し似ていて、なかなかおもしろいですね。

スポンサーリンク

デモで指定した要素を編集してみてください。

「trocar.js」のデモ

ソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="trocar.jsのデモでーす。">
<title>trocar.js - jQuery Plugin Demo</title>
</head>
<h1>trocar.jsのデモでーす。</h1>

<p class="text-focus" tabindex="-1">ここをフォーカスして、編集してみてください。</p>

<table class="text-focus" tabindex="-1" border="1">
<tr><td>テーブル</td><td>も編集</td></tr>
<tr><td>できるよー</td><td>ーーー</td></tr>
</table>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.trocar.js"></script>
<script>
$('.text-focus').trocar({
  'on': 'focus',
  'off': 'blur',
  'endOnEnter': true,
  'filterPaste': true
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)