2 032 Скрипты / Other

"Расширитель" кода


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

JS

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

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
И файл script.js со скриптом экспандера:
Скачать 323Загрузок 8,81 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи