jQuery UI Widgets Forums Navigation Tabs Tab’s content scrollbar

This topic contains 3 replies, has 4 voices, and was last updated by  Minko 13 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Tab’s content scrollbar #1402

    billy
    Member

    Hi,

    I’m using your tabs widget but when the content is with bigger height than the tab’s content the default browser scrollbar is displaying. I want to change it and use yours. How to do this?!

    Best wishes,

    Bill.

    Tab’s content scrollbar #1414

    rafi
    Participant

    You can add the jqxPanel in the tabs content and then add your content into the jqxPanel.

    Tab’s content scrollbar #1794

    Mahesh Babu
    Member

    Dear Rafi,
    I tried what ever you told. But its becoming clumsy. jqx scrollbar is coming along with the default browser scroll bar. So I want to know the process clearly. Reply ASAP

    Thanks in advance.

    Regards,
    Mahesh Babu

    Tab’s content scrollbar #1795

    Minko
    Blocked

    Hello Mahesh,

    You can change the default scrollbar by using jqxPanel with jqxTabs. In the next example you can see how you can do this:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    //initializing jqxTabs
    $('#jqxTabs').jqxTabs({ width: 380, height: 150, position: 'top', theme: 'classic' });
    //initializing jqxPanel
    $('.panel').jqxPanel({ height: 110, width: 374, autoUpdate: true, theme: 'classic' });
    });
    </script>
    </head>
    <body>
    <div id='jqxTabs'>
    <ul>
    <li>Node.js</li>
    <li>JavaServer Pages</li>
    </ul>
    <div>
    <div id="panel1" 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" 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>
    </body>
    </html>

    Important parts are the initialization of the jqxTabs and jqxPanel and wrapping the jqxTabs contents into a panels.

    Best regards,
    Minko.

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.