基礎開放能力 – 導航欄

標題與背景顏色、左右側按鈕

setNavTitle、setNavBackground、setLeftButton、setNavRightButton、clearNavRightButton

setNavTitle

開發者可自行設定 Navigation bar 的背景顏色、標題文字與顏色，以配合品牌視覺色呈現。

建議使用相同的背景和標題顏色，維持一致性。

通過呼叫 jkos.setNavTitle 設定 Navigation bar 的 標題 與 標題顏色。

• 設定一次標題顏色即可套用至所有頁面，若無設定則預設顯示白色。
• 可針對單一頁面設定標題顯示內容，若無指定顏色則預設抓取該頁面標題 <title>。

使用方法​

jkos.setNavTitle(data, callback);

<button id="test">setNavTitle</button> 

<script> 
  document.querySelector('#test').addEventListener('click', () => {
    jkos.setNavTitle({
      title :  `string` ,
      color :  `#ffffff`, 
    }, (res) => {
      console.log(res.error)
      console.log(res.errorMessage)
    });
  });
</script>

入參說明​

必須 第一個參數：data

參數	必填	型態	說明
title	否	string	提供開發者改變 Navbar title 文字
color	否	string	提供開發者改變 Navbar title 文字的顏色，使用 hex 色碼

非必須 第二個參數： callback

返回設定函式成功與否，也可使用 async/await 取代 callback

參數	型態	說明
error	number	錯誤碼 – 詳情請參見錯誤碼說明
errorMessage	string	此描述為相關錯誤的 ASCII 編碼可讀文字

---

setNavBackground

通過呼叫 jkos.setNavBackground 設定 Navigation bar 背景 屬性。

• 設定一次導覽列的背景顏色即可套用至所有頁面，若無指定顏色則預設顯示街口品牌紅色。

使用方法​

jkos.setNavBackground(data, callback);

<button id="test">setNavBackground</button> 

<script> 
  document.querySelector('#test').addEventListener('click', () => {
    jkos.setNavBackground({
      color: '#ffffff',
    }, (res) => {
      console.log(res.error)
      console.log(res.errorMessage)
    });
  });
</script>

入參說明​

必須 第一個參數：data

參數	必填	型態	說明
color	是	string	提供開發者改變 Navbar 背景顏色，使用 hex 色碼

非必須 第二個參數： callback

參數	型態	說明
error	number	錯誤碼 – 詳情請參見錯誤碼說明
errorMessage	string	此描述為相關錯誤的 ASCII 編碼可讀文字

---

setNavLeftButton

通過呼叫 jkos.setNavLeftButton 控制 Navigation bar 左側顯示返回 (<) 或是關閉 (X) icon 以及其對應的行為和顏色。

• 設定一次按鈕顏色即可套用至所有頁面，若無指定顏色則預設顯示白色。
• 建議開發者將首頁設定為 X (type=2)，並在離開首頁時設為 < (type=1) 以確保使用者從任何頁面回到首頁時都能將 webview 畫面關閉。
• 可在使用者點擊按鈕時，喚起原生的 popup 視窗，阻擋其操作行為。您可以使用這個功能來設計『確定要離開嗎？』類型的詢問視窗。

當開發者未設定時，預設行為是

• 開啟的第一個畫面導覽列左方 icon 將會顯示關閉鈕 X。
• 其他頁面則視為內頁，皆會顯示返回鍵 <。

使用方法​

jkos.setNavLeftButton(data, callback);

<button id="test">setNavLeftButton</button> 

<script> 
document.querySelector ('#test'). addEventListener ('click', () => {
  jkos.setNavLeftButton({
    type :  `1` ,
    color :  `#ffffff`, 
    confirm: {
      content: 'string'
    }
  }, (res) => {
    console.log(res.error)
    console.log(res.errorMessage)
  });
});
</script>

入參說明​

必須 第一個參數：data

參數	必填	型態	說明
type	否	string	改變 Navbar 左上角按鈕 行為 與 UI :“1”向左箭頭的按鈕。返回前一頁“2”叉叉的按鈕。點擊後關閉 webview
color	否	string	改變 Navbar 左上角按鈕 顏色，使用 hex 色碼
confirm	否	object	當點擊左上角按鈕時觸發彈窗，確定是否繼續操作 已定義的行為
confirm.content	否	object	定義 彈窗內容文字

非必須 第二個參數： callback

參數	型態	說明
error	number	錯誤碼 – 詳情請參見錯誤碼說明
errorMessage	string	此描述為相關錯誤的 ASCII 編碼可讀文字

---

setNavRightButton

通過呼叫 jkos.setNavRightButton 控制 Navigation bar 右側顯示的 icon、顏色與其對應的功能，每次只能顯示一個 icon。

使用方法​

