Monday, February 17, 2014

How to Create Tabs UI using HTML, CSS, jQuery, JSP and JavaScript

JSP is still a popular technology for developing view part of Struts and Spring based Java application, but unfortunately it doesn't have rich UI support available in GWT, or any other library. On other day, we had a requirement to display HTML tables inside tabs, basically we had two tables of different data set and we need to display them in their own tabs. User can navigate from one tab to other, and CSS should take care of which tab is currently selected, by highlighting active tab. Like many Java developers, our hands on HTML, CSS and JavaScript is little bit tight than a web guy, and since our application is not using any UI framework, we had to rely on JSP to do this job. Since display tag is my favourite, I had no problem to dealing with tabular data, our only concern was how we will develop tabbed UI by just using HTML, CSS, JavaScript or may be jQuery. It looks everything is possible with these technology, we eventually able to develop our JSP page, which can show data in tabs. So if you need to create tabs in JSP page, you can use this code sample, all you need to ensure is you have required libraries e.g. display tag library, JSTL core tag library and jQuery. I will explain you step by step how to create tabs in html or jsp page.
Read more �

No comments:

Post a Comment