基于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實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-04-04jQuery鼠標(biāo)滑過(guò)橫向時(shí)間軸樣式(代碼詳解)
這篇文章主要介紹了jQuery鼠標(biāo)滑過(guò)橫向時(shí)間軸樣式,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11jquery編寫(xiě)Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效
這篇文章主要為大家詳細(xì)介紹了jquery編寫(xiě)Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-04-04jQuery基于當(dāng)前元素進(jìn)行下一步的遍歷
通過(guò)jQuery方法選中了元素,如何基于這些已經(jīng)選中的元素進(jìn)行下一步的遍歷呢?下面有個(gè)不錯(cuò)的示例,大家可以參考下2014-05-05