Rich look and feel to ASP.NET Web Applications using jQueryUI
jQuery UI is a great jQuery javascript library that helps to build rich interactive, themeable and animated web pages. This can be i...
https://www.programming-free.com/2012/10/rich-look-and-feel-to-aspnet-web.html
jQuery UI is a great jQuery javascript library that helps to build rich interactive, themeable and animated web pages. This can be integrated with ASP.NET web applications to make it look & work more efficiently with the use of various client side widgets provided by jQueryUI. It is very simple and easy to implement. In this post I am going to explain how to use some of the jQuery UI widgets(Accordion and Tabs) in an ASP.NET web application. Take a look at this to get to know about the various jQuery UI widgets and themes available.
Steps to Reproduce
1. First of all download the latest version of jQuery UI from jQuery UI website. One can select from various default themes available or create his/her own theme.
2. Create an ASP.NET Web Application using Visual Studio. Add the css folder that comes along with the jQuery UI download in a new folder named as 'css' in the project and add the jquery libraries that is in the 'js' folder inside downloaded zip file to a new folder in the project named as 'js'. The Solution Explorer will now look like the one shown below,
3. Next step is to reference the jquery libraries and the css file in your aspx page. If you have masterpage setup, then you can reference it in the masterpage. By referencing them in the masterpage, these libraries need not be referenced in every page that is created in the web application. To do this, add the below code under the <head> tag of the page.
<link href="css/sunny/jquery-ui-1.8.24.custom.css" rel="stylesheet" type="text/css"></link> <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
4. Let us start adding jQuery UI widgets to the web page. Initially, let us see how to add tab and accordion widgets to the web page. Later in this example I will explain how to create a combined widget by creating an accordion widget and show it one of the tabs of the tab widget.
To add a tab widget to the web page, add the below code to the body of the aspx page.
The above code will render plain html in the web page. To make it a jQuery tabbed control, add the below jQuery script to the header content of the aspx page.
To add a tab widget to the web page, add the below code to the body of the aspx page.
<body> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. </div> <div id="tabs-2"> Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. </div> <div id="tabs-3"> Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. </div> </div> </body>
The above code will render plain html in the web page. To make it a jQuery tabbed control, add the below jQuery script to the header content of the aspx page.
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
});
</script>
In the above code, #tabs refers to the id of the tab control and this script executes on page load, thus rendering a stunningly beautiful tabbed control. This is how the web page with the tab control looks,
5. Same way an accordion widget can be added to a web page using the below code,
Below html contains content for an accordion control,
<div id="accordion"> <h3> <a href="#">Section 1</a></h3> <div> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integerut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo utodio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </div> <h3> <a href="#">Section 2</a></h3> <div> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit ametpurus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitorvelit, faucibus interdum tellus libero ac justo. Vivamus non quam. Insuscipit faucibus urna. </div> <h3> <a href="#">Section 3</a></h3> <div> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> <h3> <a href="#">Section 4</a></h3> <div> Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </div> </div>
The script to be added to render the accordion control is,
<script javascript="javascript" text="text" type=" javascript=">
$(function () {
$("#accordion").accordion();
});
</script>
The output of the above code will render an accordion widget on the web page. Please note that only one section of an accordion control can be made visible at a time. If you want multiple sections to be displayed at a time, then accordion is not the right choice for it.
6. Now let us see how to create a combined widget by binding an accordion widget in one of the tab pages of a tab widget. To do this, add a tab widget and an accordion widget in one of the tab page section in the body of the web page using below code,
<div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <div id="accordion"> <h3> <a href="#">Section 1</a></h3> <div> Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sitamet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. </div> <h3> <a href="#">Section 2</a></h3> <div> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </div> <h3> <a href="#">Section 3</a></h3> <div> Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> </div> <div id="tabs-2"> Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. </div> <div id="tabs-3"> Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. </div> </div>
Add the below script in the head section of the web page. Here the accordion widget is
binded to the tab widget using 'tabsshow' type of show event.
<script type="text/javascript">
$(function () {
$("#tabs").bind('tabsshow',function(event,ui){
$("#accordion").accordion({autoHeight:false,collapsible:true});
});
$("#tabs").tabs();
});
</script>
The resulting web page will look like this,
There are many themes available and the yellow look in the above screenshot is because I used the 'sunny' theme provided by them. You can choose from various available themes or build your own theme while downloading the jQueryUI plugin.
Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading this.
