UNPKG

jquery-smarttab/examples/ajax.html

Version:

1<!doctype html>
2<html lang="en">
3<head>
  <title>jQuery Smart Tab - The flexible jQuery tab control plugin</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
  <!-- Include SmartTab CSS -->
  <link href="./css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />
10
  <!-- Demo Page Style - You don't need -->
  <style>
  body {
    padding-right: 5%;
    padding-left: 5%;
  }
  </style>
18
19</head>
20<body>
21
  <p>
    <label>Theme:</label>
    <select id="theme_selector">
      <option value="default" selected>Default</option>
      <option value="classic">Classic</option>
      <option value="dark">Dark</option>
      <option value="brick">Brick</option>
      <option value="round">Round</option>
      <option value="pills">Pills</option>
      <option value="github">GitHub</option>
      <option value="sourceforge">Sourceforge</option>
      <option value="">No Theme</option>
    </select>
35
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" id="is_vertical" value="1" />
    <label for="is_vertical">Vertical</label>
39
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="checkbox" id="is_justified" value="1" checked />
    <label for="is_justified">Justified</label>
43
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>Animation:</label>
    <select id="animation">
          <option value="none">None</option>
          <option value="fade">Fade</option>
          <option value="slide-horizontal">Slide Horizontal</option>
          <option value="slide-vertical">Slide Vertical</option>
          <option value="slide-swing">Slide Swing</option>
    </select>
53
    &nbsp;&nbsp;&nbsp;&nbsp;
    <label>Go To:</label>
    <select id="got_to_tab">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
    </select>
  </p>
  <br />
64
65
  <!-- SmartTab html -->
  <div id="smarttab">
68
      <ul class="nav">
          <li>
            <a class="nav-link" href="#tab-1" data-repo="jquery-smarttab">
              <strong>SmartTab</strong><br />repository details from GitHub
            </a>
          </li>
          <li>
            <a class="nav-link" href="#tab-2" data-repo="smartwizard">
              <strong>SmartWizard</strong><br />repository details from GitHub
            </a>
          </li>
          <li>
            <a class="nav-link" href="#tab-3" data-repo="jquery-smartcart">
              <strong>SmartCart</strong><br />repository details from GitHub
            </a>
          </li>
      </ul>
86
      <div class="tab-content">
          <div id="tab-1" class="tab-pane" role="tabpanel">
              <h3>Tab 1 Content</h3>
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </div>
          <div id="tab-2" class="tab-pane" role="tabpanel">
              <h3>Tab 2 Content</h3>
              <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
          </div>
          <div id="tab-3" class="tab-pane" role="tabpanel">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </div>
      </div>
  </div>
101
  <!-- Include jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
104
  <!-- Include SmartTab JavaScript source -->
  <script type="text/javascript" src="./js/jquery.smartTab.min.js"></script>
107
  <script type="text/javascript">
      $(document).ready(function() {
110
            // Ajax content loading with "tabContent" event
            $("#smarttab").on("tabContent", function(e, anchorObject, stepIndex) {
113
              var repo    = anchorObject.data('repo');
              var ajaxURL = "https://api.npms.io/v2/package/" + repo;
              // Return a promise object
              return new Promise((resolve, reject) => {
118
                // Ajax call to fetch your content
                $.ajax({
                    method  : "GET",
                    url     : ajaxURL,
                    beforeSend: function( xhr ) {
                        // Show the loader
                        $('#smarttab').smartTab("loader", "show");
                    }
                }).done(function( res ) {
                    // console.log(res);
129
                    var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';
                    html += '<br>URL: <strong>' + ajaxURL + '</strong>';
                    html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';
                    html += '<br>Description: ' + res.collected.metadata.description;
                    html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';
                    html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');
136
                    // html += '<br>Clone URL: ' + res.clone_url;
                    html += '<br>Stars: ' + res.collected.github.starsCount;
                    html += '<br>Forks: ' + res.collected.github.forksCount;
                    html += '<br>Watchers: ' + res.collected.github.subscribersCount;
                    html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;
142
                    html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);
                    html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);
                    html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);
146
                    // Resolve the Promise with the tab content
                    resolve(html);
149
                    // Hide the loader
                    $('#smarttab').smartTab("loader", "hide");
                }).fail(function(err) {
153
                  // Reject the Promise with error message to show as tab content
                  reject( "An error loading the resource" );
156
                  // Hide the loader
                  $('#smarttab').smartTab("loader", "hide");
                });
160
              });
162
          });
164
          // SmartTab initialize with options (options are optional)
          $('#smarttab').smartTab({
            selected: 1, // Initial selected tab, 0 = first tab
            theme: 'default', // theme for the tab, related css need to include for other than default theme
            orientation: 'horizontal', // Nav menu orientation. horizontal/vertical
            justified: true, // Nav menu justification. true/false
            autoAdjustHeight: true, // Automatically adjust content height
            backButtonSupport: true, // Enable the back button support
            enableURLhash: true, // Enable selection of the tab based on url hash
            transition: {
                animation: 'fade', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
                speed: '400', // Transion animation speed
                easing:'' // Transition animation easing
            },
            autoProgress: { // Auto navigate tabs on interval
                enabled: false, // Enable/Disable Auto navigation
                interval: 3500, // Auto navigate Interval (used only if "autoProgress" is set to true)
                stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus
            }
          });
185
          // Demo Button Events
          $("#got_to_tab").on("change", function() {
              // Go to tab
              var tab_index = $(this).val() - 1;
              $('#smarttab').smartTab("goToTab", tab_index);
              return true;
          });
193
          $("#is_vertical").on("click", function() {
              // Change Orientation
              var options = {
                orientation: ($(this).prop("checked") == true) ? 'vertical' : 'horizontal'
              };
              $('#smarttab').smartTab("setOptions", options);
              return true;
          });
202
          $("#is_justified").on("click", function() {
              // Change Justify
              var options = {
                justified: $(this).prop("checked")
              };
208
              $('#smarttab').smartTab("setOptions", options);
              return true;
          });
212
          $("#animation").on("change", function() {
              // Change animation
              var options = {
                transition: {
                    animation: $(this).val()
                },
              };
              $('#smarttab').smartTab("setOptions", options);
              return true;
          });
223
          $("#theme_selector").on("change", function() {
              // Change theme
              var options = {
                theme: $(this).val()
              };
              $('#smarttab').smartTab("setOptions", options);
              return true;
          });
232
      });
  </script>
235</body>
236</html>

1	`<!doctype html>`
2	`<html lang="en">`
3	`<head>`
4	`<title>jQuery Smart Tab - The flexible jQuery tab control plugin</title>`
5	`<meta charset="UTF-8">`
6	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">`
7
8	`<!-- Include SmartTab CSS -->`
9	`<link href="./css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />`
10
11	`<!-- Demo Page Style - You don't need -->`
12	`<style>`
13	`body {`
14	`padding-right: 5%;`
15	`padding-left: 5%;`
16	`}`
17	`</style>`
18
19	`</head>`
20	`<body>`
21
22	`<p>`
23	`<label>Theme:</label>`
24	`<select id="theme_selector">`
25	`<option value="default" selected>Default</option>`
26	`<option value="classic">Classic</option>`
27	`<option value="dark">Dark</option>`
28	`<option value="brick">Brick</option>`
29	`<option value="round">Round</option>`
30	`<option value="pills">Pills</option>`
31	`<option value="github">GitHub</option>`
32	`<option value="sourceforge">Sourceforge</option>`
33	`<option value="">No Theme</option>`
34	`</select>`
35
36	`    `
37	`<input type="checkbox" id="is_vertical" value="1" />`
38	`<label for="is_vertical">Vertical</label>`
39
40	`    `
41	`<input type="checkbox" id="is_justified" value="1" checked />`
42	`<label for="is_justified">Justified</label>`
43
44	`    `
45	`<label>Animation:</label>`
46	`<select id="animation">`
47	`<option value="none">None</option>`
48	`<option value="fade">Fade</option>`
49	`<option value="slide-horizontal">Slide Horizontal</option>`
50	`<option value="slide-vertical">Slide Vertical</option>`
51	`<option value="slide-swing">Slide Swing</option>`
52	`</select>`
53
54	`    `
55	`<label>Go To:</label>`
56	`<select id="got_to_tab">`
57	`<option value="1">1</option>`
58	`<option value="2">2</option>`
59	`<option value="3">3</option>`
60	`<option value="4">4</option>`
61	`</select>`
62	`</p>`
63	`<br />`
64
65
66	`<!-- SmartTab html -->`
67	`<div id="smarttab">`
68
69	`<ul class="nav">`
70	`<li>`
71	`<a class="nav-link" href="#tab-1" data-repo="jquery-smarttab">`
72	`<strong>SmartTab</strong><br />repository details from GitHub`
73	`</a>`
74	`</li>`
75	`<li>`
76	`<a class="nav-link" href="#tab-2" data-repo="smartwizard">`
77	`<strong>SmartWizard</strong><br />repository details from GitHub`
78	`</a>`
79	`</li>`
80	`<li>`
81	`<a class="nav-link" href="#tab-3" data-repo="jquery-smartcart">`
82	`<strong>SmartCart</strong><br />repository details from GitHub`
83	`</a>`
84	`</li>`
85	`</ul>`
86
87	`<div class="tab-content">`
88	`<div id="tab-1" class="tab-pane" role="tabpanel">`
89	`<h3>Tab 1 Content</h3>`
90	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
91	`</div>`
92	`<div id="tab-2" class="tab-pane" role="tabpanel">`
93	`<h3>Tab 2 Content</h3>`
94	<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
95	`</div>`
96	`<div id="tab-3" class="tab-pane" role="tabpanel">`
97	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
98	`</div>`
99	`</div>`
100	`</div>`
101
102	`<!-- Include jQuery -->`
103	`<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>`
104
105	`<!-- Include SmartTab JavaScript source -->`
106	`<script type="text/javascript" src="./js/jquery.smartTab.min.js"></script>`
107
108	`<script type="text/javascript">`
109	`$(document).ready(function() {`
110
111	`// Ajax content loading with "tabContent" event`
112	`$("#smarttab").on("tabContent", function(e, anchorObject, stepIndex) {`
113
114	`var repo = anchorObject.data('repo');`
115	`var ajaxURL = "https://api.npms.io/v2/package/" + repo;`
116	`// Return a promise object`
117	`return new Promise((resolve, reject) => {`
118
119	`// Ajax call to fetch your content`
120	`$.ajax({`
121	`method : "GET",`
122	`url : ajaxURL,`
123	`beforeSend: function( xhr ) {`
124	`// Show the loader`
125	`$('#smarttab').smartTab("loader", "show");`
126	`}`
127	`}).done(function( res ) {`
128	`// console.log(res);`
129
130	`var html = '<h2>Ajax data about ' + repo + ' loaded from GitHub</h2>';`
131	`html += '<br>URL: <strong>' + ajaxURL + '</strong>';`
132	`html += '<br>Name: <strong>' + res.collected.metadata.name + '</strong>';`
133	`html += '<br>Description: ' + res.collected.metadata.description;`
134	`html += '<br>Homepage: <a href="' + res.collected.github.homepage + '" >'+ res.collected.github.homepage +'</a>';`
135	`html += '<br>Keywords: ' + res.collected.metadata.keywords.join(', ');`
136
137	`// html += '<br>Clone URL: ' + res.clone_url;`
138	`html += '<br>Stars: ' + res.collected.github.starsCount;`
139	`html += '<br>Forks: ' + res.collected.github.forksCount;`
140	`html += '<br>Watchers: ' + res.collected.github.subscribersCount;`
141	`html += '<br>Open Issues: ' + res.collected.github.issues.openCount + '/' + res.collected.github.issues.count;`
142
143	`html += '<br><br>Popularity: ' + parseInt(res.score.detail.popularity * 100);`
144	`html += '<br>Quality: ' + parseInt(res.score.detail.quality * 100);`
145	`html += '<br>Maintenance: ' + parseInt(res.score.detail.maintenance * 100);`
146
147	`// Resolve the Promise with the tab content`
148	`resolve(html);`
149
150	`// Hide the loader`
151	`$('#smarttab').smartTab("loader", "hide");`
152	`}).fail(function(err) {`
153
154	`// Reject the Promise with error message to show as tab content`
155	`reject( "An error loading the resource" );`
156
157	`// Hide the loader`
158	`$('#smarttab').smartTab("loader", "hide");`
159	`});`
160
161	`});`
162
163	`});`
164
165	`// SmartTab initialize with options (options are optional)`
166	`$('#smarttab').smartTab({`
167	`selected: 1, // Initial selected tab, 0 = first tab`
168	`theme: 'default', // theme for the tab, related css need to include for other than default theme`
169	`orientation: 'horizontal', // Nav menu orientation. horizontal/vertical`
170	`justified: true, // Nav menu justification. true/false`
171	`autoAdjustHeight: true, // Automatically adjust content height`
172	`backButtonSupport: true, // Enable the back button support`
173	`enableURLhash: true, // Enable selection of the tab based on url hash`
174	`transition: {`
175	`animation: 'fade', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing`
176	`speed: '400', // Transion animation speed`
177	`easing:'' // Transition animation easing`
178	`},`
179	`autoProgress: { // Auto navigate tabs on interval`
180	`enabled: false, // Enable/Disable Auto navigation`
181	`interval: 3500, // Auto navigate Interval (used only if "autoProgress" is set to true)`
182	`stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus`
183	`}`
184	`});`
185
186	`// Demo Button Events`
187	`$("#got_to_tab").on("change", function() {`
188	`// Go to tab`
189	`var tab_index = $(this).val() - 1;`
190	`$('#smarttab').smartTab("goToTab", tab_index);`
191	`return true;`
192	`});`
193
194	`$("#is_vertical").on("click", function() {`
195	`// Change Orientation`
196	`var options = {`
197	`orientation: ($(this).prop("checked") == true) ? 'vertical' : 'horizontal'`
198	`};`
199	`$('#smarttab').smartTab("setOptions", options);`
200	`return true;`
201	`});`
202
203	`$("#is_justified").on("click", function() {`
204	`// Change Justify`
205	`var options = {`
206	`justified: $(this).prop("checked")`
207	`};`
208
209	`$('#smarttab').smartTab("setOptions", options);`
210	`return true;`
211	`});`
212
213	`$("#animation").on("change", function() {`
214	`// Change animation`
215	`var options = {`
216	`transition: {`
217	`animation: $(this).val()`
218	`},`
219	`};`
220	`$('#smarttab').smartTab("setOptions", options);`
221	`return true;`
222	`});`
223
224	`$("#theme_selector").on("change", function() {`
225	`// Change theme`
226	`var options = {`
227	`theme: $(this).val()`
228	`};`
229	`$('#smarttab').smartTab("setOptions", options);`
230	`return true;`
231	`});`
232
233	`});`
234	`</script>`
235	`</body>`
236	`</html>`