Код: Выделить всё
<style>
/* TabControl Start */
p{padding:0px 0;}
.sectiontable{ width:100%; margin:0 0 30px}
ul.tabs{ text-align: center; margin:0; padding:0; list-style:none; width:100px; float:left;}
.tabs li{width:80px; float:left; display:inline; margin:0 1px -1px 0; padding:0 9px; color:#fff; cursor:pointer; background:#333; position:relative; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px}
.tabs li:hover,
.vertical .tabs li:hover{color:#FFF; padding:0 9px; background:#000033;transition:all 0.50s ease-out;-moz-transition:all 0.50s ease-out;-webkit-transition:all 0.50s ease-out;-o-transition:all 0.50s ease-out}
.tabs li.current{color:#FFF; background:#3f82d4; padding:0 9px 0px; border:0px solid #D4D4D4; }
.box{display:none; padding:0 0px;}
.box.visible{display:block;}
/* TabControl End */
</style>
<body style="width: 300; padding:10px;">
<div class="sectiontable">
<ul class="tabs">
<li class="current"><br><img src="/cms/icons/186_start-here.png"><br>Plex<br><br></li>
<li><br><img src="/cms/icons/185_ktorrent.png"><br>Torrent<br><br></li>
<li><br><img src="/cms/icons/164_digikam.png"><br>Cam<br><br></li>
</ul>
<div class="box visible">
<iframe src="/menu.html?parent=186" width="350" height="510" border="0" frameborder="0">
</iframe>
</div>
<div class="box">
<iframe src="/menu.html?parent=185" width="350" height="510" border="0" frameborder="0">
</iframe>
</div>
<div class="box">
<iframe src="/menu.html?parent=164" width="350" height="510" border="0" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
</body>
<script>
(function($) {
$(function() {
$('ul.tabs').delegate('li:not(.current)', 'click', function() {
$(this).addClass('current').siblings().removeClass('current')
.parents('div.sectiontable').find('div.box').eq($(this).index()).fadeIn(150).siblings('div.box').hide();
})
})
})(jQuery)
$(document).ready(function(){
// Enable or leave the keys
$('.slider').each(function(){
if($('li:last',this).width()+$('li:last',this).offset().left-$('li:first',this).offset().left>$('div',this).width()){
// enable the buttons
$('button',this).css('display','inline');
$('button.prev',this).css('visibility','hidden');
}
});
$(".slider .next").click(function(){
//Remove the exist selector
//Set the width to the widest of either
var $div =$('div',this.parentNode)
,maxoffset = $('li:last',$div).width()+$('li:last',$div).offset().left - $('li:first',$div).offset().left - $div.width()
,offset = Math.abs(parseInt( $('ul',$div).css('marginLeft') ))
,diff = $div.width();
if( offset >= maxoffset )
return;
else if ( offset + diff >= maxoffset ){
diff = maxoffset - offset + 1;
// Hide this
$(this).css('visibility','hidden');
}
// enable the other
$('.prev', this.parentNode).css('visibility','visible');
$("ul", $(this).parent() ).animate({
marginLeft: "-=" + diff
},1400, 'swing');
});
$(".slider .prev").click(function(){
var offset = Math.abs(parseInt( $('ul',this.parentNode).css('marginLeft') ));
var diff = $('div',this.parentNode).width();
if( offset <= 0 )
return;
else if ( offset - diff <= 0 ){
$(this).css('visibility','hidden');
diff = offset;
}
$('.next', this.parentNode).css('visibility','visible');
$("ul",$(this).parent()).animate({
marginLeft: '+='+diff
},1400, 'swing');
});
});
</script>