The callback event when option menu item is clicked.
document.addEventListener('optionMenu', function (e) {
alert("option menu clicked");
}, false);
<h1>Please click on the option menu</h1>
<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(){
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
});
});
document.addEventListener('optionMenu', function (e) {
alert("optionMenu clicked!");
}, false);
</script>
<h1>Please click on each menu item</h1>
<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(){
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.addEventListener('optionMenu', function(e) {
alert(JSON.stringify(e.data));
}, false);
</script>
optionMenu
event will not be triggered if optionMenu
property is not configured. In another word, clicking on the default ...
button does not trigger optionMenu
event.