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.