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
document.addEventListener('optionMenu', function (e) {
alert("option menu clicked");
}, false);
Code sample
- The following example shows the basic functions.
<h1>Click menu buttons in the upper-right menu bar to view the effect.</h1>
<script>
function ready(callback) {
// Call JS Bridge if it has been injected.
if (window.AlipayJSBridge) {
callback && callback();
} else {
// Listen to the injection event if it has not been injected.
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
AlipayJSBridge.call('setOptionMenu', {
title: 'Button',
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.
color : '#ffff6600', // The ARGB color value must begin with the number (#) sign.
});
document.addEventListener('optionMenu', function(e) {
alert("optionMenu clicked!");
}, false);
});
</script>
- Event with multiple optionMenus:
<h1>Click each menu button in the upper-right menu bar to view the effect.</h1>
<script>
function ready(callback) {
// Call JS Bridge if it has been injected.
if (window.AlipayJSBridge) {
callback && callback();
} else {
// Listen to the injection event if it has not been injected.
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
AlipayJSBridge.call('setOptionMenu', {
// Menus are displayed from the last one to the first one.
menus: [{
icontype: 'scan',
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.
}, {
icontype: 'user',
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.
}],
override: true // Indicates whether to retain the default optionMenu when multiple options need to be set.
});
// Call forcibly to refresh the screen.
AlipayJSBridge.call('showOptionMenu');
document.addEventListener('optionMenu', function(e) {
alert(JSON.stringify(e.data));
}, false);
});
</script>
Note: If no
optionMenu
has been set, this event cannot be triggered. That is, tapping the default … cannot trigger the optionMenu
event.