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

SSIS package - set oledb connections at runtime

SSIS oledb connection manager does't allow user to connect to different oledb servers. If we store oledb connection sting in Config file then it will accepts server name, InitialCatalog and username. But it wont accept password. The is because oledb connection manager has not exposed the oledb password property. To over come this problem we have to override the OLEDB connection manager itself. So that it accepts connections to different oledb servers. Public Sub Main() Dim vars As Variables Dim oledbConnectionManager As ConnectionManager oledbConnectionManager = Dts.Connections("<oledb connection name>") ' ADDED TO MAKE oledb CONNECTION STRING DYNAMIC Dim oServerName As String Dim oUserName As String Dim oInitialCatalog As String Dim oPassword As String Dts.VariableDispenser.LockOneForWrite("oServerName", vars) oServerName = vars("oServerName").Value.ToString().Trim() vars.Unlock() Dts.VariableDispenser.LockOneForWrite("oInitia...
Post a Comment
Read more