tinytabs/index.html at master · knadh/tinytabs · 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
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>tinytabs - a super tiny Javascript plugin for rendering tabs. No dependencies.</title>
  <meta name="description" content="tinytabs is a zero dep, tiny Javascript tabbing library" />

  <style type="text/css">
    body {
      margin: 0px;
      font-family: 'Helvetica Neue', Helvetica, sans-serif;
      font-size: 18px;
      line-height: 1.3;
      color: #333;
    }

    #main {
      background: #fff;
      margin: 30px auto 30px auto;
      padding: 20px;
      width: 900px;
    }

    #mytabs {
      margin-top: 30px;
    }

    table {
      border-spacing: 0;
      border-color: #ddd;
    }

    th {
      background: #eee;
    }

    th,
    td {
      padding: 10px;
      border-color: #ddd;
    }
  </style>

  <link rel="stylesheet" type="text/css" href="tinytabs.css" />
</head>

<body>
  <div id="main">
    <h1>tinytabs &mdash; Javascript lib for tabbed UIs</h1>

    <div id="mytabs">
      <section class="tab-section" id="example" data-name="Example" data-default>
        <h3 class="title">Example code</h3>
        <p>
          <strong>tinytabs</strong> is a tiny (~750 bytes minified+gzip) Javascript tabbing
          library. Zero dependencies. All you need is a few layers in a container layer, and
          bam, tabbed interface. If Javascript is not enabled, it degrades
          nicely too.
        </p>
        <p>See the source code of this page for an example implementation</h3>
      </section>

      <section class="tab-section" id="options" data-name="Options" data-closable>
        <h3 class="title">Options</h3>
        <table border="1">
          <tbody>
            <tr>
              <td>anchor</td>
              <td>
                <strong><em>true</em> (default) or <em>false</em></strong><br />
                If enabled, when a tab is clicked, it's id is set in url's
                hashtag so that the tab is retained on page reloads. Also
                enables linking to a tab directly.<br />
                Eg: http://kailashnadh.name/tinytabs#tab-example
              </td>
            </tr>
            <tr>
              <td>hideTitle</td>
              <td>
                <strong><em>true</em> (default) or <em>false</em></strong><br />
                Hide the title element within section elements.
              </td>
            </tr>
            <tr>
              <td>sectionClass</td>
              <td>
                Section element's class. Default is
                <strong><em>section</em></strong>.
              </td>
            </tr>
            <tr>
              <td>tabsClass</td>
              <td>
                Tab (ul) container's class. Default is
                <strong><em>tabs</em></strong>.
              </td>
            </tr>
            <tr>
              <td>tabClass</td>
              <td>
                Individual tab's (li) class. Default is
                <strong><em>tab</em></strong>.
              </td>
            </tr>
            <tr>
              <td>titleClass</td>
              <td>
                Title element's tag. Default is <strong><em>title</em></strong>.
              </td>
            </tr>
            <tr>
              <td>onBefore</td>
              <td>
                <code>function(id, tab)</code>. Callback function that gets evaluated before a tab is activated.
                The first arg is the id of the tab and the second is the DOM element of the tab.
              </td>
            </tr>
            <tr>
              <td>onAfter</td>
              <td>
                <code>function(id, tab)</code>. Callback function that gets evaluated after a tab is activated.
                The first arg is the id of the tab and the second is the DOM element of the tab.
              </td>
            </tr>
            <tr>
              <td>onClose</td>
              <td>
                <code>function(id)</code>. Callback function that gets evaluated while closing the tab.
                The argument is the id of the tab.
              </td>
            </tr>
          </tbody>
        </table>
      </section>

      <section class="tab-section" id="video" data-name="video">
        <h3 class="title">Video</h3>
        <iframe width="100%" height="515" src="https://www.youtube.com/embed/9tKS1alqiiU" frameborder="0"></iframe>
      </section>
    </div>

    <script type="module">
      import tinytabs from './tinytabs.js';

      // Initialize tinytabs.
      tinytabs(document.querySelector("#mytabs"), {});
    </script>

    <p><a href="http://github.com/knadh/tinytabs" class="r">@knadh/tinytabs</a></p>
  </div>
  <!-- main //-->
</body>

</html>