jQueryUIをはじめる方は必見、超簡単サンプル集～その６（最終回）～

teachers

jQueryUIをはじめる方は必見、超簡単サンプル集～その６（最終回）～

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にセットしています。

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