jkos.setNavRightButton(data, callback);

提供以下按鈕類型，可依需求設定導航欄右側按鈕：

設定 分享按鈕  mode = 1​

• 當使用者點擊分享按鈕時，會開啟原生分享 module。
• 分享文字內容為：我在街口發現了有趣的東西！分享給你 [當前頁面網址連結]
• 使用者點擊網址後，會透過街口 App 開啟畫面。
  • 若使用者的裝置沒有安裝街口 App 則會導引至街口 App 的商店下載頁。

<button id="test">setNavRightButton</button> 

<script> 
  document.querySelector('#test').addEventListener('click', () => {
    jkos.setNavRightButton({
      mode: '1',
      color: '#ffffff',
      url: 'http://xxxxxxxxxx'
    }, (res) => {
      console.log(res.error)
      console.log(res.errorMessage)
    });
  });
</script>

設定 我的按鈕  mode = 2​

• 開發者可指定該按鈕點擊後跳轉的頁面。
• 導轉網址的域名須與 WebView 當前頁面的域名一致。

<button id="test">setNavRightButton</button> 

<script> 
  document.querySelector('#test').addEventListener('click', () => {
    jkos.setNavRightButton({
      mode: "2",
      color: '#ffffff',
      url: 'http://xxxxxxxxxx',
      onClick: () => {
        // console.log('若 url 與 onClick 同時存在，onClick 會失效不會同時觸發');
      },
    }, (res) => {
      console.log(res.error)
      console.log(res.errorMessage)
    });
  });
</script>

設定 菜單按鈕  mode = 3​

• 提供開發者展示側邊欄。
• 設定成功後，當使用者點擊 menu icon 後，街口會回呼一次 onClick 事件。

<button id="test">setNavRightButton</button> 

<script> 
  document.querySelector('#test').addEventListener('click', () => {
    jkos.setNavRightButton({
      mode: "3",
      color: '#ffffff',
      onClick: () => {}
    }, (res) => {
      console.log(res.error)
      console.log(res.errorMessage)
    });
  });
</script>

設定 設定按鈕  mode = 4​

• 提供開發者顯示設定按鈕。
• 設定成功後，當使用者點擊 setting icon 後，街口會回呼一次 onClick 事件。

<button id="test">setNavRightButton</button> 

<script> 
  document.querySelector('#test').addEventListener('click', () => {
    jkos.setNavRightButton({
      mode: '4',
      color: '#ffffff',
      onClick: () => {}
    }, (res) => {
      console.log(res.error)
      console.log(res.errorMessage)
    });
  });
</script>

設定 資訊按鈕  mode = 5​

• 提供開發者顯示資訊按鈕。
• 設定成功後，當使用者點擊 info icon 後，街口會回呼一次 onClick 事件。

<button id="test">setNavRightButton</button> 

<script> 
  document.querySelector('#test').addEventListener('click', () => {
    jkos.setNavRightButton({
      mode: '5',
      color: '#ffffff',
      onClick: () => {}
    }, (res) => {
      console.log(res.error)
      console.log(res.errorMessage)
    });
  });
</script>

入參說明​

必須 第一個參數：data

參數	必填	型態	說明	mode 支援度
mode	是	string	設定 Navbar 右上角模式： “1”：分享按鈕 “2”：我的按鈕 “3”：菜單列表按鈕 “4”：設定按鈕 “5”：資訊按鈕
color	否	string	改變 Navbar 右上角 icon 的 顏色，使用 hex 色碼	1, 2, 3, 4, 5
url	mode 決定是否必填	string	改變 Navbar 右上角的 url (注意：只允許分享該網域的 url)	1(必填), 2, 3, 4, 5
onClick	否	string	點擊之後的回呼函式	2, 3, 4, 5

非必須 第二個參數： callback

返回設定函式成功與否，也可使用 async/await 取代 callback

參數	型態	說明
error	number	錯誤碼 – 詳情請參見錯誤碼說明
errorMessage	string	此描述為相關錯誤的 ASCII 編碼可讀文字

---

clearNavRightButton

通過呼叫 jkos.clearNavRightButton 移除 右上角 button

使用方法​

jkos.clearNavRightButton(callback);

<button id="test">clearNavRightButton</button> 

<script> 
  document.querySelector('#test').addEventListener('click', () => {
    jkos.clearNavRightButton((res) => {
      console.log(res.error)
      console.log(res.errorMessage)
    });
  });
</script>

入參說明​

非必須 第一個參數： callback

返回設定函式成功與否，也可使用 async/await 取代 callback

參數	型態	說明
error	number	錯誤碼 – 詳情請參見錯誤碼說明
errorMessage	string	此描述為相關錯誤的 ASCII 編碼可讀文字

錯誤碼回覆​

請參閱 錯誤代碼附錄。