-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (222 loc) · 7.35 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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Taggify: jQuery client-side tagging</title>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.taggify.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// scrapes all lis that are tags and make them searchable, then makes those tags clickable
// $('#taggable_items .taggable_item .tags ul li').addTagClasses().makeTagLinks();
// generate tag cloud inside of the specified DOM element
$('div#tags_go_here').taggify();
});
</script>
</head>
<body>
<a href="http://github.com/alexwelch/taggify"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub" /></a>
<div id="wrap">
<h1>Taggify!</h1>
<h2>Demo</h2>
<div id="tag_cloud">
<div id="tags_go_here">
</div>
</div>
<div id="taggable_items">
<div class='taggable_item'>
<h3>Taggable Item 1</h3>
<div class='tags'>
<ul>
<li>Ruby on Rails</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div>
</div>
<div class='taggable_item'>
<h3>Taggable Item 2</h3>
<div class='tags'>
<ul>
<li>Another Tag</li>
<li>Safer Tag</li>
</ul>
</div>
</div>
<div class='taggable_item'>
<h3>Taggable Item 3</h3>
<div class='tags'>
<ul>
<li>Ruby on Rails</li>
<li>Mouse</li>
<li>google</li>
</ul>
</div>
</div>
<div class='taggable_item'>
<h3>Taggable Item 4</h3>
<div class='tags'>
<ul>
<li>Ruby on Rails</li>
</ul>
</div>
</div>
<div class='taggable_item'>
<h3>Taggable Item 5</h3>
<div class='tags'>
<ul>
<li>Ruby on Rails</li>
<li>Cat</li>
<li>Mouse</li>
</ul>
</div>
</div>
<div class='taggable_item'>
<h3>Taggable Item 6</h3>
<div class='tags'>
<ul>
<li>Another Tag</li>
<li>Safer Tag</li>
</ul>
</div>
</div>
<div class='taggable_item'>
<h3>Taggable Item 7</h3>
<div class='tags'>
<ul>
<li>Ruby on Rails</li>
<li>Bird</li>
<li>Dog</li>
<li>Giraffe</li>
</ul>
</div>
</div>
<div class='taggable_item'>
<h3>Taggable Item 8</h3>
<div class='tags'>
<ul>
<li>Ruby on Rails</li>
</ul>
</div>
</div>
<div class="force_break"></div>
</div>
<div id='usage'>
<h2>Usage</h2>
<ol>
<li>Get JQuery at <a href="http://jquery.com/" title="jQuery: The Write Less, Do More, JavaScript Library">jquery.com</a> or at <a href="http://code.google.com/apis/ajaxlibs/" title="Google AJAX Libraries API - Google Code">code.google.com</a> and <a href="http://github.com/alexwelch/taggify" title="alexwelch's taggify at master - GitHub">download Taggify</a></li>
<li>
Include jQuery and jquery.taggify.js files in your template's <code><head></code>.<br />
<pre>
<code>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="/js/jquery.taggify.js" type="text/javascript"></script>
</code>
</pre>
</li>
<li>
Also in <code><head></code>, Invoke the methods to find tags and generate the cloud <br />
<pre><code>
<script type='text/javascript'>
$(document).ready(function(){
$('div#tags_go_here').taggify();
});
</script>
</code></pre>
</li>
<li>In <code><body></code> make sure to create an element to place the tag-cloud into, in this case you would call it <div id="tags_go_here"></div></li>
<li>
Also in <code><body></code> create a list of taggable items for example a serious of divs or lis with that may be uniquely selected, the default assumption is a series of items with inside div with the id "taggable_items" containing multiple divs with the class "taggable_item" containing a div with a class of "tags" containing an unordered list of tags <br />
- For example:
<pre><code>
<div id="taggable_items">
<div class='taggable_item'>
<h3>Taggable Item 1</h3>
<div class='tags'>
<ul>
<li>Ruby on Rails</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div>
</div>
<div class='taggable_item'>
<h3>Taggable Item 2</h3>
<div class='tags'>
<ul>
<li>Another Tag</li>
<li>Safer Tag</li>
</ul>
</div>
</div>
</div> <!-- end #taggable_items -->
</code></pre>
</li>
<li>Style it however you like.</li>
</ol>
</div>
<div id="options">
<h2>Options</h2>
<table class='options'>
<thead>
<tr>
<th class='option'>option</th>
<th>default</th>
</tr>
</thead>
<tbody>
<tr>
<td>item_container_selector</td>
<td>'#taggable_items .taggable_item'</td>
</tr>
<tr>
<td>hidden_item_container_selector</td>
<td>'#taggable_items .hidden_taggable_item'</td>
</tr>
<tr>
<td>tags_container_selector</td>
<td>'#taggable_items .taggable_item .tags ul li'</td>
</tr>
<tr>
<td>hidden_item_class</td>
<td>'hidden_taggable_item'</td>
</tr>
<tr>
<td>current_class</td>
<td>'current'</td>
</tr>
<tr>
<td>fadeout_speed</td>
<td>'normal'</td>
</tr>
<tr>
<td>fadein_speed</td>
<td>'slow'</td>
</tr>
<tr>
<td>show_all_tag</td>
<td>true</td>
</tr>
<tr>
<td>show_all_tags_text</td>
<td>'All'</td>
</tr>
</tbody>
</table>
</div>
<div>
<p><a href='example2.html'>Example using options</a></p>
</div>
<div id="footer">
<h3>Credits, Sources, Inspiration</h3>
<ul>
<li><a href="http://jquery.com/" title="jQuery: The Write Less, Do More, JavaScript Library">jQuery of course</a></li>
<li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/" title="Creating a “Filterable” Portfolio with jQuery | Nettuts+">Creating a "Filterable" Portfolio with jQuery</a></li>
<li><a href="http://aleks.bochniak.net/postbox/mysource-matrix/how-to-make-a-tag-cloud" title="Aleks Bochniak writes... How to make a tag cloud">Aleks Bochniak's method for creating a tag cloud</a></li>
</ul>
</div>
</div> <!-- /wrap -->
</body>
</html>