JQM: How to Navigate and Open Dialog Box in jQuery Mobile

In this article you will learn how to use navigation and how to open a dialog box in jQuery mobile.

First of all add jQuery mobile file references.

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

Now add a div with data-role="navbar" and insite of that div make some ul tags and li tags and in the li tag create an anchor tag with the data-rel property to the dialog and data-transition="pop" and provide an URL of each anchor tag.

  <div data-role="page">

        <header data-role="header">

            <h1>C# Corner Website</h1>

            <div data-role="navbar">

                <ul>

                    <li><a href="#technology"  data-rel="dialog" data-transition="pop" class="ui-btn-activate" data-icon="home" data-theme="b">Technology</a></li>

                    <li><a href="#authors" data-rel="dialog" data-transition="pop" class="ui-btn-activate" data-icon="star" data-theme="b">Authors</a></li>

                    <li><a href="#blogs" data-rel="dialog" data-transition="pop" class="ui-btn-activate" data-icon="grid" data-theme="b">Blogs</a></li>

                    <li><a href="#articles" data-rel="dialog" data-transition="pop" class="ui-btn-activate" data-icon="grid" data-theme="b">Articles</a></li>

                </ul>

            </div>

        </header>

        <footer data-role="footer"><h4>&copy;2013</h4></footer>

    </div>

Now add a popup div, as in:

<div data-role="page" id="technology">

        <header data-role="header">

            Technology

        </header>

        <section data-role="content">

            <h3>Technology</h3>

            <ul>

                <li>ASP.NET</li>

                <li>C#</li>

                <li>VB.NET</li>

                <li>SQL Server</li>

                <li>LightLight2012</li>

                <li>WCF Services</li>

            </ul>

        </section>

    </div>

 

  <div data-role="page" id="authors">

        <header data-role="header">

            Authors

        </header>

        <section data-role="content">

            <h3>Authors</h3>

            <ul>

                <li>Raj Kumar</li>

                <li>Mahesh Chand</li>

                <li>Amit Choudhary</li>

                <li>Nitin Malhotra</li>

                <li>Piyush Jain</li>

                <li>Summer Verma</li>

            </ul>

        </section>

    </div>

  

 <div data-role="page" id="blogs">

        <header data-role="header">

            Blogs

        </header>

        <section data-role="content">

            <h3>Blogs</h3>

            <ul>

                <li>How to Implement Event in Abstract Class and Raising from Derived Class in C#</li>

                <li>Formula to Calculate the Range of an Integer Data Types in SQL Server</li>

                <li>Delegate Command Example in MVVM</li>

                <li>Dynamically Add and Delete Rows in HTML and JavaScript</li>

                <li>Extract HTML Table and Get Specfic Value in ASP.NET MVC3</li>

                <li>Types of Assemblies</li>

            </ul>

        </section>

    </div>

   

<div data-role="page" id="articles">

        <header data-role="header">

            Articles

        </header>

        <section data-role="content">

            <h3>Articles</h3>

            <ul>

                <li>Enterprise Library: Logging Application Block 5.0 in ASP.NET</li>

                <li>Enterprise Library: Data Access Application Block 5.0 in ASP.NET</li>

                <li>How to Use SQL Server Profiler and Tuning Advisor</li>

                <li>Create and Schedule a Job in SQL Server 2008</li>

                <li>Getting Started With jQuery Mobile</li>

                <li>Getting Started With SignalR in ASP.NET</li>

            </ul>

        </section>

    </div>

Now run the application.



Image 1.

Now click on every nav button.



Image 2.



Image 3.



Image 4.



Image 5.