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

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

How to enable windows authentication in PostgreSQL

1.     Steps to create user or role in PostgreSQL ·         Open pgAdmin III ·         Login to PostgreSQL database ·         Select “Login Roles” and right click on mouse to view the context menu ·         Select “New Login Role” from context menu ·         Enter desired user name in “Role name” text box ·         Select “Definition” tab in “New Login Role” window ·         Enter desired Password in the given text box ·         Select “Role privileges” tab in “New Login Role” window ·         Select the privileges for the entered user or role ·         Select “SQL”...
Post a Comment
Read more

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