ejTagCloud

11 Jul 201818 minutes to read

The TagCloud allows the user to display a list of links or tags with a structured cloud format where the importance of the tags can differentiate with varied font sizes, colors, and styles.

Syntax

  • JAVASCRIPT
    • $(element).ejTagCloud()

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script> 
$(function () {
        // document ready
        // initialize the array of data for TagCloud input      
// simple TagCloud creation
        $("#tagcloud").ejTagCloud({ 
            dataSource:  window.websiteCollection,
            titleText: "Tech Sites"
      });
});
</script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.tagcloud.js

    Members

    cssClass string

    Specify the CSS class to button to achieve custom theme.

    Default Value

    • ””

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the CSS class during initialization.                     
        $("#tagcloud").ejTagCloud({dataSource: window.websiteCollection,cssClass  : "gradient-lime",titleText: "Tech Sites" });                                         
</script>

    dataSource object

    The dataSource contains the list of data to display in a cloud format. Each data contains a link URL, frequency to categorize the font size and a display text.

    Default Value

    • null

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
//Initialize the TagCloud with the dataSource value specified                      
$("#tagcloud").ejTagCloud({ dataSource: window.websiteCollection,titleText: "Tech Sites" });    
</script>

    enableRTL boolean

    Sets the TagCloud and tag items direction as right to left alignment.

    Default Value

    • false

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the enableRTL during initialization.                     
        $("#tagcloud").ejTagCloud({ dataSource:  window.websiteCollection,enableRTL : false,titleText: "Tech Sites"  });                         
</script>

    fields object

    Defines the mapping fields for the data items of the TagCloud.

    Default Value

    • null

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
$(function () {
// Initialize the TagCloud with the fields value specified    
$("#tagcloud").ejTagCloud({
dataSource:window.websiteCollection,
       titleText: "Tech Sites",
fields: { text: "text" , url:"url",frequency: "frequency"}  
});
});
</script>

    fields.frequency string

    Defines the frequency column number to categorize the font size.

    fields.htmlAttributes string

    Defines the HTML attributes column for the anchor elements inside the each tag items.

    fields.text string

    Defines the tag value or display text.

    fields.url string

    Defines the URL link to navigate while click the tag.

    htmlAttributes object

    Specifies the list of HTML attributes to be added to TagCloud control.

    Default Value

    • {}

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the htmlAttributes during initialization.                   
        $("#tagcloud").ejTagCloud({ htmlAttributes:{"aria-label":"tagcloud"} });                      
</script>

    format string|enum

    Defines the format for the TagCloud to display the tag items.See Format

    Name Description
    Cloud To render the TagCloud items in cloud format
    List To render the TagCloud items in list format

    Default Value

    • ej.Format.Cloud

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the format during initialization.                        
        $("#tagcloud").ejTagCloud({ dataSource:  window.websiteCollection,format: ej.Format.Cloud,titleText: "Tech Sites" });                   
</script>

    maxFontSize string|number

    Sets the maximum font size value for the tag items. The font size for the tag items will be generated in between the minimum and maximum font size values.

    Default Value

    • “40px”

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the maxFontSize during initialization.                   
        $("#tagcloud").ejTagCloud({ dataSource:  window.websiteCollection,maxFontSize : "10px" ,titleText: "Tech Sites" });                      
</script>

    minFontSize string|number

    Sets the minimum font size value for the tag items. The font size for the tag items will be generated in between the minimum and maximum font size values.

    Default Value

    • “10px”

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the minFontSize during initialization.                   
        $("#tagcloud").ejTagCloud({dataSource:  window.websiteCollection, minFontSize : "10px" ,titleText: "Tech Sites" });                      
</script>

    query object

    Define the query to retrieve the data from online server. The query is used only when the online dataSource is used.

    Default Value

    • null

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
//Initialize the TagCloud with the query value specified                
var dataManger = ej.DataManager({
      url:"http://mvc.syncfusion.com/Services/Northwnd.svc/"
});
var query = ej.Query().from("Orders").take(10);    
$("#tagcloud").ejTagCloud({
       titleText: "Employee List",
      dataSource: dataManger,
     query: query,
    fields: { text: "CustomerID" , frequency: "EmployeeID" }
});
</script>

    showTitle boolean

    Shows or hides the TagCloud title. When this set to false, it hides the TagCloud header.

    Default Value

    • true

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the showTitle during initialization.                     
        $("#tagcloud").ejTagCloud({     dataSource: window.websiteCollection, showTitle : false  });                     
</script>

    titleImage string

    Sets the title image for the TagCloud. To show the title image, the showTitle property should be enabled.

    Default Value

    • null

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the titleImage during initialization.                    
        $("#tagcloud").ejTagCloud({  dataSource: window.websiteCollection,titleImage: '../images/bird.png' ,titleText: "Tech Sites"  });                         
</script>

    titleText string

    Sets the title text for the TagCloud. To show the title text, the showTitle property should be enabled.

    Default Value

    • “Title”

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
// Set the titleText during initialization.                     
        $("#tagcloud").ejTagCloud({  dataSource:  window.websiteCollection,titleText : "Cloud Data"  });                         
</script>

    Methods

    insert(name)

    Inserts a new item into the TagCloud

    Name Type Description
    name string Insert new item into the TagCloud

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
  var tagObj="";
