Permalink
Browse files

Addition of tabbed slider and initial examples

  • Loading branch information...
chrissloan committed Oct 5, 2008
1 parent 7b62bb9 commit cd3ac288260ab6c530f22c2e896aa77f8b29de78
Showing with 634 additions and 1 deletion.
  1. +10 −0 README
  2. +11 −0 mookisscontrols.css
  3. +88 −0 mookisscontrols.html
  4. +30 −1 mookisscontrols.js
  5. +495 −0 mootools-1.2.js
View
10 README
@@ -0,0 +1,10 @@
+/*-----------------------------------------------------
+MOOKISS LIBRARY v. 1
+Utilizes the MooTools Library: http://www.mootools.net
+
+Examples and syntax
+
+Author: Chris Sloan
+Website: http://www.chrissloan.info
+License: Open Source MIT Licence
+-----------------------------------------------------*/
View
@@ -0,0 +1,11 @@
+.scroller_container{ width: 380px; height: 104px; position: absolute; overflow: hidden;} .scroller_innards{ width: 9999px; position: absolute; }
+
+#test_tab_scroller .panel{
+ width: 380px;
+ float: left;
+}
+
+ .selected{
+ background-color: #ff0000;
+}
+
View
@@ -0,0 +1,88 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <script src="mootools-1.2.js" type="text/javascript" charset="utf-8"></script>
+ <script src="mookisscontrols.js" type="text/javascript" charset="utf-8"></script>
+ <link rel="stylesheet" href="mookisscontrols.css" type="text/css" charset="utf-8" />
+
+ <title>MooKissControls - HTML Examples</title>
+
+</head>
+
+<body>
+
+<h2>Scroller</h2>
+ <div id="test_scroller">
+ <a href="javascript:void(0)" class="previous_button">previous</a>
+ <a href="javascript:void(0)" class="next_button">next</a>
+ <div class="scroller_container">
+ <div class="scroller_innards">
+ <a href="#"><img src="images/temp/video.jpg" width="130" height="98" alt="Video" class="thumb floatLeft" /></a>
+ <a href="#"><img src="images/temp/video3.jpg" width="130" height="98" alt="Video2" class="thumb floatLeft" /></a>
+ <a href="#"><img src="images/temp/video2.jpg" width="130" height="98" alt="Video2" class="thumb floatLeft" /></a>
+ <a href="#"><img src="images/temp/video4.jpg" width="130" height="98" alt="Video2" class="thumb floatLeft" /></a>
+ </div>
+ </div>
+ <br class="clear" />
+ </div>
+ <br/><br/><br/><br/><br/><br/><br/><br/>
+ <h2>Scroller with tabs</h2>
+ <div id="test_tab_scroller">
+ <ul class="tabs">
+ <li><a name="tab1" href="javascript:void(0)" class="selected">Item 1</a></li>
+ <li><a name="tab2" href="javascript:void(0)">Item 2</a></li>
+ <li><a name="tab3" href="javascript:void(0)">Item 3</a></li>
+ <li><a name="tab4" href="javascript:void(0)">Item 4</a></li>
+ </ul>
+ <a href="javascript:void(0)" class="previous_button">previous</a>
+ <a href="javascript:void(0)" class="next_button">next</a>
+ <div class="scroller_container">
+ <div class="scroller_innards">
+ <div class="panel">
+ This is item 1
+ </div>
+ <div class="panel">
+ This is item 2
+ </div>
+ <div class="panel">
+ This is item 3
+ </div>
+ <div class="panel">
+ This is item 4
+ </div>
+ </div>
+ </div>
+ <br class="clear" />
+ </div>
+
+
+ <br/><br/><br/><br/><br/><br/><br/><br/>
+ <h2>Tabs</h2>
+ <div id="test_tabs">
+ <ul class="tabs">
+ <li><a name="tab1" href="javascript:void(0)" class="selected">Item 1</a></li>
+ <li><a name="tab2" href="javascript:void(0)">Item 2</a></li>
+ <li><a name="tab3" href="javascript:void(0)">Item 3</a></li>
+ </ul>
+ <div id="tab1" class="panel">
+ tab one thing
+ </div>
+ <div id="tab2" class="panel">
+ tab two thing
+ </div>
+ <div id="tab3" class="panel">
+ tab three thing
+ </div>
+ </div>
+<script type="text/javascript" charset="utf-8">
+window.addEvent('domready', function() {
+ new MooKissTabs('test_tabs');
+ new MooKissSlider('test_scroller', {itemsClass:'thumb', moveBy: 2});
+ new MooKissSlider('test_tab_scroller', {itemsClass:'panel', useTabs:true});
+});
+</script>
+</body>
+</html>
View
@@ -109,6 +109,8 @@ var MooKissSlider = new Class({
itemsClass: 'box', //class name of items to scroll
controlNext: 'next_button', //class of next button
controlPrevious: 'previous_button', //class name of previous button
+ useTabs: false, //if tabs for sliding are used too
+ selectedClass: "selected", //class for tab that is selected
moveBy: 1
},
@@ -146,6 +148,16 @@ var MooKissSlider = new Class({
}.bind(this)
);
}.bind(this));
+
+ if(this.options.useTabs){ //for tab slider
+ this.tabs = $$('#' + this.elid + ' ul li a'); //store all the tabs into the hash
+ this.tabs.each(function(item, index) { //add the onclick functionality
+ item.addEvent('click', function(){
+ this.movePanel(index);
+ }.bind(this)
+ );
+ }.bind(this));
+ }
},
clickNext: function(){ //conditionals galore
@@ -158,11 +170,17 @@ var MooKissSlider = new Class({
}else{
this.locationID = 0;
this.scroll.toElement(this.items[this.locationID]);
-
}
+
+ if(this.options.useTabs){ //for tab slider
+ this.tabs.removeClass(this.options.selectedClass);
+ this.tabs[this.locationID].addClass(this.options.selectedClass);
+ }
+
},
clickPrevious: function(){ //conditionals galore
+
if(this.locationID != 0 && (this.locationID - this.options.moveBy) >= 0){
this.locationID -= this.options.moveBy;
this.scroll.toElement(this.items[this.locationID]);
@@ -174,6 +192,17 @@ var MooKissSlider = new Class({
this.scroll.toElement(this.items[this.locationID]);
}
+ if(this.options.useTabs){ //for tab slider
+ this.tabs.removeClass(this.options.selectedClass);
+ this.tabs[this.locationID].addClass(this.options.selectedClass);
+ }
+ },
+
+ movePanel: function(index){ //for use with moving by tabs
+ this.tabs.removeClass(this.options.selectedClass); //remove the selected class to all tabs
+ this.tabs[index].addClass(this.options.selectedClass); //add the selected class to selected tab
+ this.scroll.toElement(this.items[index]); //scroll to the item
+ this.locationID = index; //set the new locationID to the index of item
}
});
Oops, something went wrong.

0 comments on commit cd3ac28

Please sign in to comment.