-1
это мой рабочий сползая меню без навигатора, на данном этапе он работает отлично:онсэн-интерфейс навигатор и раздвижное меню
<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){
});
});
}