jQueryUIをはじめる方は必見、超簡単サンプル集~その6(最終回)~

この記事は2013年9月12日に書かれたものです。内容が古い可能性がありますのでご注意ください。


jQueryUIをはじめる方は必見、超簡単サンプル集~その6(最終回)~

jQueryUIのサンプルスクリプトを作成していきます。
今回が最終回、ユーティリティ編です。

・jQuery及びjQueryUIのバージョンは次の通りです。
jQuery :1.9.1
jQueryUI:1.10.3

・そして、今回作成するのは次の2つ。
Position、WidgetFactory

まずは、Positionから見ていきましょう。

1.Positionのサンプルスクリプト

文字通り位置を指定します。

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
<!--
$(function() {
    $('#position-2').position({
        my:'center center',
        at:'right bottom',
        of:$('#position-1'),
    });
});
// -->
</script>
<style type="text/css">
<!--
#position-1 {
    background-color: green;
}
#position-2 {
    background-color: pink;
    opacity: 0.75;
}
.box{
    width: 150px;
    padding: 50px 0;
    text-align: center;
    font-size: 50px;
}
-->
</style>
</head>
<body>
<div id="position-1" class="box">A</div>
<div id="position-2" class="box">B</div>
</body>
</html>

→「of」で基準となるオブジェクトを指定します。

最後はWidget Factoryです。
これは、Widgetを作成する機能です。Widgetは基本この機能で作られているのです。

2.Widget Factoryのサンプルスクリプト

簡単なウィジェットを作成してみましょう。

<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
// ウィジェット定義
$.widget('test.myWidget',{
        options: { content: '作成ウィジェットです' },
        _init: function() {
                var opts = this.options;
                var elm = this.element;
                elm.html(opts.content);
        }
})
$(function() {
        $('#my_widget').myWidget();
})
</script>
</head>
<body>
        <div id="my_widget"></div>
</body>
</html>

→名前空間(namespace)を作ってあげます(上記例では「test」)。
そして「myWidget」というウィジェットを作成しています。
_initは初期生成時に実行される処理です。
ここではウィジェットの要素(this.element)にoptionsで指定したcontentをhtmlとして表示しています。

→このウィジェット機能は既にあるウィジェットを継承することができます。
継承する場合は、第二引数に継承ウィジェットを記載します。
次のようになります。

<html>
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script>
$.widget( 'test.myWidget', $.ui.progressbar, {
        options:{value: 50},
})
$(function(){
        $('#my_widget').myWidget();
})
</script>
</head>
<body>
        <div id="my_widget"></div>
</body>
</html>

→Progressbarのウィジェットを使って、myWidgetというウィジェットを作っています。_init処理で初期値を50にセットしています。

※ちなみに「_(アンダーバー)」はプライベートメソッドの意味になります。

3.まとめ

いかがだったでしょうか。
WidgetFactoryはウィジェットを理解するには重要なポイントになりますね。
色々とサンプルをカスタマイズしてみてください。

jQuery UIはインターフェースをカスタマイズするにあたって有用なライブラリです。
ぜひいろいろとサンプルを試しつつ、取り入れてみてください。

4.参考ページ

jQueryUI公式サイト:http://jqueryui.com/

  • このエントリーをはてなブックマークに追加

PAGE TOP