Basic Example.
<a href="someFooPage.html" class="btn orange" id="example2">Example 2</a>/* Button example2 */
$('#example2').materializeMessages({
title : 'Modal Title',
message : 'Modal Body Here',
dismissible : false,
button1 : true,
button1Content : {
text : 'Close',
action : 'closeMessage',
}
});Custom action buttons
<div class="row">
<div class="col s12">
<a href="someFooPage.html" class="btn orange example3" id="button1_example3" data-username="Juan alberto rodriguez" data-idreport="257" > Button 1 Ex 3</a><br><br>
</div>
<div class="col s12">
<a href="someFooPage.html" class="btn orange example3" id="button2_example3" >Button 2 Ex 3</a><br><br>
</div>
<div class="col s12">
<a href="someFooPage.html" class="btn orange example3" id="button3_example3" >Button 3 Ex 3</a><br><br>
</div>
</div>$('.example3').materializeMessages({
title : 'Moda Title',
message : 'Modal Body Here',
dismissible : false,
button1 : true,
button1Content : {
text : 'Close',
action : 'closeMessage',
},
button2 : true,
button2Content : {
text : 'Get Atributes',
action : function(elem){
$.each(elem, function(index, value){
console.log(index+' -> '+value);
});
$('#'+elem['messageId']).closeModal();
$('#'+elem['messageId']).remove();
alert('check your console');
}
}
});Custom themes and icons.
<a href="someFooPage.html" class="btn orange" id="example4">example 4</a>$('#example4').materializeMessages({
dismissible : false,
iconType : 'check_circle',
iconColor : 'yellow',
iconSubcolor : 'darken-2',
title : 'Modal Title',
titleColor : 'blue',
titleSubColor : 'darken-1',
message : 'Custom styles',
messageColor : 'orange',
bgMessage : 'black',
bgButtonsContainer : 'black',
button1 : true,
button1Content : {
text : 'Close',
textColor : 'white',
action: 'closeMessage'
},
button2 : true,
button2Content : {
text : 'Launch function',
textColor : 'red',
action : function(){alert('do what you want')}
}
});Pasando variables al mensaje, se pueden pasar variables al titulo y al mensaje, utilizemos un ejemplo practico de borrado de usuario, en el enlace que usarias para eliminar el usuario se deben configurar las variables que quieres enviar al mensaje. En este caso en el botón configuraremos lo siguiente: data-id="24", data-firstname="Jhon", data-lastname="Smith". Estás variables deben ser configuradas en la llamada a la función en javascript con los párametros titleVariables y messageVariables.
<a href="someFooPage.html" class="btn orange" id="example5" data-id="24" data-firstname="Jhon" data-lastname='Smith'>example 5</a> /* Button example5 */
$('#example5').materializeMessages({
dismissible : false,
iconType : 'warning',
iconColor : 'red',
iconSubcolor : 'darken-2',
titleVariables : {
firstname : 'data-firstname'
},
title : 'Delete "{{firstname}}"',
titleColor : 'red',
titleSubColor : 'darken-2',
messageVariables : {
firstname : 'data-firstname',
lastname : 'data-lastname'
},
message : 'The user {{firstname}} {{lastname}} will be permanently deleted.',
messageColor : 'red',
messageSubColor : 'darken-4',
button1 : true,
button1Content : {
text : 'Cancel',
action : 'closeMessage'
},
button2 : true,
button2Content : {
text : 'Delete',
action : function(elem){ alert ('se borrá al usuario '+elem['data-firstname']+' '+elem['data-lastname'] +' con el id: '+elem['data-id'])}
}
});