jQuery UI Widget Factory

奥山幸彦 / @FiNGAHOLiC

巷にあふれる

MV*系フレームワーク

• Backbone.js
• Angular.js
• Ember.js
• Knockout.js
• Vue.js
• etc...

いや簡単なUI作れりゃいいだけなんだけど

• タブ
• ダイアログ
• スライドショー
• ツールチップ

そんな時こそ

みんな大好き

jQuery!!!!!!!!!

一つの機能を

jQuery Pluginとして開発する

ファイル読み込んで

<script src="./js/jquery.tab.js">

<div class="js-tabContainer">
    <div class="js-tabNavs">
        <a href="#" class="js-tabNav">foo</a>
        <a href="#" class="js-tabNav">bar</a>
        <a href="#" class="js-tabNav">baz</a>
    </div>
    <div class="js-tabContents">
        <div class="js-tabContent">foooooooooooooooooo</div>
        <div class="js-tabContent">baaaaaaaaaaaaaaaaaaa</div>
        <div class="js-tabContent">bazzzzzzzzzzzzzzzzzz</div>
    </div>
</div>

HTMLを用意して

$(function(){
    $('.js-tabContainer').tabContents();
});

JSを実行するだけ

便利すぎるぜ！

jQuery Pluginを作ると言っても開発者によって書き方と提供される機能は大抵違う

そこで

Widget Factory!!

＿人人人人人人＿
＞ UI製造工場 !＜
￣^Y^Y^Y^Y^￣

UI製造工場のための

テンプレートを

提供してくれる

製造工場が同じなら

最低限の機能は

保証される

実際に作ってみる

まずは準備

下記２ファイルを読み込む

• jquery.js
• jquery.ui.widget.js

オフィシャルのダウンロードページからwidgetだけを選択

http://goo.gl/RaZXMJ

ロード時にJSでタブを指定したい

http://goo.gl/RaZXMJ

他のUIとの連携は？

http://goo.gl/cAlxUx

http://goo.gl/cAlxUx

ね？簡単でしょ？

Thanks!