mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Autocomplete demos: Coding standards.
This commit is contained in:
parent
09e88d6220
commit
be7da0239a
@ -47,7 +47,7 @@
|
||||
{ label: "andreas andersson", category: "People" },
|
||||
{ label: "andreas johnson", category: "People" }
|
||||
];
|
||||
|
||||
|
||||
$( "#search" ).catcomplete({
|
||||
delay: 0,
|
||||
source: data
|
||||
@ -59,7 +59,7 @@
|
||||
|
||||
<div class="demo">
|
||||
<label for="search">Search: </label>
|
||||
<input id="search" />
|
||||
<input id="search">
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
@ -14,9 +14,16 @@
|
||||
<script src="../../ui/jquery.ui.tooltip.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-button { margin-left: -1px; }
|
||||
.ui-button-icon-only .ui-button-text { padding: 0.35em; }
|
||||
.ui-autocomplete-input { margin: 0; padding: 0.4em 0 0.4em 0.45em; }
|
||||
.ui-button {
|
||||
margin-left: -1px;
|
||||
}
|
||||
.ui-button-icon-only .ui-button-text {
|
||||
padding: 0.35em;
|
||||
}
|
||||
.ui-autocomplete-input {
|
||||
margin: 0;
|
||||
padding: 0.4em 0 0.4em 0.45em;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function( $ ) {
|
||||
@ -90,7 +97,7 @@
|
||||
.addClass( "ui-widget ui-widget-content ui-corner-left" );
|
||||
|
||||
input.data( "autocomplete" )._renderItem = function( ul, item ) {
|
||||
return $( "<li></li>" )
|
||||
return $( "<li>" )
|
||||
.data( "item.autocomplete", item )
|
||||
.append( "<a>" + item.label + "</a>" )
|
||||
.appendTo( ul );
|
||||
|
@ -67,7 +67,7 @@
|
||||
}
|
||||
})
|
||||
.data( "autocomplete" )._renderItem = function( ul, item ) {
|
||||
return $( "<li></li>" )
|
||||
return $( "<li>" )
|
||||
.data( "item.autocomplete", item )
|
||||
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
|
||||
.appendTo( ul );
|
||||
@ -79,9 +79,9 @@
|
||||
|
||||
<div class="demo">
|
||||
<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"/>
|
||||
<input id="project"/>
|
||||
<input type="hidden" id="project-id"/>
|
||||
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default">
|
||||
<input id="project">
|
||||
<input type="hidden" id="project-id">
|
||||
<p id="project-description"></p>
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
@ -49,7 +49,7 @@
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags" />
|
||||
<input id="tags">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
@ -46,7 +46,7 @@
|
||||
<div class="ui-widget">
|
||||
<form>
|
||||
<label for="developer">Developer: </label>
|
||||
<input id="developer" />
|
||||
<input id="developer">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
@ -60,12 +60,12 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags" />
|
||||
<input id="tags">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
@ -12,7 +12,9 @@
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<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>
|
||||
<script>
|
||||
$(function() {
|
||||
@ -69,7 +71,7 @@
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds" size="50" />
|
||||
<input id="birds" size="50">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
@ -84,7 +84,7 @@
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tag programming languages: </label>
|
||||
<input id="tags" size="50" />
|
||||
<input id="tags" size="50">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
@ -12,14 +12,16 @@
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<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; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
function log( message ) {
|
||||
$( "<div/>" ).text( message ).prependTo( "#log" );
|
||||
$( "#log" ).attr( "scrollTop", 0 );
|
||||
$( "<div>" ).text( message ).prependTo( "#log" );
|
||||
$( "#log" ).scrollTop( 0 );
|
||||
}
|
||||
|
||||
$( "#city" ).autocomplete({
|
||||
@ -65,7 +67,7 @@
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="city">Your city: </label>
|
||||
<input id="city" />
|
||||
<input id="city">
|
||||
Powered by <a href="http://geonames.org">geonames.org</a>
|
||||
</div>
|
||||
|
||||
|
@ -12,7 +12,9 @@
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<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>
|
||||
<script>
|
||||
$(function() {
|
||||
@ -44,7 +46,7 @@
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds" />
|
||||
<input id="birds">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
@ -12,13 +12,15 @@
|
||||
<script src="../../ui/jquery.ui.autocomplete.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<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>
|
||||
<script>
|
||||
$(function() {
|
||||
function log( message ) {
|
||||
$( "<div/>" ).text( message ).prependTo( "#log" );
|
||||
$( "#log" ).attr( "scrollTop", 0 );
|
||||
$( "<div>" ).text( message ).prependTo( "#log" );
|
||||
$( "#log" ).scrollTop( 0 );
|
||||
}
|
||||
|
||||
$( "#birds" ).autocomplete({
|
||||
@ -39,7 +41,7 @@
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds" />
|
||||
<input id="birds">
|
||||
</div>
|
||||
|
||||
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
|
||||
|
Loading…
Reference in New Issue
Block a user