Skip to content

Instantly share code, notes, and snippets.

@mr21
Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mr21/47f7f9236601a6d00864 to your computer and use it in GitHub Desktop.
Save mr21/47f7f9236601a6d00864 to your computer and use it in GitHub Desktop.
<div id="parent">
<div class="jqtabs" id="tabs_A">
<div class="jqtabs-tabs">
<div class="jqtabs-tab">A
<a class="jqtabs-btnCloseTab" href="#"><!--
The plugin allow you to put an element with the class:
`jqtabs-btnCloseTab` in any `jqtabs-tab` element who when
it's clicked it's will call .removeTab() to remove
this tab and its content.
--></a>
</div>
<div class="jqtabs-tab">B</div>
<a class="jqtabs-btnNewTab" href="#"><!--
The plugin also allow you to put an element with the class:
`jqtabs-btnNewTab` in the `jqtabs-tabs` element who when it's clicked
it's call .newTabAppend() to add a new tab after the last one.
--></a>
</div>
<div class="jqtabs-contents">
<div class="jqtabs-content">A</div>
<div class="jqtabs-content">B</div>
</div>
</div>
<div class="jqtabs">
<div class="jqtabs-tabs">
<div class="jqtabs-tab">C</div>
<div class="jqtabs-tab jqtabs-tabActive">D<!--
You can add the class `jqtabs-tabActive` to active a specific tab at
the intialisation. If you didn't specify any `jqtabs-tabActive`,
it's the first tab who will be active.
--></div>
<div class="jqtabs-tab">E</div>
</div>
<div class="jqtabs-contents">
<div class="jqtabs-content">C</div>
<div class="jqtabs-content">D</div>
<div class="jqtabs-content">E</div>
</div>
</div>
</div>
<script>
// `yourElement` can be a NodeElement or a jQuery object as you want.
var yourElement = $('#parent');
var plugin_tabs = $.plugin_tabs(yourElement, {
// If you have included the `jquery-dragndrop`
// maybe you don't want to permit the drag of your tabs.
// So you can specify the behaviour with this:
noDragndrop: true/false,
// The `duration` specify the delay by default of the .removeTab method
// and of the `jquery-dragndrop` plugin (it's 200 by default).
duration: 200,
// You can specify the `this` of all your callback with `applyThis`:
applyThis: object,
onChange: function(jq_tab, jq_content) {
// This callback is called when the user click on any tab.
// You receive the tab AND its linked content.
// In this function the `this` will be `window`
// or the object specified by `applyThis`.
},
onNewTab: function(jq_tab, jq_content) {
// This callback is called when a new tab is created by the methods:
// .newTabPrepend() or .newTabAppend().
// You can set the HTML of the new elements: `jq_tab` and `jq_content`.
// These elements will be initialised by the plugin after this callback.
}
});
// `applyThis`, `onChange`, `onNewTab` and `duration` can be set this way too:
plugin_tabs.duration(200);
plugin_tabs.applyThis(object);
plugin_tabs.onChange(function(jq_tab, jq_content) { });
plugin_tabs.onNewTab(function(jq_tab, jq_content) { });
// But if you set the `onChange` ONLY here,
// your callback will be not called at the initialisation...
// but ONLY at the click of the user.
// After the initialisation of the plugin,
// all new `.jqtabs` elements will be considered by the plugin.
// You can specify an id="..." to any `.jqtabs` element if you want
// to have an access on it after the initialisation:
var tabsA = plugin_tabs.container['tabs_A'];
// If you didn't set an id="..." to your element the plugin set a number on it:
var tabsB = plugin_tabs.container[0];
// After this you can call:
tabsA.prevTab();
tabsA.nextTab();
// You can add a new tab with this two methods:
tabsA.newTabPrepend(); // add a new tab before the first one.
tabsA.newTabAppend(); // add a new tab after the last one.
// You can delete a specific tab by calling this:
tabsA.removeTab(
jq_tab, // jQuery object of the `.jqtabs-tab` element you want to remove.
delay // A number of milliseconds to wait before calling .remove() of jQuery.
);
// When you call .removeTab() the script will
// .addClass('jqtabs-tabClosing') to the jq_tab element and
// .addClass('jqtabs-contentClosing') to the content element linked of the jq_tab.
// So you can make some CSS animation before delete these two elements.
// The duration of your animation have to be pass to
// the .removeTab() method with the `delay` argument.
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment