如何更改或添加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移动加载器小部件的类？

回答

相关问题