← Back to branch summary

~launchpad-pqm/lazr-js/toolchain

« back to all changes in this revision

Viewing changes to examples/autocomplete/index.html

  • Committer: Sidnei da Silva
  • Date: 2009-11-16 00:51:29 UTC
  • mto: This revision was merged to the branch mainline in revision 154.
  • Revision ID: sidnei.da.silva@canonical.com-20091116005129-8ibwjlboa38glaw5
- Improved generation of skin modules and revamped combo service to make it more twisty.

Show diffs side-by-side

added added

removed removed

Lines of Context:
examples/autocomplete/index.html
4
4
<head>
5
5
  <title>Lazr-js examples: autocomplete</title>
6
6
 
7
 
  <link rel="stylesheet" type="text/css" href="../../build/cssreset/reset-min.css"></link>
8
 
  <link rel="stylesheet" type="text/css" href="../../build/cssfonts/fonts-min.css"></link>
9
 
  <link rel="stylesheet" type="text/css" href="../../build/cssbase/base-min.css"></link>
10
 
 
11
 
  <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
12
 
  <script type="text/javascript" src="../../build/lazr/lazr-meta.js"></script>
 
7
  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssreset/reset.css"></link>
 
8
  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssfonts/fonts.css"></link>
 
9
  <link type="text/css" rel="stylesheet" href="../../build/yui/current/build/cssbase/base.css"></link>
 
10
 
 
11
 
 
12
  <script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"></script>
 
13
  <script type="text/javascript" src="../../build/yui/current/build/widget/widget-position-debug.js"></script>
 
14
  <script type="text/javascript" src="../../build/yui/current/build/widget/widget-position-ext-debug.js"></script>
 
15
  <script type="text/javascript" src="../../build/lazr/lazr.js"></script>
 
16
  <script type="text/javascript" src="../../build/autocomplete/autocomplete.js"></script>
13
17
  <script type="text/javascript">
14
 
    var LAZR_YUI_CONFIG = {
15
 
        filter: "min",
16
 
        base: "../../build/",
17
 
        modules: LAZR_MODULES,
18
 
        insertBefore: "style-overrides",
19
 
    };
20
 
 
21
 
    var LP = YUI(LAZR_YUI_CONFIG);
