|
Сообщение от Блондинка
|
|
можно просто доработать этот скрипт?
|
Можно и доработать, но что?
Посмотрите на свой код в посте #9. Не странно ли то, что вы описываете стили для блоков дважды - первый раз глобально в CSS и второй раз встроенными стилями. В данном посте непосредственно в тексте описания нет такого, ну в предыдущих темах это есть. Здесь же вместо того, чтобы определить общие стили для блоков также через CSS (как и в описании), вы их почему-то встраиваете в каждый элемент. Зачем?
Элемент PRE отображает текст как есть, то есть все переводы строк будут действовать так же как и BR в html, дублировать это поведение еще и добавлением BR совсем ни к чему. Заменять кавычки в тексте описания кода на html сущности не обязательно, обязательно заменять < > и &. Первые используется в тегах, а последнее в html сущности.
Ну это прелюдия, а вот далее вообще не понятно. Какие цели вы ставите перед своим приложением?
Пусть это будет демонстрация CSS правил. Если вы хотите на всех страницах с правилами иметь однотипные операции, что вполне входит в понятие "автоматизация", то почему вы зациклились на radius? Я не в том смысле, что уже в нескольких темах вы пишите о border-radius, я о том, почему вы хотите иметь автоматизацию, но при этом определяете элементы демонстрации не глобальными для всех страниц, а привязываете их для каждой страницы индивидуально? А как же тогда скрипт, если, к примеру, он может быть, мягко говоря, "универсальным", то определение демонстраторов для каждой страницы не позволит быть ему универсальным.
Пусть, хотя бы как предположение, вы хотите на каждой страницу показывать CSS правила с различными значениями. Страницы вы будет писать сами. Но уже для них явно есть то, что будет общим для них всех. А значит это общее не выгодно писать на каждой странице, а выгодно описать раз и подключать на каждой.
Вот так можно представить все страницы.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#visualizer {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Chapter border-radius</h1>
<p>Descriptor</p>
<h2>Code</h2>
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
div {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
}
.a {
border-radius: 50px 0 0 50px;
}
.b {
border-radius: 40px 10px;
}
.c {
border-radius: 13em/3em;
}
.d {
border-radius: 13em 0.5em/1em 0.5em;
}
.e {
border-radius: 8px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</body>
</html>
</pre>
<h2>Visualization</h2>
<div id="visualizer"></div>
<p id="informer"></p>
<script>
//определили правила и значения демонстраций для текущей главы
var rules = [
{ name: 'border-radius', values: ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'] }/*,
{ name: 'box-shadow', values: ['0 0 10px rgba(0,0,0,0.5)', '2px 3px 10px rgba(0,0,0,0.5)', '1px 0 15px rgba(0,0,0,0.5)', '5px 5px 10px rgba(0,0,0,0.5)', '-5px 10px 20px rgba(0,0,0,0.5)'] }*/
];
</script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
Она содержит заголовок, блок описания, блок кода, и блок демонстрации (в HTML5 достаточно тегов для определения таких блоков, здесь же простые). Общее в стилях для всех страниц определено в подключаемом файле стилей style.css.
body {
font-size: 14px;
}
pre {
font-family: sans-serif;
color: #012E71;
}
#visualizer {
cursor: pointer;
}
#informer {
color: #D36A01;
}
Общие стили для блоков описаны в шапке страницы, так же как и в тексте описания кода. Но только конкретно для блока демонстратора. Если эти общие правила будут верны для всех страниц, то их можно перенести в подключаемый css-файл. Но такого скорее не может быть, а значит на каждой странице они свои.
В самом тексте описания общие правила объявляются не через имя класса, а через тег, а различные правила через классы. Не обязательно для этого id, его назначение в общем-то иное, и к тому же, имя класса может быть и составным.
Боксы демонстратор и информатор на всех страницах имеют одно и тоже id, в данном примере это visualizer и informer. Указывать их в тексте описания кода совсем не требуется, это рабочие имена, скрытие от пользователя. Если их менять, то менять нужно и в JS коде, иначе ничего работать не будет.