JSAPI

  • Since 8.0

    setOptionMenu

    Configure the behaviours of option menu in title bar. This API is for behaviour configuration only, please use showOptionMenu to show the option menu.

    Note:Due to App Transport Security (ATS), please use https or bases64 for image URL in iOS platform.

    Usage

    AlipayJSBridge.call('setOptionMenu', {
      title : 'Button', 
      redDot : '-1', // -1 for invisible, 0 for visible red dot, 1-99 for the number inside the red dot
      color : '#ff00ff00', // ARGB value
    });
    

    Example

    Various configurations of option menu buttons

    <h1>Please press the following buttons</h1>
    
    <a href="javascript:void(0)" class="btn button">Button only</a>
    <a href="javascript:void(0)" class="btn icon">Icon only</a>
    <a href="javascript:void(0)" class="btn menu">Multiple menu</a>
    <a href="javascript:void(0)" class="btn reset">Rest</a>
    <a href="javascript:void(0)" class="btn hide">Hide</a>
    <a href="javascript:void(0)" class="btn show">Show</a>
    
    <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(e){
      document.querySelector('.button').addEventListener('click', 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
        });
        AlipayJSBridge.call('showOptionMenu');
      });
    
      document.querySelector('.icon').addEventListener('click', function() {
        AlipayJSBridge.call('setOptionMenu', {
          icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
          redDot : '-1', // -1 for invisible, 0 for visible red dot, 1-99 for the number inside the red dot
        });
         AlipayJSBridge.call('showOptionMenu');
      });
    
      document.querySelector('.menu').addEventListener('click', 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.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

    The priority order of the following properties: reset > title > icontype > iconfont > icon

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

    Input Parameters

    NameTypeDescriptionMandatoryDefault
    titlestringText for the button, mutually exclusive with icon and icontype iconfont propertiesY
    iconstringThe image icon for the button, it can be either a URL or base64 string, mutually exclusive with title and icontype iconfont propertiesY
    redDotstring-1 for invisible, 0 for visible red dot, 1-99 for the number inside the red dotN
    resetboolReset to system default, other properties are ignored if rest is set to trueYfalse
    colorstringColor of the textN#ffffffff
    overrideboolWhether or not to keep the default option menu item when setting up multiple menu itemsNfalse
    menusarrayAn array for menu buttonsN[]
    preventDefaultboolWhether or not to hide the default share functionN[]
    icontypestringPreset images, available options are user, filter, search, add, settings, scan, info, help, locate, more and mail. Mutually exclusive with icon and title iconfont propertiesN
    iconfontstringPreset images, http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/ucpsprod/ios_unicode.htmlNICONFONT_MORE10.2.20
    contentDescstringContent description for accessibilityN

    Content

    • Please call showOptionMenu to force refresh the UI after setOptionMenu