openTabLayout

打開tabLayout布局

本方法繼承了openWin方法的所有參數(shù)，同時在此基礎(chǔ)上增加了navigationBar、tabBar等參數(shù)，來設(shè)置和使用原生的頂部導(dǎo)航欄和底部標(biāo)簽欄，可以通過closeWin方法來關(guān)閉頁面。為幫助您更好的了解和使用tabLayout，可以參考論壇的示例說明。

如果在首頁需要使用tabLayout，可以將相關(guān)參數(shù)配置在JSON文件中，再在config.xml中將content的值設(shè)置成該JSON文件的路徑，例如：

// 創(chuàng)建一個app.json文件，放置在widget目錄下
{
  "name": "root",
  "tabBar": {
    "frames": [{
      "title": "頁面一",
      "name": "page1",
      "url": "widget://html/page1.html"
    }, {
      "title": "頁面二",
      "name": "page2",
      "url": "widget://html/page2.html"
    }, {
      "title": "頁面三",
      "name": "page3",
      "url": "widget://html/page3.html"
    }],
    "list": [{
      "text": "頁面一",
      "iconPath": "widget://image/tab_1.png",
      "selectedIconPath": "widget://image/tab_1_hov.png"
    }, {
      "text": "頁面二",
      "iconPath": "widget://image/tab_2.png",
      "selectedIconPath": "widget://image/tab_2_hov.png"
    }, {
      "text": "頁面三",
      "iconPath": "widget://image/tab_3.png",
      "selectedIconPath": "widget://image/tab_3_hov.png"
    }]
  }
}


// config.xml中設(shè)置content字段的值為JSON文件的路徑：
<content src="app.json" />

openTabLayout({params})

params

title：

• 類型：字符串
• 默認(rèn)值：無
• 描述：（可選項）顯示在頂部navigationBar上面的標(biāo)題

hideNavigationBar：

• 類型：布爾
• 默認(rèn)值：false
• 描述：（可選項）是否隱藏頂部navigationBar導(dǎo)航欄，只在傳了navigationBar參數(shù)時有效

hideTabBar：

• 類型：布爾
• 默認(rèn)值：false
• 描述：（可選項）是否隱藏底部tabBar標(biāo)簽欄，只在傳了tabBar參數(shù)時有效

navigationBar：

• 類型：JSON對象
• 默認(rèn)值：無
• 描述：（可選項）頂部navigationBar導(dǎo)航欄配置信息
• 內(nèi)部字段：

