Last active
August 29, 2015 14:05
-
-
Save mr21/47f7f9236601a6d00864 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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