Icontem

File: index.html

Recommend this page to a friend!
  Classes of Christian Vigh  >  jQuery msgbox  >  index.html  >  Download  
File: index.html
Role: Example script
Content type: text/plain
Description: Example script
Class: jQuery msgbox
Show alert messages of many types in page elements
Author: By
Last change: Updated example for version 1.2.2
Date: 2 years ago
Size: 2,884 bytes
 

Contents

Class file image Download
?<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>$.msgbox demo</title>

<!-- How to use the browser.js features : -->

<!-- Step 0 : you need JQuery and jQuery ui -->
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script language='javascript' src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>

<!-- Step 1 : Include a jQuery UI theme -->
<link rel="stylesheet" href="css/themes/thrak/jquery-ui-1.10.3.custom.css">

<!-- Optional step 1 : Include $.script -->

<!-- Step 2 : Include msgbox.js -->
<script language="javascript" type="text/javascript" src="thrak.ui.msgbox-1.2.2.js"></script>

<!-- The rest of this file is dedicated to the demo -->
<script type="text/javascript">
$(document). ready
   (
	function ( )
	   {
		// Display a $.alert box with the specified message and a custom title
		// When closing (by clicking ok or close button), a native "alert" message will be displayed
		$('#alert'). click 
		   (
			function ( e )
			   {
				$. alert 
				   ( 
					$('#sample'). val ( ),
					"Alert box",
					function ( ) { alert ( "You will close the $.alert() box" ) ; }
				    )
			    }
		    ) ;

		$('#error'). click 
		   (
			function ( e )
			   {
				$. error 
				   ( 
					$('#sample'). val ( ),
					function ( ) { alert ( "You will close the $.error() box" ) ; }
				    )
			    }
		    ) ;

		$('#confirm'). click 
		   (
			function ( e )
			   {
				$. confirm 
				   ( 
					$('#sample'). val ( ),
					function ( status ) { alert ( "You chosed " + ( ( status ) ? "[OK]" : "[CANCEL]" ) ) ; }
				    )
			    }
		    ) ;

		// When an inputbox closes, the parameter supplied to the callback is either false or the value of the input field
		$('#inputbox'). click 
		   (
			function ( e )
			   {
				$. inputbox 
				   ( 
					$('#sample'). val ( ),
					function ( status ) { alert ( ( ( status === false ) ?  "Input cancelled" : "You entered the following :\n" + status ) ) ; }
				    )
			    }
		    ) ;

		$('#wait'). click 
		   (
			function ( e )
			   {
				$. wait ( $('#sample'). val ( ) ) ;
				setTimeout ( function ( ) { $.wait () ; }, 1000 ) ;
			    }
		    ) ;
	    }
    ) ;
</script>
</head>


<body>
	<h1>Sample demo of $.msgbox() :</h1>
	<br />

	Sample text : <input id="sample" type="text" size="110" value="Ma soeur a ÚtÚ mordue par un Úlan" />
	<br /><br />
	<input id="alert" type="button" value="$.alert()" />
	&nbsp;
	<input id="error" type="button" value="$.error()" />
	&nbsp;
	<input id="confirm" type="button" value="$.confirm()" />
	&nbsp;
	<input id="inputbox" type="button" value="$.inputbox()" />
	&nbsp;
	<input id="wait" type="button" value="$.wait()" />
</body>
</html>