JQuery Mobile:
JQuery Mobile is a new technology to develop device independent web site or app for iPhone, Android, blackberry etc.
You can see the details in website http://jquerymobile.com . Currently JQuery Mobile 1.0 RC3 is released. The JQuery Mobile team is working very hard and expect things will be more beautifull soon.
You can see the device supported by JQuery Mobile here http://jquerymobile.com/gbs/ .
As I am going to show you how can you develop a nice message box /popup for JQuery mobile eventually I will give you an API by which you can show popup in your JQuery mobile app, I am not describe the details of JQuery Mobile here.
I have made search in the web to find a nice popup or message box where I can add options like ok/ cancel/yes/no etc. and also I can modify and customize myself.
I found something in http://dev.jtsage.com/jQM-SimpleDialog/ which can be used for showing dialog and popup. But it makes something difficult for me when the page size is small or when I saw in mobile. The problem is it then show the top cross button and some other things. But I want something like a real popup message.
I also found another plugin JQuery-mobile-toast in https://github.com/jjoe64/jquery-mobile-toast.
But to me it looks difficult to add my custom html in the message box. So I have developed myself a new one which I think you will like.
So, lets see the code my example/api
MessageBox.js
var MESSAGE_TYPE = { "Information": 1, "Error": 2, "Confirmation": 3 };
MessageBox =
{
close: function () {
MessageBox.successEvent = function () { MessageBox.close() }
MessageBox.cancelEvent = function () { MessageBox.close() }
$(".popup_messagebox").remove();
$(".cover_background").remove();
},
successEvent: function () { MessageBox.close(); },
cancelEvent: function () { MessageBox.close(); },
show: function (messageType, header, content, onSuccess, onCancel) {
var popupStr = "<div align='center' class='popup_messagebox ui-simpledialog-container ui-overlay-shadow ui-corner-all pop ui-body-b in'>"
+ getMessageContent(messageType, header, content) + "</div>";
$("body").append(popupStr);
$(".popup_messagebox").center();
$(".popup_messagebox").trigger("create");
$("body").append($('<div class="cover_background"></div>'));
if (onSuccess != undefined || onSuccess != null) {
this.successEvent = function () { onSuccess(); MessageBox.close(); }
}
else {
this.successEvent = function () { MessageBox.close() }
}
if (onCancel != undefined || onCancel != null) {
this.cancelEvent = function () { MessageBox.close(); onCancel(); }
}
else {
this.cancelEvent = function () { MessageBox.close() }
}
$(".popup_messagebox #MsgOkButton").bind("click", this.successEvent);
$(".popup_messagebox #CancelButton").bind("click", this.cancelEvent);
}
}
function getMessageContent(messagType, header, content) {
var messageContent = "";
if (messagType == MESSAGE_TYPE.Information) {
messageContent = '<div class="messagebox_container"><div class="messagebox_header">' + header + '</div>'
+ '<div class="messagebox_content">' + content + '</div>'
+ '</div>';
}
else if (messagType == MESSAGE_TYPE.Confirmation) {
messageContent = '<div class="messagebox_container"><div class="messagebox_header">' + header + '</div>'
+ '<div class="messagebox_content">' + content + '</div>'
+ ''
+ '</div>';
}
else if (messagType == MESSAGE_TYPE.Error) {
messageContent = '<div class="messagebox_container"><div class="messagebox_header">' + header + '</div>'
+ '<div class="messagebox_caption">Please fix the red marked errors(s)</div>'
+ '<div class="messagebox_content">' + content + '</div>'
+ '</div>';
}
Code to make the popup centered
jQuery.fn.center = function (absolute) {
return this.each(function () {
var t = jQuery(this);
t.css({
position: absolute ? 'absolute' : 'fixed',
left: '50%',
top: '50%',
zIndex: '1000000'
}).css({
marginLeft: '-' + (t.outerWidth() / 2) + 'px',
marginTop: '-' + (t.outerHeight() / 2) + 'px'
});
if (absolute) {
t.css({
marginTop: parseInt(t.css('marginTop'), 10) + jQuery(window).scrollTop(),
marginLeft: parseInt(t.css('marginLeft'), 10) + jQuery(window).scrollLeft()
});
}
});
};
CSS
.messagebox_container
{
width:100%;
height:100%;
overflow:auto;
background-color:Black;
text-shadow: 0 0 0 white;
padding-bottom:10px;
text-align:center;
}
.messagebox_header
{
font-size:24px;
color:White;
margin:10px 0px 10px 0px;
padding:0px 0px 0px 15px;
text-align:left;
}
.messagebox_caption
{
color:White;
font-size:14px;
text-align:left;
margin:10px 0px 10px 15px;
}
.messagebox_content
{
color:Red;
min-height:10px;
text-align:left;
padding:0px 10px 10px 15px;
}
.ui-simpledialog-container
{
border:solid 2px white !important;
border-radius:.3em !important;
-webkit-border-radius:.3em !important;
background-color:Black !important;
}
.popup_messagebox
{
position:fixed;
background-color:Black !important;
padding:0 !important;
border:solid 2px white;
border-radius: .3em !important;
min-width:280px !important;
vertical-align:middle;
z-index:100000000000;
}
.cover_background
{
position:fixed;
top:0px;
left:0px;
width:10000px;
height:10000px;
opacity:0.5;
z-index:10000;
background-color:Black;
}
Now you can use the message box in the following way
MessageBox.show(MESSAGE_TYPE.Confirmation, "Header", "Message Content",
function () {
MessageBox.show(MESSAGE_TYPE.Information, "Header", "Yes Callback is called.");
});
}, null);
The Parameters description for the Message box/popup:
messageType:
MESSAGE_TYPE.Information for information message
MESSAGE_TYPE.Error for error message
MESSAGE_TYPE.Confirmation for confirmation message.
header: Message box header content
content: Message box main content
onSuccess: Callback method for success button click(ok/yes)
onCancel: Callback method for cancel button click (Cancel/No)
The code is simple and you can modify in your way very easily I believe. Of course you can also use this popup in any web page also with CSS3 and HTML5 support for better look.
