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

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

您可能感兴趣的相关文章

• 12款经典的白富美型 jQuery 图片轮播插件
• 50款最有用的 jQuery 插件集锦《网页布局篇》
• 50款最有用的 jQuery 插件集锦《内容滑块篇》
• 50款最有用的 jQuery 插件集锦《网站导航篇》
• 精心挑选的优秀jQuery Ajax分页插件和教程

 

Morris.js

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

HTML:

?

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

JavaScript：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

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

HTML：

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<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：

?

1 2 3

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

 　　插件下载     效果演示（需要FQ）

 

Bacon

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$(".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

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

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13

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

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

?

1 2 3 4 5 6 7 8 9

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

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

　　默认效果：

?

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

　　多行效果：

?

1 2 3

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

　　自定义填充内容：

?

1 2 3

$("#trunk-demo").trunk8({     fill: " » " });

 　　插件下载     效果演示

 

您可能感兴趣的相关文章

• 60款非常酷的 jQuery 幻灯片演示和下载
• 15个款优秀的 jQuery 图片特效插件推荐
• 几款优秀的 jQuery Ajax 分页插件和教程
• Web开发者必备的20款超赞 jQuery 插件
• 分享23款美轮美奂的 jQuery 图片特效插件

 

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

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源