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