Berikut beberapa kodenNYA:
index.php
<!DOCTYPE html>
<html>
<head>
<title><?php echo $header;?></title>
<link href="easyAccordion.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="jquery.easyAccordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#accordionH').easyAccordion({
autoStart: false
});
});
</script>
</head>
<body>
<div class="sample">
<div id="accordionH">
<dl>
<dt>Slide Pertama</dt>
<dd>
<h2>----JENDELA 1</h2>
<p><img src="images/img1.png" />
OKE sudah bagus tampilannya, oke juga kalo saya coba.
Gimana kalo saya coba share ke teman2, semoga bermanfaat
</p>
</dd>
<dt>Slide Pertama</dt>
<dd>
<h2>----JENDELA 2</h2>
<p><img src="images/img1.png" />
OKE sudah bagus tampilannya, oke juga kalo saya coba.
Gimana kalo saya coba share ke teman2, semoga bermanfaat<br>
</p>
</dd>
<dt>Slide Pertama</dt>
<dd>
<h2>----JENDELA 3</h2>
<p><img src="images/img1.png" />
OKE sudah bagus tampilannya, oke juga kalo saya coba.
Gimana kalo saya coba share ke teman2, semoga bermanfaat
</p>
</dd>
<dt>Slide Pertama</dt>
<dd>
<h2>----JENDELA 4</h2>
<p><img src="images/img1.png" />
OKE sudah bagus tampilannya, oke juga kalo saya coba.
Gimana kalo saya coba share ke teman2, semoga bermanfaat
</p>
</dd>
</dl>
</div>
</div>
</body>
</html>
_____________________________________________________
jquery.easyAccordion.js
(function(jQuery) {
jQuery.fn.easyAccordion = function(options) {
var defaults = {
slideNum: true,
autoStart: false,
slideInterval: 3000
};
this.each(function() {
var settings = jQuery.extend(defaults, options);
jQuery(this).find('dl').addClass('easy-accordion');
// -------- Set the variables ------------------------------------------------------------------------------
jQuery.fn.setVariables = function() {
dlWidth = jQuery(this).width();
dlHeight = jQuery(this).height();
dtWidth = jQuery(this).find('dt').outerHeight();
if (jQuery.browser.msie){ dtWidth = $(this).find('dt').outerWidth();}
dtHeight = dlHeight - (jQuery(this).find('dt').outerWidth()-jQuery(this).find('dt').width());
slideTotal = jQuery(this).find('dt').size();
ddWidth = dlWidth - (dtWidth*slideTotal) - (jQuery(this).find('dd').outerWidth(true)-jQuery(this).find('dd').width());
ddHeight = dlHeight - (jQuery(this).find('dd').outerHeight(true)-jQuery(this).find('dd').height());
};
jQuery(this).setVariables();
// -------- Fix some weird cross-browser issues due to the CSS rotation -------------------------------------
if (jQuery.browser.safari){ var dtTop = (dlHeight-dtWidth)/2; var dtOffset = -dtTop; /* Safari and Chrome */ }
if (jQuery.browser.mozilla){ var dtTop = dlHeight - 20; var dtOffset = - 20; /* FF */ }
if (jQuery.browser.msie){ var dtTop = 0; var dtOffset = 0; /* IE */ }
// -------- Getting things ready ------------------------------------------------------------------------------
var f = 1;
jQuery(this).find('dt').each(function(){
jQuery(this).css({'width':dtHeight,'top':dtTop,'margin-left':dtOffset});
if(settings.slideNum == true){
jQuery('<span class="slide-number">'+0+f+'</span>').appendTo(this);
if(jQuery.browser.msie){
var slideNumLeft = parseInt(jQuery(this).find('.slide-number').css('left')) - 14;
jQuery(this).find('.slide-number').css({'left': slideNumLeft})
if(jQuery.browser.version == 6.0 || jQuery.browser.version == 7.0){
jQuery(this).find('.slide-number').css({'bottom':'auto'});
}
if(jQuery.browser.version == 8.0){
var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top')) - 12;
jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
}
} else {
var slideNumTop = jQuery(this).find('.slide-number').css('bottom');
var slideNumTopVal = parseInt(slideNumTop) + parseInt(jQuery(this).css('padding-top'));
jQuery(this).find('.slide-number').css({'bottom': slideNumTopVal});
}
}
f = f + 1;
});
if(jQuery(this).find('.active').size()) {
jQuery(this).find('.active').next('dd').addClass('active');
} else {
jQuery(this).find('dt:first').addClass('active').next('dd').addClass('active');
}
jQuery(this).find('dt:first').css({'left':'0'}).next().css({'left':dtWidth});
jQuery(this).find('dd').css({'width':ddWidth,'height':ddHeight});
// -------- Functions ------------------------------------------------------------------------------
jQuery.fn.findActiveSlide = function() {
var i = 1;
this.find('dt').each(function(){
if(jQuery(this).hasClass('active')){
activeID = i; // Active slide
} else if (jQuery(this).hasClass('no-more-active')){
noMoreActiveID = i; // No more active slide
}
i = i + 1;
});
};
jQuery.fn.calculateSlidePos = function() {
var u = 2;
jQuery(this).find('dt').not(':first').each(function(){
var activeDtPos = dtWidth*activeID;
if(u <= activeID){
var leftDtPos = dtWidth*(u-1);
jQuery(this).animate({'left': leftDtPos});
if(u < activeID){ // If the item sits to the left of the active element
jQuery(this).next().css({'left':leftDtPos+dtWidth});
} else{ // If the item is the active one
jQuery(this).next().animate({'left':activeDtPos});
}
} else {
var rightDtPos = dlWidth-(dtWidth*(slideTotal-u+1));
jQuery(this).animate({'left': rightDtPos});
var rightDdPos = rightDtPos+dtWidth;
jQuery(this).next().animate({'left':rightDdPos});
}
u = u+ 1;
});
setTimeout( function() {
jQuery('.easy-accordion').find('dd').not('.active').each(function(){
jQuery(this).css({'display':'none'});
});
}, 400);
};
jQuery.fn.activateSlide = function() {
this.parent('dl').setVariables();
this.parent('dl').find('dd').css({'display':'block'});
this.parent('dl').find('dd.plus').removeClass('plus');
this.parent('dl').find('.no-more-active').removeClass('no-more-active');
this.parent('dl').find('.active').removeClass('active').addClass('no-more-active');
this.addClass('active').next().addClass('active');
this.parent('dl').findActiveSlide();
if(activeID < noMoreActiveID){
this.parent('dl').find('dd.no-more-active').addClass('plus');
}
this.parent('dl').calculateSlidePos();
};
jQuery.fn.rotateSlides = function(slideInterval, timerInstance) {
var accordianInstance = jQuery(this);
timerInstance.value = setTimeout(function(){accordianInstance.rotateSlides(slideInterval, timerInstance);}, slideInterval);
jQuery(this).findActiveSlide();
var totalSlides = jQuery(this).find('dt').size();
var activeSlide = activeID;
var newSlide = activeSlide + 1;
if (newSlide > totalSlides) newSlide = 1;
jQuery(this).find('dt:eq(' + (newSlide-1) + ')').activateSlide(); // activate the new slide
}
// -------- Let's do it! ------------------------------------------------------------------------------
function trackerObject() {this.value = null}
var timerInstance = new trackerObject();
jQuery(this).findActiveSlide();
jQuery(this).calculateSlidePos();
if (settings.autoStart == true){
var accordianInstance = jQuery(this);
var interval = parseInt(settings.slideInterval);
timerInstance.value = setTimeout(function(){
accordianInstance.rotateSlides(interval, timerInstance);
}, interval);
}
jQuery(this).find('dt').not('active').click(function(){
jQuery(this).activateSlide();
clearTimeout(timerInstance.value);
});
if (!(jQuery.browser.msie && jQuery.browser.version == 6.0)){
jQuery('dt').hover(function(){
jQuery(this).addClass('hover');
}, function(){
jQuery(this).removeClass('hover');
});
}
});
};
})(jQuery);
___________________________________________________
easyAccordion.css
html{font-size:62.5%}
body{font-size:1.2em;color:#294f88}
.sample{
margin: 30px;
border: 1px solid #92cdec;
background: #d7e7ff;
padding: 30px;
width: auto;
height: auto;
}
.sample{
margin: 30px;
border: 1px solid #92cdec;
background: #d7e7ff;
padding: 30px;
width: auto;
height: auto;
}
/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */
.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
.easy-accordion dt,.easy-accordion dd{position:absolute}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1}
.easy-accordion dd.active{z-index:3}
.easy-accordion dd.plus{z-index:4}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
dd p{line-height:120%}
#accordionH{
width: auto;
height: auto;
padding: 30px;
background: #fff;
border: 1px solid #b5c9e8
}
#accordionH h2{font-size:2.5em;margin-top:10px}
#accordionH dl{width:auto;height:195px}
#accordionH dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
#accordionH dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
#accordionH dt.hover{color:#68889b;}
#accordionH dt.active.hover{color:#fff}
#accordionH dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordionH .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordionH .active .slide-number{color:#fff}
#accordionH a{color:#68889b}
#accordionH dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}
________________________________________________________________
utility.js
$(document).ready(function () {
$('#accordion-1').easyAccordion({
autoStart: true,
slideInterval: 3000
});
$('#accordion-2').easyAccordion({
autoStart: false
});
$('#accordion-3').easyAccordion({
autoStart: true,
slideInterval: 5000,
slideNum:false
});
$('#accordion-4').easyAccordion({
autoStart: false,
slideInterval: 5000
});
});
__________________________________________________________
Kursus / Konsultasi / Bimbingan
Belajar / Skripsi Mahasiswa
http://www.lp2maray.com
021-92771708 / 085279959498
Tidak ada komentar:
Posting Komentar