22
 
 
23
 
    var countries = [
24
 
        "European Union",
25
 
        "United States",
26
 
        "Japan",
27
 
        "Germany",
28
 
        "China (PRC)",
29
 
        "United Kingdom",
30
 
        "France",
31
 
        "Italy",
32
 
        "Spain",
33
 
        "Canada",
34
 
        "Brazil",
35
 
        "Russia",
36
 
        "India",
37
 
        "South Korea",
38
 
        "Australia",
39
 
        "Mexico",
40
 
        "Netherlands",
41
 
        "Turkey",
42
 
        "Sweden",
43
 
        "Belgium",
44
 
        "Indonesia",
45
 
        "Switzerland",
46
 
        "Poland",
47
 
        "Norway",
48
 
        "Republic of China",
49
 
        "Saudi Arabia",
50
 
        "Austria",
51
 
        "Greece",
52
 
        "Denmark",
53
 
        "Iran",
54
 
        "South Africa",
55
 
        "Argentina",
56
 
        "Ireland",
57
 
        "Thailand",
58
 
        "Finland",
59
 
        "Venezuela",
60
 
        "Portugal",
61
 
        "Hong Kong",
62
 
        "United Arab Emirates",
63
 
        "Malaysia",
64
 
        "Czech Republic",
65
 
        "Colombia",
66
 
        "Nigeria",
67
 
        "Romania",
68
 
        "Chile",
69
 
        "Israel",
70
 
        "Singapore",
71
 
        "Philippines",
72
 
        "Pakistan",
73
 
        "Ukraine",
74
 
        "Hungary",
75
 
        "Algeria",
76
 
        "New Zealand",
77
 
        "Egypt",
78
 
        "Kuwait",
79
 
        "Peru",
80
 
        "Kazakhstan",
81
 
        "Slovakia",
82
 
        "Morocco",
83
 
        "Bangladesh",
84
 
        "Vietnam",
85
 
        "Qatar",
86
 
        "Angola",
87
 
        "Libya",
88
 
        "Iraq",
89
 
        "Croatia",
90
 
        "Luxembourg",
91
 
        "Sudan",
92
 
        "Slovenia",
93
 
        "Cuba",
94
 
        "Belarus",
95
 
        "Ecuador",
96
 
        "Serbia",
97
 
        "Oman",
98
 
        "Bulgaria",
99
 
        "Lithuania",
100
 
        "Syria",
101
 
        "Dominican Republic",
102
 
        "Tunisia",
103
 
        "Guatemala",
104
 
        "Azerbaijan",
105
 
        "Sri Lanka",
106
 
        "Kenya",
107
 
        "Latvia",
108
 
        "Turkmenistan",
109
 
        "Costa Rica",
110
 
        "Lebanon",
111
 
        "Uruguay",
112
 
        "Uzbekistan",
113
 
        "Yemen",
114
 
        "Cyprus",
115
 
        "Estonia",
116
 
        "Trinidad and Tobago",
117
 
        "Cameroon",
118
 
        "El Salvador",
119
 
        "Iceland",
120
 
        "Panama",
121
 
        "Bahrain",
122
 
        "Ivory Coast",
123
 
        "Ethiopia",
124
 
        "Tanzania",
125
 
        "Jordan",
126
 
        "Ghana",
127
 
        "Bosnia and Herzegovina",
128
 
        "Macau",
129
 
        "Burma",
130
 
        "Bolivia",
131
 
        "Brunei",
132
 
        "Botswana",
133
 
        "Honduras",
134
 
        "Gabon",
135
 
        "Uganda",
136
 
        "Jamaica",
137
 
        "Zambia",
138
 
        "Senegal",
139
 
        "Paraguay",
140
 
        "Albania",
141
 
        "Equatorial Guinea",
142
 
        "Georgia",
143
 
        "Democratic Republic of the Congo",
144
 
        "Nepal",
145
 
        "Afghanistan",
146
 
        "Cambodia",
147
 
        "Armenia",
148
 
        "Republic of the Congo",
149
 
        "Mozambique",
150
 
        "Republic of Macedonia",
151
 
        "Malta",
152
 
        "Namibia",
153
 
        "Madagascar",
154
 
        "Chad",
155
 
        "Burkina Faso",
156
 
        "Mauritius",
157
 
        "Mali",
158
 
        "The Bahamas",
159
 
        "Papua New Guinea",
160
 
        "Nicaragua",
161
 
        "Haiti",
162
 
        "Benin",
163
 
        "Palestinian flag West Bank and Gaza",
164
 
        "Jersey",
165
 
        "Fiji",
166
 
        "Guinea",
167
 
        "Moldova",
168
 
        "Niger",
169
 
        "Laos",
170
 
        "Mongolia",
171
 
        "French Polynesia",
172
 
        "Kyrgyzstan",
173
 
        "Barbados",
174
 
        "Tajikistan",
175
 
        "Malawi",
176
 
        "Liechtenstein",
177
 
        "New Caledonia",
178
 
        "Kosovo",
179
 
        "Rwanda",
180
 
        "Montenegro",
181
 
        "Swaziland",
182
 
        "Guam",
183
 
        "Mauritania",
184
 
        "Guernsey",
185
 
        "Isle of Man",
186
 
        "Togo",
187
 
        "Somalia",
188
 
        "Suriname",
189
 
        "Aruba",
190
 
        "North Korea",
191
 
        "Zimbabwe",
192
 
        "Central African Republic",
193
 
        "Faroe Islands",
194
 
        "Greenland",
195
 
        "Sierra Leone",
196
 
        "Lesotho",
197
 
        "Cape Verde",
198
 
        "Eritrea",
199
 
        "Bhutan",
200
 
        "Belize",
201
 
        "Antigua and Barbuda",
202
 
        "Gibraltar",
203
 
        "Maldives",
204
 
        "San Marino",
205
 
        "Guyana",
206
 
        "Burundi",
207
 
        "Saint Lucia",
208
 
        "Djibouti",
209
 
        "British Virgin Islands",
210
 
        "Liberia",
211
 
        "Seychelles",
212
 
        "The Gambia",
213
 
        "Northern Mariana Islands",
214
 
        "Grenada",
215
 
        "Saint Vincent and the Grenadines",
216
 
        "Saint Kitts and Nevis",
217
 
        "East Timor",
218
 
        "Vanuatu",
219
 
        "Comoros",
220
 
        "Samoa",
221
 
        "Solomon Islands",
222
 
        "Guinea-Bissau",
223
 
        "American Samoa",
224
 
        "Dominica",
225
 
        "Micronesia",
226
 
        "Tonga",
227
 
        "Cook Islands",
228
 
        "Palau",
229
 
        "Marshall Islands",
230
 
        "S o Tom  and Pr ncipe",
231
 
        "Anguilla",
232
 
        "Kiribati",
233
 
        "Tuvalu",
234
 
        "Niue"
235
 
    ];
 
