Bar Indicator是一款基于jQuery的進度條數(shù)據(jù)展示插件，它可應用于數(shù)據(jù)統(tǒng)計展示、投票統(tǒng)計以及任務進度等諸多場景中。它使用簡單、選項豐富，幾乎可以滿足用戶所有基于進度條的WEB設(shè)計需求，本文將結(jié)合實例給大家講解Bar Indicator的使用。

查看演示下載源碼

HTML

首先加載jQuery和Bar Indicator相關(guān)js文件以及css文件。

<link href="bi-style.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="jquery-barIndicator.js"></script>
<script src="jquery.easing.1.3.js"></script>

由于使用了動畫緩沖效果，記得把easing插件也加上，您可以下載源碼包，這些文件都打包好了。然后在<body>中加上HTML：

復制代碼代碼如下:

看到了吧，代碼中數(shù)字55表示的就是這個進度條要展示的進度，默認是100，當然這個數(shù)字也可以在插件調(diào)用時定義好。

jQuery

準備好html后，然后開始調(diào)用Bar Indicator，只要一句代碼：

<script>
$('#bar').barIndicator();
</script>

是不是非常的簡單，當然要滿足您的項目需求的話，還需要進行一些設(shè)置，而Bar Indicator為我們提供了豐富的選項設(shè)置和事件方法調(diào)用，諸如水平/垂直進度條、進度條顏色、數(shù)值展示、進度數(shù)值獲取與重新設(shè)置等。

選項與方法

Bar Indicator非常強大，還有很多選項不本文就不一一列出。以上介紹就是關(guān)于基于jQuery Bar Indicator 插件實現(xiàn)進度條展示效果，更多內(nèi)容請持續(xù)關(guān)注本站。

您可能感興趣的文章:

相關(guān)文章

寫出高效jquery代碼的19條指南
討論jQuery和javascript性能的文章并不罕見。然而，本文我計劃總結(jié)一些速度方面的技巧和我本人的一些建議，來提升你的jQuery和javascript代碼。好的代碼會帶來速度的提升?？焖黉秩竞晚憫馕吨玫挠脩趔w驗
2014-03-03
深入學習jQuery中的data()
大家應該都會有這樣一種感覺，data函數(shù)在jQuery中看起來很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來詳細深入的學習下jQuery中的data()，感興趣的朋友們可以參考借鑒。
2016-12-12
jQuery表單美化插件jqTransform使用詳解
這里主要是jQuery美化部分的實例，美化對象為文本框、密碼框、文本域、Select下拉框、按鈕等，有了這些示例，美化其它的表單元素應該不是大問題。
2015-04-04
用jquery實現(xiàn)自定義風格的滑動條實現(xiàn)代碼
用jquery實現(xiàn)自定義風格的滑動條的實現(xiàn)代碼，需要的朋友可以參考下。
2011-04-04
jQuery鼠標滑過橫向時間軸樣式(代碼詳解)
這篇文章主要介紹了jQuery鼠標滑過橫向時間軸樣式，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-11-11
關(guān)于jQuery UI 使用心得及技巧
最近項目中使用了一些插件來做頁面，這里把jQuery UI的使用分享出來，希望對新手有幫助。文章結(jié)尾附源碼下載
2012-10-10
jquery編寫Tab選項卡滾動導航切換特效
這篇文章主要為大家詳細介紹了jquery編寫Tab選項卡滾動導航切換特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-04-04
jQuery基于當前元素進行下一步的遍歷
通過jQuery方法選中了元素，如何基于這些已經(jīng)選中的元素進行下一步的遍歷呢？下面有個不錯的示例，大家可以參考下
2014-05-05
使用jQuery實現(xiàn)返回頂部
博客園是程序員們比較喜歡的聚集地，很多人喜歡發(fā)發(fā)心得，一直都覺著挺好的，但最不滿意他的一點是，沒有返回到頂部的功能，好吧，我們自己來添。
2015-01-01
jquery實現(xiàn)全選功能
這篇文章主要為大家詳細介紹了jquery實現(xiàn)全選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07