jQuery TagCloud API

Name Type Default

alterTextCase String 'none'

Sets or gets the alterTextCase property used to specify the field by which tags should be sorted.
Possible values are 'none', 'allLower', 'allUpper', 'firstUpper', 'titleCase'

Set the alterTextCase property.

$('#jqxTagCloud').jqxTagCloud({ alterTextCase: 'firstUpper' });

Get the alterTextCase property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'alterTextCase' });

Try it: alterTextCase is set to 'titleCase'

disabled Boolean false

Enables or disables the ability to follow tag links in jqxTagCloud.

Code examples

Set the disabled property.

$('#jqxTagCloud').jqxTagCloud({ disabled: false });

Get the disabled property.

var disabled = $('#jqxTagCloud').jqxTagCloud('disabled');

Try it: disabled is set to true

displayLimit Integer null

Sets or gets the displayLimit property used to filter highest values tags up to the number specified.

Set the displayLimit property.

$('#jqxTagCloud').jqxTagCloud({ displayLimit: 10 });

Get the displayLimit property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'displayLimit' });

Try it: displayLimit is set to 3

displayMember String 'label'

Sets or gets the field name used for the tag label.

Code examples

Set the displayMember property.

$('#jqxTagCloud').jqxTagCloud({ displayMember: 'tagLabel' });

Get the displayMember property.

var displayMember = $('#jqxTagCloud').jqxTagCloud('displayMember');

Try it: displayMember is set to 'name'

displayValue Boolean false

Sets or gets the displayValue property used to specify whether to add the tag value field after the text.

Set the displayValue property.

$('#jqxTagCloud').jqxTagCloud({ displayValue: true });

Get the displayValue property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'displayValue' });

Try it: displayValue is set to true

fontSizeUnit String 'px'

Sets or gets the fontSizeUnit property used to set the font size unit possible values 'px', 'em', '%'

Set the fontSizeUnit property.

$('#jqxTagCloud').jqxTagCloud({ fontSizeUnit: 'em' });

Get the fontSizeUnit property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'fontSizeUnit' });

Try it: fontSizeUnit is set to 'em'

height Number/String null

Sets or gets the jqxTagCloud's height.

Code examples

Set the height property.

$('#jqxTagCloud').jqxTagCloud({ height: 35 });

Get the height property.

var height = $('#jqxTagCloud').jqxTagCloud('height');

Try it: height is set to 50

maxColor Color String null

Sets or gets the maxColor property used to specify color of the tags for the elements with highest value attribute.
Together with minColor property will set color of tags in a gradient fashion depending on their value attribute towards the highest value.
Possible values: all browser supported colors including rgba.

Set the maxColor property.

$('#jqxTagCloud').jqxTagCloud({ maxColor: 'red' });

Get the maxColor property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'maxColor' });

Try it: maxColor is set to 'darkgreen'

maxFontSize Integer 24

Sets or gets the maxFontSize property used to set the font size of the tags with the highest value attribute.

Set the maxFontSize property.

$('#jqxTagCloud').jqxTagCloud({ maxFontSize: 30 });

Get the maxFontSize property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'maxFontSize' });

Try it: maxFontSize is set to 5

maxValueToDisplay Integer 0

Sets or gets the maxValueToDisplay property used to filter tags with value higher than the specified.

Set the maxValueToDisplay property.

$('#jqxTagCloud').jqxTagCloud({ maxValueToDisplay: 10 });

Get the maxValueToDisplay property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'maxValueToDisplay' });

Try it: maxValueToDisplay is set to 50

minColor Color String null

Sets or gets the minColor property used to specify color of the tags for the elements with lowest value attribute.
Together with maxColor property will set color of tags in a gradient fashion depending on their value attribute towards the highest value.
Possible values: all browser supported colors including rgba.

Set the minColor property.

$('#jqxTagCloud').jqxTagCloud({ minColor: 'green' });

Get the minColor property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'minColor' });

Try it: minColor is set to 'lime'

minFontSize Integer 10

Sets or gets the minFontSize property used to set the font size of the tags with the lowest value attribute.

Set the minFontSize property.

$('#jqxTagCloud').jqxTagCloud({ minFontSize: 10 });

Get the minFontSize property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'minFontSize' });

Try it: minFontSize is set to 1

minValueToDisplay Integer 0

Sets or gets the minValueToDisplay property used to filter tags with value lower than the specified.

Set the minValueToDisplay property.

