Mobile Platform as a Service:右上隅のボタンの設定

setOptionMenu API の使用

AlipayJSBridge.call('setOptionMenu', {
  title : 'Button',  // 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 : 'Button',
      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 // 複数のオプションを設定する場合、デフォルトの 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 の説明

次の 4 つのプロパティのうち 1 つだけを設定します。プロパティは、`reset` > `title` > `icontype` > `icon` の順に優先されます。

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

入力パラメーター