-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.php
More file actions
348 lines (313 loc) · 11.1 KB
/
index.php
File metadata and controls
348 lines (313 loc) · 11.1 KB
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<?php header('Cache-Control: no-cache, must-revalidate'); header('Content-type: text/html; charset=utf-8'); ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="description" content="glAutoTag - A simple, customizable, lightweight auto-tag calendar plugin for jQuery" />
<meta name="keywords" content="datepicker, auto-tag, calendar, date control, jQuery" />
<meta name="author" content="Gautam Lad" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>glAutoTag - A simple, customizable, lightweight auto-complete and tags plugin for jQuery</title>
<link href="site/css/screen.css" rel="stylesheet" type="text/css" />
<link href="site/css/syntaxhighlighter.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/stackoverflow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="#" class="site">
<div class="container">
<!-- BEGIN header -->
<div class="header">
<div class="title">glAutoTag</div>
<div class="menu">
<ul>
<li><a href="#download">download</a></li>
<li><a href="#usage">usage</a></li>
<li><a href="#examples">examples</a></li>
<li><a href="#about">about</a></li>
</ul>
</div>
</div>
<!-- END header -->
<!-- BEGIN about -->
<div class="content">
<div id="about" class="title">about</div>
<p>
<b>glAutoTag</b> is a simple, customizable, lightweight auto-complete and tags plugin for <a href="http://jquery.com" target="_blank">jQuery</a> weighing in just over <span class="special">3KB compressed</span> (9KB uncompressed).
<br/>
<img src="site/img/screenshot.png" width="575" height="335" alt="Example styles" />
<br/>
It includes the following features:
</p>
<ul class="features">
<li>use any character as delimiter</li>
<li>custom callback for performing lookup</li>
<li>individual styles per control (in case you have multiples on one page)</li>
</ul>
</div>
<!-- END about -->
<!-- BEGIN examples -->
<div class="content">
<div id="examples" class="title">examples</div>
<p>
Click on the text boxes to see examples of the control with the settings shown.
<br/>
For the examples that provide lookup, you can accept the selected word by pressing the <i>TAB</i> key.
</p>
<!-- BEGIN Example #1 -->
<div class="example-box">
<p>
<b><span class="example">Example #1</span>: Basic usage. No lookup.</b>
</p>
<input type="text" id="input1" class="glat" />
<pre class="brush:js">
// Basic auto-tag with default settings
$("#input1").glAutoTag();</pre>
</div>
<!-- END Example #1 -->
<!-- BEGIN Example #2 -->
<div class="example-box">
<p>
<b><span class="example">Example #2</span>: Use a custom styled (only for this control) with lookup</b>
</p>
<input type="text" id="input2" class="glat" />
<pre class="brush:js">
// Use a custom theme named stackoverflow. Get lookups from the server
$("#input2").glAutoTag(
{
cssName: "stackoverflow",
onLookup: function(tag, resultList)
{
doLookup("stackoverflow", tag, resultList);
}
});</pre>
</div>
<!-- END Example #2 -->
<!-- BEGIN Example #3 -->
<div class="example-box">
<p>
<b><span class="example">Example #3</span>: Using semi-colon as a delimiter with lookup</b>
</p>
<input type="text" id="input3" class="glat" />
<pre class="brush:js">
// Use a custom theme named stackoverflow. Get lookups from the server
$("#input3").glAutoTag(
{
delimiter: ";",
onLookup: function(tag, resultList)
{
doLookup("default", tag, resultList);
}
});</pre>
</div>
<!-- END Example #3 -->
<!-- BEGIN doLookup -->
<div class="example-box">
<p>
<b><span class="example">Lookup method</span>: Used by the above two lookup examples. Handles the results returned by the lookup and adds them to the result list.</b>
</p>
<pre class="brush:js">
// Perform lookup
function doLookup(mode, tag, resultList)
{
// Make an ajax post call
$.ajax(
{
url: "tags.php?mode=" + mode,
dataType: "json",
data: {"input" : tag},
type: "post",
success: function(json)
{
// Remove all items from results
resultList.children("li").remove();
// Make sure we have something
if(typeof json != "undefined" && json != null)
{
// Iterate through our results from the server
$.each(json, function(i, o)
{
// Add a <li> to our result and show the result box
// IMPORTANT: Make sure to save the raw value in data()
var li = $("<li/>").html(o.display).data("value", o.value)
resultList.append(li).parent().show();
console.log(li.outerHeight(true));
});
// Hide the list if nothing available
if(resultList.children("li").length == 0)
{
resultList.parent().hide();
}
else
{
// Set first item to selected
resultList.children("li:first").attr("class", "active");
}
}
}
});
}</pre>
</div>
<!-- END doLookup -->
</div>
<!-- END examples -->
<!-- BEGIN usage -->
<div class="content">
<div id="usage" class="title">usage</div>
<p>
Below are all the available settings that can be adjusted and public methods that can be called.
The values shown are the default setting values.
</p>
<pre class="brush:js">
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Settings
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
$("#input").glAutoTag(
{
// Name of the stylesheet to use.
// For example, if your css name is called doublerainbow
// then all all your css elements will need to be
// prefixed with .glat-doublerainbow in your stylesheet.
// Use the /css/default.css as a starting point.
cssName: "default",
// Delimiter used for separating tags.
cssName: " ",
// Delay (in ms) between keystrokes to wait before processing input
// Possible values: an integer greater than or equal to 0 (ms)
keyDelay: 100,
// A callback function called whenever the tag list is updated
// Possible values: a function with two arguments: target, tags
// For example:
// $("#input").glAutoTag(
// {
// onChange function(target, tags)
// {
// }
// });
onChange null,
// A callback function to call to perform lookup and handle results.
// Possible values: a function with two arguments: tag, and resultList
// For example:
// $("#input").glAutoTag(
// {
// onLookup: function(tag, resultList)
// {
// }
// });
onLookup: null
});
</div>
<!-- END usage -->
<!-- BEGIN download -->
<div class="content">
<div id="download" class="title">download - Coming soon!</div>
<ul>
<li><a href="site/download/glAutoTag-v1.0.zip">glAutoTag-v1.0.zip</a> - Released Feb 1, 2012</li>
</ul>
</div>
<!-- END download -->
<!-- BEGIN download -->
<div class="content">
<div id="clone" class="title">clone from github</div>
Clone the latest source directly from the <a href="https://github.com/glad/glAutoTag/">github</a> repository.
<pre class="brush:bash">$ git clone https://github.com/glad/glAutoTag.git</pre>
</div>
<!-- END download -->
<!-- BEGIN footer -->
<div class="footer">
<span class="copyright">Copyright © 2012 <a href="http://gautamlad.com/">Gautam Lad</a>. All rights reserved</span>
<span class="contact"><a href="mailto:email@gautamlad.com">contact</a></span>
</div>
<!-- BEGIN footer -->
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="site/js/XRegExp.js" type="text/javascript"></script>
<script src="site/js/shCore.js" type="text/javascript"></script>
<script src="site/js/shBrushJScript.js" type="text/javascript"></script>
<script src="site/js/shBrushBash.js" type="text/javascript"></script>
<script type="text/javascript" src="js/glAutoTag.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
SyntaxHighlighter.defaults["brush"] = "js";
SyntaxHighlighter.defaults["ruler"] = false;
SyntaxHighlighter.defaults["toolbar"] = false;
SyntaxHighlighter.defaults["gutter"] = false;
SyntaxHighlighter.all();
// Basic auto-tag with default settings
$("#input1").glAutoTag();
// Use a custom theme named stackoverflow and get lookup results from the server
$("#input2").glAutoTag(
{
cssName: "stackoverflow",
onLookup: function(tag, resultList)
{
doLookup("stackoverflow", tag, resultList);
}
});
// Use a semi-colon as delimiter and get lookup results from the server
$("#input3").glAutoTag(
{
delimiter: ";",
onLookup: function(tag, resultList)
{
doLookup("default", tag, resultList);
}
});
// Perform lookup
function doLookup(mode, tag, resultList)
{
// Make an ajax post call
$.ajax(
{
url: "tags.php?mode=" + mode,
dataType: "json",
data: {"input" : tag},
type: "post",
success: function(json)
{
// Remove all items from results
resultList.children("li").remove();
// Make sure we have something
if(typeof json != "undefined" && json != null)
{
// Iterate through our results from the server
$.each(json, function(i, o)
{
// Add a <li> to our result and show the result box
// IMPORTANT: Make sure to save the raw value in data()
var li = $("<li/>").html(o.display).data("value", o.value)
// Add item to list and show
resultList.append(li).parent().show();
// Adjust list box based on # of items
resultList.parent().height(li.outerHeight(true) * 5);
});
// Hide the list if nothing available
if(resultList.children("li").length == 0)
{
resultList.parent().hide();
}
else
{
// Set first item to selected
resultList.children("li:first").attr("class", "active");
}
}
}
});
}
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7701484-3']);
_gaq.push(['_setDomainName', '.gautamlad.com']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>