jQuery.fn.ttabs = function(options){
var options = jQuery.extend({
activeClass: 'active-ttab' // Класс активной вкладки
},options);
return this.each(function() {
$(this).find('.tt-panel:first').show(0);
$(this).find('.index-tabs span:first').addClass(options.activeClass);
$(this).find('.index-tabs span').click(
function() {
$(this).parent().parent().find('.index-panel .tt-panel').hide(0);
var numEl= $(this).index();
$(this).parent().parent().find('.index-panel .tt-panel').eq(numEl).show();
$(this).parent().find('span').removeClass(options.activeClass);
$(this).addClass(options.activeClass);
}
);
});
};
/*
* активируем плагин и применяем его
*/
$(document).ready(function(){
$('.tt-tabs').ttabs();
});
вставить: (или можно вставлять прямо при добавлении новости). Разумеется, если будешь вставлять в файл шаблона, то там где я подписал "сюда вставляешь код плеера" добавь доп.поля.
<div class="tt-tabs">
<div class="index-tabs">
<span class="active-ttab">Плеер 1</span>
<span class="">Плеер 2</span>
<span>Плеер 3</span>
<span>Плеер 4</span>
</div>
<div class="index-panel">
<div class="tt-panel" style="display: block;">
<noindex>
сюда вставляешь код плеера
</noindex>
</div>
<div class="tt-panel" style="display: none;">
<noindex>
сюда вставляешь код плеера
</noindex>
</div>
<div class="tt-panel" style="">
<noindex>
сюда вставляешь код плеера
</noindex>
</div>
<div class="tt-panel" style="">
<noindex>
сюда вставляешь код плеера
</noindex>
</div>
</div>
</div>
.index-tabs {
background: #000000;
border: 2px solid #CCCCCC;
border-bottom: none;
border-radius: 10px 10px 0 0;
overflow: hidden;
}
.index-tabs span {
cursor: pointer;
margin: 0 5px 7px 0;
float: left;
padding: 5px;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #ddd 100%);
color: #929191;
}
.active-ttab {
font: bold 14px Arial,Helvetica,sans-serif;
color: #fff !important;
background: -moz-linear-gradient(center top , #EB516B 0%, #410110 100%) !important;
}