18
 
 
19
var LP = YUI({
 
20
    base: '../../build/yui/current/build/',
 
21
    filter: 'raw'
 
22
});
 
23
 
 
24
var countries = [
 
25
    "European Union",
 
26
    "United States",
 
27
    "Japan",
 
28
    "Germany",
 
29
    "China (PRC)",
 
30
    "United Kingdom",
 
31
    "France",
 
32
    "Italy",
 
33
    "Spain",
 
34
    "Canada",
 
35
    "Brazil",
 
36
    "Russia",
 
37
    "India",
 
38
    "South Korea",
 
39
    "Australia",
 
40
    "Mexico",
 
41
    "Netherlands",
 
42
    "Turkey",
 
43
    "Sweden",
 
44
    "Belgium",
 
45
    "Indonesia",
 
46
    "Switzerland",
 
47
    "Poland",
 
48
    "Norway",
 
49
    "Republic of China",
 
50
    "Saudi Arabia",
 
51
    "Austria",
 
52
    "Greece",
 
53
    "Denmark",
 
54
    "Iran",
 
55
    "South Africa",
 
56
    "Argentina",
 
57
    "Ireland",
 
58
    "Thailand",
 
59
    "Finland",
 
60
    "Venezuela",
 
61
    "Portugal",
 
62
    "Hong Kong",
 
63
    "United Arab Emirates",
 
64
    "Malaysia",
 
65
    "Czech Republic",
 
66
    "Colombia",
 
67
    "Nigeria",
 
68
    "Romania",
 
69
    "Chile",
 
70
    "Israel",
 
71
    "Singapore",
 
72
    "Philippines",
 
73
    "Pakistan",
 
74
    "Ukraine",
 
75
    "Hungary",
 
76
    "Algeria",
 
77
    "New Zealand",
 
78
    "Egypt",
 
79
    "Kuwait",
 
80
    "Peru",
 
81
    "Kazakhstan",
 
82
    "Slovakia",
 
83
    "Morocco",
 
84
    "Bangladesh",
 
85
    "Vietnam",
 
86
    "Qatar",
 
87
    "Angola",
 
88
    "Libya",
 
89
    "Iraq",
 
90
    "Croatia",
 
91
    "Luxembourg",
 
92
    "Sudan",
 
93
    "Slovenia",
 
94
    "Cuba",
 
95
    "Belarus",
 
96
    "Ecuador",
 
97
    "Serbia",
 
98
    "Oman",
 
99
    "Bulgaria",
 
100
    "Lithuania",
 
101
    "Syria",
 
102
    "Dominican Republic",
 
103
    "Tunisia",
 
104
    "Guatemala",
 
105
    "Azerbaijan",
 
106
    "Sri Lanka",
 
107
    "Kenya",
 
108
    "Latvia",
 
109
    "Turkmenistan",
 
110
    "Costa Rica",
 
111
    "Lebanon",
 
112
    "Uruguay",
 
113
    "Uzbekistan",
 
114
    "Yemen",
 
115
    "Cyprus",
 
116
    "Estonia",
 
117
    "Trinidad and Tobago",
 
118
    "Cameroon",
 
119
    "El Salvador",
 
120
    "Iceland",
 
121
    "Panama",
 
122
    "Bahrain",
 
123
    "Ivory Coast",
 
124
    "Ethiopia",
 
125
    "Tanzania",
 
126
    "Jordan",
 
127
    "Ghana",
 
128
    "Bosnia and Herzegovina",
 
129
    "Macau",
 
130
    "Burma",
 
131
    "Bolivia",
 
132
    "Brunei",
 
133
    "Botswana",
 
134
    "Honduras",
 
135
    "Gabon",
 
136
    "Uganda",
 
137
    "Jamaica",
 
138
    "Zambia",
 
139
    "Senegal",
 
140
    "Paraguay",
 
141
    "Albania",
 
142
    "Equatorial Guinea",
 
143
    "Georgia",
 
144
    "Democratic Republic of the Congo",
 
145
    "Nepal",
 
146
    "Afghanistan",
 
147
    "Cambodia",
 
148
    "Armenia",
 
149
    "Republic of the Congo",
 
150
    "Mozambique",
 
151
    "Republic of Macedonia",
 
152
    "Malta",
 
153
    "Namibia",
 
154
    "Madagascar",
 
155
    "Chad",
 
156
    "Burkina Faso",
 
157
    "Mauritius",
 
158
    "Mali",
 
159
    "The Bahamas",
 
160
    "Papua New Guinea",
 
161
    "Nicaragua",
 
162
    "Haiti",
 
163
    "Benin",
 
164
    "Palestinian flag West Bank and Gaza",
 
165
    "Jersey",
 
166
    "Fiji",
 
167
    "Guinea",
 
168
    "Moldova",
 
169
    "Niger",
 
170
    "Laos",
 
171
    "Mongolia",
 
172
    "French Polynesia",
 
173
    "Kyrgyzstan",
 
174
    "Barbados",
 
175
    "Tajikistan",
 
176
    "Malawi",
 
177
    "Liechtenstein",
 
178
    "New Caledonia",
 
179
    "Kosovo",
 
180
    "Rwanda",
 
181
    "Montenegro",
 
182
    "Swaziland",
 
183
    "Guam",
 
184
    "Mauritania",
 
185
    "Guernsey",
 
186
    "Isle of Man",
 
187
    "Togo",
 
188
    "Somalia",
 
189
    "Suriname",
 
190
    "Aruba",
 
191
    "North Korea",
 
192
    "Zimbabwe",
 
193
    "Central African Republic",
 
194
    "Faroe Islands",
 
195
    "Greenland",
 
196
    "Sierra Leone",
 
197
    "Lesotho",
 
198
    "Cape Verde",
 
199
    "Eritrea",
 
200
    "Bhutan",
 
201
    "Belize",
 
202
    "Antigua and Barbuda",
 
203
    "Gibraltar",
 
204
    "Maldives",
 
205
    "San Marino",
 
206
    "Guyana",
 
207
    "Burundi",
 
208
    "Saint Lucia",
 
209
    "Djibouti",
 
210
    "British Virgin Islands",
 
211
    "Liberia",
 
212
    "Seychelles",
 
213
    "The Gambia",
 
214
    "Northern Mariana Islands",
 
215
    "Grenada",
 
216
    "Saint Vincent and the Grenadines",
 
217
    "Saint Kitts and Nevis",
 
218
    "East Timor",
 
219
    "Vanuatu",
 
220
    "Comoros",
 
221
    "Samoa",
 
222
    "Solomon Islands",
 
223
    "Guinea-Bissau",
 
224
    "American Samoa",
 
225
    "Dominica",
 
226
    "Micronesia",
 
227
    "Tonga",
 
228
    "Cook Islands",
 
229
    "Palau",
 
230
    "Marshall Islands",
 
231
    "S o Tom  and Pr ncipe",
 
232
    "Anguilla",
 
233
    "Kiribati",
 
234
    "Tuvalu",
 
235
    "Niue"
 
236
];
 
