22.03.2019, 00:11
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
какого парсера, есть один единственный контейнер с кодом, и один единственный див-демонстратор, и вот для этой пары нужен скрипт исполняющий вышеописанный сценарий, с остальным справлюсь сама
|
|
22.03.2019, 07:13
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
какого парсера, есть один единственный контейнер с кодом, и один единственный див-демонстратор, и вот для этой пары нужен скрипт исполняющий вышеописанный сценарий, с остальным справлюсь сама
|
Вы же хотели сделать что-то типа учебника, 👱🏻♀️
А это обязательно так делать? &gt; &lt; Вот код берётся из <code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>pre{background:#f5f5f5}</style>
</head>
<body>
<article class="demo">
<style>
.radius {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
display: block;
}
.radius:focus{
outline: none;
border-color: #99f;
}
#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; }
.span_bold { font-weight: bold; }
#span_ital { font-style: italic; }
</style>
<button class="radius">
<span id="span_ital" class="span_bold"></span>
</button>
Нажмите на кнопку, чтобы посмотреть как изменится радиус углов при разных значениях.
</article>
<script>
function $(selector, node) { return (node || document).querySelector(selector); }
var idname = ["a", "b", "c", "d", "e"];
var demo = $("article.demo");
var code = document.createElement("pre");
code.textContent = demo.innerHTML;
(function() {
var i = 0;
var e = $(".radius", demo);
var s = $("style", demo).sheet;
(e.onclick = function() {
var id = idname[i++ % idname.length];
for(var k = 0, len = s.cssRules.length; k < len; k++) {
if(s.cssRules[k].selectorText === ("#" + id)) {
e.style.cssText = s.cssRules[k].style.cssText;
$("*", e).textContent = s.cssRules[k].style.cssText;
break;
}
}
})();
})();
demo.insertBefore(code, demo.childNodes[0]);
</script>
</body>
</html>
UPD Ещё раз прочтите пост №88 сначала
Последний раз редактировалось Malleys, 22.03.2019 в 11:14.
|
|
22.03.2019, 09:07
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
Malleys,
при клике рамка вылазит(Google Chrome, ie), может быть добавить
.radius:focus{
outline: none;
}
?
Последний раз редактировалось рони, 22.03.2019 в 09:10.
|
|
22.03.2019, 09:51
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от рони
|
|
при клике рамка вылазит(Google Chrome, ie), может быть добавить
|
ОК
Блондинка👱🏻♀️, с таким подходом код придётся переписать так, что он по всем параметрам будет лучше — он будет и понятнее, и структурированнее, и самого кода будет меньше, и заодно будут решены старые проблемы, которые из-за плохой структуры старого кода было сложно решить.
Последний раз редактировалось Malleys, 22.03.2019 в 11:14.
|
|
22.03.2019, 11:18
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Блондинка
|
|
и присвоила ид контейнеру с кодом
|
предположив что на странице может быть не один контейнер с кодом. |
|
22.03.2019, 11:48
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
предположив что на странице может быть не один контейнер с кодом
|
однако вы говорили про глобальные переменные... и как понять, что к какому примеру относится? Так это тогда в цикле обрабатывается, вместо переменных, где указывались нужные id теперь это атрибут data-idname на примере, а кнопка, которая переключает помечается атрибутом data-run
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>pre{background:#f5f5f5}</style>
</head>
<body>
<article class="demo" data-idname="a b c d e">
<style>
.radius {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
display: block;
}
.radius:focus{
outline: none;
border-color: #99f;
}
#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; }
.span_bold { font-weight: bold; }
#span_ital { font-style: italic; }
</style>
<button class="radius" data-run>
<span id="span_ital" class="span_bold"></span>
</button>
Нажмите на кнопку, чтобы посмотреть как изменится радиус углов при разных значениях.
</article>
<article class="demo" data-idname="c-1 c-2 c-3 c-4">
<style>
.box {
background: #f0f0f0;
border: 1px solid #999;
width: 400px;
height: 100px;
font-size: 150%;
}
#c-1 { background-color: deeppink; }
#c-2 { background-color: gold; }
#c-3 { background-color: yellowgreen }
#c-4 { background-color: gray }
</style>
<button class="box" data-run><span></span></button>
</article>
<script>
function $(selector, node) { return (node || document).querySelector(selector); }
function $$(selector, node) { return Array.prototype.slice.call((node || document).querySelectorAll(selector)); }
$$("article.demo").forEach(function(demo) {
var idname = demo.getAttribute("data-idname").split(/\s+/);
var code = document.createElement("pre");
code.textContent = demo.innerHTML;
(function() {
var i = 0;
var e = $("[data-run]", demo);
var s = $("style", demo).sheet;
(e.onclick = function() {
var id = idname[i++ % idname.length];
for(var k = 0, len = s.cssRules.length; k < len; k++) {
if(s.cssRules[k].selectorText === ("#" + id)) {
e.style.cssText = s.cssRules[k].style.cssText;
$("*", e).textContent = s.cssRules[k].style.cssText;
break;
}
}
})();
})();
demo.insertBefore(code, demo.childNodes[0]);
});
</script>
</body>
</html>
Я добавил второй пример для теста, я думаю идею вы поняли... 😉
UPD Я думаю, что data-idname скоро превратится в data-selectors, но
|
Сообщение от Блондинка
|
|
с остальным справлюсь сама
|
Последний раз редактировалось Malleys, 22.03.2019 в 11:54.
|
|
22.03.2019, 12:10
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Блондинка
|
37
див должен стать таким, и при клике по нему (без кнопки) должен меняться по кругу, тоесть 1,2,3,4,5 и опять 1
38
39
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 40px 10px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 40px 10px;</span></div>
|
откуда и зачем, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius?
Последний раз редактировалось Блондинка, 22.03.2019 в 12:19.
|
|
22.03.2019, 12:33
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
откуда и зачем ты какой то rgb, I если в коде названия цвета?
|
Сообщение от Malleys
|
46
#c-1 { background-color: deeppink; }
47
#c-2 { background-color: gold; }
48
#c-3 { background-color: yellowgreen }
49
#c-4 { background-color: gray }
|
|
|
22.03.2019, 12:36
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
див должен стать таким, и при клике по нему (без кнопки) должен меняться по кругу,
|
Я вам уже писал, что рядом примером должна быть кнопка, поскольку некоторые примеры потребуют взаимодействия с пользователем, а тут такое будет не возможно, поскольку оно переключит на другое. Вы можете возразить, но я скажу, что всё-таки способ запуска на всех примерах должен быть одним! И обычно такие примеры запускают в песочнице (отдельная страница в <iframe>, чтобы сам учебник не сломался от примера, но можно, например, завести отдельный параметр, при помощи которого можно будет указывать, нужна ли песочница, поскольку некоторые примеры (как эти) не воздействуют на окружающие элементы)
|
Сообщение от Блондинка
|
|
должен меняться по кругу
|
Добавьте к элементу атрибут data-run и он станет переключающей кнопкой! Я это уже писал!
|
Сообщение от Блондинка
|
|
откуда и зачем, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius?
|
|
Сообщение от Блондинка
|
|
откуда и зачем ты какой то rgb, I если в коде названия цвета?
|
Когда я сказал, что данные не нужно извлекать из DOM, то это также в частности означало, что их не нужно извлекать из стилей. (Но вы очень хотели!) Да, оно так выглядит, поскольку браузер так разобрал те стили! Т. е. это ваши стили в живом, т. е. в применённом виде!
Может всё-таки описывать данные в чистом виде? (Например, JSON) Ещё раз прочтите пост №88
Последний раз редактировалось Malleys, 22.03.2019 в 12:43.
|
|
22.03.2019, 12:56
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от Блондинка
|
|
див должен стать таким
|
там выделено цветом то что надо читать, а черный текст можно просто пропустить
тоесть между <span> и </span> должно быть то что в приведённом коде
Последний раз редактировалось Блондинка, 22.03.2019 в 13:00.
|
|
|
|
