Awesome Scrolling For Wide Tab Interface Applications ScrollTabs - Free Download Awesome Scrolling For Wide Tab-Interface Applications - ScrollTabs

Free Download Awesome Scrolling For Wide Tab-Interface Applications – ScrollTabs

By Posted on

This time I will share jQuery Plugin and tutorial about Awesome Scrolling For Wide Tab-Interface Applications – ScrollTabs, hope it will help you in programming stack.

Awesome Scrolling For Wide Tab Interface Applications ScrollTabs - Free Download Awesome Scrolling For Wide Tab-Interface Applications - ScrollTabs
File Size: 1.16 MB
Views Total: 18889
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

ScrollTabs is a jQuery plugin to create customizable, dynamic, smart and responsive tabs for wide tab-interface applications that automatic adjust to detect whether scrolling is needed. 

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. 

How to use it:

1. Load the jQuery ScrollTabs plugin’s CSS in the head section of the web page.

view source
1 <link rel="stylesheet" href="css/scrolltabs.css">

2. Load the jQuery library and jQuery ScrollTabs plugin’s javascript at the end of the page.

view source
1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2 <script src="js/jquery.scrolltabs.js"></script>

3. Load the jQuery mousewheel plugin to enable mouse wheel on your scrollable tabs.

view source
1 <script src="js/jquery.mousewheel.js"></script>

4. Create tabs for your tabbed interface.

view source
1 <div id="tabs-demo">
2 <span> Tab 1 </span>
3 <span> Tab 2 </span>
4 <span> Tab 3 </span>
5 ...
6 </div>

5. Call the plugin with default options.

view source
1 $(document).ready(function(){
2   $('#tabs-demo').scrollTabs();
3 });

6. Optional settings.

view source
01 $('#tabs-demo').scrollTabs({
02  
03   // Pixel width distance for each scroll click.
04   scroll_distance: 300,
05  
06   // <a href="https://www.jqueryscript.net/animation/">Animation</a> time for scrolling in milliseconds.
07   scroll_duration: 300,
08  
09   // Pixel width for the scroll button on the left side.
10   left_arrow_size: 26,
11  
12   // Pixel width for the scroll button on the right side.
13   right_arrow_size: 26,
14  
15   // Callback function on click. Accpets the click event object as an argument.
16   // The default callback function will change the page to the href in the 'rel' attribute of the item's span tag.
17   click_callback: function(e){
18     var val = $(this).attr('rel');
19     if(val){
20       window.location.href = val;
21     }
22   }
23    
24 });

7. APIs methods.

  • domObject – Access the DOM Object that this TabSet was created on.
  • addTab(html, position) – Add a tab to the ScrollTabs interface. The new tab is created from the HTML string that you pass to this method. Providing an HTML string provides you with the full flexibility to augment your span tag fully to meet the needs of your specific use-case. Optionally, you may pass a position value, which if not provided will default to placing the new tab as the last tab. The positions are zero-indexed, and the new tab will shift all items at and past the indicated position down one item.
  • removeTabs(jQuerySelector) – Removes all the items that are returned by the jQuery selector string (scoped within this object).
  • clearTabs() – Removes all the items in this ScrollTabs object.
  • destroy() – Destroys the ScrollTabs instance formatting, leaving only the raw HTML contents. This is effectively the opposite of the ScrollTabs initialization.
  • hideTabs(jQuerySelector) – Hide tabs based on the jQuery Selector. This is for situations where you may not want to completely remove a tab, but want to temporarily hide it.
  • showTabs(jQuerySelector) – Shows hidden tabs based on the jQuery Selector.

Changelog:

v2.0.1 (2019-11-08)

  • Removes deprecated jQuery reference

v2.0.0 (2015-06-11)

2014-03-28

  • Add image-based example.

2014-03-26

  • Some additional documentation, better CSS styling for better backwards-compatability with older browsers.

This awesome jQuery plugin is developed by joshreed. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: