На сайтах которые по своей специфике нуждаются в предоставлении в статьях или сообщениях исходного кода какого-либо языка программирования, в частности, как например, и наш сайт, остро встает необходимость в более экономном использовании пространства веб-страницы. То есть размещенный на странице слишком длинный код вынуждает посетителя, которому в данный момент его содержание не важно, прокручивать довольно долго страницу вниз, так сказать к самой "соли". Можно конечно  разбивать код на несколько кусочков, но анализировать такой код не очень удобно и пространство все равно меньше не становится. Использование полос прокрутки в коде тоже довольно спорное решение, так как весь код не видно одновременно.
Так вот в этом уроке пойдет речь о создании "экспандера" (расширителя) кода на jQuery. Просто наведите на область с приведенным кодом и произойдет его раскрытие.
Но прежде чем что-то раскрыть, нужно сначала это что-то ужать.

Разметка HTML

HTML очень прост, нужно лишь указать класс jcexpander для тега pre, и заключить код в теги code:

<pre class="jcexpander"><code>
   <!-- Тут помещается отображаемый код -->
</code></pre>

CSS

Вот основной стиль

pre.jcexpander { 
     width:80%;
     height:400px;
     overflow:hidden;
     background-color:#eee;
     background-image:url("../images/code_bg.png");
     background-repeat:repeat-x;
     padding:10px;
     border:5px solid #bfe1f1;
    -moz-box-shadow: 5px 5px 10px #050505;
    -webkit-box-shadow: 5px 5px 10px #050505;
    }

Как видим мы с помощью свойств CSS обрезаем видимую область с кодом.

javascript

Подключаем jQuery библиотеку:

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

И файл script.js со скриптом экспандера:
$(document).ready(function() {
    // Циклично будем выполнять каждый <pre> элемент
    // с классом "jcexpander"
    $("pre.jcexpander").each(function(){
        
        // Выполнять только тогда, когда внутренний элемент (элемент <code>)
        // больше чем родитель (элемент <pre>)
        if( $("code", this).height() > $(this).height() ||
            $("code", this).width() > $(this).width()) {
            
            // Будем нуждаться в сохранении оригинальных значений размеров
            // чтобы могли к ним вернуться в последствии
            $(this).data('originalHeight' , $(this).height());
            $(this).data('originalWidth', $(this).width());
            
            // Создать изображение IMG накладываемое поверх кода
            var icon = document.createElement("img");
            $(icon).css({ 'position' : 'absolute'});
            $(icon).attr("src", "images/fullscreen.png");
            
            // Добавляет изображение к элементу <pre>
            $(icon).prependTo($(this));
            
            // При наведении на элемент <pre>, будет происходить следующее:
            // первая функция "over", вторая - "out"
            $(this).hover(function(){
                // Постепенное скрытие изображения
                $(icon).fadeOut();
                
                // Считываем размеры элемента <code>
                var codeWidth = $("code", this).width();
                var codeHeight = $("code", this).height();
                
                // Размер <pre> элемента будет таким же большим как
                // и элемента <code>
                $(this)
                    .stop()
                    .animate({
                        width : codeWidth + "px",
                        height : codeHeight + "px"
                    }, 1500);
                    
            }, function(){
                // Постепенное появление изображения
                $(icon).fadeIn();
                
                // Возвращаем размеры <pre> элемента
                // к первоначальному значению
                $(this)
                    .stop()
                    .animate({
                        width : $(this).data('originalWidth') + "px",
                        height : $(this).data('originalHeight') + "px"
                    }, 1500);
            });
        }
    });
});

СКАЧАТЬСкачек: 228
8,81 Kb
Кто скачал?

ДЕМОПосмотреть
пример