jQuery Mobile 是一個(gè)優(yōu)秀的開(kāi)源跨平臺(tái)的 Javascript 框架,它是 jQuery 構(gòu)建的一款為移動(dòng)設(shè)備提供更多用戶(hù)體驗(yàn)的框架,包含了很多豐富的組件和特效。
當(dāng)用戶(hù)操作比較頻繁時(shí),我們需要給用戶(hù)一個(gè)反饋,告訴用戶(hù)程序正在運(yùn)行,不能進(jìn)行其他操作。因此,這時(shí)候就需要使用 jQuery Mobile 的加載中組件了。
在 HTML 中,我們可以使用以下代碼來(lái)添加一個(gè)加載中組件:
<div class="ui-loader"> <span class="ui-icon ui-icon-loading"></span> <h3>Loading...</h3> </div>其中,class 為ui-loader是必需的,它會(huì)告訴 jQuery Mobile 這是一個(gè)加載中組件。在組件中,我們可以通過(guò)添加文字、icon、背景等來(lái)使其更加美觀。 如果想讓加載中組件以彈出框的形式展示,我們可以使用以下代碼:
$.mobile.loading( "show", { text: "Loading...", textVisible: true, theme: "a", html: "" });其中,theme、text 和 textVisible 屬性是必需的。theme 指定了加載中組件的顏色方案,取值包括:a、b、c、d、e。text 指定了加載時(shí)顯示的文字,而 textVisible 屬性則決定了文字是否顯示。另外,我們還可以利用 html 屬性來(lái)添加 HTML 片段,例如:添加一個(gè)動(dòng)畫(huà) icon。 最后,在加載完成后,我們需要執(zhí)行以下代碼以關(guān)閉加載中組件:
$.mobile.loading( "hide" );這樣,我們就可以利用 jQuery Mobile 的加載中組件來(lái)實(shí)現(xiàn)對(duì)用戶(hù)更加友好的體驗(yàn)了。