topical media & game development
lib-jquery-plugin-tagcloud-index.htm / htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery TagCloud plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="jquery, jquery plugin, tags, tagging, jquery tags" />
<meta name="description" content="jQuery TagCloud plugin manage tags easily." />
<link rel="stylesheet" href="lib-jquery-plugin-tagcloud-css-jquery.tagcloud.css" type="text/css" />
<script type="text/javascript" src="lib-jquery-plugin-tagcloud-js-jquery.js"></script>
<script type="text/javascript" src="lib-jquery-plugin-tagcloud-js-jquery.tagcloud.js"></script>
<script type="text/javascript">
$(function(){
//For example #1
$('#newtag1').attr('autocomplete', 'off');
$('#btnTagAdd1').click(function(){
$('#newtag1').addtag({
holder_id : 'tagchecklist1',
prefix: 't1'
});
$('#newtag1').val('');
});
$('#newtag1').keydown(function(event){
if (.isenter({
event: event
})) {
$('#newtag1').addtag({
holder_id: 'tagchecklist1',
prefix: 't1'
});
$('#newtag1').val('');
return false;
}
});
//For example #2
$('#newtag2').attr('autocomplete', 'off');
$('#btnTagAdd2').click(function(){
$('#newtag2').addtag({
holder_id : 'tagchecklist2',
prefix: 't2'
});
$('#newtag2').val('');
});
$('#newtag2').keydown(function(event){
if (.isenter({
event: event
})) {
$('#newtag2').addtag({
holder_id: 'tagchecklist2',
prefix: 't2'
});
$('#newtag2').val('');
return false;
}
});
$('a.delbutton').click(function(){
this.removetag({id : 'spant2_' + this.attr('rev'), holder_id : 'tagchecklist2'});
});
});
</script>
<style type="text/css">
pre{
background-color: #E4E4E4;
border: solid 1px #999999;
padding: 5px;
}
</style>
</head>
<body>
<h2>jQuery TagCloud plugin</h2>
<h3>Description</h3>
<p>jQuery TagCloud plugin manage tags easily. Use in your CMS, comment forms or etc.</p>
<h3>What do you need?</h3>
<pre><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tagcloud.js"></script>
<link type="text/css" rel="stylesheet" href="css/jquery.tagcloud.css" /></pre>
<h3>Example 1</h3>
<pre><script type="text/javascript">
$(function(){
$('#btnTagAdd1').click(function(){
$('#newtag1').addtag({
holder_id : 'tagchecklist1',
prefix: 't1'
});
$('#newtag1').val('');
});
$('#newtag1').keydown(function(event){
if (.isenter({
event: event
})) {
$('#newtag1').addtag({
holder_id: 'tagchecklist1',
prefix: 't1'
});
$('#newtag1').val('');
return false;
}
});
});
</script></pre>
<form action="index.html" method="get" style="border: solid 1px #999999; padding: 5px 10px; overflow: hidden">
<label for="newtag1">Please type a few tags below. Use comma (,) to separate keywords.</label><br />
<input type="text" name="newtag1" id="newtag1" />
<button type="button" id="btnTagAdd1">Add Tag</button>
<div id="tagchecklist1" class="tagchecklist">
<strong>Current tags:</strong>
<br />
</div>
</form>
<div style="clear:left"></div>
<h3>Example 2</h3>
<pre><script type="text/javascript">
$(function(){
$('#btnTagAdd2').click(function(){
$('#newtag2').addtag({
holder_id : 'tagchecklist2',
prefix: 't2'
});
$('#newtag2').val('');
});
$('#newtag2').keydown(function(event){
if (.isenter({
event: event
})) {
$('#newtag2').addtag({
holder_id: 'tagchecklist2',
prefix: 't2'
});
$('#newtag2').val('');
return false;
}
});
$('a.delbutton').click(function(){
this.removetag({id : 'spant2_' + this.attr('rev'), holder_id : 'tagchecklist'});
});
});
</script></pre>
<form action="index.html" method="get" style="border: solid 1px #999999; padding: 5px 10px; overflow: hidden">
<label for="newtag2">Please type a few tags below. Use comma (,) to separate keywords.</label><br />
<input type="text" name="newtag2" id="newtag2" />
<button type="button" id="btnTagAdd2">Add Tag</button>
<div id="tagchecklist2" class="tagchecklist">
<strong>Current tags:</strong>
<br />
<span class="tagz" id="spant2_1">
<a class="delbutton" id="tag_1" rev="1">X</a>
<input type="hidden" name="tags_t2[]" value="jQuery Plugin" />
<input type="hidden" name="slugs_t2[]" value="jquery-plugin" />
jQuery Plugin
</span>
<span class="tagz" id="spant2_2">
<a class="delbutton" id="tag_2" rev="2">X</a>
<input type="hidden" name="tags_t2[]" value="SEO Conference 2009" />
<input type="hidden" name="slugs_t2[]" value="seo-conference-2009" />
SEO Conference 2009
</span>
</div>
</form>
<div style="clear:left"></div>
<h3>Download</h3>
<p><a href="TagCloud.1.0.zip">jQuery TagCloud 1.0</a></p>
<h3>Licenses</h3>
<p>jQuery TagCloud plugin is currently available for use in all personal or commercial projects under both <a href="mit.txt" target="_blank">MIT</a> and <a href="gpl.txt" target="_blank">GPL</a> licenses.
This means that you can choose the license that best suits your project, and use it accordingly.</p>
<h3>Contacts</h3>
<p>Dimitar Ivanov<br />
<a href="mailto:info@bulgaria-web-developers.com">;info@bulgaria-web-developers.com</a><br />
<a href="http://www.bulgaria-web-developers.com/en/home">www.bulgaria-web-developers.com</a><br />
<a href="http://www.bulgaria-web-developers.com/blog">www.bulgaria-web-developers.com/blog</a></p>
<h3>Links</h3>
<a href="http://digg.com/submit?phase=2&url=http://www.bulgaria-web-developers.com/projects/javascript/tagcloud/" target="_blank" rel="nofollow">Add to Digg</a> |
<a href="http://del.icio.us/post?url=http://www.bulgaria-web-developers.com/projects/javascript/tagcloud/&title=jQuery TagCloud plugin" target="_blank" rel="nofollow">Add to Del.icio.us</a>
</body>
</html>
(C) Æliens
20/2/2008
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
