sniptskwicks - my very first moo-class

tahtahh. Something I wanted to do for a long time. Creating my first mootools-class. I spent so much time on understanding javascript, mootools, and github (not to mention uncountable mistakes), that I'm really proud to present you this little thing: sniptskwicks. It's a small mootools-class based on a plugin by David Walsh (again this guy, thank you man).

How to use

Take it the easy way or, a bit more flexible, with some options.

// the simple way - with default values:
var mySniptsKwicky = new SniptsKwicks();

// or, more flexible - using the options:
var mySniptsKwicky = new SniptsKwicks('kwicks', {
 kwickname: 'kwk',
 starter: 1,
 duration: 600,
 opacity: [.5, .9],
 fullWidth: true,
 onShow: function(el){
  // do something 
 },
 onHide: function(el){
  // do something
 },
 onStart: function(){
  // do something
 }
});

Arguments

list - (string) Name of ul-element containing the kwicks.
options - (object: optional) See below.

Options

kwickname - (string: defaults to 'kwk') Name of the numerated html-files containing the content.
starter - (number: defaults to 1) Number of the Kwick you wish to open at start.
duration - (number: defaults to 500) Transition-duration for opening.
opacity - (array: defaults to []) [inactive, active] numeric values for opacity 0 to 1, no Values - no fade-effect
fullWidth - (boolean: defaults to false) If true maximum Width is set to window-Width, else to list-Width.
onShow - (function: passes the affected element as argument) Custom event to start after a kwick is shown.
onHide - (function: passes the affected element as argument) Custom event to start after a kwick is hidden.
onStart - (function) Custom event to start with a delay of 600 after initialization.

Example

Load the javascript-files to your head-section:

<script type="text/javascript" src="path_to_js/mootools.core.js"></script>
<script type="text/javascript" src="path_to_js/mootools.more.js"></script>
<script type="text/javascript" src="path_to_js/sniptskwicks.js"></script>



s

Integrate the CSS-styles needed:

/* defines width */
.kwicks {
width: 1004px;
margin: 0;
padding: 0;
list-style-type:none;
clear: both;
}

.kwicks li {
overflow: hidden;
float:left;
}

.kwick {cursor:pointer;}

/* defines kwicks-height */
#kwicks .kwick {height: 548px;}




s

Place your kwicks-ul somewhere inside the body,...

<ul id="kwicks" class="kwicks">
 <li>kwick</li>
 <li>kwick</li>
 <li>kwick</li>
 <li>kwick</li>
 <li>kwick</li>
 <li>kwick</li>
</ul>



s

note: You'll have to define several html-files corresponding to the number of your li-elements. The class loads them inside the li's as content. Watch the files on github.

...and on domready tell the class to do the work:

window.addEvent('domready', function(){
 var myFirstKwicky = new SniptsKwicks('kwicks', {
  kwickname: 'kwk',
  starter: 1,
  duration: 600,
  opacity: [.5, 1],
  fullWidth: false
 });
});



s