{
    height:                   //（可選項）導(dǎo)航欄高度。默認(rèn)值45。數(shù)字類型
    background:               //（可選項）導(dǎo)航欄背景。支持顏色值和圖片，默認(rèn)值#fff，字符串類型
    shadow:                   //（可選項）導(dǎo)航欄底部陰影線顏色。默認(rèn)值#ddd，字符串類型
    color:                    //（可選項）導(dǎo)航欄標(biāo)題文字顏色。默認(rèn)值#000，字符串類型
    fontSize:                 //（可選項）導(dǎo)航欄標(biāo)題字體大小。默認(rèn)值17，數(shù)字類型
    fontWeight:               //（可選項）導(dǎo)航欄標(biāo)題字體粗細(xì)。字符串類型。Android及iOS8.2以下系統(tǒng)只支持normal、bold，iOS8.2及以上系統(tǒng)支持normal、bold、bolder、lighter、100~900。
    fontFamily:               //（可選項）導(dǎo)航欄標(biāo)題字體。只支持iOS，字符串類型
    hideBackButton:           //（可選項）是否隱藏默認(rèn)返回按鈕。如果傳了leftButtons，hideBackButton參數(shù)失效。返回按鈕由箭頭圖標(biāo)和前一個頁面的標(biāo)題組成，若前一個頁面未設(shè)置標(biāo)題，則按鈕文字為“返回”?？梢酝ㄟ^監(jiān)聽navbackbtn或keyback事件來處理返回按鈕的點擊事件。布爾類型
    leftButtons:              //（可選項）導(dǎo)航欄左邊按鈕組。左邊按鈕會替換掉默認(rèn)的返回按鈕，按鈕按照數(shù)組順序從左至右顯示，按鈕建議最多2個，可以通過監(jiān)聽navitembtn事件來處理按鈕點擊事件，JSON對象數(shù)組類型
    [{
        text:                 //（可選項）按鈕標(biāo)題文字，可以和icon同時存在，字符串類型
        color:                //（可選項）按鈕標(biāo)題文字顏色，默認(rèn)值#000，字符串類型
        fontSize:             //（可選項）按鈕標(biāo)題字體大小。默認(rèn)值17，數(shù)字類型
        fontWeight:           //（可選項）按鈕標(biāo)題字體粗細(xì)，默認(rèn)值normal。字符串類型。Android及iOS8.2以下系統(tǒng)只支持normal、bold，iOS8.2及以上系統(tǒng)支持normal、bold、bolder、lighter、100~900。
        fontFamily:           //（可選項）按鈕標(biāo)題字體。只支持iOS，字符串類型
        iconPath:             //（可選項）按鈕 icon 圖標(biāo)路徑，可以和 text 同時存在，圖片顯示大小由圖片尺寸和 scale 參數(shù)決定，字符串類型
        scale:                //（可選項）圖片的縮放倍數(shù)，默認(rèn)為 4，數(shù)字類型。顯示規(guī)則：當(dāng) scale 值為 3 時，若設(shè)備上面期望顯示的圖標(biāo)尺寸為 30*25，則圖片實際尺寸需要為 90*75。
    }],
    rightButtons:             //（可選項）導(dǎo)航欄右邊按鈕組。按鈕按照數(shù)組順序從右至左顯示，按鈕建議最多2個，可以通過監(jiān)聽navitembtn事件來處理按鈕點擊事件，JSON對象數(shù)組類型
    [{
        text:                 //（可選項）按鈕標(biāo)題文字，可以和icon同時存在，字符串類型
        color:                //（可選項）按鈕標(biāo)題文字顏色，默認(rèn)值#000，字符串類型
        fontSize:             //（可選項）按鈕標(biāo)題字體大小。默認(rèn)值17，數(shù)字類型
        fontWeight:           //（可選項）按鈕標(biāo)題字體粗細(xì)，默認(rèn)值normal。字符串類型。Android及iOS8.2以下系統(tǒng)只支持normal、bold，iOS8.2及以上系統(tǒng)支持normal、bold、bolder、lighter、100~900。
        fontFamily:           //（可選項）按鈕標(biāo)題字體。只支持iOS，字符串類型
        iconPath:             //（可選項）按鈕 icon 圖標(biāo)路徑，可以和 text 同時存在，圖片顯示大小由圖片尺寸和 scale 參數(shù)決定，字符串類型
        scale:                //（可選項）圖片的縮放倍數(shù)，默認(rèn)為 4，數(shù)字類型。顯示規(guī)則：當(dāng) scale 值為 3 時，若設(shè)備上面期望顯示的圖標(biāo)尺寸為 30*25，則圖片實際尺寸需要為 90*75。
    }]
}

tabBar：

• 類型：JSON對象
• 默認(rèn)值：無
• 描述：（可選項）底部tabBar標(biāo)簽欄配置信息，可以通過監(jiān)聽tabitembtn事件來處理標(biāo)簽欄每項的點擊事件
• 內(nèi)部字段：

