開發工具與關鍵技術:vs與jquery
作者:戴怡斌
撰寫時間:2019年5月26日
進度條大家絕不陌生,玩過遊戲的就更清楚了,代表的意思嗎,對玩遊戲的人來說加載場景,對瀏覽網頁的人來說就是等待,加載的意思。
進度條運用非常廣泛,樣式也是種類繁多,也可以配合其他代碼一起使用。
進度條還可應用於許多業務場景,如任務完成進度、loading等等,是一種較爲直觀的表達元素。
推薦使用插件,也不要問我爲什麼,用來就知道了,進度條我用layui裏面的進度條插件。
<link href="~/Hospital Outpatient/layui/css/layui.css" rel="stylesheet" />
因爲進度條需要加載事件,所以還要引用js,js纔是主要的,因爲進度條在layui插件裏特別依賴element組件,至於爲什麼特別依賴,後面就知道了
<script src="~/Hospital Outpatient/layui/layui.js"></script>
Layui插件裏面有兩種樣式也就是尺寸,顏色很多,自己喜歡就好。
一種是百分比顯示,第二種是分數顯示,而默認的百分比文本不會顯示,
小的進度條數字會在進度條的上面,大號進度條則是數字在進度條的裏面。
如果你不想要這些數字顯示,或者看着這些數字礙眼,你也可以不然他們顯示,其實默認就不顯示數字或百分比,
如果你想開啓,對屬性lay-showPercent設置任意值即可,隨便一個單詞就可以。但如果你不想顯示,千萬不要設置什麼no或者false,直接刪除該屬性即可。
就像圖中一樣把lay-showPercent直接刪掉就可以,就不會開啓數字顯示了。
Js部分很簡單,正確的說是有插件很簡單,都不敢相信,如果你沒寫element這個單詞,那你js部分就全部失敗,然後進度條就不會顯示(真的特別依賴)。
進度條可以和很多東西一起使用,比如時間選擇器。
當你全部敲完之後,在檢查一遍,運行。效果圖