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 > icon

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

Input Parameters

NameTypeDescriptionMandatoryDefault
titlestringText for the button, mutually exclusive with icon and icontype propertiesY
iconstringThe image icon for the button, it can be either a URL or base64 string, mutually exclusive with title and icontype 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 propertiesN
contentDescstringContent description for accessibilityN

Content

  • Please call showOptionMenu to force refresh the UI after setOptionMenu