网站项目开发最有用的50款 jQuery 插件集锦——《图表和排版篇》
2012年，众多的 jQuery 新插件发布出来，可以说是一个伟大的 jQuery 年份。这个系列的文章向大家分享最具创新的，同时也是最有用的50款 jQuery 插件，这些插件分成以下类别：网页布局插件，导航插件，表格插件，滑块和转盘插件，图表插件，图片特效插件，视频插件等等，将陆续分享给大家，记得关注和收藏啊。
您可能感兴趣的相关文章
Morris.js
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
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
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
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
这款插件可以实现把标题分割成多行，它会根据字符数和纵向的空间自动计算机每行要显示的内容。示例：
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 的文本截断插件。当应用到一个大的文本块，它会根据配置的参数截取文本效果。
默认效果：
$("#trunk-demo").trunk8();
多行效果：
$("#trunk-demo").trunk8({
lines: 2
});
自定义填充内容：
$("#trunk-demo").trunk8({
fill: " » "
});
您可能感兴趣的相关文章
