alterTextCase
|
string
|
'none'
|
Sets or gets the alterTextCase property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", alterTextCase:"titleCase" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",disabled:true } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
displayLimit
|
number
|
null
|
Sets or gets the displayLimit property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",displayLimit:3 } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
displayMember
|
string
|
'label'
|
Sets or gets the displayMember property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
displayValue
|
boolean
|
false
|
Sets or gets the displayValue property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",displayValue:true } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
fontSizeUnit
|
string
|
'px'
|
Sets or gets the fontSizeUnit property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", fontSizeUnit:"em" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
height
|
number
|
null
|
Sets or gets the height property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",height:50 } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
maxColor
|
string
|
null
|
Sets or gets the maxColor property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", maxColor:"darkgreen" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
maxFontSize
|
number
|
24
|
Sets or gets the maxFontSize property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",maxFontSize:5 } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
maxValueToDisplay
|
number
|
0
|
Sets or gets the maxValueToDisplay property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",maxValueToDisplay:50 } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
minColor
|
string
|
null
|
Sets or gets the minColor property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", minColor:"lime" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
minFontSize
|
number
|
10
|
Sets or gets the minFontSize property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",minFontSize:1 } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
minValueToDisplay
|
number
|
0
|
Sets or gets the minValueToDisplay property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",minValueToDisplay:30 } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",rtl:true } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
sortBy
|
string
|
'none'
|
Sets or gets the sortBy property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", sortBy:"label" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
sortOrder
|
string
|
'ascending'
|
Sets or gets the sortOrder property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", sortOrder:"descending" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
source
|
object
|
{}
|
Sets or gets the source property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
tagRenderer
|
function
|
null
|
Sets or gets the tagRenderer property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", tagRenderer:"tagRenderer" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
takeTopWeightedItems
|
boolean
|
false
|
Sets or gets the takeTopWeightedItems property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating",takeTopWeightedItems:true } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
textColor
|
string
|
null
|
Sets or gets the textColor property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", textColor:"red" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
urlBase
|
string
|
''
|
Sets or gets the urlBase property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember:"countryName", valueMember:"technologyRating", urlBase:"http://jqwidgets.com/" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
urlMember
|
string
|
'url'
|
Sets or gets the urlMember property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating", urlMember:"tagHref" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
valueMember
|
string
|
'value'
|
Sets or gets the valueMember property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating" } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
|
bindingComplete
|
Event
|
|
Code examples
Bind to the bindingComplete event of jqxTagCloud.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating" } window.onload = function() { document.querySelector( "jqx-tag-cloud").addEventListener("bindingComplete", function(event) { // Your code here. }); }; </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
itemClick
|
Event
|
|
Code examples
Bind to the itemClick event of jqxTagCloud.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { source:adapter, displayMember: "countryName", valueMember:"technologyRating" } window.onload = function() { document.querySelector( "jqx-tag-cloud").addEventListener("itemClick", function(event) { // Your code here. }); }; </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
|
destroy
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { document.querySelector( "jqx-tag-cloud").destroy(); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
findTagIndex
|
Method
|
|
Parameter |
Type |
Description |
tag |
string |
|
Return Value
Number
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { document.querySelector( "jqx-tag-cloud").findTagIndex( 'USA'); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
getHiddenTagsList
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tag-cloud").getHiddenTagsList(); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
getRenderedTags
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tag-cloud").getRenderedTags(); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
getTagsList
|
Method
|
|
Parameter |
Type |
Description |
None |
|
|
Return Value
Array
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-tag-cloud").getTagsList(); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
hideItem
|
Method
|
|
Parameter |
Type |
Description |
index |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { document.querySelector( "jqx-tag-cloud").hideItem(1); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
insertAt
|
Method
|
|
Parameter |
Type |
Description |
index |
number |
|
item |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { document.querySelector( "jqx-tag-cloud").insertAt(1, 'USA'); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
removeAt
|
Method
|
|
Parameter |
Type |
Description |
index |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { document.querySelector( "jqx-tag-cloud").removeAt(1); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
updateAt
|
Method
|
|
Parameter |
Type |
Description |
index |
number |
|
item |
object |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { document.querySelector( "jqx-tag-cloud").updateAt(1, 'USA'); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|
showItem
|
Method
|
|
Parameter |
Type |
Description |
index |
number |
|
Return Value
void
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Tag Cloud Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtagcloud.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> <script> var data = [ { countryName: "Australia", technologyRating: 35 }, { countryName: "United States", technologyRating: 60 }, { countryName: "Germany", technologyRating: 55 }, { countryName: "Brasil", technologyRating: 20 }, { countryName: "United Kingdom", technologyRating: 50 }, { countryName: "Japan", technologyRating: 80 } ]; var adapter = new jqx.dataAdapter({ localdata: data, datatype: "array", datafields: [ { name: 'countryName' }, { name: 'technologyRating' } ] }); JQXElements.settings[ "tagCloudSettings"] = { } window.onload = function() { document.querySelector( "jqx-tag-cloud").showItem(1); } </script></head><body> <jqx-tag-cloud settings="tagCloudSettings"></jqx-tag-cloud>
|