建设网站外贸,网络营销课程的心得体会,织梦做英文网站,上海网页制作公司文章目录 前言1. SplitApp1.1 组件结构1.2 Demo1.3 mode属性 2. SplitContainer 前言
本章节记录常用控件SplitApp#xff0c;SplitContainer。主要功能是在左侧显示Master页面#xff0c;右侧显示Detail页面。 Master页面和Detail页面可以由多个Page组成#xff0c;并支持… 文章目录 前言1. SplitApp1.1 组件结构1.2 Demo1.3 mode属性 2. SplitContainer 前言
本章节记录常用控件SplitAppSplitContainer。主要功能是在左侧显示Master页面右侧显示Detail页面。 Master页面和Detail页面可以由多个Page组成并支持相互跳转。 其路径分别是
sap.m.SplitAppsap.m.SplitContainer 1. SplitApp
1.1 组件结构 SplitApp包含masterPages和detailPagesmasterPages包含多个Page并且detailPages也包含多个Page。每个Page由id区分其路径。初始化时需要initialMaster和initialDetail两个属性中指定需要呈现的Page。 示例
SplitAppidSplitAppDemoinitialMastermasterinitialDetaildetailmasterPagesPage idmaster/Page idmaster2//masterPagesdetailPagesPage iddetail/Page iddetail2//detailPages
/SplitApp1.2 Demo View Pageidpagetitle{i18ntitle}SplitAppidSplitAppDemoinitialDetaildetailinitialMastermastermasterPagesPageidmastertitleMaster 1backgroundDesignListListStandardListItemtitleTo Master2typeNavigationpress.onPressGoToMaster//List/PagePageidmaster2titleMaster 2backgroundDesignListshowNavButtontruenavButtonPress.onPressMasterBackList itemPress.onListItemPressitemsStandardListItemtitleTo Detail 1typeActivecustom:todetail/StandardListItemtitleTo Detail 2typeActivecustom:todetailDetail/StandardListItemtitleTo Detail 3typeActivecustom:todetail2//items/List/Page/masterPagesdetailPagesPageiddetailtitleDetail 1backgroundDesignSolidVBoxLabel textDetail page 1 /ButtontextGo to Detail page2press.onPressNavToDetail//VBox/PagePageiddetailDetailtitleDetail 2backgroundDesignSolidshowNavButtontruenavButtonPress.onPressDetailBackVBox classsapUiSmallMarginText textThis is Detail Page2 //VBox/PagePageiddetail2titleDetail 3 PagebackgroundDesignSolidshowNavButtontruenavButtonPress.onPressDetailBackLabel textThis is Detail Page3 /Input /Label textLabel 2 /Input /Label textLabel 3 /Input /Label textLabel 4 /Input /Label textLabel 5 /Input //Page/detailPages/SplitApp/PageController onInit: function () {this.oSplitApp this.byId(SplitAppDemo);},onPressNavToDetail: function () {this.oSplitApp.to(this.createId(detailDetail));},onPressDetailBack: function () {this.oSplitApp.backDetail();},onPressMasterBack: function () {this.oSplitApp.backMaster();},onPressGoToMaster: function () {this.oSplitApp.toMaster(this.createId(master2));},onListItemPress: function (oEvent) {var sToPageId oEvent.getParameter(listItem).getCustomData()[0].getValue();this.oSplitApp.toDetail(this.createId(sToPageId));}1.3 mode属性 HideMode ( 不论屏幕大小Master始终在左上角隐藏 ) ShowHideMode屏幕尺寸大时显示在左侧尺寸小时隐藏在左上方 StretchCompressMode始终在左侧显示 PopoverMode小尺寸时以Popup形式显示 2. SplitContainer
上面提到的SplitApp是继承了SplitContainer。SplitContainer在其用法上和SplitApp是差不多的。
