網站項目開發最有用的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:

<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: " » "
});　　

 　　插件下載     效果演示

 

您可能感興趣的相關文章

• 60款非常酷的 jQuery 幻燈片演示和下載
• 15個款優秀的 jQuery 圖片特效插件推薦
• 幾款優秀的 jQuery Ajax 分頁插件和教程
• Web開發者必備的20款超贊 jQuery 插件
• 分享23款美輪美奐的 jQuery 圖片特效插件

 

本文鏈接：2012年最有用的50款jQuery插件集錦：圖表和排版

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源