jquery图标和排版插件

Morris.js

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 Org Chart

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

HTML：

JavaScript：

?
1
2
3
jQuery(document).ready(function() {
    $("#org").jOrgChart();
});

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

 

Bacon

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

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

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

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

　　默认效果：

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

　　多行效果：

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

　　自定义填充内容：

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

 　　插件下载     效果演示

posted @ 2015-01-08 09:58  Berly  阅读(241)  评论(0)    收藏  举报