<table border>
<thead>
<td>ПН</td>
<td>ВТ</td>
<td>СР</td>
<td>ЧТ</td>
<td>ПТ</td>
<td>СБ</td>
<td>ВС</td>
</thead>
<tr id="state">
<td>Выходной</td>
<td>Выходной</td>
<td>Выходной</td>
<td>Выходной</td>
<td>15-21</td>
<td>15-21</td>
<td>16-21</td>
</tr>
</table>var
$Table = $("<table />"),
$Thead = $("<thead />").appendTo($Table),
$Row = $("<tr />").appendTo($Table),
$_tds = $("#state td"), $_heads = $("thead td"),
start, i = 0;
for(; i < $_tds.length; i++){
start = i;
while(
$_tds.get(i++) && $_tds.eq(i).text() == $_tds.eq(i - 1).text()
){}
$Row.append(
"<td>" + $_tds.eq(--i).text() + "</td>"
);
$Thead.append(
"<td>" + (i == start ? "" : $_heads.eq(start).text() + "-") + $_heads.eq(i).text() + "</td>"
);
}
$("table").replaceWith($Table);$(document).ready(function() {
$('#add_theme').click(function() {
$('<div class="ft_inputs">\n' +
'<input type="text" placeholder="Name theme"/>\n' +
'<textarea rows="5" placeholder="Desription theme"></textarea><div class="remove_theme">Delete</div></div>') .
fadeIn('slow').appendTo('.test');
});
$('.test').on('click', '.remove_theme', function() {
$('.ft_inputs', '.test').last().remove();
});
});
$data .= '<div class="newsPhoto">';
$data .= '<img src="'.getImgUrl($news['photo']).'">';
$data .= '</div>';
// ...$sql = mysql_query("SELECT news_id, title, description, photo FROM news WHERE category='1' ORDER BY news_id DESC LIMIT 10") or die(mysql_error());
if (isAJAX() == false) {
echo head('Новости',array('common.css', 'news.css'),array('common.js'));
echo body();
echo news_menu();
echo news();
echo footer();
}
Допустим страница содержит следующий текст:
<ul class="list l1">
<li class="item i1"> Высоко </li>
<li class="item i2"> Быстро </li>
<li class="item i3"> Сильно </li>
</ul>
<ul class="list l2">
<li class="item i1"> Выше </li>
<li class="item i2"> Быстрее </li>
<li class="item i3"> Сильнее </li>
</ul>
следующие два выражения будут равнозначны
$(".i1").replaceWith("<li class='item'>Тест</li>");
$("<li class='item'>Тест</li>").replaceAll($(".i1"));
в обоих случаях элемент списка с текстом "Тест" заменит элементы с классом i1. В результате, текст нашей страницы станет следующим:
<ul class="list l1">
<li class='item'>Тест</li>
<li class="item i2"> Быстро </li>
<li class="item i3"> Сильно </li>
</ul>
<ul class="list l2">
<li class='item'>Тест</li>
<li class="item i2"> Быстрее </li>
<li class="item i3"> Сильнее </li>
</ul>
Помимо html-текста, можно заменять одни элементы страницы другими. При этом, вставляемые элементы будут не скопированы, а перемещены. Например следующий код
$(".l2 i2").replaceWith($(".l1 i1"));
изменит первоначальную страницу следующим образом:
<ul class="list l1">
<li class="item i2"> Быстро </li>
<li class="item i3"> Сильно </li>
</ul>
<ul class="list l2">
<li class="item i1"> Выше </li>
<li class="item i1"> Высоко </li>
<li class="item i3"> Сильнее </li>
</ul>
Рассмотрим пример с использованием пользовательской функции. Добавим драматичности элементам из второго списка:
$(".l2 .item").replaceWith(function(){
return ' <li class="item" > '+$(this).text()+', я кому сказал! </li>';
});
в итоге, текст первоначальной страницы станет следующим:
<ul class="list l1">
<li class="item i1"> Высоко </li>
<li class="item i2"> Быстро </li>
<li class="item i3"> Сильно </li>
</ul>
<ul class="list l2">
<li class="item"> Выше, я кому сказал! </li>
<li class="item"> Быстрее, я кому сказал! </li>
<li class="item"> Сильнее, я кому сказал! </li>
</ul>
<div class="result"> <!-- position: relative -->
<div class="photo"></div> <!-- position: absolute, z-index: 10 -->
<div class="shape"></div> <!-- position: absolute, z-index: 20 -->
</div>
var $win = $(window);
$('.inp').on('keydown', function (e) {
switch (e.which) {
case 38:
var top = $win.scrollTop();
top -= 10;
$win.scrollTop(top);
break;
case 40:
var top = $win.scrollTop();
top += 10;
$win.scrollTop(top);
break;
}
});
«Выпадание» внешних отступов [10/23]
«Выпадание» — это еще один эффект, связанный с вертикальными внешними отступами. Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.
Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим» .
Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху.
Внешние и внутренние отступы всегда складываются.
