jQuery UI Widgets › Forums › Navigation › Tabs › Tab’s content scrollbar
Tagged: javascript tabs, jQuery Tabs, tab plugin, Tab View, tab widget, Tabs
This topic contains 3 replies, has 4 voices, and was last updated by Minko 13 years ago.
-
AuthorTab’s content scrollbar Posts
-
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.
You can add the jqxPanel in the tabs content and then add your content into the jqxPanel.
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 ASAPThanks in advance.
Regards,
Mahesh BabuHello 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/ -
AuthorPosts
You must be logged in to reply to this topic.