jQuery UIを試す - oggataの日記

プログレスバーとスライダーによるインターフェースを作成。
そのためにjQuery UIを試す。
jQuery UI 1.5bでは下記のような機能が提供されているらしい。
Datepicker（日付）は業務でも使えそう。

Draggables DOM要素をドラッグできるようにする
Droppables DraggableなDOM要素をドロップできるようにする
Sortables マウス操作でDOM要素の順番を入れ替えられるようにする
Selectables DOM要素をマウスで選択できるようにする
Resizables DOM要素の大きさをマウスで変更できるようにする
Accordion 折りたたみ可能な領域をサポートするコンポーネント
Datepicker 日付選択のためのコンポーネント
Dialog 高機能なダイアログコンポーネント
Slider スライダーコンポーネント
Tabs タブ機能を提供するコンポーネント

プログレスバーをページを開いたときにアニメーションさせて、

増減させる為のコード↓

<link href="/js/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.11.custom.min.js"></script>
<style type="text/css">
#progressbar {width: 280px; height: 10px;}
#progressbar .ui-progressbar-value { background-color: #0033CC;}
.style1 {
	color: #FFFFFF;
	font-weight: bold;
}
</style>
<script type="text/javascript">
$(function(){
    // プログレスバーを生成
    $("#progressbar").progressbar();
    $(window).load(function() {
            var start = $(this);
            //開始値の指定
            var value =100;
            var timer = setInterval(function(){
                //収束する値の指定
                if(value <= 70) {
                    clearInterval(timer);
                    value = 70;
                } else {
                    //一度に減らす値
                    value = value - 5;
                }
                // プログレスバーの値を変更
                $("#progressbar").progressbar("option", "value", value);
                //減らす速度
            }, 100);
        })
});
</script>
<body>
<div id="progressbar2"></div>
</body>

スライダーを使用してパラメータを設定するためのコード↓

<link href="/js/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function()
{
    var slider = $('#slider');
    var slider_ui = $('#slider_ui');
    var slider_value = $('#slider_value');

    slider.css('width', '280px');
    slider_ui.css('font-size', '12pt');
    $('body').css('font-size', '100%');

	//初期値
    slider_value.text('<?php echo $speed; ?>');
    document.getElementById('speed_value').value=120;

    slider.slider(
    {
        min: 0,
        max: 100,
        values: [50],
        startValue: 50,
        slide: function (event, ui)
        {
            slider_value.text(ui.value);
            document.getElementById('speed_value').value=ui.value;
        },
    });

}
);
-->
</script>
<body>
<span id="slider_value"></span>
<div id="slider"></div>
<input type="hidden" name="data[speed]" id="speed_value" />
</body>