Skip to main content

JQuery Mobile - Dialog demo


Dialog is used in JQuery Mobile to show user information or to get user response as similar to confirm in javascript.

 The JQuery Mobile code sample to achieve the same feature as Confirm in javascript is as below

 <!DOCTYPE html>
<HTML>   
    <HEAD>
        <TITLE>Dialog Demo</TITLE>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    </HEAD>
    <BODY>
        <div id="pgDemoDialog" data-role="page" data-theme="c">
            <div data-role="header" data-position="fixed" data-theme="b">
                <h1>Demo Dialog</h1>
                <a href="#" data-icon="home" data-iconpos="notext">Home </a>
                <a href="#" data-icon="search" data-iconpos="notext">Search</a>
            </div>
            <div data-role="content">
                <form id="frmDemoDialog">
                    <div style="text-align: center; width: 100%; font-size: 1.2em; font-weight: bold;">
                        <span id="lblMessage"></span>
                    </div>
                    <div class="ui-grid-a">
                        <div class="ui-block-a">
                            <a id="lnkOpenDialog" data-role="button" data-icon="select">Open Dialog</a>
                        </div>
                    </div>
                </form>
                <div data-role="popup" id="popupDialog" data-overlay-theme="b" 
                                             style="max-width:400px;" class="ui-corner-all">
                    <div data-role="header" data-theme="a" class="ui-corner-top">
                        <h1> Demo Popup Alert </h1>
                    </div>
                    <div data-role="content" data-theme="c" class="ui-corner-bottom ui-content">
                        <h3> Alert message goes here .... </h3>
                        </BR>
                        <p>Any user specific information goes here .... </p>
                        </BR>
                        <a href="#" id="mdlOk" data-role="button" data-theme="c"                                         data-icon="check"> OK </a>
                        <a href="#" id="mdlCancel" data-role="button" data-theme="c" data-icon="back">     Cancel </a>
                    </div>
                </div>
            </div>
           
            <div data-role="footer" data-position="fixed" data-theme="b">
                <div style="text-align: center; vertical-align:center; width: 100%; height:35px;">
                    <span id="lblFooterMsg">Copy Write : December 2012</span>
                </div>
            </div>
           
            <script language="javascript" type="text/javascript">
                $("#lnkOpenDialog").bind("click", function() {
                    $("#popupDialog").popup("open");
                });
               
                $("#mdlOk").click(function() {
                    $("#lblMessage").text();
                    $("#lblMessage").text(" OK button is clicked");
                    $("#popupDialog").popup("close");
                });
               
                $("#mdlCancel").click(function() {
                    $("#lblMessage").text();
                    $("#lblMessage").text(" CANCEL button is clicked");
                    $("#popupDialog").popup("close");
                });
            </script>
        </div>
    </BODY>
</HTML>
The out put of this code will be as shown in the figure 


Comments

Post a Comment

Popular posts from this blog

UML - Association, Aggregation, Composition, Generalization, Specialization, Realization and Dependency

Association Association is a simple relationship between two classes. For example A relationship between Professor Class and Student class is known as Association. Both Classes can exist without each other, so Professor and Student are two independent classes. In this kind of relationships there will not be any owner class. Both classes have their own life cycle. UML Notation:     Aggregation Aggregation is a special type of Association. It is known as “Has-A” relationship. For example A Department class can contain Professor Class. Here Department class is owner class. Here in this relationship even after deleting Department class, Professor Class can exits. UML Notation: Composition Composition is a special type of Aggregation. It is known as “Is-A” relationship. For example A University Class has many Department class. Here University and Department objects are dependent on each other. If we delete Univ...
1 comment
Read more

C# Generic Factory

Implement Factory pattern using generics     public interface IDoWork   {       string DoWork();   }     Declare an Interface first by abstracting the common  functionality    Here I am taking the example of DoWork     public class Manager : IDoWork   {     public string DoWork()     {         return "Manager Manages School" ;     }   }     Implement the IDoWork in concrete classes as shown      public class Teacher : IDoWork     {         public string DoWork()         {             return "Teacher teaches student in school" ;         ...
7 comments
Read more

Liskov substitution principle with simple example

Liskov Substitution Principle Definition 2 : Functions that use references to base classes must be able to use objects of derived classes without knowing it. Definition 2 : Object inheriting from base class or interface or other abstraction must be semantically substitutable for the original abstraction. Definition 3 : If a program module is using a Base Class, then the reference to the base class can be replaced with a derived class without affecting the functionality of the program module. Problem We all know that square is a rectangle from geometry. Now create a Rectangle base class with associated Height and Width properties and create Area() method to calculate the area in Rectangle base class.     public class Rectangle     {         public virtual int Height { get ; set ; }         public virtual int Width { get ; set ; }   ...
Post a Comment
Read more