Set option menu - Mobile Platform as a Service - Alibaba Cloud Documentation Center

This interface is used to set the properties of the button on the right side of the title bar.
This interface is only for setting. To guarantee the display of the button, you need to additionally call showOptionMenu.

Note: Due to Apple’s ATS restrictions, the icon URL must be either an HTTPS link or base64. HTTP links will be ignored.

Use setOptionMenu interface

AlipayJSBridge.call('setOptionMenu', {
  title: 'button',// select one from the three buttons - title, icon, and icontype
  redDot : '-1',// -1 refers to no display, 0 refers to present a badge notification, and 1-99 refers to the number displayed on the badge notification
  color: '#ff00ff00',// ARGB color value that must start with #
});

Code sample

Set various types of right-side buttons:

<h1>Click the buttons below to see the different effects</h1>
<a href="javascript:void(0)" class="btn button">Single button</a>
<a href="javascript:void(0)" class="btn icon">Single icon</a>
<a href="javascript:void(0)" class="btn menu">Multiple menus (9.9.3)</a>
<a href="javascript:void(0)" class="btn reset">Reset</a>
<a href="javascript:void(0)" class="btn hide">Hide</a>
<a href="javascript:void(0)" class="btn show">Display</a>
<script>
function ready(callback) {
  // Call directly if JSBridge has been injected
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // Monitor the injected events if JSBridge hasn't been injected
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function(e) {
  document.querySelector('.button').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      title : 'button',
      redDot : '5',// -1 refers to no display, 0 refers to present a badge notification, and 1-99 refers to the number displayed on the badge notification
      color: '#ff00ff00',// ARGB color value that must start with #
    });
    AlipayJSBridge.call('showOptionMenu');
  });
  document.querySelector('.icon').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
      redDot : '-1',// -1 refers to no display, 0 refers to present a badge notification, and 1-99 refers to the number displayed on the badge notification
    });
    AlipayJSBridge.call('showOptionMenu');
  });
  document.querySelector('.menu').addEventListener('click', function() {
    AlipayJSBridge.call('setOptionMenu', {
      // The display order is from right to left
      menus: [{
        icontype: 'scan',
        redDot: '-1',// -1 refers to no display, 0 refers to present a badge notification, and 1-99 refers to the number displayed on the badge notification
      }, {
        icontype: 'user',
        redDot: '-1',// -1 refers to no display, 0 refers to present a badge notification, and 1-99 refers to the number displayed on the badge notification
      }],
      Override: true // Whether or not to reserve the default optionMenu if multiple options are required.
    });
    // Force to call it to refresh the interface
    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

There are several properties that are prioritized: reset > title > icontype > icon. Only one of these four properties is required.

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

Input parameters

Name	Type	Description	Required	Default value	Version
title	string	Right-side button text	Y
icon	string	URL of right-side button icon, base64 (since version 9.0) For version 8.3 and earlier: iOS: 40x40 (no margin left around); Android: 50x50 (5px transparent margin left on each side) For version 8.4 and later: both iOS and Andriod: 40x40 (no margin left around)	Y
redDot	string	The number displayed on the badge notification	N		8.6
reset	bool	Reset to the system default, other parameters will be ignored when reset=true	Y	false	8.6
color	string	Text color value	N	#ffffffff	9.0
override	bool	Whether or not to retain the default optionMenu if multiple options are required	N	false	9.9
menus	array	Set multiple buttons	N	[]	9.9
preventDefault	bool	Whether or not to block the default sharing function (the sharing pop-up box by default) ; when preventDefault=true, the sharing function will be blocked	N	[]	9.9
icontype	string	Load the container preset picture based on picture types. Only one parameter will be select one from title, icon, and icontype. Notes: Only supports color changing of a single optionMenu. The specific types include: User (account), filter, search, add, settings, scan, info, help, locate, more, and mail (mailbox 10.0.8 and above)	N		9.9.3
contentDesc	string	Set reading content for blind readers	N		10.0.18

Attentions

If the effect is not correct after calling setOptionMenu, please call showOptionMenu once.