Skip to content

Instantly share code, notes, and snippets.

@cgutierrez

cgutierrez/example.html

Created November 10, 2011 03:00
Show Gist options
  • Save cgutierrez/1353984 to your computer and use it in GitHub Desktop.
Save cgutierrez/1353984 to your computer and use it in GitHub Desktop.
Download ZIP
jquery.tagly example
Raw
example.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="tags"></div>
<script src="jquery.js"></script>
<script src="jquery.tagly.js"></script>
</body>
</html>
Raw
script.js
// initialize tagly with default options
$('#tags').tagly();
// initialize tagly with tags
$('#tags').tagly({ tags: ["Tag", "Tag 2", "Tag 3"] });
// populate tags after initialization
$('#tags').tagly("populate", ["Tag", "Tag 2", "Tag 3"]);
Raw
styles.css
#tags { border: 1px solid #ccc; padding: 10px; width: 500px; height: 100px; }
.tag-list { margin: 0px; padding: 0px; list-style: none; }
.tag-list li { display: inline-block; margin-right: 4px; margin-bottom: 12px; }
.tag-list input[type="text"] { border: 0px; width: 75px; font-size: 12px; outline: none; }
.tag-list .tag-label { background: #ccc; color: #444; padding: 5px; border-radius: 2px; }
.tag-list .tag-remove { margin-left: 10px; cursor: pointer; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment