Javascript onsen用户界面导航器和滑动菜单
这是我在没有导航器的情况下使用的滑动菜单,在这个阶段它可以正常工作:Javascript onsen用户界面导航器和滑动菜单,javascript,onsen-ui,Javascript,Onsen Ui,这是我在没有导航器的情况下使用的滑动菜单,在这个阶段它可以正常工作: <ons-sliding-menu main-page = "default.html" menu-page = "menu.html" side = "left" var="menu" swipable="true" max-slide-distance="80%" type="overlay" swipeable="false"> </ons-sl
<ons-sliding-menu
main-page = "default.html"
menu-page = "menu.html"
side = "left"
var="menu"
swipable="true"
max-slide-distance="80%"
type="overlay"
swipeable="false">
</ons-sliding-menu>
ons-template id="default.html">
<ons-page id="default">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()">
<img src = "img/icon.png"/>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" id = "carousel"></ons-carousel>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list id = "list">
<ons-list-item modifier="chevron" onclick="menu.setMainPage('default.html', {closeMenu: true, callback: function(){getPageContent(0);}});
">
Presentation 1 (sqlite)
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('default.html', {closeMenu: true, callback: function(){loadPresentation(0);}});
">
Presentation Mysql
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setMainPage('default.html', {closeMenu: true, callback: function(){getPresentation(0);}});
">
<span class="notification">1</span> Test
</ons-list-item>
</ons-list>
</ons-template>
现在我想添加一个登录页面,我使用了导航器来创建它,并对我的html进行了这些更改
<ons-navigator animation="lift" var="LoginNavi">
<ons-page>
<ons-toolbar>
<div class="center">Log In</div>
</ons-toolbar>
<div class="login-form">
<input type="email" placeholder="Email" ng-model="email">
<input type="password" placeholder="Password" ng-model="password">
<br><br>
<ons-button modifier="large" onclick="LoginNavi.resetToPage('slidingmenu.html')">Log In</ons-button>
<br><br>
<ons-button modifier="quiet" class="forgot-password">Forgot password?</ons-button>
</div>
</ons-page>
</ons-navigator>
<ons-template id="slidingmenu.html">
<ons-page>
<ons-sliding-menu
main-page = "default.html"
menu-page = "menu.html"
side = "left"
var="menu"
swipable="true"
max-slide-distance="80%"
type="overlay"
swipeable="false">
</ons-sliding-menu>
</ons-template>
</ons-page>
但是loadPresentation不再工作,而getPageContent工作正常,旋转木马的行为出人意料。在getPresentation之后,我无法返回到上一个元素。选项卡栏中的按钮也不工作
有什么线索吗?或者你知道有没有其他方法可以让登录页面和滑动菜单同时出现
这里是rae我的js方法:
function loadPresentation(id) {
console.log("loadPresentation");
if (window.XMLHttpRequest) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", urls.getpresentationbyid + id, true);
xmlhttp.send(
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
console.log("loadPresentation");
var jsonPerPage = {};
json.forEach(function(d) {
if (!jsonPerPage.hasOwnProperty(d.id_page)) // Checks if page already exists
jsonPerPage[d.id_page] = []; //If no creates and initialized as an empty array
jsonPerPage[d.id_page].push(d);
});
for (var i in jsonPerPage) {
var p = document.createElement('p');
p.setAttribute('class', "item-label");
var pagetitle = document.createElement('h1');
pagetitle.innerHTML = jsonPerPage[parseInt(i.toString())][0].pagetitle;
var item = document.createElement('ons-carousel-item');
document.getElementById("carousel").appendChild(item);
p.appendChild(pagetitle);
console.log(jsonPerPage[parseInt(i.toString())][0].pagetitle);
jsonPerPage[i].forEach(function(element) {
var article = document.createElement('article');
var arttitle = document.createElement('h2');
var text = document.createElement('p');
arttitle.innerHTML = element.articletitle;
text.innerHTML = element.text;
article.appendChild(arttitle);
article.appendChild(text);
p.appendChild(article);
}, this);
item.appendChild(p);
}
}
}
}
}
function getPageContent(idpage){
db.transaction(
function(transaction){
transaction.executeSql('SELECT title, text FROM ARTICLE WHERE id_article IN (SELECT id_article FROM CONTENT WHERE id_page ==' +idpage+')' ,[],
//transaction.executeSql('SELECT title, text FROM ARTICLE WHERE id_page == ' + idpage ,[],
function(tx,result) {
for (var i = 0; i<result.rows.length; i++) {
var art = document.createElement('article');
var articleid = 'article'+ (i+1);
art.setAttribute('id', articleid);
var artTitle = document.createElement('h2');
var artText = document.createElement('p');
artTitle.innerHTML = result.rows.item(i).title;
artText.innerHTML = result.rows.item(i).text;
art.appendChild(artTitle);
art.appendChild(artText);
document.getElementById("carousel").appendChild(art);
};
},
function(err){
});
});
}
下面是一个使用ons导航器和ons滑动菜单的工作示例,您可以在其中隐藏滑动菜单的页面。我用它来做一个登录页面,然后再显示滑动菜单 确保您有: swipeable=false 滑动菜单位于导航器外部 您可以在导航后动态地将swipeable设置为true
<ons-template id="login.html">
<ons-navigator var="LoginNavi">
<ons-page id ="login">
<div class="login-form">
<input id = "email" type="email" class="text-input--underbar" placeholder="Email" ng-model="email">
<input id ="password" type="password" class="text-input--underbar" placeholder="Password" ng-model="password">
<br><br>
<ons-button modifier="large" class="login-button" onclick="login();LoginNavi.resetToPage('default.html');">Log In</ons-button>
<br><br>
<ons-button modifier="quiet" class="forgot-password">Forgot password?</ons-button>
</div>
</ons-page>
</ons-navigator>
</ons-template>
<ons-template id="default.html">
<ons-page>
<ons-carousel swipeable overscrollable auto-scroll fullscreen var="carousel" id = "carousel">
</ons-carousel
</ons-page>
</ons-template>
<ons-sliding-menu
id ="sliding"
main-page = "login.html"
menu-page = "menu.html"
side = "left"
var="menu"
swipeable="false"
max-slide-distance="80%"
type="overlay">
</ons-sliding-menu>