Esta API define as propriedades do botão no canto superior direito da barra de título. Para exibi-lo, chame também showOptionMenu.
Devido às restrições do App Transport Security (ATS) da Apple, a URL do ícone deve ser um link HTTPS ou uma string Base64. O sistema ignora links HTTP.
Usar a API setOptionMenu
AlipayJSBridge.call('setOptionMenu', {
title : 'Button', // Choose one from title, icon, and icontype
redDot : '-1', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
color : '#ff00ff00', // Must be an ARGB color value that starts with #.
});
Exemplo de código
Defina diferentes tipos de botões no canto superior direito:
<h1>Click the buttons below to see different effects</h1>
<a href="javascript:void(0)" class="btn button">Single button</a>
<a href="javascript:void(0)" class="btn icon">Single icon</a>
<a href="javascript:void(0)" class="btn menu">Multiple menus (9.9.3)</a>
<a href="javascript:void(0)" class="btn reset">Reset</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) {
// If jsbridge is already injected, call it directly.
if (window.AlipayJSBridge) {
callback && callback();
} else {
// If not, listen for the injection event.
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function(e) {
document.querySelector('.button').addEventListener('click', function() {
AlipayJSBridge.call('setOptionMenu', {
title : 'Button',
redDot : '5', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
color : '#ff00ff00', // Must be an ARGB color value that starts with #.
});
AlipayJSBridge.call('showOptionMenu');
});
document.querySelector('.icon').addEventListener('click', function() {
AlipayJSBridge.call('setOptionMenu', {
icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
redDot : '-1', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
});
AlipayJSBridge.call('showOptionMenu');
});
document.querySelector('.menu').addEventListener('click', function() {
AlipayJSBridge.call('setOptionMenu', {
// The display order is from right to left.
menus: [{
icontype: 'scan',
redDot: '-1', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
}, {
icontype: 'user',
redDot: '-1', // -1: Do not display. 0: Display a red dot. 1-99: Display a number on the red dot.
}],
override: true // If you set multiple options, specifies whether to keep the default optionMenu.
});
// Call this once to refresh the interface.
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>
Descrição da API
Se o botão não aparecer conforme esperado após chamar setOptionMenu, chame showOptionMenu.
Defina apenas uma das quatro propriedades a seguir. A prioridade segue esta ordem: reset > title > icontype > icon.
AlipayJSBridge.call('setTitle',{
title, icon, redDot, reset, color, override, menus, icontype
})
Parâmetros de entrada
Propriedade | Tipo | Descrição | Obrigatório | Valor padrão |
title | string | Texto do botão à direita. | Sim | "" |
icon | string | URL do ícone do botão à direita. Compatível com Base64 a partir da versão 9.0. Versões 8,3 e anteriores: iOS 40 × 40 px (sem preenchimento), Android 50 × 50 px (preenchimento transparente de 5 px em cada lado). Versões 8,4 e posteriores: ambas as plataformas usam 40 × 40 px (sem preenchimento). | Sim | "" |
redDot | string | Valor do ponto vermelho. | Não | "" |
reset | bool | Redefine para o padrão do sistema. Se reset for | Sim | false |
color | string | Valor da cor do texto. | N | "#FFFFFFFF" |
override | bool | Ao definir várias opções, especifica se o optionMenu padrão deve ser mantido. | N | false |
menus | array | Configura vários botões. | N | [] |
preventDefault | bool | Indica se o recurso de compartilhamento padrão (que abre a caixa de diálogo) deve ser bloqueado. Se | N | [] |
icontype | string | Carrega uma imagem predefinida do contêiner conforme o tipo. Escolha entre Importante A alteração de cor é compatível apenas com um único optionMenu. Tipos válidos: | N | "" |
contentDesc | string | Define o texto lido no modo leitor de tela. | N | "" |