{
    height:                    //（可選項）標(biāo)簽欄高度。默認(rèn)值54。數(shù)字類型
    background:                //（可選項）標(biāo)簽欄背景。支持顏色值和圖片，默認(rèn)值#fff，字符串類型
    shadow:                    //（可選項）標(biāo)簽欄頂部陰影線顏色。默認(rèn)值#ddd，字符串類型
    color:                     //（可選項）標(biāo)簽欄各項的文字顏色。默認(rèn)值#000，字符串類型
    selectedColor:             //（可選項）標(biāo)簽欄各項選中狀態(tài)的文字顏色。默認(rèn)值#000，字符串類型
    fontSize:                  //（可選項）標(biāo)簽欄各項文字字體大小。默認(rèn)值10，數(shù)字類型
    fontWeight:                //（可選項）標(biāo)簽欄各項文字字體粗細(xì)，默認(rèn)值normal。字符串類型。Android及iOS8.2以下系統(tǒng)只支持normal、bold，iOS8.2及以上系統(tǒng)支持normal、bold、bolder、lighter、100~900。
    fontFamily:                //（可選項）標(biāo)簽欄各項文字字體。只支持iOS，字符串類型
    textOffset:                //（可選項）標(biāo)簽欄各項文字距離底部的距離。默認(rèn)值2，數(shù)字類型
    animated:                  //（可選項）選中標(biāo)簽欄每項時，切換對應(yīng)的頁面是否帶有動畫效果，默認(rèn)值false。布爾類型
    scrollEnabled:             //（可選項）標(biāo)簽欄每項對應(yīng)的頁面間是否能夠左右滾動切換，默認(rèn)值true。布爾類型
    index:                     //（可選項）默認(rèn)選中項的索引。默認(rèn)值0。數(shù)字類型
    preload:                   //（可選項）預(yù)加載的頁面?zhèn)€數(shù)。默認(rèn)值0。數(shù)字類型
    list:                      // 標(biāo)簽欄各項配置信息，JSON對象數(shù)組類型
    [{
        text:                  //（可選項）標(biāo)題文字，可以和icon同時存在，字符串類型
        iconPath:              //（可選項）默認(rèn)狀態(tài)下 icon 圖標(biāo)路徑，可以和 text 同時存在，圖片顯示大小由圖片尺寸和 scale 參數(shù)決定，字符串類型
        selectedIconPath:      //（可選項）選中狀態(tài)下 icon 圖標(biāo)路徑，可以和 text 同時存在，圖片顯示大小由圖片尺寸和 scale 參數(shù)決定，字符串類型
        scale:                 //（可選項）圖片的縮放倍數(shù)，默認(rèn)為 4，數(shù)字類型。顯示規(guī)則：當(dāng) scale 值為 3 時，若設(shè)備上面期望顯示的圖標(biāo)尺寸為 30*25，則圖片實際尺寸需要為 90*75。
    }],
    frames:                    // 標(biāo)簽欄各項對應(yīng)的頁面的信息，JSON對象數(shù)組類型
    [{
        title:                 //（可選項）標(biāo)簽欄切換時對應(yīng)頂部導(dǎo)航欄的標(biāo)題文字，字符串類型
        ...                    // 同openFrameGroup方法中frames參數(shù)里面的參數(shù)
    }]
}

示例代碼

// 打開只有navigationBar的頁面：
api.openTabLayout({
    name: 'help',
    url: 'widget://html/help.html',
    title: '幫助',
    hideNavigationBar: false,
    navigationBar: {
        background: '#5082c2',
        color: '#fff',
        leftButtons: [{
            iconPath: 'widget://image/back.png'
        }]
    }
});


// 打開只有tabBar的頁面：
api.openTabLayout({
    name: 'tabLayout',
    url: 'widget://html/tabLayout.html',
    hideTabBar: false,
    tabBar: {
        selectedColor: '#45C01A',
        list: [{
            text: '頁面一',
            iconPath: 'widget://image/tab_1.png',
            selectedIconPath: 'widget://image/tab_1_hov.png'
        }, {
            text: '頁面二',
            iconPath: 'widget://image/tab_2.png',
            selectedIconPath: 'widget://image/tab_2_hov.png'
        }, {
            text: '頁面三',
            iconPath: 'widget://image/tab_3.png',
            selectedIconPath: 'widget://image/tab_3_hov.png'
        }],
        frames: [{
            name: 'page1',
            url: 'widget://html/page1.html'
        }, {
            name: 'page2',
            url: 'widget://html/page2.html'
        }, {
            name: 'page3',
            url: 'widget://html/page3.html'
        }]
    }
});

可用性

iOS系統(tǒng)，Android系統(tǒng)

可提供的1.2.99及更高版本