Login / Sign Up


Enter site:
Login: 
Password: 


First time here?
 
Register [?]:
Registering allows you:
  • Purchase products from the product catalog and access them any time.
  • Ask questions to another specialists in IT
  • Publish your own Joomla extensions, soft or other products if you are developer or distributor
  • Add interesting weblinks and access them from any place
  • Watch the updates of the site and have special abilities that guests don't have
  • Watch the news of the service and new articles and get knowledge
Choose login:
Your Email:
Enter the result of operation (in digits):
27 - 2 = ? Update

Создаем красивые вкладки для оформления HTML, JavaScript и CSS кода PDF Print E-mail
Written by Максим   
Tuesday, 13 November 2012 09:34
Liked:
44


Did not like: 9

В сегодняшней статье я расскажу, как сделать красивые вкладки для оформления кода на страницах Вашего сайта или блога. Чтобы не томить читателя длинными вступлениями, начну с того, что получится в итоге. Итак, мы создадим с помощью несложной комбинации jQuery, CSS и HTML-разметки вот такое творение из трех вкладок, отображающий компактно код:


<p>Пример параграфа</p> 

В сегодняшней статье я расскажу, как сделать красивые вкладки для оформления кода на страницах Вашего сайта или блога. Чтобы не томить читателя длинными вступлениями, начну с того, что получится в итоге. Итак, мы создадим с помощью несложной комбинации jQuery, CSS и HTML-разметки вот такое творение из трех вкладок, отображающий компактно код:


