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.
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
});
<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>
The priority order of the following properties: reset > title > icontype > iconfont > icon
AlipayJSBridge.call('setTitle',{
title, icon, redDot, reset, color, override, menus, icontype, iconfont
})
Name | Type | Description | Mandatory | Default | |
---|---|---|---|---|---|
title | string | Text for the button, mutually exclusive with icon and icontype iconfont properties | Y | ||
icon | string | The image icon for the button, it can be either a URL or base64 string, mutually exclusive with title and icontype iconfont properties | Y | ||
redDot | string | -1 for invisible, 0 for visible red dot, 1-99 for the number inside the red dot | N | ||
reset | bool | Reset to system default, other properties are ignored if rest is set to true | Y | false | |
color | string | Color of the text | N | #ffffffff | |
override | bool | Whether or not to keep the default option menu item when setting up multiple menu items | N | false | |
menus | array | An array for menu buttons | N | [] | |
preventDefault | bool | Whether or not to hide the default share function | N | [] | |
icontype | string | Preset images, available options are user, filter, search, add, settings, scan, info, help, locate, more and mail. Mutually exclusive with icon and title iconfont properties | N | ||
iconfont | string | Preset images, http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/ucpsprod/ios_unicode.html | N | ICONFONT_MORE | 10.2.20 |
contentDesc | string | Content description for accessibility | N |
showOptionMenu
to force refresh the UI after setOptionMenu