237
 
236
238
  </script>
237
239
 
238
 
  <style id="style-overrides" type="text/css">
239
 
    #example {
240
 
    background-color: #ecf5fa;
241
 
    border: 1px solid #8899dd;
242
 
    padding: 2em;
243
 
    }
244
 
 
245
 
    #example label { display: block; line-height: 2em; font-weight: bold; }
246
 
    #example input { margin-bottom: 1em; }
247
 
    #example h4 { font-weight: normal; }
248
 
    #example #keys li { line-height: 2em; }
249
 
    #example #keys kbd {
250
 
    background-color: #eee;
251
 
    border: 1px solid #bbb;
252
 
    padding-left: 3px;
253
 
    padding-right: 3px;
254
 
    }
 
240
  <!--
 
241
    We need to include individual css files because some of them have
 
242
    relative paths to images.
 
243
  -->
 
244
  <link type="text/css" rel="stylesheet" href="../../build/lazr-sam.css"></link>
 
245
  <link type="text/css" rel="stylesheet" href="../../build/lazr/assets/skins/sam/lazr.css"></link>
 
246
  <link type="text/css" rel="stylesheet" href="../../build/autocomplete/assets/skins/sam/autocomplete.css"></link>
 
247
 
 
248
  <style type="text/css">
 
249
  #example {
 
250
      background-color: #ecf5fa;
 
251
      border: 1px solid #8899dd;
 
252
      padding: 2em;
 
253
    }
 
254
 
 
255
  #example label { display: block; line-height: 2em; font-weight: bold; }
 
256
  #example input { margin-bottom: 1em; }
 
257
  #example h4 { font-weight: normal; }
 
258
  #example #keys li { line-height: 2em; }
 
259
  #example #keys kbd {
 
260
      background-color: #eee;
 
261
      border: 1px solid #bbb;
 
262
      padding-left: 3px;
 
263
      padding-right: 3px;
 
264
  }
255
265
  </style>
256
266
</head>
257
267
 
258
 
<body class="yui3-skin-sam">
259
 
 
260
 
  <h1>A Simple auto-complete Widget</h1>
261
 
 
262
 
  <h2>Demonstration</h2>
263
 
  <div id="example">
264
 
    <label for="ac-input">Enter a country name:</label>
265
 
    <input id="ac-input" type="text" value="" />
266
 
    <h4>Some useful keyboard shortcuts:</h4>
267
 
    <ul id="keys">
268
 
      <li><kbd>Tab</kbd> or <kbd>Enter</kbd> completes the current input.</li>
269
 
      <li><kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> navigate the completions list</li>
270
 
      <li><kbd>Esc</kbd> closes the completion list</li>
271
 
    </ul>
272
 
 
273
 
    <script type="text/javascript">
274
 
      LP.use('node', 'event', 'dump', 'lazr.autocomplete', function(Y) {
 
268
<body class="yui-skin-sam">
 
269
 
 
270
<h1>A Simple auto-complete Widget</h1>
 
271
 
 
272
<h2>Demonstration</h2>
 
273
<div id="example">
 
274
  <label for="ac-input">Enter a country name:</label>
 
275
  <input id="ac-input" type="text" value="" />
 
276
  <h4>Some useful keyboard shortcuts:</h4>
 
277
  <ul id="keys">
 
278
    <li><kbd>Tab</kbd> or <kbd>Enter</kbd> completes the current input.</li>
 
279
    <li><kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> navigate the completions list</li>
 
280
    <li><kbd>Esc</kbd> closes the completion list</li>
 
281
  </ul>
 
282
 
 
283
  <script type="text/javascript">
 
284
LP.use('node', 'event', 'dump', 'lazr.autocomplete', function(Y) {
275
285
 
276
286
    function log(msg) {
277
287
        Y.log(msg, 'info');
309
319
  <h3>Javascript</h3>
310
320
  Add the following javascript and css tags into your page.
311
321
  <pre>
312
 
    &lt;script type="text/javascript" src="../../build/yui/yui-min.js"&gt;&lt;/script&gt;
313
 
    &lt;script type="text/javascript" src="../../build/lazr/lazr-meta.js"&gt;&lt;/script&gt;
 
322
    &lt;script type="text/javascript" src="../../build/yui/current/build/yui/yui.js"&gt;&lt;/script&gt;
 
323
    &lt;script type="text/javascript" src="../../build/autocomplete/autocomplete.js"&gt;&lt;/script&gt;
314
324
  </pre>
315
325
 
316
326
  <p>
328
338
  The AutoComplete widget requires two ATTRs on creation: a node id and an
329
339
  array containing data.
330
340
  <pre>
331
 
    var LAZR_YUI_CONFIG = {
332
 
        filter: "min",
333
 
        base: "../../build/",
334
 
        modules: LAZR_MODULES,
335
 
    };
336
 
    YUI(LAZR_YUI_CONFIG).use("lazr.autocomplete", function(Y) {
337
 
        var autocomplete = new Y.lazr.AutoComplete({
338
 
            input: '#input-box',
339
 
            data: ['Mike', 'Fred', 'Barney']
340
 
        });
341
 
        autocomplete.render();
 
341
    var autocomplete = new Y.lazr.AutoComplete({
 
342
        input: '#input-box',
 
343
        data: ['Mike', 'Fred', 'Barney']
342
344
    });
 
345
    autocomplete.render();
343
346
  </pre>
344
347
</body>
345
348
</html>