var tag = { text: "google", url: "http://www.google.com", frequency: 12 };
$(function () {
// document ready
// initialize the array of data for TagCloud input
$("#tagcloud").ejTagCloud({ 
            dataSource: window.websiteCollection,
            titleText: "Tech Sites"
});
//initialize the TagCloud object
tagObj = $("#tagcloud").data("ejTagCloud");
//To Inserts a new item into the TagCloud
tagObj.insert(tag);
      });     
</script>
  • HTML
    • <div id="tagcloud"></div> 
 
<script>
var tag = { text: "google", url: "http://www.google.com", frequency: 12 };
$(function () {
// document ready
// initialize the array of data for TagCloud input  
$("#tagcloud").ejTagCloud({ 
            dataSource: window.websiteCollection,titleText: "Tech Sites"
});  
$("#tagcloud").ejTagCloud("insert", tag);        
});
</script>

    insertAt(name,position)

    Inserts a new item into the TagCloud at a particular position.

    Name Type Description
    name string Inserts a new item into the TagCloud
    position number Inserts a new item into the TagCloud with the specified position

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
var tag = { text: "google", url: "http://www.google.com", frequency: 12 };
var tagObj="";
$(function () {
// document ready 
$("#tagcloud").ejTagCloud({
dataSource:window.websiteCollection,
titleText: "Tech Sites"
});
 tagObj = $("#tagcloud").data("ejTagCloud");
   tagObj.insertAt(tag,2);
});
</script>
  • HTML
    • <div id="tagcloud"></div> 
 
<script>
var tag = { text: "google", url: "http://www.google.com", frequency: 12 };
$(function () {
// document ready 
$("#tagcloud").ejTagCloud({
dataSource:window.websiteCollection,
titleText: "Tech Sites"
}); 
$("#tagcloud").ejTagCloud("insertAt", tag, 2);
});
</script>

    remove(name)</span>

    Removes the item from the TagCloud based on the name. It removes all the tags which have the corresponding name

    Name Type Description
    name string name of the tag.

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
  var tagObj="";
$(function () {
// document ready
// initialize the array of data for TagCloud input
$("#tagcloud").ejTagCloud({ 
            dataSource: window.websiteCollection,
            titleText: "Tech Sites"
});
//initialize the TagCloud object
tagObj = $("#tagcloud").data("ejTagCloud");
//To Inserts a new item into the TagCloud
tagObj.remove("text");
      });     
</script>
  • HTML
    • <div id="tagcloud"></div> 
 
<script>
$(function () {
// document ready
// initialize the array of data for TagCloud input
$("#tagcloud").ejTagCloud({ 
            dataSource: window.websiteCollection,
            titleText: "Tech Sites"
});
$("#tagcloud").ejTagCloud("remove", "text");
});
</script>

    removeAt(position)</span>

    Removes the item from the TagCloud based on the position. It removes the tags from the the corresponding position only.

    Name Type Description
    position number position of tag item.

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
var tagObj = "";
var tag = { text: "google", url: "http://www.google.com", frequency: 12 };
$(function () {       
// document ready   
$("#tagcloud").ejTagCloud({
dataSource:window.websiteCollection,
titleText: "Tech Sites"
});
//initialize the TagCloud object
var tagObj = $("#tagcloud").data("ejTagCloud");
// Removes the item from the TagCloud based on the position.
tagObj.removeAt(2);
});
</script>
  • HTML
    • <div id="tagcloud"></div> 
 
<script>
$(function () {
// document ready
$("#tagcloud").ejTagCloud({
dataSource:window.websiteCollection,
titleText: "Tech Sites"
});
$("#tagcloud").ejTagCloud("removeAt", 4);
});
</script>

    Events

    click

    Event triggers when the TagCloud items are clicked

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TagCloud model
    type string returns the name of the event
    text string return current tag name
    URL string return current URL link

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
//click event for tagCloud
$("#tagcloud").ejTagCloud({
 dataSource: window.websiteCollection,
 titleText: "Tech Sites",
   click: function (args) {}
});        
</script>

    create

    Event triggers when the TagCloud are created

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TagCloud model
    type string returns the name of the event

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
//create event for tagCloud
$("#tagcloud").ejTagCloud({
 dataSource: window.websiteCollection,
 titleText: "Tech Sites",
   create: function (args) {}
});        
</script>

    destroy

    Event triggers when the TagCloud are destroyed

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TagCloud model
    type string returns the name of the event

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
//destroy event for TagCloud
$("#tagcloud").ejTagCloud({
 dataSource: window.websiteCollection,
 titleText: "Tech Sites",
   destroy: function (args) {}
});        
</script>

    mouseout

    Event triggers when the cursor leaves out from a tag item

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TagCloud model
    type string returns the name of the event
    text string return current tag name
    URL string return current URL link

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
//mouseout event for TagCloud
$("#tagcloud").ejTagCloud({
 dataSource: window.websiteCollection,
 titleText: "Tech Sites",
   mouseout: function (args) {}
});           
</script>

    mouseover

    Event triggers when the cursor hovers on a tag item

    Name Type Description
    argument Object Event parameters from button
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the TagCloud model
    type string returns the name of the event
    text string return current tag name
    URL string return current URL link

    Example

  • HTML
    • <div id="tagcloud"></div> 
 
<script>
//mouse over event for TagCloud
$("#tagcloud").ejTagCloud({
 dataSource: window.websiteCollection,
titleText: "Tech Sites",
   mouseover: function (args) {}
});   
</script>