Mobile Platform as a Service:Click upper-right menu buttons

optionMenu API usage

document.addEventListener('optionMenu', function (e) {
  alert("option menu clicked");
}, false);

Code examples

• The following example demonstrates the basic feature:

  <h1>Click the menu in the upper-right corner to see the effect</h1>
  <script>
  function ready(callback) {
  // If jsbridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
  }
  ready(function() {
  AlipayJSBridge.call('setOptionMenu', {
    title : 'Button',
    redDot : '5', // -1: Does not display. 0: Displays a red dot. 1-99: Displays a number on the red dot.
    color : '#ffff6600', // Must be an ARGB color value that starts with #.
  });
  document.addEventListener('optionMenu', function(e) {
    alert("optionMenu clicked!");
  }, false);
  });
  </script>

• Event for multiple option menus:

  <h1>Click each menu in the upper-right corner to see the effect</h1>
  <script>
  function ready(callback) {
  // If jsbridge is already injected, call it directly.
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // If not, listen for the injection event.
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
  }
  ready(function() {
  AlipayJSBridge.call('setOptionMenu', {
    // Menus are displayed from right to left.
    menus: [{
      icontype: 'scan',
      redDot: '-1', // -1: Does not display. 0: Displays a red dot. 1-99: Displays a number on the red dot.
    }, {
      icontype: 'user',
      redDot: '10', // -1: Does not display. 0: Displays a red dot. 1-99: Displays a number on the red dot.
    }],
    override: true // Specifies whether to keep the default optionMenu when multiple options are set.
  });
  // You must force a refresh of the interface.
  AlipayJSBridge.call('showOptionMenu');
  
  document.addEventListener('optionMenu', function(e) {
    alert(JSON.stringify(e.data));
  }, false);
  });
  </script>

  Note

  The optionMenu event is triggered only for a custom optionMenu. Clicking the default optionMenu does not trigger the optionMenu event.