jQuery-UI-ScrollTabs/index.html at master · davidsekar/jQuery-UI-ScrollTabs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.min.css">
  <link href="docs/css/bootstrap.min.css" rel="stylesheet">
  <link href="docs/css/style.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
    crossorigin="anonymous"></script>
  <script type="text/javascript" src="docs/js/tether.min.js"></script>
  <script type="text/javascript" src="docs/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js"></script>
</head>

<body>
  <a id="skippy" class="sr-only sr-only-focusable" href="#content">
    <div class="container">
      <span class="skiplink-text">Skip to main content</span>
    </div>
  </a>
  <header class="navbar navbar-toggleable-md navbar-light bg-faded">
    <nav class="container">
      <div class="d-flex justify-content-between hidden-lg-up">
        <a class="navbar-brand" href="./">jQuery UI ScrollTabs</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
          aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
      </div>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="./">jQuery UI ScrollTabs <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="docs/options/interfaces/scrolltaboptions.html">Documentation</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="demo.html">Demo</a>
          </li>
        </ul>
        <ul class="navbar-nav flex-row ml-md-auto d-md-flex">
          <li class="nav-item" style="padding-top:7px;">
            <a class="github-button nav-link" href="https://github.com/davidsekar/jQuery-UI-ScrollTabs/" data-icon="octicon-repo-forked"
              data-size="large" aria-label="Fork davidsekar/jQuery-UI-ScrollTabs on GitHub">Fork on Github</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <div class="row">
        <div class="col">
          <h1 class="display-4">jQuery UI ScrollTabs</h1>
          <div class="row">
            <div class="col-sm-6">
              <br>
              <a target="_blank" href="https://travis-ci.org/davidsekar/jQuery-UI-ScrollTabs/builds"><img class="img-fluid" src="https://travis-ci.org/davidsekar/jQuery-UI-ScrollTabs.svg?branch=master" /></a>
              <br><br>
            </div>
          </div>
          <p class="lead">
            This is a jQuery UI widget build using UI widget factory. It <strong><em>extends</em></strong> the default jQuery
            UI tabs, so it is <strong><em>as customizable as</em></strong> default tabs widget. It extends the default widget
            behaviour with scrollable tabs feature, that always keeps ALL your tabs in a single line.</p>
          <hr/>
          <p class="console">It handles all required markup enhancements within the widget <em><code>create</code></em> event, so it simply
            works on the default <em>ui.tabs</em> widget HTML structure.<br/><br/>
            <a class="btn btn-primary btn-lg" href="demo.html" role="button">View demo here</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col">
        <p>This plugin with scrollable tabs feature included, which helps you to keep all your tabs on single line. You can
          have multiple instances of the widget, as well as nest them as usual. It automatically handles showing the navigation
          controls like next, previous, first & last etc., based on user options. It watches the the device screen viewport
          changes and shows the nav controls automatically which makes it ideal for responsive/fluid pages.</p>
        <p>This plugin has few optional dependencies, when found in the $.fn scope will be used to enhance the plugin features.</p>
        <p>Following libraries are
          <strong class="d-block">Required:</strong>
          <ul>
            <li>jQuery (tested in version 1.11+)</li>
            <li>jQuery UI tabs (tested in 1.11 +)</li>
          </ul>
          <strong class="d-block">Optional:</strong>
          <ul>
            <li><a href="https://github.com/cowboy/jquery-throttle-debounce">jQuery debounce plugin</a> - throttle or debounce
              the events like resize, click etc., which avoids unwanted multiple executions.</li>
            <li><a href="https://github.com/jquery/jquery-mousewheel">jQuery Mousewheel</a> - It allows mouse scroll for moving
              through the tab headers.</li>
          </ul>
        </p>
        <p>
          <h2 class="h4 text-uppercase">Basic Usage</h2>
          Download the required scripts and style from the releases. Add it to your page &lt;head> tag
          <pre><code class="language-html">
&lt;!-- jQuery UI base css. Here I've included complete CSS for brevity -->
&lt;link type="text/css" href="css/ui-lightness/jquery.ui.all.css" rel="stylesheet" />
&lt;script type="text/javascript" src="js/jquery-1.11.3.min.js">&lt;/script>

&lt;!-- Optionals starts -->
&lt;script type="text/javascript" src="js/jquery.ba-throttle-debounce.min.js">&lt;/script>
&lt;script type="text/javascript" src="js/jquery.mousewheel.min.js">&lt;/script>
&lt;!-- Optional Ends -->

&lt;script type="text/javascript" src="js/jquery-ui-1.11.4.min.js">&lt;/script>
&lt;script type="text/javascript" src="js/jquery.ui.scrolltabs.js">&lt;/script></code></pre>
        </p>
        <p>
          <h2 class="h4 text-uppercase">Initialization script</h2>
          <pre><code class="language-js">
 $("#my-tabs").scrollTabs({
 // Normal tabs options
 active: 1,
 collapsible: true,
 // Extended Scrolltabs options
  scrollOptions: {
    animateTabs: false,
    showNavWhenNeeded: true,
    customNavNext: null,
    customNavPrev: null,
    customNavFirst: null,
    customNavLast: null,
    closable: true,
    easing: 'swing',
    loadLastTab: false,
    onTabScroll() {
      // empty
    },
    scrollSpeed: 500,
    selectTabOnAdd: true,
    selectTabAfterScroll: true,
    showFirstLastArrows:true,
    hideDefaultArrows: false,
    nextPrevOutward: false,
    wrapperCssClass: '',
    enableDebug: false,
    ....
  }
});</code></pre> For more options & customization check out the <a href="docs/options/interfaces/scrolltaboptions.html">documentation</a>.
        </p>
        <p>
          <h2 class="h4 text-uppercase">Plugin Development & Contributions</h2>
          Pull request for new features or bug fixes with a proper information are welcome.
        </p>
        <p>
          <h3 class="h6 text-uppercase">Technical background</h3>
          This project uses
          <ul>
            <li>Gulp based build system</li>
            <li>Typescript (TSLint)</li>
            <li>Sass (Libsass)</li>
            <li>BrowserSync</li>
            <li>jQuery types (@types/jquery)</li>
            <li>Vscode tasks and debug setting are preconfigured</li>
          </ul>
        </p>
        <p>
          <h3 class="h6 text-uppercase">Local development</h2>
            So for local setup:
            <ol>
              <li>download the master branch</li>
              <li>execute <code>npm install</code></li>
              <li>use vscode <kbd>Shift + Ctrl + B</kbd> to build the project or execute using <kbd>npm run build</kbd></li>
              <li>start live/dev server(Browser Sync) using command <kbd>npm start</kbd></li>
              <li>start Visual Studio Code debug by using launch option <code>Launch in Chrome with Localhost</code></li>
            </ol>
        </p>
      </div>
    </div>
  </div>
  <footer class="small">
    <div class="container">
      <div class="row">
        <div class="col">
          Contributed with love by <a target="_blank" href="https://davidsekar.com">davidsekar</a>.
          <br> Licensed under <a href="https://github.com/davidsekar/jQuery-UI-ScrollTabs/blob/master/LICENSE">MIT</a>.
        </div>
      </div>
    </div>
  </footer>
  <!-- Place this tag in your head or just before your close body tag. -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
</body>

</html>