Как я могу перемещаться по представлениям в controls.js
Я пробовал привет демо
И хотел создать другую страницу для навигации. Как я могу это сделать?
Вот что я подумал:
var AppForm1 = new ngControls({
Label1: {
Type: 'weLabel',
L: 20, T: 20,
Data: {
Text: 'Name:'
}
},
Edit1: {
Type: 'weEdit',
L:80, T: 20, W: 150,
Data: {
Text: 'Second view!'
}
},
Button1:
{
Type: 'weButton',
L: 80, T: 60,
Data: {
Text: 'Say Hello'
},
Events: {
OnClick: function(e) {
alert('Hello, '+AppForm.Edit1.GetText()+'!');
}
}
}
});
var AppForm = null;
function ngMain()
{
AppForm = new ngControls({
Label1: {
Type: 'weLabel',
L: 20, T: 20,
Data: {
Text: 'Name:'
}
},
Edit1: {
Type: 'weEdit',
L:80, T: 20, W: 150,
Data: {
Text: 'John'
}
},
Button1:
{
Type: 'weButton',
L: 80, T: 60,
Data: {
Text: 'Say Hello'
},
Events: {
OnClick: function(e) {
alert('Hello, '+AppForm.Edit1.GetText()+'!');
AppForm=AppForm1;
}
}
}
});
AppForm.Update();
}
1 ответ
Решение
Для переключения представлений вы можете использовать компонент ngPages со скрытыми вкладками страниц (свойство PagesVisible: false). В событии OnClick вы просто переключаете страницы через SetPage("SecondPage").
Пример ниже:
var AppForm = null;
function ngMain()
{
AppForm = new ngControls({
MyPages: {
Type: 'ngPages',
L: 0, T: 0, R: 0, B: 0,
Data: {
PagesVisible: false, // hide page tabs
Page: 0
},
Pages: [
{
id: 'FirstPage',
Controls: {
Label1: {
Type: 'weLabel',
L: 20, T: 20,
Data: {
Text: 'Name:'
}
},
Edit1: {
Type: 'weEdit',
L:80, T: 20, W: 150,
Data: {
Text: 'John'
}
},
Button1:
{
Type: 'weButton',
L: 80, T: 60,
Data: {
Text: 'Say Hello'
},
Events: {
OnClick: function(e) {
alert('Hello, '+AppForm.Edit1.GetText()+'!');
AppForm.MyPages.SetPage('SecondPage')
}
}
}
}
},
{
id: 'SecondPage',
Controls: {
Label2: {
Type: 'weLabel',
L: 20, T: 20,
Data: {
Text: 'Name:'
}
},
Edit2: {
Type: 'weEdit',
L:80, T: 20, W: 150,
Data: {
Text: 'Second view!'
}
},
Button2:
{
Type: 'weButton',
L: 80, T: 60,
Data: {
Text: 'Say Hello'
},
Events: {
OnClick: function(e) {
alert('Hello, '+AppForm.Edit2.GetText()+'!');
}
}
}
}
}
]
}
});
AppForm.Update();
}