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