jquerymobile chargement du thème du message

Question

J'ai une question sur le chargement du message sur jQuery Mobile.

Par défaut, le thème du message de chargement est a, selon le code jQuery Mobile:

<div class="ui-loader ui-body-a ui-corner-all" style="top: 204.5px; ">...</div> 

Je voudrais savoir comment je peux changer le thème par défaut de ce div, je ne peux pas le comprendre .

Merci d'avance.

Answer 1

Il semble que le message de chargement n'est pas thématisable.

Quand vous regardez dans le code source, vous verrez:

// loading div which appears during Ajax requests 
// will not appear if $.mobile.loadingMessage is false 
var $loader = $("<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>"); 

Cela signifie qu'il prend toujours ui-body-a

Probablement le plus sûr moyen est de passer outre div.ui-loader.ui-body-a, voir http://jsfiddle.net/N7Z9e/95/

Answer 2

Réponse pour l'ancienne version, voir ci-dessous pour jQuery Mobile 1.1.0+

Je ne suis pas au courant d'une variable que vous pouvez définir dans le gestionnaire d'événements mobileinit mais vous pouvez changer la classe theme'd lorsque le document est prêt:

//run the code on `document.ready` 
jQuery(function ($) { 

    //find the loader div and change its theme from `a` to `e` 
    $('.ui-loader').removeClass('ui-body-a').addClass('ui-body-e'); 
}); 

