如何在 controls.js 中浏览视图

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

如何在 controls.js 中浏览视图

How can I navigate through views in controls.js

javascript

dukescript