jquery-ui之autocomplete、progressbar

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

1、autocomplete：

<div class="ui-widget">
　　<label for="tags">Tags: </label>
　　<input >
</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 >
        <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>