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

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

您可能感兴趣的相关文章

 

Morris.js

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 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();
});

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

 

Bacon

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

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

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

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

  默认效果:

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

  多行效果:

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

  自定义填充内容:

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

   插件下载     效果演示

 

您可能感兴趣的相关文章

 

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

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

posted @ 2013-05-09 15:03  梦想天空(山边小溪)  阅读(13289)  评论(18编辑  收藏  举报