Sur la base de la documentation ici: http://api.jquerymobile.com/loader/#option-classesComment changer ou ajouter une classe de widget de chargeur mobile jquery?
Il est un moyen de changer ou ajouter ui-loader (classe par défaut du widget chargeur).
Cependant, je l'ai essayé, mais de toute façon cela ne change rien. Voici ma démo: https://jsfiddle.net/yusrilmaulidanraji/u1q4xjnt/4/
Y at-il quelque chose qui me manque?
D'une certaine manière, j'ai essayé tous les exemples de sa documentation, mais l'option classes ne fera toujours rien. Par conséquent, je finis par le modifier par programmation de js. Voici ma démo: 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");
});
Je ne crois pas que cette classe peut être modifiée, comme La logique interne de jQuery Mobile repose sur la correction de cette classe. Cependant, vous pouvez ajouter d'autres classes au spinner. Pour quelle raison avez-vous besoin de faire cela? –
@RoryMcCrossan Comme vous pouvez le voir dans ma démo, j'ai essayé d'augmenter fondamentalement la largeur de l'interface utilisateur de mon chargeur en personnalisant '.ui-loading .ui-loader' dans mon css. Cependant, cela affecte également le chargeur par défaut. Ainsi, j'ai supposé que je peux essayer de spécifier la classe de mon chargeur personnalisé alors. –
Dans ce cas, je suggère de cibler le chargeur spécifique que vous voulez en plaçant une classe sur un élément parent et en accroissant le CSS à cela, par exemple. '.parent-element .ui-loading .ui-loader {largeur: ...}' –