最近気になったOSS UIまとめ

handsontable

ExcelライクなUIを提供するライブラリ

範囲選択、右︎クリックとかできて割と便利。

使い方

<script src="//cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.2/handsontable.full.min.js"></script>
<div id="example"></div>
<script>
var data = [
  ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
  ["2009", 0, 2941, 4303, 354, 5814],
  ["2010", 5, 2905, 2867, 412, 5284],
  ["2011", 4, 2517, 4822, 552, 6127],
  ["2012", 2, 2422, 5399, 776, 4151]
];

var container = document.getElementById('example');
var hot = new Handsontable(container,
{
  data: data,
  minSpareRows: 1,
  colHeaders: true,
  contextMenu: true
});
</script>

Sortable

非JQueryのドラッグ＆ドロップ操作を簡単に実現できるライブラリ

使用方法は単純で、対象エレメントをSortable.create(エレメント)するだけ。

ドラッグ＆ドロップできるlistサンプル

• item 1
• item 2
• item 3

CODE

<script src="bower_component/Sortable/Sortable.js"></script>
<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

<script>
var el = document.getElementById('items');
var sortable = Sortable.create(el);
</script>

wysihtml

高機能なWeb Textエディタ。