GitHub - alexwelch/taggify: A jquery plugin for tagging and sorting items on a single page.

alexwelch / taggify Public

Notifications You must be signed in to change notification settings
Fork 0
Star 4

A jquery plugin for tagging and sorting items on a single page.

alexwelch.com/taggify

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 26 Commits
README		README
demo.css		demo.css
example2.html		example2.html
index.html		index.html
jquery.taggify.js		jquery.taggify.js
jsunit_test.html		jsunit_test.html

Repository files navigation

Taggify jQuery Plugin
=====================

Use Taggify to tag items and generate a tag cloud without need for any server side code or database.

### Demo ###
	
http://alexwelch.com/taggify
	
### Features ###


### Usage ###

1. Get JQuery. In these examples, we use Google's AJAX Libraries API.
	- http://code.google.com/apis/ajaxlibs/
	- http://jquery.com/
	
2. include jQuery and jquery.taggify.js files in your template's <head>.
	<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="jquery.taggify.js" type="text/javascript"></script>
	
3. Also in <head>, Invoke the methods to find tags and generate the cloud
    <script type='text/javascript'>
        $(document).ready(function(){
			$('div#tags_go_here').taggify();
        });
    </script>

4. In <body> 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>

5. Also in <body> 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 within an element with the id "taggable_items" containing multiple elements with the class "taggable_item" containing a div with a class of "tags" containing an unordered list of tags
	- For example:
		<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 -->

6. Style it however you like.

### Customization ###
...

Visit http://alexwelch.com/taggify for more information