基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果
Bar Indicator是一款基于jQuery的進(jìn)度條數(shù)據(jù)展示插件，它可應(yīng)用于數(shù)據(jù)統(tǒng)計(jì)展示、投票統(tǒng)計(jì)以及任務(wù)進(jìn)度等諸多場(chǎng)景中。它使用簡(jiǎn)單、選項(xiàng)豐富，幾乎可以滿足用戶所有基于進(jìn)度條的WEB設(shè)計(jì)需求，本文將結(jié)合實(shí)例給大家講解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>
由于使用了動(dòng)畫(huà)緩沖效果，記得把easing插件也加上，您可以下載源碼包，這些文件都打包好了。然后在<body>中加上HTML：
<span id="bar">55lt;/span>
看到了吧，代碼中數(shù)字55表示的就是這個(gè)進(jìn)度條要展示的進(jìn)度，默認(rèn)是100，當(dāng)然這個(gè)數(shù)字也可以在插件調(diào)用時(shí)定義好。
jQuery
準(zhǔn)備好html后，然后開(kāi)始調(diào)用Bar Indicator，只要一句代碼：
<script>
$('#bar').barIndicator();
</script>
是不是非常的簡(jiǎn)單，當(dāng)然要滿足您的項(xiàng)目需求的話，還需要進(jìn)行一些設(shè)置，而B(niǎo)ar Indicator為我們提供了豐富的選項(xiàng)設(shè)置和事件方法調(diào)用，諸如水平/垂直進(jìn)度條、進(jìn)度條顏色、數(shù)值展示、進(jìn)度數(shù)值獲取與重新設(shè)置等。
選項(xiàng)與方法
Bar Indicator非常強(qiáng)大，還有很多選項(xiàng)不本文就不一一列出。以上介紹就是關(guān)于基于jQuery Bar Indicator 插件實(shí)現(xiàn)進(jìn)度條展示效果，更多內(nèi)容請(qǐng)持續(xù)關(guān)注本站。
- android實(shí)現(xiàn)ViewPager的Indicator的實(shí)例代碼
- Android實(shí)現(xiàn)Tab布局的4種方式（Fragment+TabPageIndicator+ViewPager）
- 教你制作Android中炫酷的ViewPagerIndicator(不僅仿MIUI)
- Android 利用ViewPager+GridView實(shí)現(xiàn)首頁(yè)導(dǎo)航欄布局分頁(yè)效果
- Android 中 TabHost與ViewPager結(jié)合實(shí)現(xiàn)首頁(yè)導(dǎo)航效果
- Android 開(kāi)發(fā)之BottomBar+ViewPager+Fragment實(shí)現(xiàn)炫酷的底部導(dǎo)航效果
- Android ViewPager制作新手導(dǎo)航頁(yè)(動(dòng)態(tài)加載)
- iOS中UIActivityIndicatorView的用法及齒輪等待動(dòng)畫(huà)實(shí)例
- Android改變ExpandableListView的indicator圖標(biāo)實(shí)現(xiàn)方法
- Android動(dòng)態(tài)給ViewPager添加Indicator導(dǎo)航
相關(guān)文章
這篇文章主要介紹了jQuery xml字符串的解析、讀取及查找方法,涉及jQuery方法針對(duì)xml字符串的解析、讀取及遍歷查詢等操作相關(guān)技巧,需要的朋友可以參考下2016-03-03
jQuery中常用getJSON來(lái)調(diào)用并獲取遠(yuǎn)程的JSON字符串，將其轉(zhuǎn)換為JSON對(duì)象，如果成功，則執(zhí)行回調(diào)函數(shù)。2011-03-03
jqPaginator結(jié)合express實(shí)現(xiàn)分頁(yè)展示內(nèi)容效果
這篇文章主要為大家詳細(xì)介紹了jqPaginator結(jié)合express實(shí)現(xiàn)分頁(yè)展示內(nèi)容效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
Jquery ajax加載等待執(zhí)行結(jié)束再繼續(xù)執(zhí)行下面代碼操作
這篇文章主要介紹了Jquery ajax加載等待執(zhí)行結(jié)束再繼續(xù)執(zhí)行下面代碼操作的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要介紹了jquery如何自定義表格樣式，分別實(shí)現(xiàn)三種樣式：默認(rèn)狀態(tài)（灰白相間），鼠標(biāo)懸浮狀態(tài)（綠色），鼠標(biāo)點(diǎn)擊狀態(tài)（黃色），感興趣的小伙伴們可以參考一下2015-11-11
Jquery UI震動(dòng)效果實(shí)現(xiàn)原理及步驟
如果你想你的博客頁(yè)面某些部分引起讀者的注意，你可以使這些部分震動(dòng)，如廣告等等，今天這篇文章將介紹怎樣使你的頁(yè)面中的元素震動(dòng)起來(lái),感興趣的你可不要錯(cuò)過(guò)了哦，或許對(duì)你學(xué)習(xí)jquery ui 有所幫助2013-02-02
這篇文章介紹了jQuery選擇器的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
jQuery如何跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè) 就這么簡(jiǎn)單
這篇文章主要介紹了如何在jQuery中跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁(yè)HTML，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
jquery判斷當(dāng)前瀏覽器的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery判斷當(dāng)前瀏覽器的實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-11-11
jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能示例
這篇文章主要介紹了jQuery結(jié)合jQuery.cookie.js插件實(shí)現(xiàn)換膚功能,結(jié)合實(shí)例形式分析了jQuery.cookie.js插件的常用函數(shù)功能及實(shí)現(xiàn)換膚功能的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10