JQueryでProgessbar UIウィジェットの完成イベントを傍受します。
2788 ワード
以下の例は、PrograessBar UIウィジェットでイベントを傍受する方法を示している。
ソースのダウンロード:
progressbar-ui-widget-in-jquery.zip
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
function progressBar_completeHandler(event, ui) {
alert(event.type);
}
$(function() {
// Set the progressbar's initial value to 76%, and define an event listener for the "complete" event.
$("#progressbar1").progressbar({value:76, complete:progressBar_completeHandler});
// Set the progressbar's value to 18%.
$("#button1").click(function() {
$('#progressbar1' ).progressbar( 'option', 'value', 18);
});
// Increment the progressbar's current value by 10%.
$("#button2").click(function() {
var val = $("#progressbar1").progressbar("option", "value");
$("#progressbar1").progressbar("option", "value", val+10);
});
// Decrement the progressbar's current value by 10%.
$("#button3").click(function() {
var val = $("#progressbar1").progressbar("option", "value");
$("#progressbar1").progressbar("option", "value", val-10);
});
});
</script>
</head>
<body>
<div style="padding:20px;">
<input id="button1" type="button" value="value = 18" />
<input id="button2" type="button" value="value += 10" />
<input id="button3" type="button" value="value -= 10" />
</div>
<div id="progressbar1" style="width:300px; height:80px;" />
</body>
</html>ソースのダウンロード:
progressbar-ui-widget-in-jquery.zip