so ändern Sie die Standard-load ajax-loader gif in jquery mobile

Habe ich schon gesehen, die docs von jquery mobile, konnte aber nicht verstehen, wie man Integration auf meiner mobilen website. Die docs sind hier zu

http://jquerymobile.com/demos/1.2.0-pre/docs/pages/loader.html

Eigentlich das gif-Bild nicht animieren auf 2.x android-Geräte, so denke ich, über einen text nur eine Art von pre-loading widget.

Ich versucht, es per css wie dieses

.ui-icon-loading {
            background: url(themes/images/custom-ajax-loader.gif);
        }

aber die neue imag nicht korrekt skaliert und der alte hintergrund ist noch sichtbar.

Ich bin ein völliger noob mit javascript.kann mir jemand plz helfen Sie mir mit diesem?

InformationsquelleAutor Nav | 2012-09-01

Sind Sie zu erwähnen, das jQM 1.2 Alpha Docs also, meine Antwort basiert in diesem jQM-version.

Nachfolgend finden Sie 2 Optionen zum ändern der Standard-loader image.

Lösung 1

Wie gesagt in der jQM 1.2 Alpha Docs:

Wenn jQuery Mobile gestartet wird, löst es ein mobileinit event auf das document-Objekt. Um die Standardeinstellungen außer Kraft setzen, binden mobileinit. Weil das mobileinit-event wird ausgelöst, sofort, Sie müssen binden Sie Ihre Ereignishandler, bevor jQuery Mobile geladen wird. Link zu deinem JavaScript-Dateien in der folgenden Reihenfolge:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

Konfigurieren der laden-dialog Global folgende Einstellungen können definiert werden, auf dessen Prototyp, der während der mobileinit-event:

$( document ).bind( 'mobileinit', function(){
  $.mobile.loader.prototype.options.text = "loading";
  $.mobile.loader.prototype.options.textVisible = false;
  $.mobile.loader.prototype.options.theme = "a";
  $.mobile.loader.prototype.options.html = "";
});

Unten finden Sie ein Beispiel, in dem Sie vollständig anpassen können Sie den loader in den html-Prototyp option.

Beispiel:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(document).bind( 'mobileinit', function(){
              $.mobile.loader.prototype.options.text = "loading";
              $.mobile.loader.prototype.options.textVisible = true;
              $.mobile.loader.prototype.options.theme = "a";
              $.mobile.loader.prototype.options.textonly = false;
              $.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='../images/my-custom-image.png' /><h2>loading</h2></span>";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
        <script>
            $(document).on("click", ".show-page-loading-msg", function() {          
                $.mobile.loading('show');
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page" class="page-map" style="width:100%; height:100%;">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <button class="show-page-loading-msg">Click</button>
            </div>
        </div>
    </body>
</html>

Lösung 2

Überschreiben die Standard-CSS-Stile verwendet, um darzustellen die Seite loader.

BEARBEITET

Für jQM 1.1.1 version gibt es folgende konfigurierbare Optionen:

loadingMessage string, default: "laden"

Setzen Sie den text, der angezeigt wird, wenn eine Seite geladen wird. Wenn auf false eingestellt, wird die Nachricht nicht angezeigt.

loadingMessageTextVisible boolean, default: false

Ob der text sichtbar sein soll, wenn eine be-Nachricht angezeigt. Der text ist immer sichtbar für die be-Fehler.

loadingMessageTheme string, default: "a"

Das Thema, dass die be-message-box verwendet, wenn der text sichtbar ist.

Code Beispiel:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Page Title</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
            $(document).bind( 'mobileinit', function(){
               $.mobile.loadingMessageTheme = 'e';
               $.mobile.loadingMessageTextVisible = true;
                $.mobile.loadingMessage = "test";
            });
        </script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script>
            $(document).on("click", ".show-page-loading-msg", function() {          
                $.mobile.showPageLoadingMsg();
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page" class="page-map" style="width:100%; height:100%;">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Test</h1>
            </div>
            <!-- /content -->
            <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <button class="show-page-loading-msg">Click</button>
            </div>
        </div>
    </body>
</html>

Außerdem könnten Sie versuchen, zu überschreiben die Standard-CSS verwendet, um Stil der jQM-loader. Genauer gesagt, Sie könnte sich ändern oder überschreiben die Stile in der Rubrik Ladebildschirm und der Stil, in dem Abschnitt laden-Symbol, die verwendet werden, um darzustellen, an der Seite loader.

Finden Sie hier der CSS verwendet jQM 1.1.1.

/* loading icon */
.ui-icon-loading {
    background: url(images/ajax-loader.gif);
    background-size: 46px 46px;
}

/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; box-shadow: 0 1px 1px -1px #fff; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }

danke für den Kommentar ...lemme check es in meinem Projekt
übrigens ich verwende die neueste stabile version 1.1.1...ist es anders für diese version?
Ja, es ist anders. Ich dachte, Sie wurden mit jQM 1.2, weil die geposteten link bezeichnet jQM 1.2.
eigentlich die docs zeigte auf die gleiche Sache so klebte ich, dass ...ich wollte nicht wissen, dass..danke für den Hinweis..also was sollte ich verwenden für die 1.1.1?
Ich habe mögliche Lösungen für jQM 1.1.1. Ich hoffe, das hilft 🙂

InformationsquelleAutor Apostolos Emmanouilidis

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.