進度條的運用


開發工具與關鍵技術: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部分就全部失敗,然後進度條就不會顯示(真的特別依賴)。

進度條可以和很多東西一起使用,比如時間選擇器。

當你全部敲完之後,在檢查一遍,運行。效果圖
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章