#tagify

If you are a game developer using Unity Engine this asset might be for you.

Over some time I am working on my game project. If you are familiar with Unity you may know that the internal tag system is let's say a bit simple. As I wanted more and I was not satisfied with the existing solutions I decided to create something on my own.

With Tagify you can assign multiple tags per game object, reorder tags on the list, use color badges for easy tag identification and many more.

I've been meaning to learn more about jQuery UI Widget for a while, so I've written a jQuery plugin using UI Widget called Tagify. You can use Tagify to transform any input field into a nice stylized box for entering tags. Tagify has full support for being used in conjunction with jQuery UI Autocomplete plugin.

Entering tags now looks like this, just by calling $(".textbox").tagify();

What I really liked about using jQuery UI Widget was cutting out boiler plate code, like setting options, maintaining chainability, and most of all, namespacing my plugin methods, of which Tagify has many. E.g. instead of adding additional methods like this:

$(".textbox").addTag("new tag"); $(".textbox").removeTag();  $(".textbox").serializeTags();

You call Tagify methods like this:

$(".textbox").tagify("add", "new tag"); $(".textbox").tagify("remove"); $(".textbox").tagify("serialize");

Much cleaner, and doesn't pollute the namespace.

Using jQuery UI Widget 

Creating a Widget Class

Using jQuery UI Widget to write your own plugin is fairly straight-forward. I assume you already know how to write a basic jQuery plugin, and of course you need to include the latest jQuery UI.

You call the jQuery UI Widget factory method to create your widget class:

$.widget("ui.<your widget name>", { // default options options: { option: "some option" }, _create: function() { // set up code }, destroy: function() { $.Widget.prototype.destroy.apply(this); // remove added stuff, clean up } });

You need to include a namespace, in this case "ui" with your widget name, but you call your widget just by the widget name.

Options and Defaults

To provide default options, simply include them inside options. E.g. Tagify has defaults for which characters mark the end of a tag: [enter] and [comma], and the delimiter to use for the original input field: [comma], etc. You can access the options in your methods through this.options.

To override the defaults, users can call your widget with options. For example:

$(".textbox").tagify( { outputDelimiter: '|' } )

will parse and output tags with | as the delimiter instead of commas.

Widget Methods

A widget has several overridable methods, notably _create, which is called when the widget is first called, and destroy. Note that any methods starting with _ are private. You can't call $(".textbox").tagify("_create") directly. But you can call $(".textbox").tagify("destroy") to remove the box for creating tags.

You can create whatever private and public methods you need to. Some public methods you may want to implement are value and length.

Storing Data

You can store arbitrary data inside your widget by attaching it to the widget using the this keyword. In Tagify, I use an array to store the tags, which I create in my _create methis.tags = [];. Just be sure to assign this to something else, if you need access when scope changes. I use 

var self = this; // now do something with self.tags

Conclusion

jQuery UI Widget provides many pleasantries when writing a plugin. I plan to use it more for writing plugins especially when it comes to DOM manipulation. If you have any suggestions, do let me know.