Цитата:
|
laimas,
одним словом надо диву из 35 строчки придать свойства из строк 22(background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px;) и 23(border-radius: 50px 0 0 50px;) и свойства из строки 23 потом менять при клике, а также менять текст спана взятыми из строк 24, 25, 26, и 27. |
Я повторяю, я не представляю что за демонстратор вы хотите создать. Например, в моем понимании, это показать как величина значения будет влиять на конечный результат. Ну так значит нужно показать все возможное, а щелкая кнопкой показать все возможное, это не слишком удобно. Значит должно быть что-то типа:
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
table {
width: 100%;
}
td {
width: 20%;
padding: 10px;
}
pre {
padding: 30px 0 30px 40%;
border: 1px solid #777;
}
</style>
<script type="text/javascript">
$(function() {
$('input').on('input', function() {
var dms = $(':checked').val();
$(this).next().val(this.value);
var opt = $.map($('output'), function(e) {
return e.value + dms
}).join(' ');
$('pre').css('border-radius', opt).text(function() {
//только для примера, ибо квантификатор (?<=x)y не все браузеры поддерживают
return this.textContent.replace(/(?<=border-radius:\s)[^;]+/, opt)
})
});
});
</script>
</head>
<body>
<table>
<tr><td>Style/Value</td><td>top</td><td>right</td><td>bottom</td><td>left</td></tr>
<tr>
<td>border-radius <label><input type="radio" name="a" value="px" checked="" /> px</label> <label><input name="a" type="radio" value="%" /> %</label></td>
<td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
<td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
<td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
<td><input type="range" min="0" max="100" step="1" value="0" autocomplete="off" /> <output>0</output></td>
</tr>
<tr><td colspan="5"><pre>pre {
padding: 30px 0 30px 40%;
border: 1px solid #777;
border-radius: 0 0 0 0;
}</pre></td></tr>
</table>
</body>
</html>
Здесь можно и устанавливать значения для каждого угла, и выбирать единицы, и при этом влияние будет значительным. Можно сделать выбор единиц для каждого угла индивидуально, что так же будет иметь иной результат конечный. Кроме процентов и пикселей можно и другие единицы добавить. А вот что вы хотите и для чего, увы, я не знаю. |
laimas,
Есть страница с контейнером <code></code> в котором содержится некий код(в этом случае с 5 значениями свойства border-radius), после этого контейнера надо показать что написано в в этом коде на примере, если делать вручную, то это выглядит так <div id="a" class="radius" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 50px 0 0 50px;"><span id="a1">border-radius: 50px 0 0 50px;</span></div> <div id="b" class="radius" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 40px 10px;"><span id="b1">border-radius: 40px 10px;</span></div> <div id="c" class="radius" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 13em/3em;"><span id="c1">border-radius: 13em/3em;</span></div> <div id="d" class="radius" style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 13em 0.5em/1em 0.5em;"><span id="d1">border-radius: 13em 0.5em/1em 0.5em;</span></div> <div id="e" class="radius" styly="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; border-radius: 8px;"><span id="e1">border-radius: 8px;</span></div> |
но чтобы избавиться от кучи ручной работы, которую можно возложить на скрипт, плюс надо это уместить в один див, при клике на который указанные значения меняются поочерёдно по кругу.
|
другими словами скрипт должен найти в контейнере <code> найти скопировать и вставить
1. стиль класса 2. стиль ид'а 3. при клике менять стиль ид'а |
Никто не знает решения?
|
Цитата:
|
В контейнере <code> пример кода, а див-демонстратор просто визуально показывает что обозначает этот код.
|
Ну так и меняйте параметры правила border-radius div демонстратору, выбирая их из массива:
var radius = ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'] |
| Часовой пояс GMT +3, время: 15:08. |