All Products
Search
Document Center

Set option menu

Last Updated: Feb 18, 2021
  • 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

  1. AlipayJSBridge.call('setOptionMenu', {
  2. title: 'button',// select one from the three buttons - title, icon, and icontype
  3. 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
  4. color: '#ff00ff00',// ARGB color value that must start with #
  5. });

Code sample

Set various types of right-side buttons:

  1. <h1>Click the buttons below to see the different effects</h1>
  2. <a href="javascript:void(0)" class="btn button">Single button</a>
  3. <a href="javascript:void(0)" class="btn icon">Single icon</a>
  4. <a href="javascript:void(0)" class="btn menu">Multiple menus (9.9.3)</a>
  5. <a href="javascript:void(0)" class="btn reset">Reset</a>
  6. <a href="javascript:void(0)" class="btn hide">Hide</a>
  7. <a href="javascript:void(0)" class="btn show">Display</a>
  8. <script>
  9. function ready(callback) {
  10. // Call directly if JSBridge has been injected
  11. if (window.AlipayJSBridge) {
  12. callback && callback();
  13. } else {
  14. // Monitor the injected events if JSBridge hasn't been injected
  15. document.addEventListener('AlipayJSBridgeReady', callback, false);
  16. }
  17. }
  18. ready(function(e) {
  19. document.querySelector('.button').addEventListener('click', function() {
  20. AlipayJSBridge.call('setOptionMenu', {
  21. title : 'button',
  22. 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
  23. color: '#ff00ff00',// ARGB color value that must start with #
  24. });
  25. AlipayJSBridge.call('showOptionMenu');
  26. });
  27. document.querySelector('.icon').addEventListener('click', function() {
  28. AlipayJSBridge.call('setOptionMenu', {
  29. icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
  30. 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
  31. });
  32. AlipayJSBridge.call('showOptionMenu');
  33. });
  34. document.querySelector('.menu').addEventListener('click', function() {
  35. AlipayJSBridge.call('setOptionMenu', {
  36. // The display order is from right to left
  37. menus: [{
  38. icontype: 'scan',
  39. 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
  40. }, {
  41. icontype: 'user',
  42. 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
  43. }],
  44. Override: true // Whether or not to reserve the default optionMenu if multiple options are required.
  45. });
  46. // Force to call it to refresh the interface
  47. AlipayJSBridge.call('showOptionMenu');
  48. });
  49. document.querySelector('.reset').addEventListener('click', function() {
  50. AlipayJSBridge.call('setOptionMenu', {
  51. reset: true,
  52. });
  53. AlipayJSBridge.call('showOptionMenu');
  54. });
  55. document.querySelector('.show').addEventListener('click', function() {
  56. AlipayJSBridge.call('showOptionMenu');
  57. });
  58. document.querySelector('.hide').addEventListener('click', function() {
  59. AlipayJSBridge.call('hideOptionMenu');
  60. });
  61. document.addEventListener('optionMenu', function(e) {
  62. alert(JSON.stringify(e.data));
  63. }, false);
  64. });
  65. </script>

API

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

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

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.