First commit of Tag

gduverger · Dec 14, 2010 · 53662a0 · 53662a0
commit 53662a0
Show file tree

Hide file tree

Showing 16 changed files with 1,514 additions and 0 deletions.
diff --git a/README b/README
@@ -0,0 +1 @@
+Tags, The jQuery plugin to edit tags
diff --git a/demo/flickr.css b/demo/flickr.css
@@ -0,0 +1,98 @@
+html { background-color: #fff; }
+
+body {
+	font-family: Arial,Helvetica,sans-serif;
+	font-size: 12px;
+	line-height: 18px;
+	margin: 1.5em;
+}
+
+h4 {
+	font-weight: normal;
+	font-size: 14px;
+	border-bottom: 1px solid #EEEEEE;
+	color: #222222;
+	margin-bottom: 6px;
+	padding: 0 5px 6px;
+}
+
+a {
+	color: #0063DC;
+	text-decoration: none;
+}
+
+a:hover,
+.tags:hover a:hover {
+	background-color: #0063DC;
+	color: #FFFFFF;
+	text-decoration: none;
+}
+
+.tags li {
+	display: inline;
+	float: left;
+	margin-right: 9px;
+	min-height: 18px;
+	position: relative;
+	color: #999999;
+	font-size: 12px;
+	line-height: 18px;
+	list-style-type: none;
+	background: url("data:image/gif;base64,R0lGODlhBgAGALMAAOHh4YSEhJ6enuDg4MDAwJ2dnXp6evf393l5ef///wAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAGAAYAAAQQMMkpD5gnmCIHMsgkIAQ1RQA7") no-repeat scroll 100% 50% transparent;
+	padding-right: 13px;
+}
+
+.tags li.last {
+	background: none;
+	margin-right: 0;
+	padding-right: 0;
+}
+
+.tags a {
+	word-wrap: break-word;
+	color: #999999;
+	text-decoration: none;
+}
+
+.tags:hover a {
+	color: #0063DC;
+}
+
+.tags .edit-mode,
+.tags .add-mode {
+	padding-right: 0;
+	background: none;
+}
+
+.tags .add-mode {
+	margin: 0 0 0 9px;
+}
+
+.tags .delete-tag {
+	background: url("flickr.png") no-repeat scroll -1452px -12px transparent;	
+	background-position: -1455px -10px;
+	display: inline-block;
+	background-color: #FFFFFF !important;
+	height: 13px;
+	margin-left: 5px;
+	width: 8px;
+	z-index: 2;
+}
+
+.tags a.delete-tag:hover {
+	background-position: -1455px -50px;
+}
+
+.tags .delete-tag {
+	text-indent: -999em;
+	overflow: hidden;
+}
+
+.tags .add-tag {
+	margin-left: 8px;
+	color: #0063DC;
+}
+
+small {
+	font-size: 11px;
+}
diff --git a/demo/flickr.html b/demo/flickr.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+	<meta charset="utf-8">
+
+	<title>Flickr style demo of Tag</title>
+
+	<link href="../tag.ico" rel="shortcut icon">
+
+	<meta name="author" content="Georges Duverger">	
+	<meta name="description" content="Flickr style demo of Tag">
+	<meta name="keywords" content="flickr, style, demo, tag, jquery, plugin, edit, tags, tag cloud, tagcloud">
+
+	<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
+	<link rel="stylesheet" href="flickr.css">
+
+</head>
+<body>
+
+	<h4>
+		Tags
+		<small>
+			(<a class="edit-tags" href="">edit tags</a>)
+		</small>
+	</h4>
+
+	<ul class="tags">
+		<li><a href="">aggregators</a></li>
+		<li><a href="#">wikis</a></li>
+		<li><a href="#">folksonomy</a></li>
+		<li><a href="#">user centered</a></li>
+		<li><a href="#">joy of use</a></li>
+		<li><a href="#">blogs</a></li>
+		<li><a href="#">participation</a></li>
+		<li><a href="#">six degrees</a></li>
+		<li><a href="#">usability</a></li>
+		<li class="last"><a href="#">widgets</a></li>
+	</ul>
+
+	<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
+	<!-- http://html5boilerplate.com/ -->
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+	<script>!window.jQuery && document.write('<script src="jquery-1.4.2.min.js"><\/script>')</script>
+
+	<script src="../jquery.tag.js" type="text/javascript" charset="utf-8"></script>
+
+	<script>
+	$(document).ready(function() {
+		$(".tags").tag({
+			tagTemplate: "<li>",
+			editTagsSelector: ".edit-tags",
+			doneEditingElement: "<a href='#'>done editing</a>",
+			removeElement: "<a class='delete-tag' title='Delete this tag?' href='#'><span>[x]</span></a>",
+			saveTagCallback: function( tag ) { tag.valueElement.wrap("<a href='#'>"); $(".tags li").removeClass( "last" ); $(tag).addClass( "last" ); return true; },
+			removeTagCallback: function( tag ) { return true; }
+		});
+	});
+	</script>
+
+</body>
+</html>
diff --git a/demo/flickr.png b/demo/flickr.png
diff --git a/demo/hunch.css b/demo/hunch.css
@@ -0,0 +1,61 @@
+html { background-color: #fff; }
+
+body {
+	color: #333333;
+	font: 13px/18px helvetica,arial,hirakakupro-w3,osaka,"ms pgothic",sans-serif;
+	margin: 1.5em;
+}
+
+.header {
+	background:url("http://aka-img-1.h-img.com/media/css/base/sprite-v8.png") repeat-x scroll 0 -975px transparent;
+	height:18px;
+	padding-bottom:18px;
+	position:relative;
+	width:100%;
+}
+
+h3 {
+	margin-right:10px;
+	float:left;
+	font-size:15px;
+	font-weight:bold;
+}
+
+a {
+	-moz-border-radius:2px 2px 2px 2px;
+	background-repeat:no-repeat;
+	color:#1A6A96;
+	text-decoration:none;
+}
+
+a:hover {
+	background-color:#D1E1EA;
+	color:#004B73;
+}
+
+.tags a {
+	font-weight:bold;
+}
+
+.tag:after { content: ","; }
+.last:after, .add-mode:after { content: ""; }
+
+.tag { float: left; margin-right: .5em; line-height: 1.5em; }
+
+.edit-tags,
+.done-editing {
+	margin-left:10px;
+	float:right;
+	padding:0 5px;
+	display:inline-block;
+	margin:0 -3px;
+	padding:0 3px;
+	-moz-border-radius:2px 2px 2px 2px;
+	background-repeat:no-repeat;
+	color:#1A6A96;
+	text-decoration:none;
+}
+
+.remove-tag { background-color:#D1E1EA; color:#004B73; margin: 0 0 0 .1em; padding: 0 .25em; }
+.remove-tag:hover { background-color: #cc0000; color: #fff; }
+.add { margin-left: 4px !important; padding: 3px; }
diff --git a/demo/hunch.html b/demo/hunch.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+	<meta charset="utf-8">
+
+	<title>Hunch style demo of Tag</title>
+
+	<link href="../tag.ico" rel="shortcut icon">
+
+	<meta name="author" content="Georges Duverger">	
+	<meta name="description" content="Flickr style demo of Tag">
+	<meta name="keywords" content="hunch, style, demo, tag, jquery, plugin, edit, tags, tag cloud, tagcloud">
+
+	<link rel="stylesheet" href="http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css">
+	<link rel="stylesheet" href="hunch.css">
+
+</head>
+<body>
+
+	<div class="header">
+		<h3>Tags</h3>
+		<a href="#" class="edit-tags">Edit</a>
+	</div>
+
+	<div class="tags">
+		<span class="tag">aggregators</span>
+		<span class="tag"><a href="#">wikis</a></span>
+		<span class="tag"><a href="#">folksonomy</a></span>
+		<span class="tag">user centered</span>
+		<span class="tag">joy of use</span>
+		<span class="tag"><a href="#">blogs</a></span>
+		<span class="tag">participation</span>
+		<span class="tag">six degrees</span>
+		<span class="tag"><a href="#">usability</a></span>
+		<span class="tag last">widgets</span>
+	</div>
+
+	<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
+	<!-- http://html5boilerplate.com/ -->
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+	<script>!window.jQuery && document.write('<script src="jquery-1.4.2.min.js"><\/script>')</script>
+
+	<script src="../jquery.tag.js" type="text/javascript" charset="utf-8"></script>
+
+	<script>
+	$(document).ready(function() {
+		$(".tags").tag({
+			noDelete: true,
+			tagTemplate: "<span class='tag'>",
+			editTagsSelector: ".edit-tags",
+			doneEditingElement: "<a href='#' class='done-editing'>Done</a>",
+			removeElement: "<a href='#' class='remove-tag'>x</a>",
+			addElement: "<button class='add'>Add</button>",
+			saveTagCallback: function( tag ) { $(".last").removeClass("last"); $(".tag:last").addClass("last"); return true; },
+			removeTagCallback: function( tag ) { $(".last").removeClass("last"); $(".tag:last").addClass("last"); return true; }
+		});
+	});
+	</script>
+
+</body>
+</html>