2014-06-12 207 views
1

我正在开发和应用使用Telerik使用Cordova和Kendo UI。 我有问题,如果我向下滚动一个div然后切换到div使用一个简单的显示:没有在当前滚动的div和显示:块到新的div我想看到整个应用程序保持向下滚动我没有选择滚动我刚刚有一个空的屏幕。Kendo UI不滚动

下面的代码我使用:

<body onload="onDeviceReady();logint();"> 
    <div id="tabstrip-home" 
     data-role="view" 
     data-title="Login" 
     data-model="app.loginService.viewModel"> 

     <div id="startupForm" data-role="view" style="display:block;"> 
      <img id="startup" class="startup" src="styles/images/startup.jpg"/> 
      <input id="closeStartButton" onclick="closeStart();" type="image" src="styles/images/vor.png" name="image" width="40" height="40" style="bottom:0;position:fixed;right:0;"> 
     </div> 

     <div class="logo-image" id="top" name="top"></div> 
     <div id="home" data-role="scroller" style="display:none;"> 
      <div id="homeOverview" style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;"> 
       <h3 style="padding-top:5px;">Angemeldet als: <span id="user"></span></h3> 
       <div id="statsNr" style="display:none;"> 
        <h3 >Zählwerke gesamt: <span id="zaehler"></span></h3> 
        <h3 style="padding-bottom:5px;">Zählwerke erfasst: <span id="zaehlererfasst"></span></h3> 
       </div> 
      </div> 
      <div id="auftragGeladenUndDa"> 
       <div style="margin-left:10px;"> 
        <button data-role="button" data-bind="click: showTermine" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;"> 
        Termine 
        </button> 
        <button data-role="button" data-bind="click: schhin" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;"> 
        Schlüsselliste 
        </button> 
        <button data-role="button" data-bind="click: showStats" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;"> 
        Statistik 
        </button> 
        <button data-role="button" onclick="test();" data-bind="click: showAbles" style="height: 50px;width: 61%; padding-top: 0.75em; text-align: center;"> 
        Erfassen 
        </button> 
        <button id="homeErfass" data-bind="click: showUpload" data-role="button" style="height: 50px;width: 30%; padding-top: 0.75em; text-align: center;"> 
        Ergebnisse übermitteln 
        </button> 
       </div> 
      </div> 
      <div id="auftragNichtDa"> 
       <button id="auftrag" onclick="kAuftragLaden();" data-bind="click: geladen" data-role="button" style="width: 90%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;"> 
        Neuen Auftrag laden 
       </button> 
      </div> 
     </div> 

     <div id="hinweiseForm" style="display:none;"> 
      <h3 id="row" style="color:black;">Hinweis und Schlüsselliste</h3> 
      <table id="hinweis" border="0" style="z-index: 1;background-color:white;margin-left: 10px;margin-right: 10px;margin-bottom:5%;"> 
       <tr> 
       </tr> 
     </table> 
     </div> 

     <div id="terminForm" data-role="view" style="display:none;"> 
      <h3 id="row" style="color:black;">Termine</h3> 
      <div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;"> 
      <p>Keine Termine vorhanden</p> 
       </div> 
     </div> 

     <div id="uploadForm" data-role="view" style="display:none;"> 
      <h3 id="row" style="color:black;">Ergebnisse übermitteln</h3> 
      <div id="uploadEinheit" style="background-color: rgba(255,255,255,0.5);padding-top:5px;padding-bottom:3px;margin-bottom:3px;margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;"> 
      <input id="theCheckbox" type="checkbox"> 
      </div> 
     </div> 

     <div id="statsForm" style="display:none;" > 
      <div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;"> 
       <h3 id="row" style="padding-top:5px;">Statistik</h3> 
       <h3 >Zählwerke gesamt: <span id="zaehlerin"></span></h3> 
       <h3 style="padding-bottom:5px;">Zählwerke erfasst: <span id="zaehlererfasstin"></span></h3> 
      </div> 
      <div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;padding-top: 10px;"> 
      <ul data-role="listview" data-style="inset" > 
       <li><div style="color:black;">Ort:</div> 
        <label> 
         <select style="color:black;" onchange="onchangeOrt();" id="statOrt"></select> 
        </label> 
       </li> 

      </ul> 
       <ul data-role="listview" data-style="inset" > 
       <li> 
        <div style="color:black;">Strasse</div> 
        <label> 
         <select style="color:black;" onchange="onchangeStrasse();" id="statOrt"></select> 
        </label> 
       </li> 
        </ul> 
      </div> 
      <div id="savedStrasse"></div> 
     </div> 

     <div id="ablesForm" style="display:none;" > 
      <ul data-role="listview" data-style="inset"> 
       <h3 id="row" style="color:black;margin-bottom: 0;margin-top: 0;">Orte</h3> 
       <li> 

        <input id="stift" type="image" src="styles/images/erfassen.png" name="image" width="40" height="40" style=""> 
        <input type="image" src="styles/images/suchen.png" name="image" width="40" height="40" style=""> 
        <input type="image" src="styles/images/foto.png" name="image" width="40" height="40" style=""> 
        <input type="image" src="styles/images/karte.png" name="image" width="40" height="40" style=""> 
       </li> 
       <li> 

        <select id="recog" onchange="changeFunc();" style="color:black;left: 0;width: 200px;"> </select> 
        <select id="2tab" onchange="changeAnz2();" style="margin-right:60px;color:black"><option value="1">K</option><option value="2">Z</option></select> 
        <select id="alleOffen" onchange="changeAnz2();" style="color:black;"><option value="1">Alle</option><option value="2">Offen</option></select> 
       </li> 
      </ul> 
      <div id="all1" style="font-size: 18pt;height:95%;background-color:white;margin-top: 0;margin-left:25px;margin-right:25px;box-shadow: 3px 3px 20px black;"></div> 
      <div id="all2" style="font-size: 18pt;height:95%;display:none;"></div> 
      <div id="all3" style="font-size: 18pt;height:95%;display:none;"></div> 
      <div id="all4" style="font-size: 18pt;height:95%;display:none;"></div> 
     </div> 

     <div id="erfassForm" style="display:none;" > 
      <div style="background-color: rgba(255,255,255,0.5);margin-left: 5px;margin-right: 5px;color:black;box-shadow: 3px 3px 20px black;padding-top: 1px;"> 
      <h3 style="color:black;display:none;" id="erfassName"></h3> 
      <h3 style="color:black;" id="erfassNameAnz"></h3> 
      <h3 style="color:black;display:none;"id="zaehlerNr"></h3> 
      <h3 style="color:black;"id="adresse"></h3> 
      <h3 style="color:black;display:none;"id="erfassStrasse"></h3> 
      <h3 style="color:black;display:none;"id="erfassHausnr"></h3> 
      <h3 style="color:black;display:none;"id="zpunktID"></h3> 
      <h3 style="color:black;display:none;"id="zaehlerID"></h3> 
      <h3 style="color:black;display:none;" id="ablEin"></h3> 
      <h3 style="color:black;display:none;" id="gerNR"></h3> 
      <h3 style="color:black;display:none;" id="AbleserNR"></h3> 
      <h3 style="color:black;"id="standMin" ></h3> 
      <h3 style="color:black;"id="standMax" ></h3> 
      <h3 style="color:black;display:none;" id="plasib"></h3> 
      <h3 style="color:black;display:none;" id="rebuild"></h3> 
      <select id="alleOrte" style="color:black;width: 45%;"></select> 
      <select id="alleAbleser" style="color:black;width: 45%; margin-left:20px;"></select> 
      <h3 style="color:black;margin-bottom: 0;">Zustandsmeldung</h3> 
      <select id="alleFehler" style="color:black;"></select> 
      <h3 style="color:black;margin-bottom: 0;">Aktueller Zählerstand</h3> 
      <input id="stand" type="stand" style="margin-left: 10px;"/> 
      <button data-click="reset" onclick="erfassenZae();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;"> 
       Erfassen 
      </button> 
       </div> 
      <br><br><br><br><br><br> 
      <div class="result-area ch50"> 
       <div class="results"> 
        <img style="display:none;margin:5px auto; width:120px; height:120px;" id="smallImage"/> 
       </div> 
       <div class="separator"></div> 
      </div> 
     </div> 

     <div id="settings" style="display:none;" > 
      <div id="adminMS" style="color:black;display:none;">Kennwort 
      <input id="adminPass" style="text-align:right;width: 150px;color: black;"/> 
      </div> 
      <div id="server" style="color:black;"> 
       <p>Sie müssen beim ersten Start einen Server einrichten. Bitte machen Sie dies jetzt!</p> 
       <p id="infofield"></p> 
       <p id="os"></p> 
       <p id="version">2.0.0.6</p> 
       <div style="display:inline"> 
        <p>Serveradresse:</p> 
        <input type="text" id="eingabe" style="width: 80%; margin-left: 5px;"/><br> 
        <button onclick="serverSpeichern();" id="serverTres" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Speichern</button> 
       </div> 
       <p>Qualitätsstufe (in Prozent) <input type="text" id="qalID" style="width: 100px; margin-left: 5px;"/><br></p> 
       <button id="settingsCloseButton" onclick="closet();logint();qalSpeichern();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Ok</button> 
      </div> 
      <button id="adminButton" onclick="showServer();" data-role="button" style="display:none;width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Anmelden</button> 
     </div> 

     <form data-bind="events: { keyup: checkEnter }" id="logForm" style="background-color: white; padding-top: 1px;margin-left: 10px;margin-right: 10px;height:95%;box-shadow: 3px 3px black;"> 
      <h3 data-bind="invisible: isLoggedIn" style="color:black;font-size:16pt;">Benutzeranmeldung</h3> 
      <ul data-role="listview" data-style="inset"> 
       <li> 
        <div style="color:black;margin-left:5px;">Geräte gesamt: 
         <div style="width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;"></div> 
        </div> 
        <label> 
        </label> 
       </li> 
       <li style="top:0;margin-left:5px;"> 
        <div style="color:black;">Geräte abgelesen: 
         <div style="width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;"></div> 
        </div> 
        <label> 
        </label> 
       </li> 
       <li><div style="color:black;margin-left:5px;height: 40px;">Ableser</div> 
        <label> 
         <select style="width: 30%;border: 1px solid gray;display: inline-block;float: right;border-radius: 5px;background-color: white;color:black;margin-right: 10px;" onchange="onchangeLogin();" id="Model" type="number" data-bind="value: username"> </select> 
        </label> 
       </li> 
       <li> 
        <div style="color:black;margin-left:5px;margin-top: 5px;">Kennwort</div> 
        <label> 
         <input id="passInput" onkeyup="disableButton();" onclick="cleart();" style="text-align:right;width: 30%;border: 1px solid gray;height: 20px;display: inline-block;float: right;border-radius: 5px;background-color: white;color:black;margin-right: 10px;" type="password" data-bind="value: password"/> 
        </label> 
       </li><br> 
       <li><button id="login" type="submit" data-role="button" data-bind="click: onLogin" value="Login" class="login-button" style="-webkit-border-radius: 5px;background-color: rgba(200,200,200,1.0);box-shadow: 3px 3px black;color:black;float:right;width:30%;">weiter</button></li> 
      </ul> 
      <!--<button onclick="settings();serverAnzeigen();" data-role="button" style="width: 40%; margin: 1em; padding-top: 0.75em;padding-right: 1.5em;padding-bottom: 0.8125em;padding-left: 1.5em; text-align: center;">Einstellungen</button> 
      --><br> 
     </form> 
    </div> 
    <input onclick="openStart();" type="image" src="styles/images/zurueck.png" style="display:none;"name="image" width="40" height="40"> 
    <div data-role="layout" data-id="tabstrip-layout"> 
     <div data-role="header"> 
      <div data-role="navbar"> 
       <span data-role="view-title"></span> 
      </div> 
     </div> 
     <div data-role="footer" > 
      <div id="footert" style="width: 100%;display:none;"> 
       <input id="closeButton" onclick="showHome();" type="image" src="styles/images/zurueck.png" name="image" width="40" height="40" style="bottom:0;position:fixed;"> 
       <input id="closeHome" onclick="logout();" type="image" src="styles/images/zurueck.png" name="image" width="40" height="40" style="bottom:0;position:fixed;"> 
       <input id="uploadButton" onclick="uploadAll();" type="image" src="styles/images/uebermitteln.png" name="image" width="40" height="40" style="bottom:0;position:fixed;display:none;"> 
       <!--<button id="closeButton" onclick="showHome();" data-click="reset" data-role="button" style="width: 40%; text-align: center;display:none;">Schließen</button> 
       <button id="erfassButton" data-click="reset" data-bind="click: showErfass" data-role="button" style="display:none; width: 40%; text-align: center;">Ablesen</button> 
       --> 
       <input id="settingsButton" onclick="settingsH();" type="image" src="styles/images/einstellungen.png" name="image" width="40" height="40" style="bottom:0;position:fixed;display:none;"> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 

