Mobile Platform as a Service：設定右上方按鈕

setOptionMenu 介面的使用方法

AlipayJSBridge.call('setOptionMenu', {
  title : '按鈕',  // 與 icon、icontype 三選一
  redDot : '-1', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數字
  color : '#ff00ff00', // 必須以 ＃ 開始 ARGB 顏色值
});

程式碼範例

設定各種類型的右側按鈕：

<h1>點擊以下按鈕看不同效果</h1>

<a href="javascript:void(0)" class="btn button">單按鈕</a>
<a href="javascript:void(0)" class="btn icon">單表徵圖</a>
<a href="javascript:void(0)" class="btn menu">多菜單(9.9.3)</a>
<a href="javascript:void(0)" class="btn reset">重設</a>
<a href="javascript:void(0)" class="btn hide">隱藏</a>
<a href="javascript:void(0)" class="btn show">顯示</a>

<script>
function ready(callback) {
  // 如果 jsbridge 已經注入則直接調用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果沒有注入則監聽注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(e) {
  document.querySelector('.button').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      title : '按鈕',
      redDot : '5', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數字
      color : '#ff00ff00', // 必須以＃開始 ARGB 顏色值
    });
    AlipayJSBridge.call('showOptionMenu');
  });

  document.querySelector('.icon').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
      redDot : '-1', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數字
    });
    AlipayJSBridge.call('showOptionMenu');
  });

  document.querySelector('.menu').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      // 顯示時的順序為從右至左
      menus: [{
        icontype: 'scan',
        redDot: '-1', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數字
      }, {
        icontype: 'user',
        redDot: '-1', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數字
      }],
      override: true // 在需要設定多個 option 的情況下，是否保留預設的 optionMenu
    });

    // 必須強制調用一次以重新整理介面
    AlipayJSBridge.call('showOptionMenu');
  });  

  document.querySelector('.reset').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      reset: true,
    });
    AlipayJSBridge.call('showOptionMenu');
  });  

  document.querySelector('.show').addEventListener('click', function() {
    AlipayJSBridge.call('showOptionMenu');
  });  

  document.querySelector('.hide').addEventListener('click', function() {
    AlipayJSBridge.call('hideOptionMenu');
  });  

  document.addEventListener('optionMenu', function(e) {
   alert(JSON.stringify(e.data));
  }, false);
});
</script>

API 說明

reset、title、icontype、icon 這四個屬性有一個即可，屬性的優先順序為：reset > title > icontype > icon。

AlipayJSBridge.call('setTitle',{
  title, icon, redDot, reset, color, override, menus, icontype
})

入參