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.

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.

<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>

</div>

Now add a popup div, as in:

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

Technology

</header>

<h3>Technology</h3>

<ul>

<li>SQL Server</li>

<li>LightLight2012</li>

<li>WCF Services</li>

</ul>

</section>

</div>

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

Authors

</header>

<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">

Blogs

</header>

<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">

Articles

</header>

<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.