jQuery mobile Datebox CSS wird nicht richtig geladen

Ich habe eine einfache zwei Seiten Website mit jQuery Mobile Framework entwickelt. Ich musste das Datebox-Plugin zur Auswahl der Zeiten verwenden. Beide Seiten meiner Website befinden sich in der gleichen .php-Datei, getrennt durch divs mit data-role="page".jQuery mobile Datebox CSS wird nicht richtig geladen

Mein einziges Problem ist, dass, wenn die Datebox auf der ersten Seite der Webseite existiert, sie richtig lädt, aber auf jeder anderen Seite, sind ihre Icons durcheinander.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    <link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css"> 
    <script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script> 


</head> 
<body> 

    <div data-role="page" id="index"> 
     <header data-role="header" data-position="fixed"> 
      <h1>Home</h1> 
     </header> 

     <div data-role="main" class="ui-content"> 
      <div class="ui-field-contain"> 
       <label for="datebox">Time (seconds)</label> 
       <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'> 
      </div> 
     </div> 

     <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#index" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">Home</a></li> 
        <li><a href="#onoff" class="ui-btn ui-icon-plus ui-btn-icon-left">ON/OFF</a></li> 
        <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li> 
        <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li> 
       </ul> 
      </div> 
     </footer> 
    </div> 

    <div data-role="page" id="onoff"> 
     <header data-role="header" data-position="fixed"> 
      <h1>ONOFF</h1> 
     </header> 

     <div data-role="main" class="ui-content"> 

      <div class="ui-field-contain"> 
       <label for="datebox">Time (seconds)</label> 
       <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'> 
      </div> 
     </div> 

     <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#index" class="ui-btn ui-icon-plus ui-btn-icon-left">Home</a></li> 
        <li><a href="#onoff" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">ON/OFF</a></li> 
        <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li> 
        <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li> 
       </ul> 
      </div> 
     </footer> 

    </div> 

</body> 
</html>

Die folgenden Bilder zeigen das Problem. Auf Seite zu laden, wird das erste div mit page-role="page" und id="index" geladen und das datebox Symbol funktioniert wie beabsichtigt:

Aber wenn ich auf die zweite Seite mit der Fußzeile navbar ON/OFF Registerkarte navigieren, erhalte ich diese seltsame Symbol Platzierung:

Bitte helfen Sie mir herauszufinden, was hier schief geht.

Quelle

2017-04-09 user3889963

den Nagel auf den Kopf getroffen user3889963.

Laden Sie die Quelldateien für JQM für Datebox herunter und rufen Sie sie dann direkt in Ihrem Kopf auf.

<script src="../jtsage-datebox.min.js" type="text/javascript"></script> 
<link href="../jtsage-datebox.min.css" rel="stylesheet">

Diese vorherige Frage zeigt, dass es ein Problem mit dem Plugin über die Jquery Mobile DateBox plugin only working when linked directly to page CDN mit

Hier wird es direkt mit den Dateien installiert arbeiten.

Quelle

2017-04-09 15:42:33

Diese Antwort wurde nur zu Referenzzwecken hinzugefügt. –

Eindeutige Benennung ist das Problem.

In beiden Seiten rufen Sie den Datebox-Eintrag mit dem gleichen Namen an, so dass nur der erste korrekt formatiert wird.

Benennen Sie einfach die zweite Seite als datebox2 dies sollte das Problem beheben. Als Label für die Suche nach der ersten eindeutigen ID von "databox" und style that one.

<div data-role="main" class="ui-content"> 
      <div class="ui-field-contain"> 
       <label for="datebox2">Time (seconds)</label> 
       <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'> 
      </div> 
     </div>

Quelle

2017-04-09 14:28:22

Das scheint nicht das Problem. Ich bekomme immer noch die gleiche Ausgabe nach dem Ändern der Bezeichnung für = databox2 – user3889963

@ user3889963 Diese Antwort ist falsch, aber ich würde eine eindeutige Benennung für das Datebox-Feld empfehlen, da in Kürze Probleme auftreten, wenn Sie versuchen, die Werte der Datebox mit in JQM . –

Hmm, ich bin nicht sicher, warum dies ist aber lokale Dateien anstelle der CDN-Links in den Kopf, um mich mit aktivierter die datebox Plugin über mehrere Seiten zu verwenden. Die Dateien wurden erzeugt, um den Download-Builder verwenden Sie hier:

http://dev.jtsage.com/DateBox/builder/

Quelle

2017-04-09 14:59:11 user3889963

jQuery mobile Datebox CSS wird nicht richtig geladen

Antwort

Verwandte Themen