В этом уроке мы рассмотрим интересный эффект, который можно использовать, когда Вам нужно выложить какой-то код в статье или материале на сайте. Фактически код будет загружаться из внешнего файла и выводиться на страницу при помощи фреймворка jQuery.
Единственная проблема в том, что этот эффект работает корректно не во всех браузерах (отпишитесь, пожалуйста, в комментариях у кого работает и в каком браузере, а у кого - нет).
Шаг 1.
Подключим к документу фреймворк jQuery и файл скрипта jqueryCodeView. Для этого между тегами <head> пропишем следующий код:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryCodeView.js"></script>
Шаг 2.
В отдельную таблицу стилей или между тегами <head> пропишем следующие стили:
p,pre,li{
list-style:square;
font-size:13 px;
font-family:Arial,sans-serif;
}
pre{
background:#eee;
border:1px solid #999;
padding:.5em;
margin:.5em;
font-size:11px;
}
И как всегда Вы сможете изменить их по Вашему желанию в зависимости от дизайна Вашего сайта.
Шаг 3.
Теперь все, что нам надо сделать - это создать ссылку на нужный код и придать ему стиль "codeExample".
<a href="jqueryCodeView.js" class="codeExample">jqueryCodeView.js</a>
Чтобы скачать файл, нужно просто нажать правой кнопкой на ссылке и выбрать "Сохранить объект как...", а чтобы просто посмотреть его, то соответственно нажимаем левой клавишей по ссылке.
Чтобы изменить слова "Спрятать код" на какие-то свои, то сделайте это в файле jqueryCodeView.js
Надеюсь, этот урок был для Вас полезен. Спасибо за внимание!