如何通過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

對於切換視圖，您可以使用隱藏頁面選項卡（產權PagesVisible：假）組件ngPages。在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(); 
}