jquerymobile ładowanie tematu wiadomości

Question

Mam pytanie dotyczące ładowania wiadomości na jQuery Mobile.

Domyślnie motyw wiadomość ładowania jest a, według kodu jQuery mobile:

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

Chciałbym wiedzieć, w jaki sposób mogę zmienić domyślny motyw tego div, nie mogę zrozumieć to .

Z góry dziękuję.

Answer 1

Wygląda na to, że wiadomość o załadowaniu nie jest dostępna.

Kiedy patrzysz w kodzie źródłowym widać:

// 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>"); 

Oznacza to, że wybiera zawsze ui-body-a

Prawdopodobnie najbezpieczniejszym sposobem jest przesłonić div.ui-loader.ui-body-a patrz http://jsfiddle.net/N7Z9e/95/

Answer 2

odpowiedzi dla starej wersji, patrz poniżej dla jQuery Mobile 1.1.0+

nie jestem świadomy zmiennej można ustawić w programie obsługi mobileinit zdarzeń, ale można zmienić klasę theme'd gdy dokument jest gotowy:

//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'); 
}); 

Oto jsfiddle powyższego roztworu (można zmienić motyw okna ładunkowej z listy przycisków): http://jsfiddle.net/jasper/eqxN9/1/

aktualizacji

Komórka jQuery 1.1.0 dodaje pewne wsparcie dla tego, można ustawić kilka domyślnych:

loadingMessageciąg, default: "loading" Ustaw tekst pojawiający gdy strona się ładuje. Jeśli ustawiona na wartość false, wiadomość nie pojawi się w ogóle.

loadingMessageTextVisiblelogiczna, domyślnie: false czy tekst powinny być widoczne, gdy wiadomość ładowania jest wyświetlany. Tekst jest zawsze widoczny dla błędów ładowania.

loadingMessageThemeciąg, domyślnie: "a" Tematem że pole loading wiadomość używa, gdy tekst jest widoczny.

Źródło: http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

Należy pamiętać, że trzeba ustawić loadingMessageTextVisible do true na ręcznym ładowarka motywu do pracy z powodu nowej konstrukcji ładowacza. Jeśli nie ustawisz wiadomości, nie ma tła, aby zmienić kolor ...

Oto demonstracji: http://jsfiddle.net/vHJnd/

Szybkie czytać poprzez dokumentacji wynika, że ​​można to zrobić w locie, a teraz:

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

Możesz dodać te argumenty do funkcji showPageLoadingMsg() do wymusić motyw i komunikat do wyświetlenia. Jest to alternatywa dla ustawiania wartości domyślnej.

Oto demonstracji: http://jsfiddle.net/vHJnd/1/

Answer 3

Dobrze Sugerowałbym jQM ThemeRoller Narzędzie wydali:

• http://jquerymobile.com/themeroller/

ale jeśli chciał bawić się z nim, tutaj go:

• 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

skrzypcach js wymienione (http://jsfiddle.net/N7Z9e/95/) jest dobrym punktem wyjścia. Opieram się na tym trochę. Uważam, że czasami musisz użyć !, aby zastąpić style bazowe. Nienawidzę go używać, ale nie ma innego dobrego sposobu na obejście go czasami.

/* 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{ 

    } 

Ważna uwaga: W przyszłej wersji JQM ładowarka będzie łatwiej kontrolować post w ładowarce. Możesz zobaczyć kilka ulepszeń za pośrednictwem centrum git.

Answer 5

W jQuery Mobile 1.1 program ładujący jest teraz dostępny jako temat. Strona demo/test jest tutaj: http://jquerymobile.com/demos/1.1.0-rc.1/docs/config/loadingMessageTextVisible.html

Answer 6

mam bardzo udane rozwiązanie tego ...

po prostu przejdź do jquery-mobile.js. trzeba podjąć kroki tutaj

1. find "defaultHtml:" < div class = ' "+ b +"'> < span class = 'ui-icon-loading'> </span> < h1> </h1> </div>”
2. zastąpić go
   "defaultHtml:" // < div class = ' "+ b +"'> class // < rozpiętość = 'ui-icon-loading'> // </span> < h1> </h1> </div> "

powodzenia

• usuń wszystkie spacje ...