`
dearkerwin
  • 浏览: 7935 次
社区版块
存档分类
最新评论

jquery插件(一):JQCloud

 
阅读更多

jqcloud是一个标签云的插件,先看例子,再看用法

一、简单的示例

1、截图

jqcloud示例 -- ifxoxo.com/jquery-jqcloud.html

jqcloud示例 — ifxoxo.com/jquery-jqcloud.html

2、具体代码

<script type="text/javascript">
var word_list = [
   {text: "ifxoxo.com", weight: 13, link: "http://ifxoxo.com/jquery-jqcloud.html"},
   {text: "520xmn.com", weight: 10.5}
   {text: "jquery", weight: 9.4},
   {text: "jqcloud", weight: 8},
   {text: "ifxoxo1", weight: 6.2},
   {text: "ifxoxo2", weight: 5},
   {text: "ifxoxo3", weight: 5},
   {text: "Nam et", weight: 5},
   {text: "Sapien", weight: 4},
   {text: "Pellentesque", weight: 3},
   {text: "et malesuada", weight: 3},
   {text: "fames", weight: 2},
   {text: "sit amet", weight: 2},
   {text: "justo", weight: 1},
   {text: "dictum", weight: 1},
   {text: "Ut et leo", weight: 1},
 ];
 $(function() {
   $("#my_words").jQCloud(word_list);
 });
</script>
    <h1>jQCloud Example</h1>
     <h3>--from http://ifxoxo.com/jquery-jqcloud.html</h3>
    <div id="my_words" style="width: 550px; height: 350px;">
    </div>

二、具体用法

1、下载所需的资源

(1)jquery

(2)jqcloud插件

下载地址:https://github.com/lucaong/jQCloud
解压之后在/jqcloud/文件夹下面找到jqcloud.css 和 jqcloud-1.0.4.js

 //加载的时候注意文件的路径
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jqcloud-1.0.4.js"></script>
    <linkrel="stylesheet"type="text/css"href="jqcloud.css"/>

2、所需的html

需要一个用来展示jqcloud的元素(div ,span等), 元素如果不指定宽和高,则需要在js中增加参数

<div id="my_words" style="width: 550px; height: 350px;"></div>

3、js部分

(1)需要一个用json格式存的数据

至少需要指定每一项的text和weight,jqcloud会根据所有文字的权重,计算出合适的百分比。格式详见代码
text:展现的文字
weight:文字的权重

var word_list = [
        {text: "ifxoxo.com", weight: 13},
        {text: "520xmn.com", weight: 10.5},
        {text: "jquery", weight: 9.4},
        {text: "jqcloud", weight: 8},
        {text: "ifxoxo1", weight: 6.2}
  ];

(2)执行部分

调用jQCloud函数(注意大小写)

 $("#my_words").jQCloud(word_list);
 // word_list就是(1)中准备的数据

(3)参数

以下是jQCloud的参数

 参数  默认值  作用
  width   “”  设置cloud的宽度,默认是原来的宽度
 height   “”   设置cloud的高度,默认是原来的高度
center object word在相对于cloud元素的x、y坐标,默认是cloud元素的中心。
如 {x: 300, y: 150}
afterCloudRender “” 在cloud呈现之后的回调函数
delayedMode true 是否用延时模式。
如果设置为true,word会一个一个加载,每个之间会有微小的延时。
当word超过50个的时候,默认会是true
shape elliptic cloud的形状。支持 elliptic(椭圆形) 和 rectangular (矩形)
默认是elliptic
removeOverflowing true 如果设置为true, 如果一个word超出了cloud元素的大小,则自动剔除

参数示例

 $("#my_words").jQCloud(word_list,{
               removeOverflowing: true,
               width: 500,
               height: 500,
               shape :"rectangular",
          });

4、json数据的其他用法

(1)可以指定一个超链接: link

{text: “ifxoxo.com”, weight: 13, link: {href: “http://ifxoxo.com/jquery-jqcloud.html”, target: “_blank”} }

(2)可以增加html属性: html

{text: “520xmn.com”, weight: 10,html: {title: “My Title”, “class”: “custom-class”}}

(3)增加js事件:handlers (比如click, mouseOver)

{text: “520xmn.com”, weight: 15, handlers: {click: function(){alert(“from –ifxoxo.com”)}} }

5、修改css文件

如果对颜色和字体打大小不满意,可以修改默认的css文件–jqcloud.css
根据自己的需要,修改font-size 和 color

   div.jqcloud span.w10 { font-size: 550%; }
   div.jqcloud span.w10 { color: #0cf; }

本文地址:http://ifxoxo.com/jquery-jqcloud.html 
转载请注明出处

分享到:
评论

相关推荐

    jQCloud标签云插件_热门城市文字标签云代码

    jQCloud是一款基于jQuery的插件,它的主要功能是生成自定义的二维标签云。jQuery是一个广泛使用的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互。通过结合jQuery的便利性和jQCloud的功能,开发者可以...

    前端项目-jqcloud.zip

    **前端项目-jqcloud** 是一个基于jQuery的插件,专为创建美观、直观的HTML CSS单词云和标签云而设计。这个插件的核心目的是在网页上以视觉上吸引人的形式展示文本数据,如关键词、标签或者任何其他类型的数据集合。...

    JQCloud标签云、词云展示源码

    JQCloud是一个轻量级的JavaScript插件,专门用于创建美观且易于定制的词云。它支持多种自定义选项,如颜色、大小、权重等,使得开发者能够根据项目需求调整词云的样式和行为。通过JQCloud,我们可以将一串关键词转换...

    28个jQuery常用插件.

    这些jQuery插件涵盖了网页开发中的多个方面,从用户交互到数据可视化,再到页面布局优化,都有相应的解决方案。通过合理运用这些插件,开发者可以提高工作效率,同时为用户提供更加丰富和友好的网页体验。

    Jquery实现关键字标签生成插件

    本文将详细介绍如何使用jQuery来实现一个关键字标签生成插件,以便在新建和编辑场景中提升用户体验。 首先,我们需要理解基本的HTML结构。一个简单的标签输入系统通常包括一个输入框供用户输入关键字,以及一个展示...

    jQuery热门城市文字标签云代码.zip

    4. **初始化插件**:在DOM加载完成后(通常在`$(document).ready()`函数内),使用jQuery选择器找到标签云的容器,然后调用jqcloud插件方法,传入预先准备的数据。 ```javascript $(document).ready(function() {...

    jQCloud热门城市文字标签云代码.zip

    "jQCloud"是这个插件的名字,它是一个用jQuery开发的标签云插件,用于创建具有动态效果的文字标签云。"热门城市"则表明这个标签云主要用于展示哪些城市是用户关注的焦点,通过调整字体大小和颜色来体现城市的热度。...

    jquery特效

    jQuery是一种高效的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。自2006年发布以来,jQuery迅速成为Web开发领域中最广泛使用的库之一,因其简洁、直观的API而备受青睐。在...

    jQCloud热门城市文字标签云特效代码

    jQCloud是一款基于jQuery库的JavaScript插件,它能够帮助开发者轻松构建美观且互动性强的文字云,将大量城市名称以标签的形式展示,使得用户可以一目了然地了解哪些城市最为热门。 首先,我们需要了解jQCloud的基础...

    词云,字符云或者叫标签云在ie8下的实现方式

    jQCloud是一个用于创建词云的jQuery插件,它能够自动布局并调整词的大小。使用这个插件,只需提供词和对应的权重,插件会处理其余的布局逻辑。 5. **跨浏览器兼容性**: IE8对HTML5和CSS3的支持有限,所以要确保...

    jquery实现圆角特效代码

    除了 jQuery UI 的 Corner 插件,还有许多其他第三方的 jQuery 圆角插件,如 "jQuery Corners" 或 "jQCloud" 等。这些插件可能提供更丰富的功能,比如动态圆角调整、兼容更多浏览器等。 值得注意的是,随着浏览器对...

Global site tag (gtag.js) - Google Analytics