Скрипты для uKit 19.08.2017 5 680
Спойлер для виджета "Текст"

Спойлер для виджета "Текст"

Максимальная информативность при ограниченном объёме текста — на сегодняшний день само собой разумеющееся требование к сайту, рекламирующему какую-либо продукцию. В конце концов, стену рекламного текста никто читать не будет.

Но как быть веб-дизайнеру, если без длинных текстов всё же нельзя обойтись? Совершенно очевидное решение — спрятать их под спойлеры! Вы можете озаглавить ваш текст так, чтобы дать читателю понять, какая информация в нём содержится. Если его эта информация не заинтересует, он попросту не станет открывать спойлер, и ему не придётся читать ненужный текст.

Пользователь, зайдя на сайт, будет видеть только подзаголовок вашего текста. При наведении на него мышкой курсор изменит вид. Только тогда, когда пользователь нажмёт на этот подзаголовок, он увидит полный текст, который вы спрятали под спойлер. При повторном нажатии на подзаголовок текст скроется обратно.

Этой возможности в uKit изначально нет, поэтому мы разработали специально для вас этот скрипт. Он легко встраивается на сайт, сделанный на основе конструктора uKit, и доступен в нескольких вариантах оформления. Мы уверены, что скрипт будет полезен для вас и ваших потенциальных клиентов.

 



Установка

1. Размещаем текст на вашем сайте. Вам необходимо разместить текст при помощи виджета "Текст" и использовать только "Заголовок 4". Текст должен быть расположен без отступов (Клавиша ENTER), отступы в тексте вы можете добавлять при помощи клавиш (CTRL+ENTER или SHIFT+ENTER). Каждый спойлер должен быть расположен в отдельном виджете "Текст".
Заголовок спойлера указывается жирным текстом, а весь остальной текст расположен рядом в одну линию, пример расположения (скриншот).


2. Выбираем стилистику оформления будущего спойлера. Выбрать стилизацию спойлеров вы можете на нашей демо-странице (скриншот), а затем исходя из порядкового номера установить код на сайт:

 

Первый вариант оформления:
 

Код
<style>
h4.shBlock {
    padding: 20px;
    cursor: pointer;
    display: grid;
    box-shadow: 0 0 0 1px rgba(73, 62, 62, 0.59);
    margin-top: 10px!important;
    font-weight: 400!important;  
}
p.ttxt {
    border-left: 1px solid #bebebe;
    padding: 13px;
}
  </style>

 

Второй вариант оформления:
 

Код
<style>
h4.shBlock {
    padding-left: 20px;
    line-height: 50px!important;
    cursor: pointer;
    display: grid;  
    color: #4c4946;
    text-shadow: 1px 1px 1px rgba(255,255,255,.8);
    background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: linear-gradient(top,#fff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea', GradientType=0 );
    box-shadow: 0 0 0 1px rgba(155,155,155,.3), 1px 0 0 0 rgba(255,255,255,.9) inset, 0 2px 2px rgba(0,0,0,.1);
}
  </style>

 

Третий вариант оформления:
 

Код
<style>
h4.shBlock {
    margin-top: 18px!important;
    box-shadow: -6px 7px 10px 0 rgba(0, 0, 0, 0.14);
    padding: 20px;
    display: grid;  
    border-bottom: 1px solid #0f9c3a; /* Цвет толщина нижней линии */
    border-left: 1px solid #0f9c3a; /* Цвет и толщина левой линии */
}
  </style>

 

Четвертый вариант оформления:
 

Код
<style>
h4.shBlock {
    margin-top: 18px!important;
    padding: 20px;   
    display: block;
  
}
span.zagolovok::after {
    margin-left: 0;
    content: '→';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}
span.zagolovok::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform .3s,opacity .2s;
    -moz-transition: -moz-transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s;
}
span.zagolovok:focus::after, #ul-id-280-41 span.zagolovok:hover::after {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
}
  </style>


После того как выберите оформление этого скрипта, перейдите в панель управления вашего сайта в раздел «Свой код» и установить один из нужных стилей. Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>» и выберите необходимые страницы для показа. (скриншот). После чего, нажмите кнопочку "Сохранить"


3.. Устанавливаем основной код. в этом же разделе добавляем второй код (скриншот):
 

Код
<script>
require(['jquery'], function($){
    $(document).ready(function(){
        $('.ul-wysivig-editor > *, .ul-widget-wysiwyg > *').each(function(i){
            if($(this).children('*:eq(0)').html() != '' && $(this).attr('class') != 'tab_block'){
                // данные ребенка
                var spo_zag = $(this).children('*:eq(0)').clone(),
                    spo_css_bold = $(this).children('*:eq(0)').css('fontWeight'),
                    spo_css_i = $(this).children('*:eq(0)').css('fontStyle');
                
                $(this).children('*:eq(0)').remove();
                var spo_th_html = $.trim($(this).html());
                if((spo_css_bold == 'bold' || spo_css_bold == '700') && spo_css_i != 'italic' && spo_th_html != ''){
                    $(this).attr('data-block', 'block'+i+'').html('<p class="ttxt" style="display:none;">'+spo_th_html+'</p>');
                    spo_zag.addClass('zagolovok').prependTo('*[data-block="block'+i+'"]');
                    $(this).addClass('shBlock');
                }else{
                    $(this).attr('data-block', 'block'+i+'');
                    spo_zag.prependTo('*[data-block="block'+i+'"]');
                }
            }
        });
        // Клик по спойлеру
        $('body').on('click', '.zagolovok', function(){
            $(this).parent().children('.ttxt').toggle('fast');
        });
    });
});
</script>
<style>
span.zagolovok {
    cursor: pointer;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    padding: 13px !important;
}
  
p.ttxt {
    padding: 20px !important;
    margin: 0px 16px 10px !important;
}
 
</style>


Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 5
avatar
1
Спасибо за виджет. Возникли вопросы по установке:
1. Есть ли возможность применить его для определённого блока на странице?
2. При установке текста "Заголовок 4" Все буквы становятся прописными. Как сделать первые буквы прописными, остальные строчными?
avatar
0
2
1. Такой возможности в скрипте нет.
2. Вам нужно выделить необходимые слова и выбрать нужное оформление.
avatar
3
Не работает уже..
avatar
0
4
Этот скрипт обновлен в связи новым виджетом текса, переустановите его, должно все работать.
avatar
5
Работает, спасибо!
avatar