
Создание расширенного кодового pre окна
Пример того как можно реализовать анимированный разворот по горизонтали кодового блока при помощи css и jQuery
В блогах, которые любят делиться фрагментами кода, подобным этому, обычно используется <pre>
тег для обертывания кода. Чтобы поддерживать интервал, отступы и длинные строки – строки кода не переносятся. Ведь в большинстве случаев веб мастерам не хотелось бы чтобы эти не обернутые строки выходили из своих контейнеров и перекрывали другой контент. Но а что если контейнер PRE будет показываться во всю длинну при наведении курсора?
В данном примере мы будем использовать JavaScript (jQuery) для воплощения идеи в жизнь. Одним из решений может быть использование только CSS и расширение ширины с чем-то вроде pre:hover, но JavaScript более элегантный по разным причинам:
- Расширяется только при необходимости.
- Расширяется только по мере необходимости
- Расширяется с анимацией
Пример расширяющегося кода, который мы сделаем в данном уроке:
CSS
<pre>
Тег естественно блок-уровня, который мы будем использовать, для стиля наших блоков кода.
pre {
background: #eee;
padding: 10px;
border: 2px solid #c94a29;
overflow: hidden;
margin: 0 0 15px 0;
width: 563px;
font-family: Courier, Monospace;
}
JQuery
Настоящий трюк заключается в том, что блоки кода обернуты не только <pre>
тегами, но и <code>
тегами. В конечном итоге код может быть отключен пре-блоком, но внутренний тег кода по-прежнему имеет естественную ширину, которую можно измерить с помощью JavaScript. Вот логика:
- Когда предварительный блок зависает …
- Измерение ширины внутренних кодовых блоков
- Если эта ширина больше, чем предварительный блок …
- Происходит развертывание предварительного блока, чтобы он был достаточно широким
-
mouseOut вернет пре-блок в исходный размер
var $j = jQuery.noConflict(); $j("pre").hover(function() { var codeInnerWidth = $j("code", this).width() + 10; if (codeInnerWidth > 563) { $j(this) .stop(true, false) .css({ zIndex: "100", position: "relative" }) .animate({ width: codeInnerWidth + "px" }); } }, function() { $j(this).stop(true, false).animate({ width: 563 }); });
Пара примечаний здесь. codeInnerWidth Рассчитываются при каждом наведении, так как разные блоки будут иметь разную внутреннюю ширину. stop функция предотвращает анимацию. Также обратите внимание на то, что $j используется только потому, что мы используем jQuery в noConflict режиме:
var $j = jQuery.noConflict();
Статья была переведена для блога TechBlog.SDStudio.top
Источник: https://digwp.com