Browse files

Rewrite of Mark's plugin, replacing the externals with CDN links, upd…

…ating to 1.8 widget factory, integrating jQuery UI Autocomplete into the tokenlist widget and cleaning up various stuff
  • Loading branch information...
1 parent 0e04cf4 commit 4031aec0e7399a5fd77dedafb35873a884190b35 @jzaefferer committed Mar 28, 2010
View
6 Makefile
@@ -1,6 +0,0 @@
-PACKAGE = jquery.ui-tokenlist
-
-MODULES = \
- jquery.ui.tokenlist.js
-
-include build/rules.mk
View
6 README.md
@@ -0,0 +1,6 @@
+jQuery Tokenlist Plugin
+=====================
+
+A fork of [Mark Gibson's Tokenlist](http://github.com/jollytoad/jquery.ui-tokenlist).
+
+Uses jQuery UI for themeing and autocomplete.
1 build
@@ -1 +0,0 @@
-Subproject commit 114ea4bce5aa7013f33e7602bd7e896120b72bf3
View
3 demo/demo.css
@@ -1,3 +0,0 @@
-@import url("ui-css/ui.all.css");
-@import url("../css/ui.tokenlist.css");
-
View
79 demo/demo.html
@@ -1,79 +0,0 @@
-<!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" xml:lang="en" lang="en">
-<head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <title>Token List Demo</title>
-
- <link rel="stylesheet" href="demo.css" type="text/css" />
-
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="ui-src/jquery.ui.core.js"></script>
- <script type="text/javascript" src="ui-src/jquery.ui.position.js"></script>
- <script type="text/javascript" src="ui-src/jquery.ui.menu.js"></script>
- <script type="text/javascript" src="ui-src/jquery.ui.autocomplete.js"></script>
- <script type="text/javascript" src="../src/jquery.ui.tokenlist.js"></script>
- <script type="text/javascript" src="demo.js"></script>
-</head>
-<body>
- <h1>Token List Demo</h1>
-
- <p>Convert a plain text field into a facebook style list builder:</p>
-
- <button id="enhance">Enhance</button>
- <button id="toggle" disabled="disabled">Toggle Original Input</button>
-
- <hr/>
-
- <label for="test1">With Autocomplete:</label>
- <input id="test1" type="text" value="one, two, four" class="test autocomplete"/>
-
- <hr/>
-
- <label for="test2">Without:</label>
- <input id="test2" type="text" value="six, three, zero" class="test"/>
-
- <hr/>
-
- <label for="test3">Using a UL in the markup:</label>
- <ul id="test3" class="test autocomplete"></ul>
-
- <hr/>
-
- <label for="test4">Disabled:</label>
- <input id="test4" type="text" value="eight, ten, four, six, nine" class="test" disabled="disabled"/>
-
- <hr style="margin:1em 0;color:red"/>
-
- <div style="font-size:small">
- <p>Browser Compatibility Tests:</p>
- <dl>
- <dt>Linux - Ubuntu 8.10:</dt>
- <dd><ul>
- <li>Firefox 3.0.6 - ?</li>
- <li>Opera 9.63 - ?</li>
- <li>Konqueror 4.1.3 - ?</li>
- </ul></dd>
- <dt>Windows - XP sp3:</dt>
- <dd><ul>
- <li>IE 7 - ?</li>
- <li>IE 6 - ?</li>
- <li>Safari 3.1.2 - ?</li>
- <li>Chrome 1.0.154.48 - ?</li>
- </ul></dd>
- <dt>UserAgent:</dt>
- <dd><script type="text/javascript">document.write(window.navigator.userAgent);</script></dd>
- </dl>
- <p><a href="javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);">Firebug Lite</a></p>
- </div>
-
- <hr />
-
- <p>
- <a href="http://validator.w3.org/check?uri=referer"><img
- src="http://www.w3.org/Icons/valid-xhtml10"
- alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
- </p>
-</body>
-</html>
-
View
39 demo/demo.js
@@ -1,39 +0,0 @@
-jQuery(function($) {
-
- var data = ['one','two','three','four','five','six','seven','eight','nine','ten'];
-
- $('#enhance').one('click', function() {
- $('.test')
- // Convert the element to a token list
- .tokenlist({ validate: data })
-
- .filter('.autocomplete')
-
- .each(function() {
- var items = $(this).tokenlist('items');
-
- // Add the Autocomplete to the input field of the tokenlist
- $(this)
- .tokenlist('input')
- .autocomplete({
- source: function(request, response) {
- // escape regex characters
- var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
- return $.grep(data, function(value) {
- // also filter out existing items
- return matcher.test(value) && $.inArray(value, items) < 0;
- });
- },
- delay: 0,
- change: function() {
- $(this).trigger('change');
- }
- });
- });
-
- // Toggle the original input fields
- $('#toggle').attr('disabled', false).bind('click', function() {
- $('.test:text').toggle();
- });
- });
-});
View
28 demo/index.html
@@ -0,0 +1,28 @@
+<!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" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Token List Demo</title>
+ <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css" rel="stylesheet" />
+ <link rel="stylesheet" href="../jquery.tokenlist.css" type="text/css" />
+</head>
+<body>
+ <h1>Token List Demo</h1>
+
+ <p>Convert a plain text field into a facebook style list builder:</p>
+
+ <label for="test1">Numbers from one to ten please, no duplicates:</label>
+ <input id="test1" type="text" value="one, two, four" class="test"/>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
+ <script type="text/javascript" src="../jquery.tokenlist.js"></script>
+ <script type="text/javascript">
+ $('.test').tokenlist({
+ validate: ['one','two','three','four','five','six','seven','eight','nine','ten']
+ });
+ </script>
+</body>
+</html>
+
View
1 demo/jquery.js
View
1 demo/ui-css
View
1 demo/ui-src
View
1 external/jquery
View
1 external/jquery-ui
View
0 css/ui.tokenlist.css → jquery.tokenlist.css
File renamed without changes.
View
47 src/jquery.ui.tokenlist.js → jquery.tokenlist.js
@@ -1,17 +1,27 @@
/*!
- * jQuery UI Token List @VERSION
+ * jQuery Token List Plugin
*
- * Copyright (c) 2009 Adaptavist.com
+ * Copyright 2010 Jörn Zaefferer
* Dual licensed under the MIT and GPL licenses.
- */
-/* Depends:
- * ui.core.js
+ *
+ * Based on work by Mark Gibson (http://github.com/jollytoad/jquery.ui-tokenlist)
+ *
+ * Depends:
+ * jquery.ui.widget.js
*/
(function($) {
$.widget('ui.tokenlist', {
+
+ options: {
+ split: /\s*,\s*/,
+ join: ', ',
+ removeTip: "Remove Item",
+ duplicates: false,
+ validate: false // May be false, an array of allowed values, or a validation function
+ },
- _init: function() {
+ _create: function() {
var self = this, key = $.ui.keyCode;
if ( !this.options.items ) {
@@ -117,6 +127,14 @@ $.widget('ui.tokenlist', {
if (self.add($(this).val()).length) {
$(this).val('');
}
+ }).autocomplete({
+ source: this.options.validate,
+ delay: 0,
+ select: function() {
+ setTimeout(function() {
+ self.inputElem.trigger("change.tokenlist");
+ }, 13);
+ }
});
// Add the new item input field
@@ -259,19 +277,10 @@ $.widget('ui.tokenlist', {
.trigger('change');
}
this.element.trigger('change');
- }
-});
-
-$.extend($.ui.tokenlist, {
- getter: "add input items value",
- version: "@VERSION",
-
- defaults: {
- split: /\s*,\s*/,
- join: ', ',
- removeTip: "Remove Item",
- duplicates: false,
- validate: false // Maybe false, an array of allowed values, or a validation function
+ },
+
+ _getData: function(data) {
+ return this.options[data];
}
});
View
1 src/jquery.ui.autocomplete.js
View
1 src/jquery.ui.menu.js
View
1 version.txt
@@ -1 +0,0 @@
-0.2

0 comments on commit 4031aec

Please sign in to comment.