jQuery Tabs Widget With Nice ScrollBars

In this post, we will use the jqxTabs and jqxPanel widgets and will illustrate how to add them to your web page and add a Panel widget as a content in each Tab. Doing this, we will replace the standard scrollbars.
In order to use the Panel and Tabs widgets, we need to add references the following javascript and css files:

    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxtabs.js"></script>
    <script type="text/javascript" src="jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqxbuttons.js"></script>
    <script type="text/javascript" src="jqxpanel.js"></script>

We will use the ‘classic’ theme and we included the jqx.classic.css file. For more information about the basics of working with the Tabs and Panel widgets, see the jquery-tabs-getting-started.htm and jquery-panel-getting-started.htm

The next step is to add the HTML structure:

    <div id='jqxTabs'>
        <ul style="margin-left: 30px;">
            <li>Node.js</li>
            <li>JavaServer Pages</li>
        </ul>
        <div>
            <div id="panel1" style="border: none;" class="panel">
                Node.js is an event-driven I/O server-side JavaScript environment based 

on V8. It
                is intended for writing scalable network programs such as web servers. 

It was created
                by Ryan Dahl in 2009, and its growth is sponsored by Joyent, which 

employs Dahl.
                Similar environments written in other programming languages include 

Twisted for
                Python, Perl Object Environment for Perl, libevent for C and 

EventMachine for Ruby.
                Unlike most JavaScript, it is not executed in a web browser, but is 

instead a form
                of server-side JavaScript. Node.js implements some CommonJS 

specifications. Node.js
                includes a REPL environment for interactive testing.
            </div>
        </div>
        <div>
            <div id="panel2" style="border: none;" class="panel">
                JavaServer Pages (JSP) is a Java technology that helps software 

developers serve
                dynamically generated web pages based on HTML, XML, or other document 

types. Released
                in 1999 as Sun's answer to ASP and PHP,[citation needed] JSP was 

designed to address
                the perception that the Java programming environment didn't provide 

developers with
                enough support for the Web. To deploy and run, a compatible web server 

with servlet
                container is required. The Java Servlet and the JavaServer Pages (JSP) 

specifications
                from Sun Microsystems and the JCP (Java Community Process) must both be 

met by the
                container.
            </div>
        </div>
    </div>

The tab’s title is represented by LI tag and it has an associated div tag. We also added the “panel1” and “panel2” div tags as a content in each tab.

The last step is to initialize the Tabs and Panels. To turn the ‘jqxTabs’ div tag into the jqxTabs widget, we are calling the jqxTabs constructor and also set its width, height and theme properties. The initialization of the panels includes selection of all tags with the ‘.panel’ class and calling the jqxPanel constructor.

    <script type="text/javascript">
        $(document).ready(function () {
            //initializing jqxTabs
            $('#jqxTabs').jqxTabs({ width: 380, height: 150, theme: 

'classic' });
            //initializing jqxPanel
            $('.panel').jqxPanel({ height: 110, width: 374, autoUpdate: true, theme: 

'classic' });
        });
    </script>

About admin


This entry was posted in JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxTabs and tagged , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.



2 Responses to jQuery Tabs Widget With Nice ScrollBars

  1. Timmy says:

    Dynamically adding DIV to jqxPanel not showing the scroll bar.
    Can you able to share an example how to add dynamically div to a jqxPanel?

Leave a Reply