如何更改或添加jquery移動加載器小部件的類？

基於這裏的文檔：http://api.jquerymobile.com/loader/#option-classes 如何更改或添加jquery移動加載器小部件的類？

有一種方法來更改或添加ui-loader（加載程序小部件的默認類）。

但是我試過了，但不知怎的，它並沒有改變任何東西。這裏是我的演示： https://jsfiddle.net/yusrilmaulidanraji/u1q4xjnt/4/

有什麼我想念的嗎？

2017-10-17 Yusril Maulidan Raji

我不相信這個類是可以改變的，作爲jQuery Mobile的內部邏輯依賴於那個正在修復的類。不過，您可以根據需要將其他類添加到微調器。出於什麼原因你需要這樣做？ –

@RoryMcCrossan正如你在我的演示中看到的，我試圖通過在我的css中定製'.ui-loading .ui-loader'來基本上增加我的加載器的UI的寬度。但是它也會影響默認的加載器。因此，我認爲我可以嘗試指定我的自定義加載器的類然後。 –

在這種情況下，我建議通過在父元素上放置一個類並將CSS掛接到該元素來針對特定的加載器，例如。 '.parent-element .ui-loading .ui-loader {width：...}' –

不知何故，我已經嘗試過所有的文檔示例，但類選項仍然不會做任何事情。因此，我最終通過以編程方式從js中更改它。這裏是我的演示：https://jsfiddle.net/yusrilmaulidanraji/u1q4xjnt/6/

HTML：

<button id="hideLoading"></button>

的CSS：

.abv-loading-text{ 
    width: 100%; 
text-align: center; 
} 


.ui-loader-custom { 
    display: block; 
    width: 100%; 
    left: 0; 
    margin: 0 auto; 
}

JS：

var loadingUI = 
    "<label class='abv-loading-text'>Wait on this screen until the process is complete.</label>" + 
    "<span class='ui-icon-loading'></span>" + 
    "<h1></h1>"; 
$.mobile.loading("show", { 
    html: loadingUI, 
    textVisible: true 
}); 
$(".ui-loader").addClass('ui-loader-custom'); 



$("#hideLoading").on("click", function() { 
    $(".ui-loader").removeClass('ui-loader-custom'); 
    $.mobile.loading("hide"); 
});

來源

2017-10-17 13:57:17

如何更改或添加jquery移動加載器小部件的類？

回答

相關問題