library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Autocomplete demos: Coding standards.

Browse Source
This commit is contained in:
Scott González 2011-05-27 08:32:48 -04:00
parent 09e88d6220
commit be7da0239a
11 changed files with 42 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demos/autocomplete/categories.html
View File

@ -59,7 +59,7 @@
<div class="demo"> <div class="demo">
<label for="search">Search: </label> <label for="search">Search: </label>
<input id="search" /> <input id="search">
</div><!-- End demo --> </div><!-- End demo -->

15
demos/autocomplete/combobox.html
View File

@ -14,9 +14,16 @@
<script src="../../ui/jquery.ui.tooltip.js"></script> <script src="../../ui/jquery.ui.tooltip.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
.ui-button { margin-left: -1px; } .ui-button {
.ui-button-icon-only .ui-button-text { padding: 0.35em; } margin-left: -1px;
.ui-autocomplete-input { margin: 0; padding: 0.4em 0 0.4em 0.45em; } }
.ui-button-icon-only .ui-button-text {
padding: 0.35em;
}
.ui-autocomplete-input {
margin: 0;
padding: 0.4em 0 0.4em 0.45em;
}
</style> </style>
<script> <script>
(function( $ ) { (function( $ ) {
@ -90,7 +97,7 @@
.addClass( "ui-widget ui-widget-content ui-corner-left" ); .addClass( "ui-widget ui-widget-content ui-corner-left" );
input.data( "autocomplete" )._renderItem = function( ul, item ) { input.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" ) return $( "<li>" )
.data( "item.autocomplete", item ) .data( "item.autocomplete", item )
.append( "<a>" + item.label + "</a>" ) .append( "<a>" + item.label + "</a>" )
.appendTo( ul ); .appendTo( ul );

8
demos/autocomplete/custom-data.html
View File

@ -67,7 +67,7 @@
} }
}) })
.data( "autocomplete" )._renderItem = function( ul, item ) { .data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" ) return $( "<li>" )
.data( "item.autocomplete", item ) .data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" ) .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul ); .appendTo( ul );
@ -79,9 +79,9 @@
<div class="demo"> <div class="demo">
<div id="project-label">Select a project (type "j" for a start):</div> <div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default"/> <img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default">
<input id="project"/> <input id="project">
<input type="hidden" id="project-id"/> <input type="hidden" id="project-id">
<p id="project-description"></p> <p id="project-description"></p>
</div><!-- End demo --> </div><!-- End demo -->

2
demos/autocomplete/default.html
View File

@ -49,7 +49,7 @@
<div class="ui-widget"> <div class="ui-widget">
<label for="tags">Tags: </label> <label for="tags">Tags: </label>
<input id="tags" /> <input id="tags">
</div> </div>
</div><!-- End demo --> </div><!-- End demo -->

2
demos/autocomplete/folding.html
View File

@ -46,7 +46,7 @@
<div class="ui-widget"> <div class="ui-widget">
<form> <form>
<label for="developer">Developer: </label> <label for="developer">Developer: </label>
<input id="developer" /> <input id="developer">
</form> </form>
</div> </div>

2
demos/autocomplete/maxheight.html
View File

@ -65,7 +65,7 @@
<div class="ui-widget"> <div class="ui-widget">
<label for="tags">Tags: </label> <label for="tags">Tags: </label>
<input id="tags" /> <input id="tags">
</div> </div>
</div><!-- End demo --> </div><!-- End demo -->

6
demos/autocomplete/multiple-remote.html
View File

@ -12,7 +12,9 @@
<script src="../../ui/jquery.ui.autocomplete.js"></script> <script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } .ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style> </style>
<script> <script>
$(function() { $(function() {
@ -69,7 +71,7 @@
<div class="ui-widget"> <div class="ui-widget">
<label for="birds">Birds: </label> <label for="birds">Birds: </label>
<input id="birds" size="50" /> <input id="birds" size="50">
</div> </div>
</div><!-- End demo --> </div><!-- End demo -->

2
demos/autocomplete/multiple.html
View File

@ -84,7 +84,7 @@
<div class="ui-widget"> <div class="ui-widget">
<label for="tags">Tag programming languages: </label> <label for="tags">Tag programming languages: </label>
<input id="tags" size="50" /> <input id="tags" size="50">
</div> </div>
</div><!-- End demo --> </div><!-- End demo -->

10
demos/autocomplete/remote-jsonp.html
View File

@ -12,14 +12,16 @@
<script src="../../ui/jquery.ui.autocomplete.js"></script> <script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } .ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; } #city { width: 25em; }
</style> </style>
<script> <script>
$(function() { $(function() {
function log( message ) { function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" ); $( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 ); $( "#log" ).scrollTop( 0 );
} }
$( "#city" ).autocomplete({ $( "#city" ).autocomplete({
@ -65,7 +67,7 @@
<div class="ui-widget"> <div class="ui-widget">
<label for="city">Your city: </label> <label for="city">Your city: </label>
<input id="city" /> <input id="city">
Powered by <a href="http://geonames.org">geonames.org</a> Powered by <a href="http://geonames.org">geonames.org</a>
</div> </div>

6
demos/autocomplete/remote-with-cache.html
View File

@ -12,7 +12,9 @@
<script src="../../ui/jquery.ui.autocomplete.js"></script> <script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } .ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style> </style>
<script> <script>
$(function() { $(function() {
@ -44,7 +46,7 @@
<div class="ui-widget"> <div class="ui-widget">
<label for="birds">Birds: </label> <label for="birds">Birds: </label>
<input id="birds" /> <input id="birds">
</div> </div>
</div><!-- End demo --> </div><!-- End demo -->

10
demos/autocomplete/remote.html
View File

@ -12,13 +12,15 @@
<script src="../../ui/jquery.ui.autocomplete.js"></script> <script src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css"> <link rel="stylesheet" href="../demos.css">
<style> <style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; } .ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style> </style>
<script> <script>
$(function() { $(function() {
function log( message ) { function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" ); $( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 ); $( "#log" ).scrollTop( 0 );
} }
$( "#birds" ).autocomplete({ $( "#birds" ).autocomplete({
@ -39,7 +41,7 @@
<div class="ui-widget"> <div class="ui-widget">
<label for="birds">Birds: </label> <label for="birds">Birds: </label>
<input id="birds" /> <input id="birds">
</div> </div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial"> <div class="ui-widget" style="margin-top:2em; font-family:Arial">