网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》

  2012年,众多的 jQuery 新插件发布出来,可以说是一个伟大的 jQuery 年份。这个系列的文章向大家分享最具创新的,同时也是最有用的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊。

 

Morris.js

网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》

Morris.js 是基于 jQuery 和 Raphaël 的轻量级矢量图形库,帮助开发人员轻松绘制各种形式的图表。示例:

HTML:

<div id="myfirstchart" style="height: 250px;"></div>  

JavaScript:

new Morris.Line({    // ID of the element in which to draw the chart.    element: 'myfirstchart',    // Chart data records -- each entry in this array corresponds to a point on    // the chart.    data: [      { year: '2008', value: 20 },      { year: '2009', value: 10 },      { year: '2010', value: 5 },      { year: '2011', value: 5 },      { year: '2012', value: 20 }    ],    // The name of the data record attribute that contains x-values.    xkey: 'year',    // A list of names of data record attributes that contain y-values.    ykeys: ['value'],    // Labels for the ykeys -- will be displayed when you hover over the    // chart.    labels: ['Value']  });

   插件下载     效果演示

 

jQuery Org Chart

网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》

jQuery OrgChart 是一款用于呈现易于阅读的嵌套元素的树结构插件。使用示例:

HTML:

<ul id="org" style="display:none">  <li>    Food    <ul>      <li>Beer</li>      <li>Vegetables        <ul>          <li>Pumpkin</li>          <li><a href="http://tquila.com" target="_blank">Aubergine</a></li>        </ul>      </li>      <li>Bread</li>      <li>Chocolate        <ul>          <li>Topdeck</li>          <li>Reese's Cups</li>        </ul>      </li>    </ul>  </li>  </ul>  

JavaScript:

jQuery(document).ready(function() {      $("#org").jOrgChart();  });

   插件下载     效果演示(需要翻墙)

 

Bacon

网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》

Bacon 是一款 jQuery 排版插件,让文字按照贝塞尔曲线或直线环绕。示例代码:

$(".baconMe").bacon({          'type' : 'bezier',          'c1' : { x : 10,        y : 0  },          'c2' : { x : -115,      y : 170 },          'c3' : { x : 35,        y : 340 },          'c4' : { x : 15,        y : 480 },          'align'  : 'right'      }  );     $(".baconLine").bacon({          'type' : 'line',          'step'      : 5,          'align'     : 'right'      }  );

   插件下载     效果演示

 

Textualizer

网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》

Textualizer 是一款很酷的插件,允许您实现各种绚丽的动画过渡效果。

 

var list = ['first blurb', 'second blurb', 'third blurb'];  // list of blurbs    var txt = $('#txtlzr');  // The container in which to render the list    var options = {    duration: 1000,          // Time (ms) each blurb will remain on screen    rearrangeDuration: 1000, // Time (ms) a character takes to reach its position    effect: 'random',        // Animation effect the characters use to appear    centered: true           // Centers the text relative to its container  }    txt.textualizer(list, options); // textualize it!  txt.textualizer('start'); // start

   插件下载     效果演示

 

slabText

网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》

这款插件可以实现把标题分割成多行,它会根据字符数和纵向的空间自动计算机每行要显示的内容。示例:

var stS = "<span class='slabtext'>",      stE = "</span>",      txt = [          "For one night only",          "Jackie Mittoo",          "with special Studio One guests",           "Dillinger & Lone Ranger"];        $("#myHeader").html(stS + txt.join(stE + stS) + stE).slabText();

   插件下载     效果演示

 

trunk8

网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》

trunk8 是基于 jQuery 的文本截断插件。当应用到一个大的文本块,它会根据配置的参数截取文本效果。

  默认效果:

$("#trunk-demo").trunk8();  

  多行效果:

$("#trunk-demo").trunk8({  	lines: 2  });  

  自定义填充内容:

$("#trunk-demo").trunk8({  	fill: "&nbsp;&raquo;&nbsp;"  });  

   插件下载     效果演示

 

您可能感兴趣的相关文章

 

本文链接:2012年最有用的50款jQuery插件集锦:图表和排版

编译来源:前端里 ◆ 关注前端开发技术 ◆ 分享网页设计资源

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