来自 技术 2019-04-17 的文章

JQCloud: 一个前端生成美化标签云的简单JQuery插件

八年Java开发的感悟:什么才是程序员的立身之本>>>   

本文原文地址:https://jiang-hao.com/articles/2018/blog-JQCloud.html

因为博客需要,发现了一个生成美化简约风格的标签云的JQuery插件。

官网地址:http://mistic100.github.io/jQCloud/index.html

使用方法很简单,可以把JS和CSS文件下载到本地,也可以直接通过Script标签src=“”的方法在线引用。

具体的使用方法官网都能查到。

页面效果展示:https://jiang-hao.com/tags/

静态的效果大概是这样:

贴出自己微博使用JQCloud的前端代码:

<script src="{{ SITEURL }}/theme/jqcloud.js"></script><link href="{{ SITEURL }}/theme/jqcloud.css" rel="stylesheet"><script> var words = []; {% for tag, articles in tags|sort %} words.push({text: "{{tag}}", weight: Math.random(), link: '{{ SITEURL }}/{{ tag.url }}'}); {% endfor %} {% for category, articles in categories %} words.push({text: "{{category}}", weight: Math.random(), link: '{{ SITEURL }}/{{ category.url }}'}); {% endfor %} $(function() { $("#tagcloud").jQCloud(words, { autoResize: true }); });</script><div id="tagcloud" style="width: 80%; height: 450px; align-self: center;"></div>

需要注意的是要包含标签云的div模块需要显示指定width和height,否则需要在JavaScript中进行相关设置。

踩坑1:因为要基于JQuery,注意引用的JQuery库可用。由于之前引用的是外网谷歌的库,国内被墙导致标签云一直没有刷出来,后来换成了bootcdn的JQuery库就成功了:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

--Posted from Rpc

标签:   .net windows      论坛域名申请   
上一篇:没有了
下一篇:没有了