JSAPI

Since 8.0

optionMenu

The callback event when option menu item is clicked.

Usage

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

Example

Basic Function

<h1>Please click on the option menu</h1>
<script>
function ready(callback) {
  // Invoke directly if JSBridge is already injected
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // Otherwise listen to `AlipayJSBridgeReady` event
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
  AlipayJSBridge.call('setOptionMenu', {
    title : 'Button',
    redDot : '5', // -1 for invisible, 0 for visible red dot, 1-99 for the number inside the red dot
    color : '#ff00ff00', //ARGB value
  });
});

document.addEventListener('optionMenu', function (e) {
  alert("optionMenu clicked!");
}, false);
</script>

Multiple option menu items

<h1>Please click on each menu item</h1>
<script>
function ready(callback) {
  // Invoke directly if JSBridge is already injected
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // Otherwise listen to `AlipayJSBridgeReady` event
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(){
  AlipayJSBridge.call('setOptionMenu', {
    // Displayed in reverse order
    menus: [{
      icontype: 'scan',
      redDot: '-1', // -1 for invisible, 0 for visible red dot, 1-99 for the number inside the red dot
    }, {
      icontype: 'user',
      redDot: '-1', // -1 for invisible, 0 for visible red dot, 1-99 for the number inside the red dot
    }],
    override: true // Whether or not to keep the default option menu item when setting up multiple menu items
  });

  // Force to refresh UI
  AlipayJSBridge.call('showOptionMenu');
});

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

Remarks

  • optionMenu event will not be triggered if optionMenu property is not configured. In another word, clicking on the default ... button does not trigger optionMenu event.