-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·149 lines (115 loc) · 5.28 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Plugin jQuery gtSelect</title>
<meta property="og:title" content="Plugin jQuery gtSelect" />
<meta property="og:description" content="gtSelect is a simple plugin what add style to your select easily, created by Gerson Thiago." />
<meta property="og:url" content="http://www.gersonthiago.com/labs/jquery-gtselect/" />
<!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jquery.gtselect.css" type="text/css" media="screen" />
<!-- syntax -->
<link rel="stylesheet" href="css/syntax/sh.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Imprima|Pontano+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<section id="container">
<a href="https://github.com/gersonthiago/jquery.gtselect/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<header>
<h1>jQuery gtSelect - is a simple plugin</h1>
<p>No mystery, no secret.</p>
</header>
<section id="content">
<form action="/" method="post">
<h2>See the example:</h2>
<select id="favorite_place" name="favorite_place">
<option value="">Please select your favorite place</option>
<option value="acre">Acre</option>
<option value="amazonas">Amazonas</option>
<option value="bahia">Bahia</option>
<option value="belo-horizonte">Belo Horizonte</option>
<option value="maranhao">Maranhão</option>
<option value="piaui">Piauí</option>
<option value="porto-alegre">Porto Alegre</option>
<option value="recife">Recife</option>
<option value="rio-de-janeiro">Rio de Janeiro</option>
<option value="roraima">Roraima</option>
<option value="sao-paulo">São Paulo</option>
<option value="santa-catarina">Santa Catarina</option>
<option value="sergipe">Sergipe</option>
</select>
</form>
<div class="box">
<h2>What to include:</h2>
<h5>javascript</h5>
<p>This plugin need <a href="http://www.jquery.com">jQuery Library</a></p>
<pre class="sh_javascript"><script type="text/javascript" src="js/jquery.gtselect.js"></script></pre>
<br/>
<h5>css</h5>
<pre class="sh_javascript"><link rel="stylesheet" href="css/jquery.gtselect.css" type="text/css" media="screen" /></pre>
<br/>
<h5>html</h5>
<pre class="sh_html">
<select id="favorite_place" name="favorite_place">
<option value="">Please select your favorite place</option>
<option value="sao-paulo">São Paulo</option>
<option value="rio-de-janeiro">Rio de Janeiro</option>
<option value="recife">Recife</option>
<option value="porto-alegre">Porto Alegre</option>
<option value="salvador">Salvador</option>
</select></pre>
</div>
<div class="box">
<h2>How to use:</h2>
<pre class="sh_javascript">$('select').gtselect();</pre>
</div>
<div class="box">
<h2>Params:</h2>
<pre class="sh_javascript">
$('select').gtselect({
speed: 200, // speed dropdown list
width : 300, // width box select
height: null, // height box select
linkRedirect : false, // if true, redirect page using value of the selected option tag
effect : 'fade' // none, slide or fade
});
</pre>
<br/>
<p>If you want to disable the "select" after it has been applied, try</p>
<pre class="sh_javascript">
$('select').gtselect({
disabled : true // true or false
});
</pre>
</div>
<div class="box">
<h2>Download:</h2>
<p>Demo, js, css, images: <a href="https://github.com/gersonthiago/jquery.gtselect">https://github.com/gersonthiago/jquery.gtselect</a></p>
<p>Latest version: <a href="https://raw.github.com/gersonthiago/jquery.gtselect/master/js/jquery.gtselect.js">https://raw.github.com/gersonthiago/jquery.gtselect/master/js/jquery.gtselect.js</a></p>
<p>Packed version: <a href="https://raw.github.com/gersonthiago/jquery.gtselect/master/js/jquery.gtselect.pack.js">https://raw.github.com/gersonthiago/jquery.gtselect/master/js/jquery.gtselect.pack.js</a></p>
</div>
<p class="credits">Created by <a href="http://www.gersonthiago.com">Gerson Thiago</a> © 2012</p>
</section>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.7.1.min.js"><\/script>')</script>
<!-- syntax -->
<script type="text/javascript" src="js/syntax/sh_main.js"></script>
<script type="text/javascript" src="js/syntax/sh_html.js"></script>
<script type="text/javascript" src="js/syntax/sh_js.js"></script>
<script type="text/javascript" src="js/syntax/sh.js"></script>
<script type="text/javascript" src="js/jquery.gtselect.pack.js"></script>
<script type="text/javascript">
window.onload = function(){ sh_highlightDocument(); }
$(document).ready(function(){
$('select').gtselect({
speed : 300,
height : 100,
linkRedirect : false,
effect : 'none'
});
});
</script>
</body>
</html>