Как сделать для видео плеера, такую же шкуру?

вопрос

Привет!

Кто-нибудь может подсказать или дать код, чтобы можно было сделать точно также.
Чтобы можно было переключать с одной вкладки, на другую.

Как сделать для видео плеера, такую же шкуру?

Заранее спасибо.

Ответил: narkom6n

Создаете tabs.js и вносите в него код:

Показать / Скрыть текст


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();
});

В fullstory.tpl вставить: (или можно вставлять прямо при добавлении новости). Разумеется, если будешь вставлять в файл шаблона, то там где я подписал "сюда вставляешь код плеера" добавь доп.поля.

Показать / Скрыть текст

<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>

Стили CSS:

Показать / Скрыть текст

.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;
}

if( typeof tinymce === 'object' ) { tinymce.get().forEach((item) => { if( this.isDarkTheme() ) item.contentDocument.activeElement.classList.add('dle_theme_dark'); else item.contentDocument.activeElement.classList.remove('dle_theme_dark'); }); }

Как сделать для видео плеера, такую же шкуру?

Ответил: narkom6n

1 комментарий

Похожие вопросы

Поправить видео плеер или заменить

Модуль добавления файлов в плейлист DLE

Новость проверил "Ник"

Demo-данные для DLE

Расширенная статистика и разные размеры картинок

Уменьшить размер видео

Форма заказа студенческой работы

Fullstory проблема

Какие есть модули/скрипты поздравления с Новым годом?

Как сделать чтобы с сайта можно было скачивать файлы?