基于jQuery Bar Indicator 插件實現(xiàn)進度條展示效果
Bar Indicator是一款基于jQuery的進度條數(shù)據(jù)展示插件,它可應用于數(shù)據(jù)統(tǒng)計展示、投票統(tǒng)計以及任務進度等諸多場景中。它使用簡單、選項豐富,幾乎可以滿足用戶所有基于進度條的WEB設計需求,本文將結(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>
是不是非常的簡單,當然要滿足您的項目需求的話,還需要進行一些設置,而Bar Indicator為我們提供了豐富的選項設置和事件方法調(diào)用,諸如水平/垂直進度條、進度條顏色、數(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實現(xiàn)自定義風格的滑動條實現(xiàn)代碼
用jquery實現(xiàn)自定義風格的滑動條的實現(xiàn)代碼,需要的朋友可以參考下。2011-04-04