JQCloud: 一个前端生成美化标签云的简单JQuery插件
本文原文地址:https://jiang-hao.com/articles/2018/frontend-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>
JQCloud: 一个前端生成美化标签云的简单JQuery插件的更多相关文章
- 帮助快速生成页面固定显示元素的jQuery插件 - sticky-kit
来源:GBin1.com 如果需要在用户滚动页面的时候,保持特定元素始终可见的话,今天这里我们介绍的Sticky-Kit是一个不错的选择. 它是一个开源的jQuery插件,可以帮助大家快速针对页面元素 ...
- 写一个限制上传文件大小和格式的jQuery插件
在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好看,且功能强大,但美中不足的是:有时候会碰到浏览器兼容问题.本篇就来写一个"原生态&quo ...
- 前端表单标签form 及 简单应用
今日内容 form 表单(重点) 后端框架之 flask 简介 内容详细 form 表单 1.作用 form 表单可以在前端获取用户输入的数据并发送给后端(服务端) 2.input 标签 获取用户数据 ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- 3D球状标签云(兼容IE8)
看见一个很有趣的标签云,3D球状,兼容 IE 8,亲测可用!其他版本没有测试.觉得挺有意思就拿来记录下来,学习学习,本文下方会放出我看的文章地址,先看一下效果: 接下来是代码,html + css + ...
- 设计一种前端数据延迟加载的jQuery插件(2)
背景 最近看到很多网站都运用到了一种前端数据延迟加载技术,包括淘宝,新浪网等等,这样做的目的可以使得一些未显示的图片随 着滚动条的滚动进行延迟显示. 好处显而易见,可以减少前端对于图片的Http请求, ...
- python3生成标签云
标签云是现在大数据里面最喜欢使用的一种展现方式,其中在python3下也能实现标签云的效果,贴图如下: -------------------进入正文--------------------- 首先要 ...
- Python pytagcloud 中文分词 生成标签云 系列(一)
转载地址:https://zhuanlan.zhihu.com/p/20432734工具 Python 2.7 (前几天试了试 Scrapy 所以用的 py2 .血泪的教训告诉我们能用 py3 千万别 ...
- 做一个能对标阿里云的前端APM工具(下)
上篇请访问这里做一个能对标阿里云的前端APM工具(上) 样本多样性问题 上一小节中的实施方案是微观的,即单次性的.具体的.但是从宏观上看,我需要保证性能测试是公允的,符合大众预期的.为了达到这种效果, ...
随机推荐
- POJ2456 Aggressive cows 2017-05-11 17:54 38人阅读 评论(0) 收藏
Aggressive cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13993 Accepted: 6775 ...
- android免root hook框架legend
一.前言 Android中hook框架已经非常多了,最优秀的当属Xposed和Substrate了,这两个框架我在之前的文章都详细介绍过了,不了解的同学,可以转战这里:http://www.wjdia ...
- hdu 4946 凸包注意重点
http://acm.hdu.edu.cn/showproblem.php?pid=4946 给你n个点的坐标和速度,如果一个点能够到达无穷远处,且花费的时间是最少的,则此点输出1,否则输出0. 每个 ...
- POJ1556 最短路 + 线段相交问题
POJ1556 题目大意:比较明显的题目,在一个房间中有几堵墙,直着走,问你从(0,5)到(10,5)的最短路是多少 求最短路问题,唯一变化的就是边的获取,需要我们获取边,这就需要判断我们想要走的这条 ...
- Latex中Matlab代码的环境
需要用到listings宏包 使用方法: 导言区\usepackage{listings}\lstset{language=Matlab} %代码语言使用的是matlab\lstset{br ...
- <context:component-scan>自动扫描
主要讲解自动扫描的<context:component-scan>中的2个子标签的使用方法 在Spring MVC中的配置中一般会遇到这两个标签,作为<context:compone ...
- asp.net mvc5 分析器错误消息: 未能加载类型“XXX.MvcApplication”
描述 今天忽然碰到一个这个错误: “/”应用程序中的服务器错误. 分析器错误 说明: 在分析向此请求提供服务所需资源时出错.请检查下列特定分析错误详细信息并适当地修改源文件. 分析器错误消息: 未能加 ...
- C#DataGridView的简单使用
首先创建一个DataGridView控件,然后创建列(包括列名的定义), 由于我不是和数据库进行连接,只是为了输出好看一点. 删除所有数据: while (this.dataGridView1.Row ...
- 将GridView的数据导出Excel
HttpContext.Current.Response.AppendHeader("Content-Disposition", "attachment;filename ...
- SPOJ Longest Common Substring II
题目连接:戳我 题目大意:求n个字符串的最长公共子串. 它的简化版--这里 当然我们可以用SA写qwq,也可以用广义SAM写qwq 这里介绍纯SAM的写法...就是对其中一个建立后缀自动机,然后剩下的 ...