javascript - 如何在controls.js 中的 View 中导航

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

要切换 View ，您可以使用带有隐藏页面选项卡的组件 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();
}