Add jQuery plugin structure
This commit is contained in:
parent
2129d1fc67
commit
0c2a04726d
@ -8,35 +8,33 @@
|
||||
*/
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
;(function ( $, window, document, undefined ) {
|
||||
|
||||
/* Tabs Activiation
|
||||
================================================== */
|
||||
var pluginName = 'skeletonTabs',
|
||||
defaults = {
|
||||
propertyName: "value"
|
||||
};
|
||||
|
||||
var tabs = $('ul.tabs');
|
||||
function Plugin( element, options ) {
|
||||
this.element = element;
|
||||
this.options = $.extend( {}, defaults, options) ;
|
||||
|
||||
tabs.each(function(i) {
|
||||
this._defaults = defaults;
|
||||
this._name = pluginName;
|
||||
|
||||
//Get all tabs
|
||||
var tab = $(this).find('> li > a');
|
||||
tab.click(function(e) {
|
||||
this.init();
|
||||
}
|
||||
|
||||
//Get Location of tab's content
|
||||
var contentLocation = $(this).attr('href');
|
||||
Plugin.prototype.init = function () {
|
||||
|
||||
//Let go if not a hashed one
|
||||
if(contentLocation.charAt(0)=="#") {
|
||||
};
|
||||
|
||||
e.preventDefault();
|
||||
$.fn[pluginName] = function ( options ) {
|
||||
return this.each(function () {
|
||||
if (!$.data(this, 'plugin_' + pluginName)) {
|
||||
$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//Make Tab Active
|
||||
tab.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
//Show Tab Content & add active class
|
||||
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
})(jQuery, window, document);
|
@ -9,7 +9,18 @@
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-fixture">test markup, will be hidden</div>
|
||||
<div id="qunit-fixture">
|
||||
<div role="tabpanel">
|
||||
<ul>
|
||||
<li>Simple</li>
|
||||
<li>Lightweight</li>
|
||||
<li>Mobile</li>
|
||||
</ul>
|
||||
<div>The tabs are clean and simple divs and basic CSS.</div>
|
||||
<div>The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</div>
|
||||
<div>The tabs work like a charm even on mobile devices.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||||
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
|
||||
|
Loading…
Reference in New Issue
Block a user