202 lines
8.9 KiB
HTML
202 lines
8.9 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>Demo of jQuery Tag Cloud</title>
|
|
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="js/tagcloud.js" type="text/javascript" charset="utf-8"></script>
|
|
<script type="text/javascript" charset="utf-8">
|
|
$(document).ready(function() {
|
|
$('#demoCloud1').tagCloud({
|
|
tag: {
|
|
color: '#444444',
|
|
backgroundColor: '#f8f8cc'
|
|
}
|
|
});
|
|
let options = {
|
|
container: {
|
|
width: 630,
|
|
//fontFamily: '"Times New Roman", Times, serif',
|
|
backgroundColor: '#fafaf8'
|
|
},
|
|
tag: {
|
|
format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}', // default: '{tab.name}'
|
|
maxFontSize: 41, // max font size in pixels
|
|
minFontSize: 8, // min font size in pixels
|
|
textShadow: true // text shadow, enabled for better visibility
|
|
},
|
|
data: [
|
|
{ name: 'HTML', link: '#', weight: 60 },
|
|
{ name: 'HTML5', link: '#', weight: 90, tooltip: 'Sample "tooltip" message' },
|
|
{ name: 'CSS', link: '#', weight: 65 },
|
|
{ name: 'CSS3', link: '#', weight: 35 },
|
|
{ name: 'JavaScript', link: '#', weight: 85 },
|
|
{ name: 'jQuery', link: '#', weight: 100 },
|
|
{ name: 'React.js', link: '#', weight: 78 },
|
|
{ name: 'Angular', link: '#', weight: 62 },
|
|
{ name: 'Express', link: '#', weight: 82 },
|
|
{ name: 'Sharepoint', link: '#', weight: 10 },
|
|
{ name: 'ASP.NET', link: '#', weight: 15 },
|
|
{ name: 'Vue.js', link: '#', weight: 43 },
|
|
{ name: 'Spring', link: '#', weight: 36 },
|
|
{ name: 'Django', link: '#', weight: 32 },
|
|
{ name: 'Flask', link: '#', weight: 18 },
|
|
{ name: 'Ruby onRails', link: '#', weight: 14 },
|
|
{ name: 'MongoDB', link: '#', weight: 95 },
|
|
{ name: 'Elasticsearch', link: '#', weight: 40 },
|
|
{ name: 'MySql', link: '#', weight: 58 },
|
|
{ name: 'PostgreSQL', link: '#', weight: 50 },
|
|
{ name: 'Microsoft SQL Server', link: '#', weight: 48 },
|
|
{ name: 'SQLite', link: '#', weight: 45 },
|
|
{ name: 'Redis', link: '#', weight: 41 },
|
|
{ name: 'Oracle 9i', link: '#', weight: 39 },
|
|
{ name: 'Node.js', link: '#', weight: 70 },
|
|
{ name: '.NET', link: '#', weight: 38 },
|
|
{ name: 'WCF', link: '#', weight: 16 },
|
|
{ name: 'TensorFlow', link: '#', weight: 24 },
|
|
{ name: 'Ansible', link: '#', weight: 16 },
|
|
{ name: 'Flutter', link: '#', weight: 15 },
|
|
{ name: 'TypeScript', link: '#', weight: 37 },
|
|
{ name: 'Java', link: '#', weight: 42 },
|
|
{ name: 'Python', link: '#', weight: 58 },
|
|
{ name: 'C', link: '#', weight: 28 },
|
|
{ name: 'C++', link: '#', weight: 36 },
|
|
{ name: 'C#', link: '#', weight: 25 },
|
|
{ name: 'Go', link: '#', weight: 18 },
|
|
{ name: 'PHP', link: '#', weight: 12 },
|
|
{ name: 'VBA', link: '#', weight: 10 }
|
|
]
|
|
}
|
|
$('#demoCloud2').tagCloud(options);
|
|
});
|
|
</script>
|
|
<link rel="stylesheet" href="styles/tagcloud.css" />
|
|
<style type="text/css">
|
|
body {
|
|
padding: 3px 10px;
|
|
background-color: #ffffff;
|
|
font-family: "helvetica";
|
|
color: #000000;
|
|
}
|
|
h1 { font-size: 2em; color: #000000; margin: 3px 0 10px 0; }
|
|
h2 { font-size: 1.2em; color: #000000; margin: 3px 0 10px 0; }
|
|
hr { border: 0; border-bottom: 1px solid #aaa; }
|
|
textarea {
|
|
color: white;
|
|
background-color: #333;
|
|
padding: 3px 3px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<h1>Demo of jQuery Tag Cloud <tt>jquery.tagcloud</tt></h1>
|
|
<p>Tag cloud plugin for jQuery, showing bigger tags in the center.</p>
|
|
<hr />
|
|
<h2>Example 1: Use <tt>li</tt> HTML tags to define the tag cloud, and options for custom colors</h2>
|
|
<table><tr><th>
|
|
Tag Cloud
|
|
</th><th>
|
|
HTML
|
|
</th><th>
|
|
JavaScript
|
|
</th></tr>
|
|
<tr><td style="vertical-align: top;">
|
|
<ul id="demoCloud1">
|
|
<li data-weight="60"><a href="#">HTML</a></li>
|
|
<li><a data-weight="20" href="#">HTML5</a></li>
|
|
<li data-weight="65">CSS</li>
|
|
<li data-weight="35"><a href="#">CSS3</a></li>
|
|
<li data-weight="85"><a href="#">JavaScript</a></li>
|
|
<li data-weight="100"><a href="#">jQuery</a></li>
|
|
<li data-weight="78"><a href="#">React.js</a></li>
|
|
<li data-weight="62"><a href="#">Angular</a></li>
|
|
<li data-weight="82"><a href="#">Express</a></li>
|
|
<li data-weight="10"><a href="#">Sharepoint</a></li>
|
|
<li data-weight="15"><a href="#">ASP.NET</a></li>
|
|
<li data-weight="43"><a href="#">Vue.js</a></li>
|
|
<li data-weight="36"><a href="#">Spring</a></li>
|
|
<li data-weight="32"><a href="#">Django</a></li>
|
|
<li data-weight="18"><a href="#">Flask</a></li>
|
|
</ul>
|
|
</td><td style="vertical-align: top;">
|
|
<textarea style="width: 34em; height: 16.4em;" readonly="readonly">
|
|
<ul id="demoCloud1">
|
|
<li data-weight="60"><a href="#">HTML</a></li>
|
|
<li data-weight="20><a" href="#">HTML5</a></li>
|
|
<li data-weight="65">CSS</li> <!-- no link -->
|
|
<li data-weight="35"><a href="#">CSS3</a></li>
|
|
<li data-weight="85"><a href="#">JavaScript</a></li>
|
|
<li data-weight="100"><a href="#">jQuery</a></li>
|
|
<li data-weight="78"><a href="#">React.js</a></li>
|
|
<li data-weight="62"><a href="#">Angular</a></li>
|
|
<li data-weight="82"><a href="#">Express</a></li>
|
|
<li data-weight="10"><a href="#">Sharepoint</a></li>
|
|
<li data-weight="15"><a href="#">ASP.NET</a></li>
|
|
<!-- etc... -->
|
|
</ul></textarea>
|
|
</td><td style="vertical-align: top;">
|
|
<textarea style="width: 22em; height: 16.4em;" readonly="readonly">
|
|
$(document).ready(function() {
|
|
$('#demoCloud1').tagCloud({
|
|
tag: {
|
|
color: '#444444',
|
|
backgroundColor: '#f8f8cc'
|
|
}
|
|
});
|
|
});</textarea>
|
|
</td></tr></table>
|
|
<hr />
|
|
<h2>Example 2: Use an empty <tt>div</tt> HTML tag, and options to define the tag cloud</h2>
|
|
<table><tr><th>
|
|
Tag Cloud
|
|
</th><th>
|
|
HTML
|
|
</th><th>
|
|
JavaScript
|
|
</th></tr>
|
|
<tr><td style="vertical-align: top;">
|
|
<div id="demoCloud2"></div>
|
|
</td><td style="vertical-align: top;">
|
|
<textarea style="width: 13em; height: 32em;" readonly="readonly">
|
|
<div id="demoCloud2">
|
|
</div></textarea>
|
|
</td><td style="vertical-align: top;">
|
|
<textarea style="width: 34em; height: 32em;" readonly="readonly">
|
|
$(document).ready(function() {
|
|
let options = {
|
|
container: {
|
|
width: 630,
|
|
backgroundColor: '#fafaf8',
|
|
//fontFamily: '"Times New Roman", Times, serif',
|
|
},
|
|
tag: {
|
|
format: '<a href="{tag.link}">{tag.name}</a>: {tag.weight}',
|
|
maxFontSize: 41, // max font size in pixels
|
|
minFontSize: 8, // min font size in pixels
|
|
textShadow: true // enable text shadow
|
|
},
|
|
data: [
|
|
{ name: 'HTML', link: '#', weight: 60 },
|
|
{ name: 'HTML5', link: '#', weight: 90,
|
|
tooltip: 'Sample "tooltip" message' },
|
|
{ name: 'CSS', link: '#', weight: 65 },
|
|
{ name: 'CSS3', link: '#', weight: 35 },
|
|
{ name: 'JavaScript', link: '#', weight: 85 },
|
|
{ name: 'jQuery', link: '#', weight: 100 },
|
|
// etc...
|
|
]
|
|
}
|
|
$('#demoCloud2').tagCloud(options);
|
|
});</textarea>
|
|
</td></tr></table>
|
|
<hr />
|
|
<p>Repository: <a href="https://github.com/peterthoeny/jquery.tagcloud" target="_blank">
|
|
https://github.com/peterthoeny/jquery.tagcloud</a></p>
|
|
<p>Author: <a href="https://github.com/peterthoeny" target="_blank">
|
|
https://github.com/peterthoeny</a></p>
|
|
<hr />
|
|
</div>
|
|
</body>
|
|
</html>
|