如何設(shè)置jQuery中progressBar的進(jìn)度條顏色和其背景顏色

如果用的jquery UI

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)市中,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):13518219792

Java代碼 ：

style

.ui-progressbar{

background : green;

padding:1px;

}

.ui-progressbar-value{

background : LightBlue;

}

/style

script type="text/javascript"

$(function() {

$("#psp").progressbar({

value: 67

});

});

/script

/head

body

div id="psp"/div

/body

按這個(gè)代碼試試，jquery UI改變樣式一般用CSS修改：

用jquery實(shí)現(xiàn)進(jìn)度條效果

二樓的方法不是常規(guī)的解決辦法，個(gè)人感覺不是很好(不過他實(shí)現(xiàn)的加載進(jìn)度是真實(shí)的，他的進(jìn)度條是可以反映當(dāng)前未加載頁(yè)面的剩余內(nèi)容的---其實(shí)這種方法也挺好....不過一般情況下沒什么必要吧，如果要做成這樣的，用flex更好)。

一樓的方法不是正確的。如果簡(jiǎn)單地放一個(gè)loading圖片在頁(yè)面上的話，會(huì)有兩種情況：一、有可能實(shí)現(xiàn)加載的效果 。 二、在整個(gè)頁(yè)面其它元素加載了大部分或全部后，這張圖片才加載進(jìn)來(lái)，那就實(shí)現(xiàn)不了加載的效果了。

常規(guī)的解決辦法還是用ajax比較好。大概是這樣的。

需要兩個(gè)頁(yè)面。1.一個(gè)是實(shí)際頁(yè)面本身 2.另一個(gè)是一個(gè)空白頁(yè)面放一張loading圖片

先請(qǐng)求第2個(gè)頁(yè)面，在這個(gè)頁(yè)面中放一段ajax請(qǐng)求第1個(gè)頁(yè)面，在success函數(shù)里將頁(yè)面內(nèi)容輸出，并將loading圖片隱藏掉。

代碼是這樣的：

loading page:

body

img id='loadingImg' src='loading.gif' /

body

script

$.ajax({

type: 'GET',

url: 實(shí)際頁(yè)面路徑,

data: {},

success: function(){

$('body').append(data);

$('#loadingImg').hide();//或直接remove()

},

dataType: 'html'

});

/script

==========================================================

呵呵，一個(gè)加載的問題要考慮搜索的話原來(lái)就這么麻煩了。 div id="forspider".....給搜索蜘蛛看的純HTML..../div這里面的內(nèi)容是整個(gè)實(shí)際頁(yè)面的HTML嗎？是的話，那這個(gè)loading頁(yè)面本身加載就很笨重了，還不如直接跳到真實(shí)頁(yè)面呢。 哎，可惜我不太懂搜索，悲劇。請(qǐng)指教----為什么要用絕對(duì)定位覆蓋的方法來(lái)隱藏。直接把這一層display:none的話蜘蛛也會(huì)看不到嗎？

以上回答你滿意么？

使用jquery.form.js實(shí)現(xiàn)文件上傳及進(jìn)度條前端代碼

ajax的表單提交只能提交data數(shù)據(jù)到后臺(tái)，沒法實(shí)現(xiàn)file文件的上傳還有展示進(jìn)度功能，這里用到form.js的插件來(lái)實(shí)現(xiàn)，搭配css樣式簡(jiǎn)單易上手，而且高大上，推薦使用。

需要解釋下我的結(jié)構(gòu)， #upload-input-file 的input標(biāo)簽是真實(shí)的文件上傳按鈕，包裹form標(biāo)簽后可以實(shí)現(xiàn)上傳功能， #upload-input-btn 的button標(biāo)簽是展示給用戶的按鈕，因?yàn)樾枰獦邮降拿阑Ｉ蟼魍瓿缮傻奈募麑?huì)顯示在 .upload-file-result 里面， .progress 是進(jìn)度條的位置，先讓他隱藏加上 hidden 的class， .progress-bar 是進(jìn)度條的主體， .progress-bar-status 是進(jìn)度條的文本提醒。

去掉hidden的class，看到的效果是這樣的

[圖片上傳失敗...(image-2c700a-1548557865446)]

將上傳事件綁定在file的input里面，綁定方式就隨意了。

var progress = $(".progress-bar"), status = $(".progress-bar-status"), percentVal = '0%'; //上傳步驟 $("#myupload").ajaxSubmit({ url: uploadUrl, type: "POST", dataType: 'json', beforeSend: function () { $(".progress").removeClass("hidden"); progress.width(percentVal); status.html(percentVal); }, uploadProgress: function (event, position, total, percentComplete) { percentVal = percentComplete + '%'; progress.width(percentVal); status.html(percentVal); console.log(percentVal, position, total); }, success: function (result) { percentVal = '100%'; progress.width(percentVal); status.html(percentVal); //獲取上傳文件信息 uploadFileResult.push(result); // console.log(uploadFileResult); $(".upload-file-result").html(result.name); $("#upload-input-file").val(''); }, error: function (XMLHttpRequest, textStatus, errorThrown) { console.log(errorThrown); $(".upload-file-result").empty(); } });

[圖片上傳失敗...(image-3d6ae0-1548557865446)]

[圖片上傳失敗...(image-9f0adf-1548557865446)]

更多用法可以 參考官網(wǎng)

文章名稱：進(jìn)度條jquery,進(jìn)度條 特殊符號(hào)
分享URL：http://chinadenli.net/article2/dsephoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、軟件開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、、小程序開發(fā)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)