Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

More demo cleanup, adding a log to display the resulting value; imple…

…mentation changed to always work with a input element as the element (not a list); added support for sorting via sortable
  • Loading branch information...
commit 092fcc6ac57b07ee4d5424bddd021727f543ae72 1 parent df26e6d
@jzaefferer authored
Showing with 103 additions and 93 deletions.
  1. +18 −2 demo/index.html
  2. +85 −91 jquery.tokenlist.js
View
20 demo/index.html
@@ -5,7 +5,13 @@
<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" />
+ <link rel="stylesheet" href="../jquery.tokenlist.css" type="text/css" />
+ <style>
+ body {
+ font-family: "Trebuchet MS","Helvetica","Arial","Verdana", sans-serif;
+ font-size: 62.5%;
+ }
+ </style>
</head>
<body>
<h1>Token List Demo</h1>
@@ -15,12 +21,22 @@
<label for="test1">Numbers from one to ten please, no duplicates:</label>
<input id="test1" type="text" value="one, two, four" class="test"/>
+ <div>
+ Log
+ <div id="log" class="ui-widget ui-widget-content" style="width: 300px; border: 1px solid black; height: 300px; overflow: auto;">
+ </div>
+ </div>
+
<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']
+ validate: ['one','two','three','four','five','six','seven','eight','nine','ten'],
+ change: function() {
+ $("<div></div>").text("Value is now " + $(this).val()).appendTo("#log");
+
+ }
});
</script>
</body>
View
176 jquery.tokenlist.js
@@ -14,6 +14,7 @@
$.widget('ui.tokenlist', {
options: {
+ items: [],
split: /\s*,\s*/,
join: ', ',
removeTip: "Remove Item",
@@ -24,88 +25,89 @@ $.widget('ui.tokenlist', {
_create: function() {
var self = this, key = $.ui.keyCode;
- if ( !this.options.items ) {
- this.options.items = [];
- }
-
- if (this.element.is(':text')) {
- this.textElem = this.element;
-
- this.textElem
- // Hide the original field
- .hide()
- // Update our list if the original field is changed
- .bind('change.' + this.widgetName, function() {
- self.value(self.textElem.val(), true);
- });
-
- // Generate a list element to replace the original field
- this.element =
- $('<ul/>')
- .insertAfter(this.textElem)
- // Allow the widget to also be accessed via the generated element
- .data(this.widgetName, this);
- }
-
this.element
- .addClass(this.widgetBaseClass + ' ui-widget ui-widget-content ui-helper-clearfix')
-
- .bind('keydown.' + this.widgetName, function(ev) {
- var focus, disabled = self._getData('disabled');
-
- switch (ev.keyCode) {
- case key.LEFT:
- case key.UP:
- case key.BACKSPACE:
- focus = $(ev.target).closest('li').prev('li');
- break;
- case key.RIGHT:
- case key.DOWN:
- case key.DELETE:
- focus = $(ev.target).closest('li').next('li.'+self.widgetBaseClass+'-item');
- if (!focus.length && !disabled) {
- focus = self.inputElem;
- }
- break;
- case key.HOME:
- case key.PAGE_UP:
- focus = $(ev.target).closest('ul').find('>li:first');
- break;
- case key.END:
- case key.PAGE_DOWN:
+ // Hide the original field
+ .hide()
+ // Update our list if the original field is changed
+ .bind('change.' + this.widgetName, function() {
+ self.value(self.element.val(), true);
+ });
+
+ // Generate a list element to replace the original field
+ this.tokenlist =
+ $('<ul/>')
+ .insertAfter(this.element)
+ // Allow the widget to also be accessed via the generated element
+ .data(this.widgetName, this);
+
+ this.tokenlist
+ .addClass(this.widgetBaseClass + ' ui-widget ui-widget-content ui-helper-clearfix')
+ .bind('keydown.' + this.widgetName, function(ev) {
+ var focus, disabled = self._getData('disabled');
+
+ switch (ev.keyCode) {
+ case key.LEFT:
+ case key.UP:
+ case key.BACKSPACE:
+ focus = $(ev.target).closest('li').prev('li');
+ break;
+ case key.RIGHT:
+ case key.DOWN:
+ case key.DELETE:
+ focus = $(ev.target).closest('li').next('li.'+self.widgetBaseClass+'-item');
+ if (!focus.length && !disabled) {
focus = self.inputElem;
- break;
}
+ break;
+ case key.HOME:
+ case key.PAGE_UP:
+ focus = $(ev.target).closest('ul').find('>li:first');
+ break;
+ case key.END:
+ case key.PAGE_DOWN:
+ focus = self.inputElem;
+ break;
+ }
- switch (ev.keyCode) {
- case key.DELETE:
- case key.BACKSPACE:
- if (disabled) {
- focus = undefined;
- } else {
- self._removeItem(ev.target);
- }
- break;
+ switch (ev.keyCode) {
+ case key.DELETE:
+ case key.BACKSPACE:
+ if (disabled) {
+ focus = undefined;
+ } else {
+ self._removeItem(ev.target);
}
+ break;
+ }
- if (focus && focus.length) {
- focus[0].focus();
- ev.stopPropagation();
- ev.preventDefault();
- }
- })
+ if (focus && focus.length) {
+ focus[0].focus();
+ ev.stopPropagation();
+ ev.preventDefault();
+ }
+ })
- // Delete the item if the button is clicked
- .bind('click.' + this.widgetName, function(ev) {
- if (!self._getData('disabled')) {
- if ($(ev.target).is('.'+self.widgetBaseClass+'-remove')) {
- self._removeItem(ev.target);
- }
- if (this === ev.target) {
- self.inputElem[0].focus();
- }
+ // Delete the item if the button is clicked
+ .bind('click.' + this.widgetName, function(ev) {
+ if (!self._getData('disabled')) {
+ if ($(ev.target).is('.'+self.widgetBaseClass+'-remove')) {
+ self._removeItem(ev.target);
}
- });
+ if (this === ev.target) {
+ self.inputElem[0].focus();
+ }
+ }
+ });
+
+ if ($.fn.sortable) {
+ this.tokenlist.sortable({
+ stop: function() {
+ // update items based on list values
+ self.options.items = self.tokenlist.find(".ui-tokenlist-label").map(function() { return $(this).text(); }).get();
+ self._change();
+ }
+ });
+ }
this.inputElem =
$('<input type="text"/>')
@@ -139,18 +141,14 @@ $.widget('ui.tokenlist', {
// Add the new item input field
$('<li/>')
- .appendTo(this.element)
+ .appendTo(this.tokenlist)
.addClass(this.widgetBaseClass+'-input')
.append(this.inputElem);
- if (this.textElem) {
- this.value(this.textElem.val());
-
- if (this.textElem[0].disabled) {
- this.disable();
- }
- } else {
- this.add(this.items());
+ this.value(this.element.val());
+
+ if (this.element[0].disabled) {
+ this.disable();
}
},
@@ -172,7 +170,7 @@ $.widget('ui.tokenlist', {
empty: function() {
// Remove all existing items
- $('> li.'+this.widgetBaseClass+'-item', this.element).remove();
+ $('> li.'+this.widgetBaseClass+'-item', this.tokenlist).remove();
this.options.items = [];
return this;
},
@@ -230,7 +228,7 @@ $.widget('ui.tokenlist', {
},
_addItemElem: function(token) {
- var input = $('.'+this.widgetBaseClass+'-input', this.element),
+ var input = $('.'+this.widgetBaseClass+'-input', this.tokenlist),
label =
$('<span/>')
.addClass(this.widgetBaseClass+'-label')
@@ -271,12 +269,8 @@ $.widget('ui.tokenlist', {
},
_change: function() {
- if (this.textElem) {
- this.textElem
- .val(this._stringify(this.items()))
- .trigger('change');
- }
- this.element.trigger('change');
+ this.element.val(this._stringify(this.items()));
+ this._trigger('change');
},
_getData: function(data) {
Please sign in to comment.
Something went wrong with that request. Please try again.