jquery-ui之autocomplete、progressbar

这是之前整理的关于在jsp页面完成即可输入也可选择的输入选择框，使用的是jquery-ui的效果，如下：

1、autocomplete：

<div class="ui-widget">
　　<label for="tags">Tags: </label>
　　<input id="tags" class="ui-autocomplete-input" style="width: 200px">
</div>

　　

<style>
	.ui-autocomplete {
		max-height: 100px;
		overflow-y: auto;
		/* prevent horizontal scrollbar */
		overflow-x: hidden;
	}
	/* IE 6 doesn't support max-height
	 * we use height instead, but this forces the menu to always be this tall
	 */
	* html .ui-autocomplete {
		height: 100px;
	}
</style>
<script>
	var availableTags = new Array();
	availableTags.push("ActionScript");
	availableTags.push("AppleScript");
	availableTags.push("Asp");
	availableTags.push("BASIC");
	availableTags.push("Clojure");
	
	$(document).ready(function(){
		$("#tags").autocomplete({
			source: availableTags
		});
	});
</script>

　　2、progressbar:

　　

<div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
	<div class="progress-label"></div>
</div>

　　

<style type="text/css">
	.ui-progressbar {
		position: relative;
	}
	.progress-label {
		position: absolute;
		left: 50%;
		top: 4px;
		font-weight: bold;
		text-shadow: 1px 1px 0 #fff;
	}
</style>
<script type="text/javascript">
	$(function() {
		var progressbar = $( "#progressbar" ),
			progressLabel = $( ".progress-label" );
	
		progressbar.progressbar({
			value: false,
			change: function() {
				progressLabel.text( progressbar.progressbar( "value" ) + "%" );
			},
			complete: function() {
				progressLabel.text( "Complete!" );
			}
		});
	
		function progress() {
			var val = progressbar.progressbar( "value" ) || 0;
	
			progressbar.progressbar( "value", val + 1 );
	
			if ( val < 99 ) {
				setTimeout( progress, 100 );
			}
		}
	
		setTimeout( progress, 3000 );
	});
</script>