$('#jqxTagCloud').jqxTagCloud({ minValueToDisplay: 10 });

Get the minValueToDisplay property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'minValueToDisplay' });

Try it: minValueToDisplay is set to 30

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxTagCloud').jqxTagCloud({ rtl : true });

Get the rtl property.

var rtl = $('#jqxTagCloud').jqxTagCloud('rtl');

Try it: rtl is set to true

sortBy String 'none'

Sets or gets the sortBy property used to specify the field by which tags should be sorted.
Possible values are 'none', 'label', 'value'

Set the sortBy property.

$('#jqxTagCloud').jqxTagCloud({ sortBy: 'value' });

Get the sortBy property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'sortBy' });

Try it: sortBy is set to 'label'

sortOrder String 'ascending'

Sets or gets the sortOrder property used to specify the direction in which tags should be sorted.
Possible values are 'ascending', 'descending'

Set the sortOrder property.

$('#jqxTagCloud').jqxTagCloud({ sortOrder: 'descending' });

Get the sortOrder property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'sortOrder' });

Try it: sortOrder is set to 'descending'

source Object {}

tagRenderer function null

A callback function used for custom tags rendering.

function tagRenderer (itemData, minValue, valueRange)

itemData - the record information of the current tag

minValue - the lowest value attribute of all elements in the cloud

valueRange - the difference between the lowest and highest value attributes in the cloud ( can be used for custom logic )

The function must return valid content for an anchor tag, usually a string but can be also be a jquery element object.

Set the tagRenderer callback function.

$('#jqxTagCloud').jqxTagCloud({ tagRenderer: function () {
                        var el = $('' + record.countryName + '');
                        var img = $('');
                        img.on('click', function (event) {
                        var id = $(event.target).closest('li').index();
                        var index = $('#tagCloud').jqxTagCloud('getRenderedTags')[id].index;
                        $('#tagCloud').jqxTagCloud('removeAt', index);
                        event.preventDefault();
                        event.stopPropagation();
                        });
                        el.append(img);
                        return el;
                        }
                        });

Try it: Use a custom tagRenderer function

takeTopWeightedItems Boolean false

Sets or gets the takeTopWeightedItems property. Property indicates if displayLimit will prioritize highest value members

Set the takeTopWeightedItems property.

$('#jqxTagCloud').jqxTagCloud({ takeTopWeightedItems: true });

Get the takeTopWeightedItems property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'takeTopWeightedItems' });

Try it: takeTopWeightedItems is set to 'true'

textColor Color String null

Sets or gets the textColor property used to specify color of the tags in the case where the minColor and maxColor properties are not set.
Possible values: all browser supported colors including rgba.

Set the textColor property.

$('#jqxTagCloud').jqxTagCloud({ textColor: 'red' });

Get the textColor property.

var value = $('#jqxTagCloud').jqxTagCloud({ 'textColor' });

Try it: textColor is set to 'red'

urlBase String ''

Sets or gets the field name used for common base URL path for all tags.

Code examples

Set the urlBase property.

$('#jqxTagCloud').jqxTagCloud({ urlBase: 'http://wikipedia.com/' });

Get the urlBase property.

var urlBase = $('#jqxTagCloud').jqxTagCloud('urlBase');

Try it: urlBase is set to 'http://jqwidgets.com/'

urlMember String 'url'

Sets or gets the field name used by the anchor element.

Code examples

Set the urlMember property.

$('#jqxTagCloud').jqxTagCloud({ urlMember: 'tagHref' });

Get the urlMember property.

var urlMember = $('#jqxTagCloud').jqxTagCloud('urlMember');

Try it: urlMember is set to "url"

valueMember String 'value'

Sets or gets the field name used for value/weight.

Code examples

Set the valueMember property.

$('#jqxTagCloud').jqxTagCloud({ valueMember: 'postCount' });

Get the valueMember property.

var valueMember = $('#jqxTagCloud').jqxTagCloud('valueMember');

Try it: valueMember is set to 'rating'

width Number/String null

Sets or gets the jqxTagCloud's width.

Code examples

Set the width property.

$('#jqxTagCloud').jqxTagCloud({ width: '200px' });

Get the width property.

var width = $('#jqxTagCloud').jqxTagCloud('width');

Try it: width is set to 600

bindingComplete Event

This event is triggered when the widget has completed binding to a dataAdapter.

Code examples

