Javascript YUI Tag Control

The Tags control provides a front end component that can be used on websites to manage the entry of and editing of tags. This widget is based upon the Yahoo UI Widgets Javascript framework, a set of free and open source Javascript libraries that make creating Ajax applications very easy.

Disclaimer: This widget and website is not affiliated with Yahoo in any way.

Quick Links:

  • License: The Tags Widget is licensed under the same terms as the YUI Library, which is issued under a BSD license.
  • Download: Download the Tags Widget.
  • Prerequisites: Download YUI as part of the full YUI Library on SourceForge.
  • Documentation: View the full API documentation for the Tag Widget

RSSSubscribe to Updates and Comments about this Project

Live Demo



Getting Started

To use the Tags widget/component, include the following source files in your web page with the script tag:

Your Tags Widget implementation will consist of one instantiatiable object:

  • TagsWidget - when bound to an HTML div, this object will render and handle all user interface interactions. It also provides several events that one can subscribe to in order to handle specific key events.

Instantiating the Tags Widget

The Tags Widget constructor has one required parameter:

  • the ID of the HTML object to which the widget will be bound and rendered.

Using Tags Widget

Adding Tags

One can manually add tags to the list of tags by making calls to the addTag() function. This is especially useful for initializing the widget with a set of tags prior to rendering the widget or page. The code sample below shows how to initialize a Tag Widget with three tags 'foo,' 'bar' and 'baz.'

Changing the Links for Tags

The Tag Widget builds a list of tags. Each of those tags is capable of being a link to some user-specified URL. The URL can be customized via the TAG_LINK_FORMAT property. The complete URL will be formed by appending the tag name to the end of this property. For example, suppose an intranet wanted to link all tags on the site to some internal URL such as:

http://intranet.somedomain.com/?p=2&q=tag+goes+here&limit=10

Then you would ensure that query string parameters are ordered properly such that the "tag" is the last parameter in the query string. For example:

http://intranet.somedomain.com/?p=2&limit=10&q=tag+goes+here

Then suppose user entered "kittens" for the tag. Then the resulting URL, given the example above, would be:

http://intranet.somedomain.com/?p=2&limit=10&q=kittens

For example:

Subscribing to Add and Delete Events

The Tag Widget has two custom events: one for handling the addition of tags to the list, and the second for removing tags from the list. These events can listened for and then in response make calls to user specified functions (or "callbacks"). The code sample below illustrates how one would subscribe to both add and delete tag events.

Customizing the display

The following properties allow users to control aspects of the Tag Widget's appearance.

  • TagList.DELETE_HTML - This is the HTML that will be wrapped by the "delete tag" link. This can be used to specify an image to be used, or text to be used.
  • TagWidget.LINK_LABEL - This property contains the text that will be wrapped by the link that shows and hides the Add Form. Default value is "Add Tags".
  • TagWidget.LIST_LABEL - This is the text that appears immediately in front of the list of tags. Default is "Tags:".
  • TagWidget.FORM_LABEL - This is the text that appears immediately in front of the Add Form's text input field. Default is "Add Tag(s):".
  • TagWidget.ALWAYS_SHOW_FORM - Some may not wish to hide the Add Form (the tag text input, and the "Add" and "Done" buttons. To ensure that there are always visible, set this property to 1. (Default is 0)

Support

If you have questions or problems using this widget/code, please visit the majordojo discussion forums.

For questions and issues with using the Yahoo UI Framework, please visit Yahoo's developer web site.

13 Comments

I have been looking for a js tagging system for my basic blog posts?! is this what i am looking for?

@Ben - this is just a UI control. It does not have a backend for storing tags at all. This simply is a means of collecting a list of tags from a user. So you tell me, is this what you are looking for? :)

Hello.. this has nothing to do with your script but i was wandering if you know why, when i click on a submit button in a form that is using frames the php page that does the work with the submitted form, doesn't open. Instead i get a download window for the php page... If i put the php script inside the body of the html the page views the php code as if it was text in the html body.. the frames are downloaded from milonic. I thought maybe there is a tag that solves my problem.. maybe you can help

Hello, Is there any way that the script used to create a new widget can be separated from the html doc and included directly into the Javascript doc instead? I tried creating a new tag widget in the Javascript file but it does not seem to work.

This looks very good and well made. nice text, Thank you very much.

Hello, Is there any way that the script used to create a new widget can be separated from the html doc and included directly into the Javascript doc instead? I tried creating a new tag widget in the Javascript file but it does not seem to work.

I am not sure what you are trying to accomplish. Can you post your sample code to pastie.org or something so I can see?

But if I were to guess - don't edit the raw source files. Include them, then add you own javascript file with just the declarations for you tag widget in it.

I expect I'm doing something silly but ...

The link above to the "majordojo discussion forums" gives me a 404, where I was going to ask ...

The tag widget creates an empty span of class del-tag that is bound to a click event, but there is nothing on screen to let me click to delete a tag. I see gif files and stuff in the css file but nothing appears on screen. (V1.2)

Otherwise, it works well!

Cheers, Dave

My problem with the delete tag was finger trouble. Sorry for the noise. The 404 is still there.

I have been looking for a js tagging system for my basic blog posts?! is this what i am looking for?

Very useful information for me.Thanks indeed.

Leave a comment

what will you say?


Monthly Archives

Recent Comments

  • Very useful information for me.Thanks indeed. ...

  • Looks fine! ...

  • I have been looking for a js tagging system for my basic blog posts?! is this what i am looking for? ...

  • My problem with the delete tag was finger trouble. Sorry for the noise. The 404 is still there. ...

  • I expect I'm doing something silly but ... The link above to the "majordojo discussion forums" gives me a 404, where I was going to ask ... The tag widget creates an empty span of class del-tag that is bound to a click...

Close