Спойлер на jQuery

Раздел языка JavaScript.
Аватара пользователя
Татьяна5
Сообщения: 81

Спойлер на jQuery

Сообщение Татьяна5 » Пт ноя 16, 2012 3:14 am

Подключение jQuery:
Вставить между <head> и </head> код:

Код: Выделить всё

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"  type="text/javascript">

* 1.8.2 - последняя версия jQuery на момент написания поста

1. Простой спойлер с неограниченной вложенностью
Перед </head> вставить

Код: Выделить всё

<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

В Ваш файл стиля .css добавить

Код: Выделить всё

.splCont{display:none;border:1px solid #cccccc;padding:3px 5px;}    

Сам текст спойлера:

Код: Выделить всё

<div><a href="javascript//" class="splLink">Спойлер...</a><div class="splCont">
  тут текст, спрятанный внутри спойлера...
</
div></div>
Реклама
Аватара пользователя
Татьяна5
Сообщения: 81

Re: Спойлер на jQuery

Сообщение Татьяна5 » Пт ноя 16, 2012 3:24 pm

2. Спойлер с кнопками "скрыть-показать", раскрывается вертикально, вложенность неограничена
Перед </head> вставить

Код: Выделить всё

<script type="text/JavaScript" src="jquery-spoiler_control.js"></script>
<script type="text/JavaScript"> 
$(document).ready(function(){
BspoilerControl();
});
</script>

Содержание файла jquery-spoiler_control.js

Код: Выделить всё

function BspoilerControl(){
            //Скрываем все спойлеры
            $("div[name='spoiler']").hide();
            //Всем кнопкам спойлеров задаем текст и картинку (удобно для многоязыковых интерфейсов)
            $("p[name='spoilerbutton']").html("<img src='img/interface/but_more.gif'>&nbsp;Показать");
            //Перебераем все кнопки спойлеров на странице
            $("p[name='spoilerbutton']").each(function(){
                //Если прямо перед кнопкой спойлера стоит заголовок
                if($(this).prev(this).get(0).tagName == "H1" || $(this).prev(this).get(0).tagName == "H2" || $(this).prev(this).get(0).tagName == "H3"){
                    //Текст из заголовка переносим в кнопку, а сам заголовок убераем
                    var NewSpoilerButton = "<div name='spoilerbutton' class='advSpoilerHeader'><p><b>"+$(this).prev(this).html()+"</b> <span>показать>></span></p></div>";
                    $(this).prev(this).replaceWith("");
                    $(this).replaceWith(NewSpoilerButton);
                    //В результате кнопки спойлеров с заголовками становятся div-ами. Теперь на странице может быть 2 типа кнопок спойлеров p и div типа
                }
            });
            //Для всех div кнопок обрабатываем клик
            $("div[name='spoilerbutton']").click(function () {
                //Если спойлер видим. Дословно: если свойство display для первого DOM брата/сестры равно "block" (т.е. видим в контексте применяемого эффекта slide)
                if($(this).next(this).css("display")=="block"){
                    //Записываем "показать>>" в span, который ребенок p, который ребенок нашей кнопки this. Потом поменяем его на "<<скрыть"
                    $(this).children("p").children("span").html("показать>>");
                    //Сворачиваем открытый спойлер
                    $(this).next(this).slideUp("normal");
                } else {
                    //Если спойлер не открыт, то он закрыт и соответственно меняем надпись и разворачиваем спойлер
                    $(this).children("p").children("span").html("<<скрыть");                
                    
$(this).next(this).slideDown("normal");
                }
              return false;
             });        
            
//Теперь клик для всех p-кнопок
            $("p[name='spoilerbutton']").click(function () {
                //По тому же принципу, что до этого, только проще
                if($(this).next(this).css("display")=="block"){
                    $(this).next(this).slideUp("normal");
                    $(this).html("<img src='img/interface/but_more.gif'>&nbsp;Показать");
                } else {
                    $(this).next(this).slideDown("normal");
                    $(this).html("<img src='img/interface/but_more.gif'>&nbsp;Скрыть");
                }
              return false;
             });
        

В CSS добавить

Код: Выделить всё

div.spoiler{
    border: 1px solid #d5d5d5;
    background-color: #fafafa;
    margin: 7px;
    padding: 7px;
}
div.advSpoilerHeader{
    margin-left: 7px;
    margin-right: 7px;
    margin-bottom: -8px;
    border-bottom: 1px solid #d5d5d5;
    width: 95%;
    cursor: pointer;

Сам код спойлера

Код: Выделить всё

<h2> Спойлер: </h2> 
 
<p name='spoilerbutton' style='cursor:pointer'></p><DIV name='spoiler' class='spoiler'> 
здесь то
, что скрыто
 
</div
Аватара пользователя
Татьяна5
Сообщения: 81

Re: Спойлер на jquery.spoiler.js

Сообщение Татьяна5 » Пт ноя 16, 2012 7:03 pm

Далее перечислены примеры спойлеров с применением jquery.spoiler.js

Содержание файла jquery.spoiler.js

Код: Выделить всё

jQuery.fn.spoiler = function(userspoiler) {
    var options = {
        setclass : '',
        title : false,
        onlink : false
    
}
    jQuery.extend(options, userspoiler);
    var title = "", text = "", css = false, user_class = '';
    getTitle = function(obj) {
        if (!options.title) {
            title = obj.children("span").text();
        } else {
            title = obj.attr("title");
        }
        return title;
    }
    getText = function(obj) {
        if (!options.onlink) {
            text = obj.text();
        } else {
            text = obj.attr("spoiler");
        }
        return text;
    }
    chekTitle = function(title, text) {
        if (title == "") {
            text = jQuery.trim(text);
            var words = text.split(" ");
            title = words[0];
            var i = 1;
            while (title.length < 6) {
                title += " " + words[i];
                i++;
            }
            title += " ...";
        }
        return title;
    }
    return this
            
.each(function() {
                if (!jQuery("#spoiler-style").attr("is_set")) {
                    jQuery("head")
                            .append(
                                    "<style id='spoiler-style' is_set='1'>.spoiler {display: none;} .sp-link {cursor: pointer;}</style>");
                }
                obj = jQuery(this);
                title = getTitle(obj);
                text = getText(obj);
                title = chekTitle(title, text);

                if (options.setclass) {
                    user_class = options.setclass;
                }
                if (options.onlink) {
                    var classes = obj.attr("class");
                    obj.replaceWith("<span class='sp-link " + user_class + "'>"
                            + title + "</span><div class='" + classes
                            
+ " spoiler'>" + obj.attr("spoiler") + "</div>");
                } else {
                    obj.addClass("spoiler").before(
                            "<span class='sp-link'>" + title + "</span>");
                }
            });
};
jQuery(".sp-link").live("click", function() {
    jQuery(this).next(".spoiler").slideToggle();
    return false;
});


Подключение:

Код: Выделить всё

<script type="text/javascript" src="jquery.spoiler.js"></script>
Аватара пользователя
Татьяна5
Сообщения: 81

Re: Спойлер на jquery.spoiler.js

Сообщение Татьяна5 » Пт ноя 16, 2012 7:09 pm

3'. Спойлер, в котором заголовок формируется из части текста (заключенного в <span>)
jQuery:

Код: Выделить всё

<script type="text/JavaScript"> 
$(".example_1").spoiler();
</script>

HTML:

Код: Выделить всё

<p class="example_1">
    <span>Что такое спойлер</span>
        - преждевременно раскрытая важная информация, которая портит впечатление от игры/книги/фильма и разрушает их интригу
</p

CSS - на ваш вкус ;)
Аватара пользователя
Татьяна5
Сообщения: 81

Re: Спойлер на jquery.spoiler.js

Сообщение Татьяна5 » Пт ноя 16, 2012 7:12 pm

4'. Спойлер с заданием заголовка в title
jQuery:

Код: Выделить всё

<script type="text/JavaScript">
$(
".example_2").spoiler({
    title: true
});
</script>

HTML:

Код: Выделить всё

<p class="example_2" title="Спойлер">
    jQuery — библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.
</
p
Аватара пользователя
Татьяна5
Сообщения: 81

Re: Спойлер на jquery.spoiler.js

Сообщение Татьяна5 » Пт ноя 16, 2012 7:15 pm

5'. Еще один вариант спойлера с заданием заголовка в title
jQuery:

Код: Выделить всё

<script type="text/JavaScript">
$(
".example_3").spoiler({
    setclass: 'sp',
    title: true,
    onlink: true
});
</script>

HTML:

Код: Выделить всё

<a class="example_3" title="Джон Резиг" spoiler="Джон Резиг — JavaScript-евангелист в Mozilla Corporation и автор книги «Pro JavaScript Techniques». Больше всего известен как автор JavaScript-библиотеки jQuery." href="">Спойлер</a

(в этом примере заголовком станет Джон Резиг)
Аватара пользователя
Татьяна5
Сообщения: 81

Re: Спойлер на jquery.spoiler.js

Сообщение Татьяна5 » Пт ноя 16, 2012 7:49 pm

6'. Спойлер с автоматически формирующимся заголовком (выбирает первое слово в тексте)
jQuery:

Код: Выделить всё

<script type="text/JavaScript">
$(
".example_4").spoiler();    
</script>

HTML:

Код: Выделить всё

<p class="example_4">
    Россия (от греч. Ρωσία — Русь; официально — Росси́я или Росси́йская Федера́ция) — государство, расположенное в Восточной Европе и Северной Азии. Является крупнейшим государством мира (17 075 400 км² или 11,46 % площади всей суши Земли, или 12,65 % заселённой человеком суши, что почти вдвое больше, чем у занимающей второе место Канады). Население России на 2010 год составляет 141 927 296 человек, в настоящее время Россия занимает девятое место в мире по этому показателю.
</
p

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость