GiantDropdown/giantdropdownsample.html at master · tncbbthositg/GiantDropdown · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Giant Dropdown Demo</title>
  <script type="text/javascript" src="./scripts/jquery.js"></script>
  <script type="text/javascript" src="./scripts/jquery.giantdropdown.js"></script>
  <script type="text/javascript">
	// <![CDATA[
	$(function() {$("select").giantDropdown();});
	// ]]>
  </script>
  <link rel="stylesheet" href="./styles/giantdropdown.css" type="text/css" />
 </head>
 <body>
  <h1>Single Select</h1>
  <select>
   <option value="" selected="selected">What type of element would you like to see?</option>
   <option value="1">A short one</option>
   <option value="2">One that is a little longer</option>
   <option value="3">One that is a little bit longer than that</option>
   <option value="4">An element that is really quite long and takes up a lot of display room on the screen</option>
   <option value="5">An element that is so long and takes up so much room on the screen that you basically have no way of displaying the element without wrapping the text within it</option>
   <option value="6">Another one that isn't quite as long</option>
   <option value="7">One that is really very long but doesn't wrap around the screen</option>
   <option value="8">Short</option>
   <option value="9">Entheusiastic!</option>
   <option value="10">The last one</option>
  </select>

  <h1>Single Select with Option Groups</h1>
  <select>
   <option value="" selected="selected">Please choose your favorite aircraft</option>
   <optgroup label="Piper">
	   <option value="">Cub</option>
	   <option value="">Warrior</option>
	   <option value="">Archer</option>
	   <option value="">Saratoga</option>
   </optgroup>
   <optgroup label="Cessna">
	   <option value="">172</option>
	   <option value="">172 RG</option>
	   <option value="">182</option>
   </optgroup>
   <optgroup label="Aerobatic">
   	   <option value="">Super Decathlon</option>
	   <option value="">T-6</option>
	</optgroup>
  </select>

  <h1>Multiple Select</h1>
  <select multiple="multiple">
   <option value="">What type of element would you like to see?</option>
   <option value="1">A short one</option>
   <option value="2">One that is a little longer</option>
   <option value="3" selected="selected">One that is a little bit longer than that</option>
   <option value="4">An element that is really quite long and takes up a lot of display room on the screen</option>
   <option value="5" selected="selected">An element that is so long and takes up so much room on the screen that you basically have no way of displaying the element without wrapping the text within it</option>
   <option value="6">Another one that isn't quite as long</option>
   <option value="7">One that is really very long but doesn't wrap around the screen</option>
   <option value="8">Short</option>
   <option value="9" selected="selected">Entheusiastic!</option>
   <option value="10">The last one</option>
  </select>

  <h1>Custom Class</h1>
  <select class="thumbtacks">
   <option value="" selected="selected" style="font-style: italic;">Please choose your favorite aircraft</option>
   <optgroup label="Piper">
	   <option value="">Cub</option>
	   <option value="">Warrior</option>
	   <option value="">Archer</option>
	   <option value="">Saratoga</option>
   </optgroup>
   <optgroup label="Cessna">
	   <option value="">172</option>
	   <option value="">172 RG</option>
	   <option value="">182</option>
   </optgroup>
   <optgroup label="Aerobatic">
   	   <option value="">Super Decathlon</option>
	   <option value="">T-6</option>
	</optgroup>
  </select>
 </body>
</html>