實作說明：目前參考公司專案{TOGO}的混合式APP當成實作練習，原先架構為MVC+JQuery Mobile。
程式架構：
MVC+Webix
程式說明：
Header和Footer實作於_Layout.cshtml，中間頁面採取Razor寫法，用@RenderBody去定義每個功能的頁面。
Ex. _Layout.cshtml
<header>
</header>
<body>
@RenderBody
</body>
<Footer>
</Footer>
中間頁面的內頁切換是採取Webix的'MultiView'方式，概念類似於Jquery Mobile的Page。
因MultiView有支援Animation，切換時就可使用動畫方式作切換，不設定時預設是滑動(type:'slide')。
範例程式碼：
webix.ui({
rows:[
{
view:'button',
label:'GoPage1',
click :function(){
$$("Multi").setValue("Page1");
}
},
{
view:'button',
label:'GoPage2',
click :function(){
$$("Multi").setValue("Page2");
}
}
,
{
id:'Multi',
cells:[
{
id:'Page1',template:'Page1'
},
{
id:'Page2',template:'Page2'
}
]
}]
}
);
呈現畫面：
沒有留言:
張貼留言