没有我对〔实施例在名为hinweiseForm股利向下滚动,然后用下面的函数回去:

function showHome(){ 
      document.getElementById("ablesForm").setAttribute("style","display:none;"); 
      document.getElementById("hinweiseForm").setAttribute("style","display:none;"); 
      document.getElementById("statsForm").setAttribute("style","display:none;"); 
      document.getElementById("home").setAttribute("style","display:block;"); 
      document.getElementById("erfassForm").setAttribute("style","display:none;"); 
      document.getElementById("uploadForm").setAttribute("style","display:none;"); 
      document.getElementById("terminForm").setAttribute("style","display:none;"); 
      document.getElementById("closeHome").setAttribute("style","display:block;"); document.getElementById("footert").setAttribute("style","position:fixed;bottom:0px;width: 100%;display:block;"); 
      document.getElementById("plasib").innerHTML=""; 
      document.getElementById("closeButton").setAttribute("style","display:none;bottom:0;postion:fixed;"); 
      document.getElementById("uploadButton").setAttribute("style","display:none;"); 
      document.getElementById("settingsButton").setAttribute("style","display:block;bottom:0;margin-left:50px;position:fixed;"); 
      document.getElementById("settings").setAttribute("style","display:none"); 
      //$("#home").data("kendoMobileScroller").reset(); 
      //new kendo.mobile.Application(); 
      //app.application = new kendo.mobile.Application(document.body, { layout: "tabstrip-layout" }); 
     } 

我已经尝试了一些像重置功能的东西,但是我没有正确使用它,或者我需要以另一种方式来使用它。如果你能帮助我,那真是太棒了。

在此先感谢

+0

您是否尝试过在每个页面显示中重置滚动条? – ConnectingCode

+0

是的,我尝试过。我现在试图在自己的div中分离所有东西 – Sebi55

+0

它没有工作 – Sebi55

回答

1

我使用scrollTo方法滚动到我的意见的顶部。

app.application = new kendo.mobile.Application(document.body, { 
    layout: "tabstrip-layout" 
}); 

// get the view scroller 
var scroller = app.application.view().scroller; 

/* 
* scroller.scrollTop = The number of pixels that are hidden from view above the 
* scrollable area. 
*/ 
if (scroller.scrollTop) { 
    scroller.scrollTo(0, 0); 
}