<p>Пример параграфа</p>
<p>С помощью этой статьи можно научиться делать такие же вкладки</p>
<p>Еще один параграф</p>
$(document).ready(function() {
	alert('Это пример JavaScript');
});

	.myclass1 { font-size: 9pt; }

	.myclass2 { background: #FFFFFF; border:1px solid #AABBCC; }

	body {

	margin: 0;

	padding: 0;

	font-family: 'Verdana';

	font-size: 12px;

	}

Что необходимо иметь под рукой?

Для того, чтобы сделать такие вкладки, нам понадобятся:

  • библиотека jQuery - с её помощью мы легко сделаем всю динамику перехода по нашим вкладкам. Минимальное знание библиотеки желательно - чтобы понимать суть происходящего. Наш пример будет протестирован под версию 1.4.2, но можно взять и более позднюю версию.
  • три изображения 16x16 px - для отображения их в названиях соответствующих вкладок. Я использовал три Freeware-изображения из набора LED Icons, любезно предоставленного автором для бесплатного скачивания по адресу http://led24.de/iconset/
  • сторонний компонент SyntaxHighlighter (автор - Alex Gorbatchev) - это Open Source библиотека, написанная на JavaScript для цветового оформления кода. Он поможет придать эффектный вид нашему HTML, JavaScript и CSS коду, который будет расположен во вкладках. Компонент можно скачать с официального сайта автора - http://alexgorbatchev.com/SyntaxHighlighter/

1. Определяем HTML-структуру вкладок

Первым делом мы должны понять, как будет организована наша структура HTML для того, чтобы вкладки функционировали как надо. Я выбрал следующий вариант разметки: главный внешний DIV-контейнер, который содержит в себе:

  • UL-список с тремя внутренними элементами (LI). Каждый элемент LI представляет собой вкладку и внутри себя содержит гиперссылку с текстовым названием вкладки
  • Три DIV-блока, расположенные сразу за UL-списоком. Каждый блок будет задавать содержимое вкладки. 

При щелчке мышью на соответствующем названии вкладки (гиперссылке, содержащейся в LI-элементе списка) мы будем последовательно "переключать" DIV-блоки с содержимым. Переключение - не что иное, как спрятать один DIV-блок и отобразить другой DIV. Это легко сделает jQuery, но об этом далее. Приведу скриншот со схематичным изображением нашей структуры:

Как видно из рисунка, каждый из трех DIV-блоков для содержимого содержит еще внутренний DIV, внутри которого тег PRE. Внутренний DIV нужен для дополнительной стилизации кода (в дополнение к раскраске SyntaxHighlighter). С помощью него мы создаём левую цветную полосу, индивидуальную для каждой вкладке. Если необходимости в такой стилизации нет, то можете не использовать внутренний DIV. Тег PRE является обязательным и будет содержать непосредственно код, который будет отображаться на соответствующей вкладке и раскрашиваться. 

Привожу HTML-разметку, которую нужно добавить в код страницы. Например, поместить это внутрь тега BODY вашего документа:


 <div class="code_tabs">
	<ul class="tabs_headers">
		<li class="code_tab tab_html"><a href="#tab-1">HTML</a></li>
		<li class="code_tab tab_js"><a href="#tab-2">JavaScript</a></li>
		<li class="code_tab tab_css"><a href="#tab-3">CSS</a></li>
	</ul>
	<div class="inner_tab tab_html" id="tab-1">
		<div class="code code_html">
			<pre class="brush: xml"><p>Пример кода</p></pre>
		</div>
	</div>
	<div class="inner_tab tab_js" id="tab-2">
		<div class="code code_js">
			<pre class="brush: js">function a() { var i = 1; }</pre>
		</div>
	</div>
	<div class="inner_tab tab_css" id="tab-3">
		<div class="code code_css">
			<pre class="brush: css">.line { border-top: 1px solid #aaa; }</pre>
		</div>
	</div>
</div>

2. Подключаем jQuery и SyntaxHighlighter

Следующим шагом будет подключение необходимых сторонних библиотек. Вначале нужно подключить jQuery, добавив на него ссылку в документ, далее нужно скачать (если еще не скачали) библиотеку SyntaxHighlighter, распаковать в каталог, где располагаются все наши файлы, и подключить ссылки на необходимые скрипты и стили SyntaxHighlighter:


<head>
	<!-- У меня кодировка страниц - UTF-8 -->
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<!-- Подключаем jQuery -->
	<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
	<!-- Подключаем скрипты SyntaxHighlighter -->
	<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
 	<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
	<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushCss.js"></script>
	<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>
	<!-- Подключаем стили SyntaxHighlighter -->
	<link rel="stylesheet" type="text/css" href="syntaxhighlighter_3.0.83/styles/shCore.css" />
	<link rel="stylesheet" type="text/css" href="syntaxhighlighter_3.0.83/styles/shThemeMidnight.css" />
</head>
 

Поскольку библиотека SyntaxHighlighter поддерживает огромное множество разных языков и типов документов, а нам нужна только подсветка JavaScript, HTML и CSS, то мы подключили файл ядра библиотеки shCore.js и 3 других js-файла для поддержки синтаксиса на наших вкладках.

Обращаю внимание на то, что в Вашем случае пути к SyntaxHighlighter могут быть другими! Всё зависит от каталога, куда распаковали файлы этой библиотеки.

3. Готовим изображения и создаём CSS-стили для вкладок

Из архива иконок, который я описал в начале статьи, берём три иконки 16x16 пикселей (я взял page_code.png, script.png, css.png) и помещаем в новый каталог images, который создаем там же, где и все наши файлы. Иконки копируем туда. Далее, уже в корне, создадим файл style.css, в котором поместим все стили для наших вкладок. После чего присоединим файл к нашему документу. Код приведен ниже:


<!-- Добавляем эту строчку в head документа. Добавление файла style.css -->
<link rel="stylesheet" type="text/css" href="style.css" >

	div.code { background:#0f192a; color:#eee; padding:5px; margin:0px; }

	div.code_js { border-left:5px solid #66FFFF; }

	div.code_html {border-left:5px solid #66FF66; }

	div.code_css { border-left:5px solid #FFCC66; }

	 

	.tab_html { background: #009900; color:#fff;}

	.tab_js { background: #006699; color:#fff;}

	.tab_css { background: #CC6600; color:#fff;}

	 

	.code_tabs ul.tabs_headers li.tab_html { border-left:1px solid #009900; border-right:1px solid #009900; border-top:1px solid #009900; }

	.code_tabs ul.tabs_headers li.tab_js { border-left:1px solid #006699; border-right:1px solid #006699; border-top:1px solid #006699; }

	.code_tabs ul.tabs_headers li.tab_css { border-left:1px solid #CC6600; border-right:1px solid #CC6600; border-top:1px solid #CC6600; }

	 

	.code_tabs ul.tabs_headers li.tab_html { background: #009900 url(images/page_code.png) no-repeat 5px 4px; }

	.code_tabs ul.tabs_headers li.tab_html { border-left:1px solid #009900; border-right:1px solid #009900; border-top:1px solid #009900; }

	.code_tabs ul.tabs_headers li.tab_js { background: #006699 url(images/script.png) no-repeat 5px 4px; }

	.code_tabs ul.tabs_headers li.tab_js { border-left:1px solid #006699; border-right:1px solid #006699; border-top:1px solid #006699; }

	.code_tabs ul.tabs_headers li.tab_css { background: #CC6600 url(images/css.png) no-repeat 5px 4px; }

	.code_tabs ul.tabs_headers li.tab_css { border-left:1px solid #CC6600; border-right:1px solid #CC6600; border-top:1px solid #CC6600; }

	 

	.code_tabs ul.tabs_headers li.tab_html a {color:#00FF00;}

	.code_tabs ul.tabs_headers li.tab_html:hover a { color:#FFFFFF;}

	.code_tabs ul.tabs_headers li.tab_js a {color:#00CCFF;}

	.code_tabs ul.tabs_headers li.tab_js:hover a { color:#fff;}

	 

	.code_tabs ul.tabs_headers li.tab_css a {color:#CCCC99;}

	.code_tabs ul.tabs_headers li.tab_css:hover a { color:#fff;}

	 

	.code_tabs { margin: 10px 0; }

	.code_tabs ul.tabs_headers { float: left; width: 500px; height: 27px; margin: 0; padding: 0; }

	.code_tabs li.code_tab { height: 27px; margin-left: 5px; list-style: none; text-shadow: 1px 1px 0px #000; }

	.code_tabs li.code_tab { display: inline; padding-left:18px; padding-right:10px; }

	.code_tabs li.code_tab, .code_tabs li.code_tab a { float: left; font-size: 14px; }

	.code_tabs ul.tabs_headers li.code_tab:hover {}

	.code_tabs ul.tabs_headers li.code_tab {

	-moz-border-radius: 5px 5px 0px 0px; /* Firefox */

	-webkit-border-radius: 5px 5px 0px 0px; /* Safari, Chrome */

	border-radius: 5px 5px 0px 0px; /* CSS3 */

	}

	.code_tabs ul.tabs_headers li.code_tab.active {

	-moz-border-radius: 5px 5px 0px 0px; /* Firefox */

	-webkit-border-radius: 5px 5px 0px 0px; /* Safari, Chrome */

	border-radius: 5px 5px 0px 0px; /* CSS3 */

	}

	.code_tabs ul.tabs_headers li.code_tab.active a {}

	.code_tabs ul.tabs_headers li.code_tab:hover a {}

	.code_tabs div.inner_tab { overflow:hidden; clear: both; padding: 15px; min-height: 50px; font-size: 14px; border:1px solid #aaa;

	-moz-border-radius: 5px; /* Firefox */

	-webkit-border-radius: 5px; /* Safari, Chrome */

	border-radius: 5px; /* CSS3 */

	}

	.code_tabs div.inner_tab h3 {  text-shadow: 1px 1px 0px #000; color:#fff; margin-bottom: 12px; }

	.code_tabs div.inner_tab p { margin:5px 0; padding:0; text-shadow: 1px 1px 0px #000; line-height: 150%; }

	.code_tabs ul.tabs_headers li.code_tab a { text-decoration: none; padding: 4px 8px 8px 8px; }

4. Пишем код на jQuery, создающий вкладки

После того, как готова наша HTML-разметка и подключены все внешние ресурсы, необходимые для работы, самое время написать сам код на jQuery, который заставит всё это работать. Создаём новый файл скрипта tabs.js, подключаем его к нашему документу. Вот код, который нужно поместить в файл:


<!-- Это добавляем в head нашего документа. Подключаем файл tabs.js -->
<script type="text/javascript" src="tabs.js"></script>
 jQuery(document).ready(function($) {
	/* Делаем подсветку синтаксиса */
	SyntaxHighlighter.all();
	/* Делаем вкладки */
	$('.code_tabs div.inner_tab').hide();
	$('.code_tabs').each(function() {
		$(this).children().slice(1,2).show();
	});
	$('.code_tabs ul.tabs_headers li.code_tab').filter(':first').addClass('tab_active');
	$('.code_tabs ul.tabs_headers li.code_tab a').click(function(){
		$(this).parent().parent().find("li").removeClass('tab_active');
		$(this).parent().addClass('tab_active');
		var currentTab = $(this).attr('href');
 		$(this).parent().parent().parent().children().slice(1).hide();
		$(currentTab).show();
		return false;
	});
});

Ну, вот и всё! Архив с примером работы приложен ниже. Надеюсь, эти вкладки превнесут еще больше жизни в Ваши страницы! :-)



Last Updated on Saturday, 29 June 2013 16:42
 
Автор статьи: Damascus
Всего статей: 62
Рейтинг: 3111
Страница Google+: Google

Found Error?

Система Orphus

Site Statistics

Яндекс.Метрика

Our Pages


Allineed.Ru © 2009-2012 - Allineed.Ru - ответы на IT вопросы, статьи о разработке, IT и программном обеспечении. При использовании материалов сайта ссылка обязательна. Использование данного сайта и любой его части означает принятие условий Пользовательского Соглашения.
Allineed.Ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.