jquery.scrolltabs.psk

<!DOCTYPE html> <html> <head> <title>jQuery ScrollTabs :: Josh Reed</title>  <link rel="stylesheet" href="examples/css/bootstrap.min.css">  <link rel="stylesheet" href="node_modules/mdi/css/materialdesignicons.min.css"> <link rel="stylesheet" href="examples/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/scrolltabs.css"> <link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="examples/css/demo.css"> </head> <body> <div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <a class="navbar-brand" href="#">jQuery ScrollTabs</a> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Download</a></li> <li><a href="#examples">Examples</a></li> <li><a href="documentation.html">Documentation</a></li> </ul> </div> </div> <div class="colored_header"> <div class="container" id='header_image'>  </div> </div> <div class="container"> <div class="jumbotron"> <h1>Download Now!</h1> Download now to get started. The package includes all the JavaScript and CSS you'll need to add ScrollTabs to your user interface. <a class="btn btn-primary btn-large" href="https://github.com/joshreed/jQuery-ScrollTabs/archive/2.0.0.zip">Download (.zip)</a> <a class="btn btn-primary btn-large" href="https://github.com/joshreed/jQuery-ScrollTabs/archive/2.0.0.tar.gz">Download (.tar.gz)</a> </div> <hr /> <a name="examples"></a> <h1>Examples</h1> <div class="indented_text"> Automatically adjusts to detect whether scrolling is needed, ideal for responsive interfaces. One of the greatest features for jQuery ScrollTabs is that you can have different right-and-left side styling depending on if scrolling is required. Here you can see that there are rounded corners for the right and left sides when it is not wide enough to scroll, however when scrolling there are right and left arrows accordingly. <div id="tabs1" class="scroll_tabs_theme_light"> This is my tab Another Tab Third Tab </div> <div id="tabs2" class="scroll_tabs_theme_light"> This is my tab Another Tab 1 Another Tab 2 Another Tab 3 Another Tab 4 Another Tab 5 Another Tab 6 Another Tab 7 Another Tab 8 Another Tab 9 Another Tab 10 Another Tab 11 Another Tab 12 </div> </div> <h3 class="section_title">Dynamic</h3> <div class="indented_text"> ScrollTabs automatically adjusts when you add more items. There's a simple Javascript API for adding and removing items. <div id="tabs3" class="scroll_tabs_theme_light"> First Item </div> <button type="button" class="btn btn-primary" onclick="javascript:tabs3.addTab('Added Item')">Add Item</button> HTML: <pre> <div id="tabSet" class="scroll_tabs_theme_light"> First Item </div></pre> JavaScript: <pre> tabSet = $('#tabSet').scrollTabs(); tabSet.addTab('Added Item');</pre> </div> <h3 class="section_title">List Sytax (Version 2.0+)</h3> <div class="indented_text"> ScrollTabs will also handle standard list syntax for greater compatibility with existing lists or other plugins. <ul id="tabs7" class="scroll_tabs_theme_light"> <li>First Item</li> <li>Second Item</li> </ul> <button type="button" class="btn btn-primary" onclick="javascript:tabs7.addTab('<li>Added Item</li>')">Add Item</button> HTML: <pre> <ul id="tabSet" class="scroll_tabs_theme_light"> <li>First Item</li> <li>Second Item</li> </ul></pre> JavaScript: <pre> tabSet = $('#tabSet').scrollTabs(); tabSet.addTab('<li>Added Item</li>');</pre> </div> <h3 class="section_title">Custom Styling</h3> <div class="indented_text"> Basic initialization, without any theme or custom CSS applied. Previous examples used the "light" theme: <code>scroll_tabs_theme_light</code>. <div id="tabs4"> First Tab Another Tab 2 Another Tab 3 Another Tab 4 Another Tab 5 Another Tab 6 Another Tab 7 Another Tab 8 Another Tab 9 Another Tab 10 Another Tab 11 Another Tab 12 Another Tab 13 </div> <button type="button" class="btn btn-primary" onclick="javascript:tabs4.removeTabs('span:eq(0)')">Remove First Item</button> This is an example with the "dark" theme applied. To apply this theme, simply append the class <code>scroll_tabs_theme_dark</code> to the container div element. <div id="tabs5" class="scroll_tabs_theme_dark"> First Tab Another Tab 2 Another Tab 3 Another Tab 4 Another Tab 5 Another Tab 6 Another Tab 7 Another Tab 8 Another Tab 9 Another Tab 10 Another Tab 11 Another Tab 12 Another Tab 13 </div> <button type="button" class="btn btn-primary" onclick="javascript:tabs5.removeTabs('span:eq(0)')">Remove First Item</button> HTML: <pre> <div id="tabSet" class="scroll_tabs_theme_dark"> First Tab  </div></pre> <h3>Custom Background Images</h3> Beyond using simple CSS to style your tabbed interface, you could also make use of background images. This can allow you to provide more unique styling without sacrificing browser compatibility (in some cases). Below is an example of a custom style for a dark-gray themed toolbar. Use the button to remove some tabs in order to see how it appears without the scrolling arrows. <div id="custom_style_container1"> <div id="tabs6" class="style1"> First Tab Another Tab 2 Another Tab 3 Another Tab 4 Another Tab 5 Another Tab 6 Another Tab 7 Another Tab 8 Another Tab 9 Another Tab 10 Another Tab 11 Another Tab 12 Another Tab 13 </div> </div> <button type="button" class="btn btn-primary" onclick="javascript:tabs6.removeTabs('span:eq(0)')">Remove First Item</button> Here is the Custom CSS that provides for the above example: <pre> /****** NOTE: .style1 is the class of our DOM object we've applied scrollTabs() to *******/ /* Set the content of the arrows to nothing, we will use a background image of our own. */ .style1 .scroll_tab_left_button::before { content: ""; padding: 0px; } .style1 .scroll_tab_right_button::before { content: ""; padding: 0px; } /* Set up our background image (i.e. toolbar for example) behind the tab-set */ .style1 div.scroll_tab_inner { height: 40px; background: url(../images/toolbar-bg.jpg) repeat-x; } /* Setup the appearance of each individual TAB */ .style1 div.scroll_tab_inner span { padding-left: 20px; padding-right: 20px; line-height: 40px; font-size: 14px; background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -40px; color: #FFFFFF; cursor: pointer; } /* Style the FIRST tab differently from the rest, inherits from above */ .style1 div.scroll_tab_inner span.scroll_tab_first { background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px -40px; } /* Style the hover state for each tab */ .style1 div.scroll_tab_inner span.scroll_tab_over { background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px 0px !important; } /* Style the hover state for the first tab (Using MULTI-CLASS selectors may not work right in older browsers) */ .style1 div.scroll_tab_inner span.scroll_tab_first.scroll_tab_over { background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -40px 0px !important; } /* Style the left of the tab set if the arrows are hidden (the are is wide enough to show ALL the tabs */ .style1 div.scroll_tab_inner span.scroll_tab_left_finisher { padding: 0px; width: 10px; background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -160px; } /* AND HOVER STATE */ .style1 div.scroll_tab_inner span.scroll_tab_left_finisher.scroll_tab_over { background-position: 0px -120px !important; } /* AND SELECTED STATE */ .style1 div.scroll_tab_inner span.scroll_tab_left_finisher.tab_selected { background-position: 0px -200px; } /* Style the right of the tab set if the arrows are hidden (the are is wide enough to show ALL the tabs */ .style1 div.scroll_tab_inner span.scroll_tab_right_finisher { padding: 0px; width: 10px; background: transparent url(../images/scroll_tab_bg.jpg) no-repeat right -160px; } /* AND HOVER STATE */ .style1div.scroll_tab_inner span.scroll_tab_right_finisher.scroll_tab_over { background-position: right -120px !important; } /* AND SELECTED STATE */ .style1div.scroll_tab_inner span.scroll_tab_right_finisher.tab_selected { background-position: right -200px; } /* Style left scrolling button */ .style1 .scroll_tab_left_button { height: 40px; background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -40px; } /* Style left scrolling button HOVER */ .style1 .scroll_tab_left_button.scroll_arrow_over { background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px 0px; } /* Style left scrolling button DISABLED */ .style1 .scroll_tab_left_button.scroll_arrow_disabled { background: transparent url(../images/scroll_tab_bg.jpg) no-repeat 0px -80px; } /* Style right scrolling button */ .style1 .scroll_tab_right_button { height: 40px; background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -40px; } /* Style right scrolling button HOVER */ .style1 .scroll_tab_right_button.scroll_arrow_over { background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px 0px; } /* Style right scrolling button DISABLED */ .style1 .scroll_tab_right_button.scroll_arrow_disabled{ background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -474px -80px; } /* Style SELECTED (depressed) tab */ .style1 div.scroll_tab_inner span.tab_selected { background: transparent url(../images/scroll_tab_bg.jpg) no-repeat -25px -80px; } /* Style SELECTED (depressed) if it's the FIRST tab */ .style1 div.scroll_tab_inner span.tab_selected.scroll_tab_first { background-position: -40px -200px; } </pre> </div> </div> <div class="footer"> © Copyright 2014 Josh Reed Created in Association with <a href='http://www.mosaik.com'>Mosaik Solutions</a> Software is released under the MIT License </div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <script src="examples/js/bootstrap.min.js"></script> <script src="js/jquery.scrolltabs.js"></script> <script src="js/jquery.mousewheel.js"></script> <script type="text/javascript"> var tabs3 = null; var tabs4 = null; var tabs5 = null; var tabs6 = null; var tabs7 = null; $(document).ready(function(){ $('#tabs1').scrollTabs(); $('#tabs2').scrollTabs(); tabs3 = $('#tabs3').scrollTabs(); tabs4 = $('#tabs4').scrollTabs(); tabs5 = $('#tabs5').scrollTabs(); tabs6 = $('#tabs6').scrollTabs(); tabs7 = $('#tabs7').scrollTabs(); }); </script> </body> </html>