ShowCase jQuery - TagWidget

TagWidget CSS

This example explains how the css is applied to the TagWidget

buttonLabel <span class="ui-icon ui-icon-triangle-1-s"/>

</button>

</div>

<ul>

tagLabel

</li>

...

</ul>

</div>

<ul>

actionLabel

</li>

...

</ul>

</div>

tagLabel

actionLabel

tagWidget

$(testid).tagWidget(tags, actions, { options });

actions

actions is a set of Objects defined like this:

id : action id
label : action label
defaultAction : (boolean) if true then when an element is checked/unchecked, the callback is executed
callback : (function) function to be executed when the action is executed; parameter passed: currentTagWidget

var actionNewTag = { 'id': "NewTag",

'label': "New Tag",

'defaultAction': false,

'callback': function(currentTagWidget){

alert('NewLabel');

}

};

var actions = { 'NewTag' : actionNewTag };

options

buttonLabel is the label of the button to be displayed.
multiSelect (boolean) if true then multiple tags can be selected else only one tag can be selected

var options = { 'buttonLabel': "Tag an element",

'multiSelect': true,

...

};

Hereby, a list of interesting methods that can be used in the callback function of an action.

$tagWidget.getAllTags() returns all tagElements
$tagWidget.getAllVisibleTags() returns all visible tagElements
$tagWidget.getAllCheckedTags() returns all checked tagElements
$tagWidget.addTagElement(id, text, isChecked) adds a tagElement to the widget
$tagWidget.removeTagElement(tagId) removes the tagElement with the id tagId from the widget
$tagWidget.checkTagElement(el) checks tagElement el
$tagWidget.uncheckTagElement(el) unchecks tagElement el
$tagWidget.closePopup() closes the tagPopup
$tagWidget.openPopup() opens the tagPopup
$tagWidget.addAction(action) adds an action to the widget
$tagWidget.removeAction(actionId) removes the action with id actionId from the widget
$tagWidget.showAction(actionId) shows the action with id actionId
$tagWidget.hideAction(actionId) hides the action with id actionId

Travel Experience

Countries I've been to:

Countries I'd like to travel to:

Color Preference

Favourite color:

Second choice:

jQuery.TagWidget

Example CSS Parameters Object Methods

TagWidget CSS

tagWidget

tags

actions

options

Travel Experience

Color Preference