mirror of
https://github.com/wahyd4/jQuery-Tags-Input.git
synced 2026-08-09 04:46:44 +10:00
146 lines
5.3 KiB
HTML
146 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
|
<title>Jquery-tags-input by xoxco</title>
|
|
|
|
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
<link rel="stylesheet" href="stylesheets/pygment_trac.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<div class="wrapper">
|
|
<header>
|
|
<h1>Jquery-tags-input</h1>
|
|
<p>Magically convert a simple text input into a cool tag list with this jQuery plugin.</p>
|
|
<p class="view"><a href="https://github.com/xoxco/jQuery-Tags-Input">View the Project on GitHub <small>xoxco/jQuery-Tags-Input</small></a></p>
|
|
<ul>
|
|
<li><a href="https://github.com/xoxco/jQuery-Tags-Input/zipball/master">Download <strong>ZIP File</strong></a></li>
|
|
<li><a href="https://github.com/xoxco/jQuery-Tags-Input/tarball/master">Download <strong>TAR Ball</strong></a></li>
|
|
<li><a href="https://github.com/xoxco/jQuery-Tags-Input">Fork On <strong>GitHub</strong></a></li>
|
|
</ul>
|
|
</header>
|
|
<section>
|
|
<h1>jQuery Tags Input Plugin</h1>
|
|
|
|
<p>Do you use tags to organize content on your site?
|
|
This plugin will turn your boring tag list into a
|
|
magical input that turns each tag into a style-able
|
|
object with its own delete link. The plugin handles
|
|
all the data - your form just sees a comma-delimited
|
|
list of tags!</p>
|
|
|
|
<p><a href="https://github.com/xoxco/jQuery-Tags-Input">Get it from Github</a></p>
|
|
|
|
<p><a href="http://xoxco.com/projects/code/tagsinput/">View Demo</a></p>
|
|
|
|
<p>Created by <a href="http://xoxco.com">XOXCO</a></p>
|
|
|
|
<h2>Instructions</h2>
|
|
|
|
<p>First, add the Javascript and CSS files to your </p> tag:
|
|
|
|
<pre><code><script src="jquery.tagsinput.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="jquery.tagsinput.css" />
|
|
</code></pre>
|
|
|
|
<p>Create a real input in your form that will contain a comma-separated list of
|
|
tags. You can put any default or existing tags in the value attribute, and
|
|
they'll be handled properly.</p>
|
|
|
|
<pre><code><input name="tags" id="tags" value="foo,bar,baz" />
|
|
</code></pre>
|
|
|
|
<p>Then, simply call the tagsInput function on any field that should be treated as
|
|
a list of tags.</p>
|
|
|
|
<pre><code>$('#tags').tagsInput();
|
|
</code></pre>
|
|
|
|
<p>If you want to use jQuery.autocomplete, you can pass in a parameter with the
|
|
autocomplete url.</p>
|
|
|
|
<pre><code>$('#tags').tagsInput({
|
|
autocomplete_url:'<a href="http://myserver.com/api/autocomplete">http://myserver.com/api/autocomplete</a>'
|
|
});
|
|
</code></pre>
|
|
|
|
<p>If you're using the bassistance jQuery.autocomplete, which takes extra
|
|
parameters, you can also send in options to the autocomplete plugin, as
|
|
described here.</p>
|
|
|
|
<pre><code>$('#tags').tagsInput({
|
|
autocomplete_url:'<a href="http://myserver.com/api/autocomplete">http://myserver.com/api/autocomplete</a>',
|
|
autocomplete:{selectFirst:true,width:'100px',autoFill:true}
|
|
});
|
|
</code></pre>
|
|
|
|
<p>You can add and remove tags by calling the addTag() and removeTag() functions.</p>
|
|
|
|
<pre><code>$('#tags').addTag('foo');
|
|
$('#tags').removeTag('bar');
|
|
</code></pre>
|
|
|
|
<p>You can import a list of tags using the importTags() function...</p>
|
|
|
|
<pre><code>$('#tags').importTags('foo,bar,baz');
|
|
</code></pre>
|
|
|
|
<p>You can also use importTags() to reset the tag list...</p>
|
|
|
|
<pre><code>$('#tags').importTags('');
|
|
</code></pre>
|
|
|
|
<p>And you can check if a tag exists using tagExist()...</p>
|
|
|
|
<pre><code>if ($('#tags').tagExist('foo')) { ... }
|
|
</code></pre>
|
|
|
|
<p>If additional functionality is required when a tag is added or removed, you may
|
|
specify callback functions via the onAddTag and onRemoveTag parameters. Both
|
|
functions should accept a single tag as the parameter.</p>
|
|
|
|
<p>If you do not want to provide a way to add tags, or you would prefer to provide
|
|
an alternate interface for adding tags to the box, you may pass an false into
|
|
the optional 'interactive' parameter. The tags will still be rendered as per
|
|
usual, and the addTag and removeTag functions will operate as expected. </p>
|
|
|
|
<p>If you want a function to be called every time a tag is updated/deleted, set it
|
|
as the 'onChange' option.</p>
|
|
|
|
<p>By default, if the cursor is immediately after a tag, hitting backspace will
|
|
delete that tag. If you want to override this, set the 'removeWithBackspace'
|
|
option to false.</p>
|
|
|
|
<h2>Options</h2>
|
|
|
|
<pre><code>$(selector).tagsInput({
|
|
'autocomplete_url': url_to_autocomplete_api,
|
|
'autocomplete': { option: value, option: value},
|
|
'height':'100px',
|
|
'width':'300px',
|
|
'interactive':true,
|
|
'defaultText':'add a tag',
|
|
'onAddTag':callback_function,
|
|
'onRemoveTag':callback_function,
|
|
'onChange' : callback_function,
|
|
'removeWithBackspace' : true,
|
|
'minChars' : 0,
|
|
'maxChars' : 0 //if not provided there is no limit,
|
|
'placeholderColor' : '#666666'
|
|
});
|
|
</code></pre>
|
|
</section>
|
|
<footer>
|
|
<p>This project is maintained by <a href="https://github.com/xoxco">xoxco</a></p>
|
|
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
|
|
</footer>
|
|
</div>
|
|
<script src="javascripts/scale.fix.js"></script>
|
|
|
|
</body>
|
|
</html> |