Bind to the bindingComplete event.

 $('#jqxTagCloud').on('bindingComplete', function (event) { // Some code here. });

Try it: Bind to the bindingComplete event

itemClick Event

This event is triggered when a tag element is clicked. Event Arguments:

label - item's label.
value - item's value.
url - item's url.
visibleIndex - item's visible index.
index - item's index.
originalEvent - the Click event object.
target - item's html element.

Code examples

Bind to the itemClick event.

 $('#jqxTagCloud').on('itemClick', function (event) { var args = event.args; });

Try it: Bind to the itemClick event

destroy Method

Calls the widget's destroy function.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxTagCloud').jqxTagCloud('destroy');

Try it: destroy widget

findTagIndex Method

Returns the index of the first tag with the specified label (displayMember).

Parameter	Type	Description
tag	String

Return Value
Number

Code examples

Get index of a tag with label 'USA' with findTagIndex method.

var index = $('#jqxTagCloud').jqxTagCloud('findTagIndex', 'USA');

Try it: Get tagIndex by label

getHiddenTagsList Method

Returns an array with indices of all hidden tags.

Parameter	Type	Description
None

Return Value
Array

Code examples

Get hidden indices with getHiddenTagsList method.

var hidden = $('#jqxTagCloud').jqxTagCloud('getHiddenTagsList');

Try it: Get hidden list

getRenderedTags Method

Returns an array with a copy of all tags that have been rendered in the order that they have been rendered.
This array excludes filtered values. But includes hidden ones.

Parameter	Type	Description
None

Return Value
Array

Code examples

Get rendered tags list with getRenderedTags method.

var rendered = $('#jqxTagCloud').jqxTagCloud('getRenderedTags');

Try it: Get rendered tags list

getTagsList Method

Returns an array with a copy of all tags.
This list is used before any filtering/sorting/hiding is done.

Parameter	Type	Description
None

Return Value
Array

Code examples

Get all tags list with getTagsList method.

var tagsList = $('#jqxTagCloud').jqxTagCloud('getTagsList');

Try it: Get all tags list

hideItem Method

Hides an element with specified index.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Hide the the first visible record of the cloud with hideItem method.


                        var tagItem = $('#jqxTagCloud').jqxTagCloud('getRenderedTags')[0];
                        var index = tagItem.index;
                        $('#jqxTagCloud').jqxTagCloud('hideItem', index);
                        // Note: getRenderedTags will include hidden tags, so doing this repeatedly will have no effect.

Try it: hideItem example

insertAt Method

Inserts an element before an element with specified index

Parameter	Type	Description
index	Number
item	Object

Return Value
None

Code examples

Add an item at the front of the cloud with insertAt method.


    var index = 0;
    var tagItem = { label: 'hardware', value: 215, url: '/categiries/hardware' };
    // label, value and url fields need to match the respective value of the displayMember, valueMember and urlMember fields of your cloud.
    $('#jqxTagCloud').jqxTagCloud('insertAt', index, tagItem);

Try it: insertAt example

removeAt Method

Deletes an element with specified index.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Delete the the first visible record of the cloud with removeAt method.


                        var tagItem = $('#jqxTagCloud').jqxTagCloud('getRenderedTags')[0];
                        var index = tagItem.index;
                        $('#jqxTagCloud').jqxTagCloud('removeAt', index);

Try it: removeAt example

updateAt Method

Updates an element with specified index.

Parameter	Type	Description
index	Number
item	Object

Return Value
None

Code examples

Update the the first visible record of the cloud with updateAt method.


    var tagItem = $('#jqxTagCloud').jqxTagCloud('getRenderedTags')[0];
    var index = tagItem.index;
    tagItem.label = 'Improved' + tagItem.label;
    // label, value and url fields need to match the respective value of the displayMember, valueMember and urlMember fields of your cloud.
    $('#jqxTagCloud').jqxTagCloud('updateAt', index, tagItem);

Try it: updateAt example

showItem Method

Reveals a hidden element with specified index.

Parameter	Type	Description
index	Number

Return Value
None

Code examples

Reveal the the last hidden record of the cloud with showItem method.


    var hiddenItems = $('#jqxTagCloud').jqxTagCloud('getHiddenTagsList');
    var len = hiddenItems.length;
    if (len > 0) {
        var index = hiddenItems[len - 1];
        $('#jqxTagCloud').jqxTagCloud('showItem', index);
    }

Try it: showItem example

Properties

Code examples

Code examples

Code examples

Code example

Code examples

Code examples

Code examples

Code examples

Events

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples