Umbrellaの導入方法

Umbrellaを導入するのは簡単です。
JSdelivr CDNを使うか、JavaScriptファイルをダウンロードしてHTMLに設置すれば完了です。

<script src="umbrella.min.js"></script>

あとはjQeuryと同じようにJavaScriptエリアにコードを書くか、外部ファイルを読み込めばOKです。

Umbrellaの使用例

umbrella-1.png

イベント

イベントを操作するのも簡単です。
以下の例は、ボタンをクリックするごとに「Hello World」を表示するためのコードです。

u("button").on('click', function(){
　　alert("Hello world");
});

自動的に新規窓を立ち上げるリンクにする

「each()」関数を使って全てのノードに「target="blank"」を付加してみましょう。

u('a').each(function(node, i){
　　u(node).attr({ target: '_blank' });
});

Ajaxを使う

jQueryに比べてUmbrellaを使った方がずっと簡単にAjaxを利用することができます。

u('form').ajax(function(err, data){
　　if (!err) alert('Done! Thanks, ' + data.name);
});

ある要素までスクロールする

さまざまなホームページで見られるように、ある特定のclassをつけてそこまでスクロールできるようにコードを書くこともできます。

u('a.team').on('click', function(e){
　　e.preventDefault();
　　u('section.team').scroll();
});

10秒ごとに自動保存する

「10秒ごとに自動保存」という一見複雑そうな機能も、Umbrellaでは下記のように非常にシンプルなコードで実装することができます。

// Ajax経由でフォームを送信する
u('form.edit').ajax();

// 10秒ごとに送信する
setInterval(function(){
　　u('form.edit').trigger('submit');
}, 10000);

まとめ

jQueryと非常に類似性が高いだけでなく、AjaxなどはUmbrellaを使えばjQuery以上にシンプルに書くことができます。
また、とても軽量で学習コストも低く、すぐに導入することができます。

利用に関しての文法ルールや注意事項はDocumentationに記載されています。
ぜひ一度Umbrellaを使ってみてください。