-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (128 loc) · 5.6 KB
/
index.html
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Select It Plugin</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="select_it.js"></script>
<script>
$(function() {
$('select').select_it();
});
</script>
</head>
<body>
<header class="content block">
<div class="container">
<h1>Select It Plugin</h1>
<p>Extremely simple replacement for a select field. Style as necessary to achieve desired effect.</p>
</div><!--/container-->
</header><!--/block-->
<section class="content block">
<div class="container">
<div class="left block">
<div class="left three_quarters">
<h2>Totally Customizable and works across all browsers.</h2>
<p>Select_it simply does that: Selects a specified select field, hides it, and builds customizable HTML that you can style any way you wish. It's that simple. Works with forms as it changes the value of the hidden select field as well so there aren't any issues.</p>
</div><!--/three_quarters-->
<div class="right quarter">
<select data-placeholder="Placeholder Text">
<option value="Option 1">Alberta</option>
<option value="Option 2">Boston</option>
<option value="Option 3">Canada</option>
<option value="Option 4">Detrioit</option>
<option value="Option 5">Edmonton</option>
<option value="Option 6">Fredericksburg</option>
<option value="Option 7">Grenada</option>
<option value="Option 8">Hometown</option>
<option value="Option 9">Indiana</option>
<option value="Option 10">Juneau</option>
<option value="Option 11">Kentucky</option>
<option value="Option 12">Lima</option>
<option value="Option 12">Missouri</option>
<option value="Option 12">Nevada</option>
<option value="Option 12">Oregon</option>
<option value="Option 12">Pennsylvania</option>
<option value="Option 12">Quack</option>
<option value="Option 12">Radnor</option>
<option value="Option 12">Shippensburg</option>
<option value="Option 12">Tulsa</option>
<option value="Option 12">Utah</option>
<option value="Option 12">Vermont</option>
<option value="Option 12">Wyoming</option>
<option value="Option 12">Xylophone</option>
<option value="Option 12">Zebra</option>
</select>
</div><!--/quarter-->
</div><!---/block-->
<div class="left block">
<div class="block">
<h2>In Action within a form</h2>
</div><!--/block-->
<form class="contact_form block">
<div class="block">
<input type="text" placeholder="Field 1" tabindex="1" />
</div><!--/block-->
<div class="block">
<input type="text" placeholder="Field 2" tabindex="2" />
</div><!--/block-->
<div class="block">
<input type="text" placeholder="Field 3" tabindex="3" />
</div><!--/block-->
<div class="block">
<div class="left half">
<select data-placeholder="Placeholder Text" tabindex="4">
<option value="Option 1">Alberta</option>
<option value="Option 2">Boston</option>
<option value="Option 3">Canada</option>
<option value="Option 4">Detrioit</option>
<option value="Option 5">Edmonton</option>
<option value="Option 6">Fredericksburg</option>
<option value="Option 7">Grenada</option>
<option value="Option 8">Hometown</option>
<option value="Option 9">Indiana</option>
<option value="Option 10">Juneau</option>
<option value="Option 11">Kentucky</option>
<option value="Option 12">Lima</option>
<option value="Option 13">Missouri</option>
<option value="Option 14">Nevada</option>
<option value="Option 15">Oregon</option>
<option value="Option 16">Pennsylvania</option>
<option value="Option 17">Quack</option>
<option value="Option 18">Radnor</option>
<option value="Option 19">Shippensburg</option>
<option value="Option 20">Tulsa</option>
<option value="Option 21">Utah</option>
<option value="Option 22">Vermont</option>
<option value="Option 23">Wyoming</option>
<option value="Option 24">Xylophone</option>
<option value="Option 25">Yawn</option>
<option value="Option 26">Zebra</option>
</select>
</div><!--/half-->
<div class="right half">
<input type="text" placeholder="Field 5" tabindex="5" />
</div><!--/half-->
</div><!--/block-->
<div class="inline_block block">
<input type="submit" class="button" value="Submit" />
</div><!--/block-->
</div><!--/quarter-->
<div class="three_quarters">
<h2>Totally Customizable and works across all browsers.</h2>
<p>Select_it simply does that: Selects a specified select field, hides it, and builds customizable HTML that you can style any way you wish. It's that simple. Works with forms as it changes the value of the hidden select field as well so there aren't any issues.</p>
</div><!--/three_quarters-->
</div><!---/block-->
</div><!--/container-->
</section>
<footer class="block">
<div class="container">
</div><!--/container-->
</footer>
</body>
</html>