如何更改或添加 jquery 移动加载器小部件的类？

Posted 2023-05-08

【中文标题】如何更改或添加 jquery 移动加载器小部件的类？

【英文标题】：How to change or add class of jquery mobile loader widget?

【发布时间】：2018-03-29 00:09:07

【问题描述】：

基于此处的文档：http://api.jquerymobile.com/loader/#option-classes

有一种方法可以更改或添加ui-loader（加载器小部件的默认类）。

但是我已经尝试过了，但不知何故它并没有改变任何东西。这是我的演示： https://jsfiddle.net/yusrilmaulidanraji/u1q4xjnt/4/

有什么我想念的吗？

【问题讨论】：

我不相信这个类可以改变，因为 jQuery Mobile 的内部逻辑依赖于这个类是固定的。不过，您可以根据需要向微调器添加其他类。您需要这样做的原因是什么？

@RoryMcCrossan 正如你在我的演示中看到的那样，我试图通过在我的 css 中自定义 .ui-loading .ui-loader 来增加加载程序 ui 的宽度。但是，它也会影响默认加载程序。因此，我假设我可以尝试指定自定义加载器的类。

在这种情况下，我建议通过在父元素上放置一个类并将 CSS 挂钩来定位您想要的特定加载器，例如。 .parent-element .ui-loading .ui-loader width: ...

@RoryMcCrossan 我认为我做不到。因为ui-loader 就在body 元素下，如果我尝试body .ui-loading .ui-loader width: ...

，它仍然会影响默认加载器

【参考方案1】：

不知何故，我已经尝试了其文档中的所有示例，但 classes 选项仍然无济于事。因此，我最终通过 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");
);