Вы когда-нибудь пользовались сервисом, подобным JSBin? На нем можно написать код HTML, CSS и JavaScript, и тут же увидеть результат своих действий на специальной панели. В данном уроке мы сделаем страницу с элементом iframe, которая будет выполнять почти такие же действия (за исключением реализации JavaScript кода).
Шаг 1. Создаем структуру HTML разметки
Разметка будет состоять из двух частей. Первая часть содержит форму с двумя полями, в которые будет вводиться непосредственно текст кода HTML и CSS. Во второй части содержится фрейм, в котором будет выводиться результат. Для частей используются собственные классы для визуального оформления и общий класс grid для формирования структуры страницы.
<!doctype html>
<html>
<head>
<title></title>
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container grid">
<form>
<h2>HTML</h2>
<textarea id="html"></textarea>
<h2>CSS</h2>
<textarea id="css"></textarea>
</form>
</div>
<div class="output grid">
<iframe></iframe>
</div>
</body>
</html>
Шаг 2. Задаем стили CSS для наших элементов
Выполняем простой сброс свойств CSS:
* {
margin: 0;
padding: 0; }
Задаем определенный шрифт, который будет использоваться на странице. Также выравниваем части страницы. Они будут располагаться рядом друг с другом. Для формирования лучшего внешнего вида установим отступы, а чтобы отступы не увеличивали ширину элементов воспользуемся режимом вывода элементов, устанавливаемым значением border-box:
body {
font-family: sans-serif; }
.grid {
width: 50%;
float: left;
padding: 30px 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
Снимем вывод рамки для фрейма, растянем его на всю доступную ширину. Для элементов ввода текста наоборот установим рамки, а также добавим поля для лучшего визуального восприятия. С помощью рамки добавим разделитель между контейнерами формы и фрейма.
.container {
background: #e3e3e3;
border-right: 1px solid white; }
.output {
border-left: 1px solid #e3e3e3; }
textarea {
width: 100%;
height: 200px;
margin-top: 20px;
margin-bottom: 50px; }
iframe {
border: none;
width: 100%; }
Шаг 3. Добавляем функционал
С помощью jQuery очень просто реализовать функционал, который нам требуется. Организуем функцию, чтобы выполнять все операции в локальном контексте. определяем три локальных переменных. В первой хранится контекст фрейма, вторая предназначена для организации места вставка HTML кода, а третья - для CSS кода, который будет вставляться в разделе head страницы, выводимой во фрейме. А затем создаем обработчик события нажатия клавиши в области ввода текста. Так как их у нас две, то нужно производить определение, куда вводится текст, и добавлять введенный текст в соответствующий раздел страницы, выводимой во фрейме.
(function() {
var contents = $('iframe').contents(),
body = contents.find('body'),
styleTag = $('<style></style>').appendTo(contents.find('head'));
$('textarea').keyup(function() {
var $this = $(this);
if ( $this.attr('id') === 'html') {
body.html( $this.val() );
} else {
// Наверно, вводится CSS код
styleTag.text( $this.val() );
});
})();
Кроме того, нужно добавить код, который будет выравнивать по высоте две части нашей страницы, чтобы она выглядела достойно.
$('.grid').height( $(window).height() );
Примечание: обязательно включите код jQuery в страницу, чтобы функционал действовал.