Skip to content

Commit 519b264

Browse files
fnagelfnagel
committed
added: demo files refresh, overlay and typeahead
1 parent b2d0248 commit 519b264

File tree

3 files changed

+258
-0
lines changed

3 files changed

+258
-0
lines changed

‎demos/selectmenu/overlay.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<html xmlns="http://www.w3.org/1999/xhtml">
2+
<head>
3+
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
4+
<meta name="apple-mobile-web-app-capable" content="yes" />
5+
<title>OpenLayers Google Layer Example</title>
6+
<link rel="stylesheet" href="http://openlayers.org/dev/examples/../theme/default/style.css" type="text/css" />
7+
<link rel="stylesheet" href="http://openlayers.org/dev/examples/../theme/default/google.css" type="text/css" />
8+
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
9+
<!-- this gmaps key generated for http://openlayers.org/dev/ -->
10+
11+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
12+
<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
13+
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
14+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
15+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
16+
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
17+
18+
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
19+
20+
21+
<script src='http://maps.google.com/maps?file=api'></script>
22+
<script src="http://openlayers.org/dev/examples/../OpenLayers.js"></script>
23+
<script type="text/javascript">
24+
var map;
25+
26+
function init() {
27+
map = new OpenLayers.Map('map');
28+
map.addControl(new OpenLayers.Control.LayerSwitcher());
29+
30+
var gphy = new OpenLayers.Layer.Google(
31+
"Google Physical",
32+
{type: G_PHYSICAL_MAP}
33+
);
34+
var gmap = new OpenLayers.Layer.Google(
35+
"Google Streets", // the default
36+
{numZoomLevels: 20}
37+
);
38+
var ghyb = new OpenLayers.Layer.Google(
39+
"Google Hybrid",
40+
{type: G_HYBRID_MAP, numZoomLevels: 20}
41+
);
42+
var gsat = new OpenLayers.Layer.Google(
43+
"Google Satellite",
44+
{type: G_SATELLITE_MAP, numZoomLevels: 22}
45+
);
46+
47+
48+
map.addLayers([gphy, gmap, ghyb, gsat]);
49+
50+
map.setCenter(new OpenLayers.LonLat(10.2, 48.9), 5);
51+
52+
$("#Selector").selectmenu({style: 'popup',width: 300,menuWidth:300,maxHeight:240});
53+
}
54+
</script>
55+
</head>
56+
<body onload="init()">
57+
<h1 id="title">Google Layer Example</h1>
58+
59+
<div id="tags">
60+
Google
61+
</div>
62+
63+
<p id="shortdesc">
64+
Demonstrate use of the various types of Google layers.
65+
</p>
66+
<select class="selectClass" id="Selector" >
67+
<option value="-1">Select one</option>
68+
<option value="236">a</option>
69+
<option value="257">b</option>
70+
<option value="237">c</option>
71+
<option value="251">d</option>
72+
<option value="263">e</option>
73+
<option value="248">f</option>
74+
<option value="262">g</option>
75+
<option value="260">h</option>
76+
<option value="234">i</option>
77+
<option value="229">j</option>
78+
<option value="230">k</option>
79+
<option value="240">m</option>
80+
<option value="79">n</option>
81+
82+
</select>
83+
<div id="map" class="smallmap"></div>
84+
85+
</body>
86+
</html>

‎demos/selectmenu/refresh.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<title>Demo Page for jQuery UI selectmenu</title>
6+
7+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
8+
<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
9+
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
10+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
11+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
12+
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
13+
14+
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
15+
16+
<style type="text/css">
17+
/* demo styles */
18+
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
19+
fieldset { border:0; }
20+
label,select,.ui-select-menu { float: left; margin-right: 10px; }
21+
select { width: 200px; }
22+
input#btn { cursor: pointer; }
23+
textarea {
24+
width: 500px;
25+
height: 200px;
26+
}
27+
</style>
28+
<script type="text/javascript">
29+
$(function() {
30+
$('select#speedA').selectmenu();
31+
32+
$('#btn').click(function() {
33+
$('select#speedA').html($("#add").val());
34+
$('select#speedA').selectmenu();
35+
});
36+
});
37+
</script>
38+
</head>
39+
<body><form action="#">
40+
<br /><br /><br />
41+
<fieldset>
42+
<label for="speedA">Select a Speed:</label>
43+
<select name="speedA" id="speedA">
44+
<option value="1">Item 1</option>
45+
<option value="2">Item 2</option>
46+
<option value="3">Item 3</option>
47+
<option value="4">Item 4</option>
48+
<option value="5">Item 5</option>
49+
<option value="6">Item 6</option>
50+
<option value="7">Item 7</option>
51+
<option value="8">Item 8</option>
52+
<option value="9">Item 9</option>
53+
<option value="10">Item 10</option>
54+
<option value="11">Item 11</option>
55+
<option value="12">Item 12</option>
56+
<option value="13">Item 13</option>
57+
<option value="14">Item 14</option>
58+
</select>
59+
</fieldset>
60+
<br /><br /><br />
61+
<textarea id="add">
62+
<option value="1">New Item 1</option>
63+
<option value="2">New Item 2</option>
64+
<option value="3">New Item 3</option>
65+
</textarea>
66+
<br />
67+
<input type="button" class="ui-state-default ui-widget-content" id="btn" value="Refresh Selectmenu" />
68+
</form>
69+
</body>
70+
</html>

‎demos/selectmenu/typeahead.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
5+
<title>Demo Page for jQuery UI selectmenu</title>
6+
7+
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
8+
<link type="text/css" href="../../themes/base/jquery.ui.selectmenu.css" rel="stylesheet" />
9+
<script type="text/javascript" src="../../jquery-1.5.1.js"></script>
10+
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
11+
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
12+
<script type="text/javascript" src="../../ui/jquery.ui.position.js"></script>
13+
14+
<script type="text/javascript" src="../../ui/jquery.ui.selectmenu.js"></script>
15+
16+
<style type="text/css">
17+
/* demo styles */
18+
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
19+
fieldset { border:0; }
20+
label,select,.ui-select-menu { float: left; margin-right: 10px; }
21+
select { width: 200px; }
22+
.wrap span.ui-selectmenu-item-header,
23+
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }
24+
</style>
25+
<script type="text/javascript">
26+
$(function(){
27+
$('select').selectmenu();
28+
});
29+
</script>
30+
</head>
31+
<body>
32+
<br />
33+
<br />
34+
<form action="#">
35+
<fieldset>
36+
<label for="state">Select a Speed:</label>
37+
<select id="state">
38+
<option></option>
39+
<option value="AL">Alabama</option>
40+
<option value="AK">Alaska</option>
41+
<option value="AS">American Samoa</option>
42+
<option value="AZ">Arizona</option>
43+
<option value="AR">Arkansas</option>
44+
<option value="CA">California</option>
45+
<option value="CO">Colorado</option>
46+
<option value="CT">Connecticut</option>
47+
<option value="DE">Delaware</option>
48+
<option value="DC">District of Columbia</option>
49+
<option value="FM">Federated States of Micronesia</option>
50+
<option value="FL">Florida</option>
51+
<option value="GA">Georgia</option>
52+
<option value="GU">Guam</option>
53+
<option value="HI">Hawaii</option>
54+
<option value="ID">Idaho</option>
55+
<option value="IL">Illinois</option>
56+
<option value="IN">Indiana</option>
57+
<option value="IA">Iowa</option>
58+
<option value="KS">Kansas</option>
59+
<option value="KY">Kentucky</option>
60+
<option value="LA">Louisiana</option>
61+
<option value="ME">Maine</option>
62+
<option value="MH">Marshall Islands</option>
63+
<option value="MD">Maryland</option>
64+
<option value="MA">Massachusetts</option>
65+
<option value="MI">Michigan</option>
66+
<option value="MN">Minnesota</option>
67+
<option value="MS">Mississippi</option>
68+
<option value="MO">Missouri</option>
69+
<option value="MT">Montana</option>
70+
<option value="NE">Nebraska</option>
71+
<option value="NV">Nevada</option>
72+
<option value="NH">New Hampshire</option>
73+
<option value="NJ">New Jersey</option>
74+
<option value="NM">New Mexico</option>
75+
<option value="NY">New York</option>
76+
<option value="NC">North Carolina</option>
77+
<option value="ND">North Dakota</option>
78+
<option value="MP">Northern Mariana Islands</option>
79+
<option value="OH">Ohio</option>
80+
<option value="OK">Oklahoma</option>
81+
<option value="OR">Oregon</option>
82+
<option value="PW">Palau</option>
83+
<option value="PA">Pennsylvania</option>
84+
<option value="PR">Puerto Rico</option>
85+
<option value="RI">Rhode Island</option>
86+
<option value="SC">South Carolina</option>
87+
<option value="SD">South Dakota</option>
88+
<option value="TN">Tennessee</option>
89+
<option value="TX">Texas</option>
90+
<option value="UT">Utah</option>
91+
<option value="VT">Vermont</option>
92+
<option value="VI">Virgin Islands</option>
93+
<option value="VA">Virginia</option>
94+
<option value="WA">Washington</option>
95+
<option value="WV">West Virginia</option>
96+
<option value="WI">Wisconsin</option>
97+
<option value="WY">Wyoming</option>
98+
</select>
99+
</fieldset>
100+
</form>
101+
</body>
102+
</html>

0 commit comments

Comments
 (0)