jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTagCloud is used for displaying a collection of user-generated tags accompanying the articles, posts, or videos on a website.
The destroy() method is used to call the widgets to destroy function and destroy all the printed specified data.
Syntax:
$('selector').jqxTagCloud('destroy');
Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtagcloud.js”></script>
Example: The below example illustrates the jQWidgets destroy() method.
<!DOCTYPE html> < html lang = "en" >
< head >
< link rel = "stylesheet" href = "jqwidgets/styles/jqx.base.css" />
< script type = "text/javascript" src = "scripts/jquery-1.11.1.min.js" >
</ script >
< script type = "text/javascript" src = "jqwidgets/jqxcore.js" >
</ script >
< script type = "text/javascript" src = "jqwidgets/jqx-all.js" >
</ script >
< script type = "text/javascript" src = "jqwidgets/jqxdata.js" >
</ script >
< script type = "text/javascript" src = "jqwidgets/jqxtagcloud.js" >
</ script >
< script >
$(document).ready(function () {
var data = [
{ name: "GFG", rating: 35,
url: "community" },
{ name: "is a", rating: 60,
url: "community" },
{ name: "CS", rating: 55,
url: "community" },
{ name: "Portal.", rating: 20,
url: "community" },
];
var source =
{
localData: data,
dataType: "array",
dataFields: [
{ name: 'name',
type: 'string' },
{ name: 'url',
type: 'string' },
{ name: 'rating',
type: 'number' }
]
};
var dataAdapter = new
$.jqx.dataAdapter(source, {});
$('#tagCloud').jqxTagCloud({
width: 450,
source: dataAdapter,
displayMember: 'name',
valueMember: 'rating',
alterTextCase: 'titleCase'
});
$("button").jqxButton().
click(function () {
$('#tagCloud').jqxTagCloud(
'destroy');
});
});
</ script >
</ head >
< body class = 'default' >
< center >
< h2 style = "color:green;" >
GeeksforGeeks
</ h2 >
< h3 >
jQWidgets jqxTagCloud destroy() Method
</ h3 >
< div id = "tagCloud" ></ div >
< button >Invoke the destroy() method</ button >
</ center >
</ body >
</ html >
|
Output: