Mercurial Mercurial > eulalie / annotate
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
web/static/css/jq-css/demos/autocomplete/custom-data.html
author ymh <ymh.work@gmail.com>
Sat, 12 Jun 2010 00:33:37 +0200
changeset 30 81d408373dde
permissions -rw-r--r--
itry to have the player in the preview page
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
30
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     1
 
<!DOCTYPE html>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     2
 
<html lang="en">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     3
 
<head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     4
 
	<meta charset="UTF-8" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     5
 
	<title>jQuery UI Autocomplete Custom Data Demo</title>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     6
 
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     7
 
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     8
 
	<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
     9
 
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    10
 
	<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    11
 
	<script type="text/javascript" src="../../ui/jquery.ui.autocomplete.js"></script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    12
 
	<link type="text/css" href="../demos.css" rel="stylesheet" />
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    13
 
	<style type="text/css">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    14
 
	#project-label {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    15
 
		display: block;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    16
 
		font-weight: bold;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    17
 
		margin-bottom: 1em;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    18
 
	}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    19
 
	#project-icon {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    20
 
		float: left;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    21
 
		height: 32px;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    22
 
		width: 32px;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    23
 
	}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    24
 
	#project-description {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    25
 
		margin: 0;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    26
 
		padding: 0;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    27
 
	}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    28
 
	</style>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    29
 
	<script type="text/javascript">
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    30
 
	$(function() {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    31
 
		var projects = [
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    32
 
			{
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    33
 
				value: 'jquery',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    34
 
				label: 'jQuery',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    35
 
				desc: 'the write less, do more, JavaScript library',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    36
 
				icon: 'jquery_32x32.png'
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    37
 
			},
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    38
 
			{
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    39
 
				value: 'jquery-ui',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    40
 
				label: 'jQuery UI',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    41
 
				desc: 'the official user interface library for jQuery',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    42
 
				icon: 'jqueryui_32x32.png'
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    43
 
			},
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    44
 
			{
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    45
 
				value: 'sizzlejs',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    46
 
				label: 'Sizzle JS',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    47
 
				desc: 'a pure-JavaScript CSS selector engine',
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    48
 
				icon: 'sizzlejs_32x32.png'
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    49
 
			}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    50
 
		];
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    51
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    52
 
		$('#project').autocomplete({
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    53
 
			minLength: 0,
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    54
 
			source: projects,
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    55
 
			focus: function(event, ui) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    56
 
				$('#project').val(ui.item.label);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    57
 
				return false;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    58
 
			},
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    59
 
			select: function(event, ui) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    60
 
				$('#project').val(ui.item.label);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    61
 
				$('#project-id').val(ui.item.value);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    62
 
				$('#project-description').html(ui.item.desc);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    63
 
				$('#project-icon').attr('src', '../images/' + ui.item.icon);
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    64
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    65
 
				return false;
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    66
 
			}
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    67
 
		})
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    68
 
		.data( "autocomplete" )._renderItem = function( ul, item ) {
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    69
 
			return $( "<li></li>" )
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    70
 
				.data( "item.autocomplete", item )
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    71
 
				.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    72
 
				.appendTo( ul );
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    73
 
		};
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    74
 
	});
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    75
 
	</script>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    76
 
</head>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    77
 
<body>
81d408373dde itry to have the player in the preview page
ymh <ymh.work@gmail.com>
parents:
diff changeset 
    78
 












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    79


<div class="demo">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    80


	<div id="project-label">Select a project (type "j" for a start):</div>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    81


	<img id="project-icon" src="../images/transparent_1x1.png" class="ui-state-default"/>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    82


	<input id="project"/>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    83


	<input type="hidden" id="project-id"/>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    84


	<p id="project-description"></p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    85


</div><!-- End demo -->












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    86














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    87


<div class="demo-description">












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    88


<p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    89


You can use your own custom data formats and displays by simply overriding the default focus and select actions.












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    90


</p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    91


<p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    92


Try typing "j" to get a list of projects or just press the down arrow.












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    93


</p>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    94


</div><!-- End demo-description -->












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    95














81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    96


</body>












81d408373dde
itry to have the player in the preview page



ymh <ymh.work@gmail.com>


parents: 

diff
changeset




    97


</html>














eulalie