All Products
Search
Document Center

Click upper-right menu buttons

Last Updated: Mar 24, 2021

When you call the setOptionMenu API to customize menu buttons in the upper-right navigation bar, the optionMenu event is triggered when you tap the buttons.

optionMenu API usage instruction

  1. document.addEventListener('optionMenu', function (e) {
  2. alert("option menu clicked");
  3. }, false);

Code sample

  • The following example shows the basic functions.
  1. <h1>Click menu buttons in the upper-right menu bar to view the effect.</h1>
  2. <script>
  3. function ready(callback) {
  4. // Call JS Bridge if it has been injected.
  5. if (window.AlipayJSBridge) {
  6. callback && callback();
  7. } else {
  8. // Listen to the injection event if it has not been injected.
  9. document.addEventListener('AlipayJSBridgeReady', callback, false);
  10. }
  11. }
  12. ready(function() {
  13. AlipayJSBridge.call('setOptionMenu', {
  14. title: 'Button',
  15. redDot: '5', // -1 indicates not to display, 0 indicates to display a red dot, and a value within the range 1-99 indicates to display the specified number on the red dot.
  16. color : '#ffff6600', // The ARGB color value must begin with the number (#) sign.
  17. });
  18. document.addEventListener('optionMenu', function(e) {
  19. alert("optionMenu clicked!");
  20. }, false);
  21. });
  22. </script>
  • Event with multiple optionMenus:
  1. <h1>Click each menu button in the upper-right menu bar to view the effect.</h1>
  2. <script>
  3. function ready(callback) {
  4. // Call JS Bridge if it has been injected.
  5. if (window.AlipayJSBridge) {
  6. callback && callback();
  7. } else {
  8. // Listen to the injection event if it has not been injected.
  9. document.addEventListener('AlipayJSBridgeReady', callback, false);
  10. }
  11. }
  12. ready(function() {
  13. AlipayJSBridge.call('setOptionMenu', {
  14. // Menus are displayed from the last one to the first one.
  15. menus: [{
  16. icontype: 'scan',
  17. redDot: '-1', // -1 indicates not to display, 0 indicates to display a red dot, and a value within the range 1-99 indicates to display the specified number on the red dot.
  18. }, {
  19. icontype: 'user',
  20. redDot '10', // -1 indicates not to display, 0 indicates to display a red dot, and a value within the range 1-99 indicates to display the specified number on the red dot.
  21. }],
  22. override: true // Indicates whether to retain the default optionMenu when multiple options need to be set.
  23. });
  24. // Call forcibly to refresh the screen.
  25. AlipayJSBridge.call('showOptionMenu');
  26. document.addEventListener('optionMenu', function(e) {
  27. alert(JSON.stringify(e.data));
  28. }, false);
  29. });
  30. </script>
Note: If no optionMenu has been set, this event cannot be triggered. That is, tapping the default cannot trigger the optionMenu event.