Создание расширенного кодового 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. Вот логика:

1. Когда предварительный блок зависает …
2. Измерение ширины внутренних кодовых блоков
3. Если эта ширина больше, чем предварительный блок …
4. Происходит развертывание предварительного блока, чтобы он был достаточно широким

5. mouseOut вернет пре-блок в исходный размер

Пара примечаний здесь. codeInnerWidth Рассчитываются при каждом наведении, так как разные блоки будут иметь разную внутреннюю ширину. stop функция предотвращает анимацию. Также обратите внимание на то, что $j используется только потому, что мы используем jQuery в noConflict режиме:

var $j = jQuery.noConflict(); 

Статья была переведена для блога TechBlog.SDStudio.top
Источник: https://digwp.com

Источник записи: