Question

我正在尝试Hello demo

并希望创建另一个页面以导航到。我怎么能这样做？

以下是我的想法：

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();
}

Answer 1

对于切换视图，您可以将组件ngPages与隐藏页面选项卡一起使用（属性PagesVisible：false）。在OnClick事件中，您只需通过SetPage切换页面（＆＃39; SecondPage＆＃39;）。

以下示例：

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();
}

如何浏览controls.js中的视图

1 个答案: