ΠΠΎΠ²ΠΎΡΡΠΈ Π² Π΄Π²Π΅, ΡΡΠΈ, ΡΠ΅ΡΡΡΠ΅ ΠΈ Ρ.Π΄. ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ (ΡΠ°Π·Π²ΠΈΡΠΈΠ΅ ΠΌΡΡΠ»ΠΈ)
24.03
ΠΡΠ° ΡΡΠ°ΡΡΡ - Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ΅ ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΡΠ° ΠΏΡΠΎ Π½ΠΎΠ²ΠΎΡΡΠΈ Π² Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ (jQuery Edition).
Π ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ Π±ΡΠ» Π·Π°Π΄Π°Π½ Π²ΠΎΠΏΡΠΎΡ ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π²ΡΠ²Π΅ΡΡΠΈ Π½ΠΎΠ²ΠΎΡΡΠΈ Π² 3, 4 ΠΈ Ρ.Π΄ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π― Π½Π΅ ΡΡΠ°Π» ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡ ΠΊΠΎΠ΄ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ , Π° ΡΠ΅ΡΠΈΠ» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠΏΠΈΡΠ°ΡΡ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈ ΡΡΠ°Π·Ρ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ Π΅Π³ΠΎ Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ.
ΠΡΠ°ΠΊ ΡΡΡΡ ΠΏΠΎ ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ, Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ jQuery, Π½ΠΎ Π½Π° ΡΡΠΎΡ ΡΠ°Π· ΠΊΠΎΠ΄ ΡΠΎΠΊΡΠ°ΡΠΈΡΡΡ Π΄ΠΎ 1 ΡΡΡΠΎΡΠΊΠΈ, ΡΡΠΎ ΠΏΠΎΠ»ΠΎΠΆΠΈΡΠ΅Π»ΡΠ½ΠΎ Π²Π»ΠΈΡΠ΅Ρ Π½Π° ΡΠΊΠΎΡΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΡΡΠ°Π½ΠΈΡΡ (ΠΏΡΡΡΡ ΠΈ ΡΠΎΠ²ΡΠ΅ΠΌ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ).
ΠΠ΅ Π±ΡΠ΄Ρ Π»ΠΈΡΡ Π»ΠΈΡΠ½ΡΡ Π²ΠΎΠ΄Ρ, ΠΏΠΎΠΊΠ°ΠΆΡ ΡΡΠ°Π·Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ, Π·Π΄Π΅ΡΡ Ρ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π» ΡΠΊΡΠΈΠΏΡ, Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ, Π½ΠΎ ΡΡΡΡ Π½Π΅ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ. ΠΡΡΠ°ΡΠΈ ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ½Π°Ρ ΠΏΠΎΠΈΡΠΊΠΎΠ²Π°Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠ°ΠΉΡΠΎΠ² - Π½Π΅ ΡΠ°ΠΊ Ρ ΠΈ Π΄ΠΎΡΠΎΠ³ΠΎ.
Π Π°Π·Π±ΠΈΡΠ°ΡΡ ΠΆΠ΅ Π±ΡΠ΄Π΅ΠΌ Π²Π°ΡΠΈΠ°Π½Ρ Ρ ΡΡΠ΅ΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ Π½ΠΎΠ²ΠΎΡΡΠ΅ΠΉ.
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ
1. ΠΠΎΠ΄ Π² shortstory.tpl Π΄ΠΎΠ»ΠΆΠ΅Π½ΠΈ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΠ°ΠΊΠΎΠΉ Π²ΠΈΠ΄:
<div class="news">
ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ shortstory ΠΈ Π²ΡΡΠΊΠΈΠ΅ ΡΠ΅Π³ΠΈ,
Π³Π»Π°Π²Π½ΠΎΠ΅ ΡΡΡ - "ΠΎΠ±ΡΡΡΠΊΠ°" Π²ΡΠ΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ shortstory.tpl
</div>
2. ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΡΠΈΠ»ΠΈ Π² CSS:
.news.float {
float: left;
width: 30%; //Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ Π΄Π»Ρ 5ΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ 18-20%)
}
.clr {
clear: both;
height: 0;
overflow: hidden;
}
3. ΠΡ ΠΈ ΡΠ°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅ - jQuery-ΠΊΠΎΠ΄:
<script type="text/javascript">
jQuery(function($) {
$(".news").addClass("float").filter(":nth-child(3n)").after('<div class="clr"></div>');
});
</script>
ΠΠ°ΠΊ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· ΡΡΡΠΎΠΊΠΈ ΠΊΠΎΠ΄Π° - Π²ΡΡ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ ΠΏΡΠΎΡΡΠΎ - ΡΠ½Π°ΡΠ°Π»Π° Π΄ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π²ΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠ°ΠΌ Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ news Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ, Π° ΠΏΠΎΡΠΎΠΌ Π΄ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΠΏΠΎΡΠ»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΡΠ΅ΡΡΠ΅Π³ΠΎ Π±Π»ΠΎΠΊΠ° ΠΏΡΡΡΠΎΠΉ div Ρ ΡΠ»Π°ΡΡΠΎΠΌ clr - ΡΡΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π½ΠΎΠ²ΠΎΡΡΠΈ ΠΈΠΌΠ΅Π»ΠΈ ΡΠΎΠ²Π½ΠΎΠ΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π° Π½Π΅ ΠΏΠ»Π°Π²Π°Π»ΠΈ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΈΠΌ Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ.
ΠΠ°ΠΊ Π½Π°ΡΡΡΠΎΠΈΡΡ?
ΠΠ΅Π³ΠΊΠΎ!
ΠΡΡ ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ - ΡΡΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΡΠΈΡΡΡ ΡΡΠΈ Π² ΡΡΡΠΎΠΊΠ΅ :nth-child(3n) Π½Π° ΠΆΠ΅Π»Π°Π΅ΠΌΡΡ, ΠΈ Π² CSS Π·Π°ΠΌΠ΅Π½ΠΈΡΡ width: 30%; Π½Π° Π½ΡΠΆΠ½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ (ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ ΠΏΠΎΠ΄Π±ΠΎΡΠ°).
ΠΡ ΠΈ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ - Π²ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠ°Π½ΡΠ°Π·ΠΈΡ ΠΈ Π΄Π΅Π»Π°Π΅ΠΌ ΠΊΡΠ°ΡΠΈΠ²ΠΎ

ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
ΠΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΠΎΠΌΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠΎΠ³ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