Voici une jsFiddle de la solution ci-dessus (vous pouvez changer le thème de la boîte de dialogue de chargement à partir d'une liste de boutons): http://jsfiddle.net/jasper/eqxN9/1/

Mise à jour

jQuery mobile 1.1.0 ajoute un certain soutien pour cela, vous pouvez définir des valeurs par défaut:

loadingMessagechaîne, par défaut: "chargement" Définir le texte qui apparaît lorsqu'une page est en cours de chargement. Si la valeur est false, le message n'apparaîtra pas .

loadingMessageTextVisible booléen, par défaut: false Indique si le texte doit être visible lorsqu'un message de chargement est affiché. Le texte est toujours visible pour les erreurs de chargement.

loadingMessageThemechaîne, par défaut: "a" Le thème que la boîte de message de chargement utilise lorsque le texte est visible.

Source: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Notez que vous devez définir loadingMessageTextVisible à true pour le remplacement du thème du chargeur pour travailler en raison de la nouvelle conception du chargeur. Si vous ne définissez pas de message, il n'y a pas d'arrière-plan pour changer la couleur de ...

Voici une démonstration: http://jsfiddle.net/vHJnd/

Un peruse rapide à travers la documentation montre que vous pouvez le faire à la volée et maintenant:

$.mobile.showPageLoadingMsg("a", 'loading message'); 

Vous pouvez ajouter ces arguments à la fonction showPageLoadingMsg() à forcer un thème et un message à afficher. C'est une alternative à la définition d'une valeur par défaut.

Voici une démonstration: http://jsfiddle.net/vHJnd/1/

Answer 3

Eh bien, je suggère l'JQM ThemeRoller outil, ils ont sorti:

• http://jquerymobile.com/themeroller/

mais si vous voulez jouer avec elle, ici vous aller:

• http://jsfiddle.net/yLyFs/5/

JS

$('.changeLoadingBackgroundColor').click(function() { 
    $.mobile.showPageLoadingMsg(); 
    var bgColor = $(this).attr('id'); 
    var loader = $('div.ui-loader'); 

    loader.removeAttr('class'); 
    loader.attr('class','ui-loader ui-body-'+bgColor+' ui-corner-all'); 
    $(this).trigger('create'); 
}); 

HTML

<div id="test" data-role="page"> 
    <div data-role="content"> 
     Change the Background Color of the Loading Message, Choose a <b>Theme</b> 
     <div data-role="controlgroup" data-type="horizontal"> 
      <input type="button" id="a" class="changeLoadingBackgroundColor" value="A"/> 
      <input type="button" id="b" class="changeLoadingBackgroundColor" value="B"/> 
      <input type="button" id="c" class="changeLoadingBackgroundColor" value="C"/> 
      <input type="button" id="d" class="changeLoadingBackgroundColor" value="D"/> 
      <input type="button" id="e" class="changeLoadingBackgroundColor" value="E"/> 
      <input type="button" id="custom-color" class="changeLoadingBackgroundColor" value="Custom Color"/> 
     </div> 
    </div> 
</div> 

CSS

.ui-body-custom-color, 
.ui-dialog.ui-overlay-b { 
    border: 1px solid   #7FFF00 /*{b-body-border}*/; 
    background:    #cccccc /*{b-body-background-color}*/; 
    color:      #8A2BE2 /*{b-body-color}*/; 
    text-shadow: 0 /*{b-body-shadow-x}*/ 1px /*{b-body-shadow-y}*/ 0 /*{b-body-shadow-radius}*/ #fff /*{b-body-shadow-color}*/; 
    font-weight: normal; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e6e6 /*{b-body-background-start}*/), to(#ADFF2F /*{b-body-background-end}*/)); /* Saf4+, Chrome */ 
    background-image: -webkit-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Chrome 10+, Saf5.1+ */ 
    background-image: -moz-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* FF3.6 */ 
    background-image:  -ms-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* IE10 */ 
    background-image:  -o-linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); /* Opera 11.10+ */ 
    background-image:   linear-gradient(#FFF8DC /*{b-body-background-start}*/, #ADFF2F /*{b-body-background-end}*/); 
} 
.ui-body-custom-color, 
.ui-body-custom-color input, 
.ui-body-custom-color select, 
.ui-body-custom-color textarea, 
.ui-body-custom-color button { 
    font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/; 
} 
.ui-body-custom-color .ui-link-inherit { 
    color:  #8A2BE2 /*{b-body-color}*/; 
} 

.ui-body-custom-color .ui-link { 
    color: #00FFFF /*{b-body-link-color}*/; 
    font-weight: bold; 
} 

.ui-body-custom-color .ui-link:hover { 
    color: #00FFFF /*{b-body-link-hover}*/; 
} 

.ui-body-custom-color .ui-link:active { 
    color: #00FFFF /*{b-body-link-active}*/; 
} 

.ui-body-custom-color .ui-link:visited { 
    color: #00FFFF /*{b-body-link-visited}*/; 
} 

Answer 4

Le violon js énumérés (http://jsfiddle.net/N7Z9e/95/) est un bon point de départ. Je construis un peu sur cela. Je trouve que vous devez parfois utiliser! Important pour remplacer les styles de base. Je déteste l'utiliser, mais aucun autre bon moyen de contourner cela parfois.

/* override loader */ 
    div.ui-loader.ui-body-a { 
    border: 3px solid #104070 /*{a-body-border}*/; 
    background-color: rgba(0, 62, 87, .9); color: rgba(0, 62, 87, .9); 
    background-image: none; 
    font-weight: normal; 
    } 

/* Control the text placement, font size, etc..*/  
    div.ui-loader h1 { margin-top:10px; margin-bottom:4px; color:#fff !important;} 


    /* Change The Spinner Image And Styles * 
    .spinner{ 

    } 

Remarque importante: Dans une future version de JQM le chargeur sera plus facile de contrôler le message dans le chargeur. Vous pouvez voir quelques améliorations via le hub git.

Answer 5

En jQuery Mobile 1.1, le chargeur est maintenant thématisable. Une page de démonstration/test est ici: http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html

Answer 6

J'ai solution très réussie pour cette ...

vous allez juste à votre jquery-mobile.js. vous devez prendre ces mesures ici

1. trouver "defaultHtml:" < div class = ' "+ b +"'> < span class = 'ui-icon chargement'> </span> < h1> </h1> </div> »
2. le remplacer par
   "defaultHtml:" // < div class = ' "+ b +"'> // < span class = 'ui-icon chargement'> // </span> < h1> </h1> </div> "

Best of Luck

• s'il vous plaît supprimer tous les espaces ...