Javascript

<script type="text/javascript" charset="utf-8">
	//*********************************************************    
    // Notification Capabilities
    //*********************************************************
    function updateNotificationStatus(status) {
		$("#notificationStatus").empty();
		$("#notificationStatus").append(status).trigger("create");
	}

    function getNotificationReady() {
    	updateNotificationStatus("");	
	}
	
    function alertCB() {
    	updateNotificationStatus("Alert is picked");
    }
    
    function confirmCB(button) {
    	var btnText;
    	
    	switch (button) {
    		case 1:
    			btnText = "Green";
    			break;
    		case 2:
    			btnText = "Red";
    			break;
    	}

    	updateNotificationStatus("Confirm: You selected the \"" + btnText +  "\" button");
		$("#colorBox").css({"background-color": btnText})
		$("#notificationConfirm").popup({positionTo: "window"});
		$("#notificationConfirm").popup("open");		
    }
    
	function alertNotification() {
		navigator.notification.alert(
			  'Alert Notification'
			, alertCB
			, 'Title | Alert'
			, 'Done'
		);
	}
	function confirmNotification() {
		navigator.notification.confirm(
			  'Which color do you like most?'
			, confirmCB
			, 'Title | Confirm'
			, 'Green,Red'
		);	
	}
	function beepNotification() {
		navigator.notification.beep(3);	
		updateNotificationStatus("Beep is picked");
	}
	function vibrateNotification() {
		navigator.notification.vibrate(2000);
		updateNotificationStatus("Vibrate is picked");
	}
</script>		

HTML 5/JQuery Mobile

	<!---------------------------------- Main Page --------------------------------------->
	<div data-role="page" id="main">
		<div data-role="header" data-position="fixed">
			<h1 id="appTitle"></h1>
		</div>
		<div data-role="content">	
		<ul data-role="listview" data-inset="true" data-filter="true">
			<li><a href="#notificationCap" data-transition="slide" onclick="getNotificationReady();">Notification</a></li>
		</ul>
		</div>
	</div>
	
	<!---------------------------------- Notification ------------------------------------>
	<div data-role="page" data-add-back-btn="true" back-btn-text="back" id="notificationCap">
		<div data-role="header">
			<h1>Notification</h1>
		</div>
		<div data-role="content">
			<ul data-role="listview" data-inset="true">
				<li><a href="#" onclick="alertNotification();"  >Alert</a></li>
				<li><a href="#" onclick="confirmNotification();">Confirm</a></li>
				<li><a href="#" onclick="beepNotification();"   >Beep</a></li>
				<li><a href="#" onclick="vibrateNotification();">Vibrate</a></li>
			</ul>
			<div class="mesgBox">
				<ul class="smFont">
					<li>Alert   - Show alert box</li>
					<li>Confirm - Show confirm message box</li>
					<li>Beep    - Will beep 3 times</li>
					<li>Vibrate - Will vibrate for 2 sec</li>
				</ul>			
			</div>	

	<!---------------------------------- Notification: Confirm --------------------------->
			<div data-role="popup" id="notificationConfirm" class="ui-content" data-theme="e" data-transitione="pop">
				<h3>Confirmation - Selection</h3>
				<h5 class="hlabel">You've picked...</h5>
				<div id="colorBox"></div>
				<button onclick="$('#notificationConfirm').popup('close');">Close</button>
			</div>
		</div>
		<div data-role="footer">
			<div id="notificationStatus"></div>
		</div>			
	</div>