Disclaimer: This widget and website is not affiliated with Yahoo in any way.
- 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
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.
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:
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:
Then suppose user entered "kittens" for the tag. Then the resulting URL, given the example above, would be:
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)
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.