Π Π°Π·Π½ΠΎΠ΅

Jquery Ρ€Π°Π±ΠΎΡ‚Π° с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ: ΠŸΠ΅Ρ€Π΅Π±ΠΎΡ€ ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery

21.02.1982

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

15 ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ

Π’Π°Π±Π»ΠΈΡ‡Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых слоТных для добавлСния стиля ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΈΠ·-Π·Π° совмСстимости с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΈ слоТного ΠΌΠ΅Ρ‚ΠΎΠ΄Π° влоТСния Ρ‚Π΅Π³ΠΎΠ². Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ интСрфСйсных Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‚ Ρ‚Π΅Π³ΠΈ Ρ‚Π°Π±Π»ΠΈΡ† Π½Π° Π²Π΅Π±-страницах Π½Π° div, Π² основном ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π² div Π»Π΅Π³Ρ‡Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ стили CSS, Ρ‡Π΅ΠΌ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Но Π½Π°ΠΌ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ table Π² повсСднСвных прилоТСниях, Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ являСтся Ρ‚Π°Π±Π»ΠΈΡ†Π° сравнСния. Π― Π±ΡƒΠ΄Ρƒ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Ρ‚ΡŒ это всСм сСгодня15 ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Ρ„ΠΎΡ€ΠΌ jQuery позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ, ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ Π΄Π°Π½Π½Ρ‹Ρ…. Π’Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ сортировки Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ пСрСтаскивания Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ„ΠΎΡ€ΠΌΡ‹ Π΄Π΅Ρ€Π΅Π²Π° jQuery, установка Ρ†Π²Π΅Ρ‚Π°, Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, Π·Π°ΠΌΠ΅Π½Π° ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ эффСкты.
Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ рСсурсам, связанным с javascript:
γ€ŠΠŸΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠΉΡ‚Π΅ 9 ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… скриптов Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° JavaScript для рисования Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ Π½Π° Π²Π΅Π±-страницах 》
γ€ŠΠ˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ jQuery, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ свой ΠΊΠΎΠ΄ 》
γ€Š10 ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² спСцэффСктов JavaScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ΄Π΅Π»Π°ΡŽΡ‚ ваш сайт Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ 》
γ€Š300 + JQuery, CSS, MooTools ΠΈ рСсурсы мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ JS 》

1.

DataTables β€” ΠΌΠΎΡ‰Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ„ΠΎΡ€ΠΌΡ‹ jQuery


DataTables β€” это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. НапримСр: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ автоматичСски ΠΈ Π»Π΅Π³ΠΊΠΎ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π²Ρ‹Π±ΠΎΡ€ΠΊΡƒ Π΄Π°Π½Π½Ρ‹Ρ… Ajax, Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы, сортировку столбцов, сортировку ΠΏΠΎ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΡŽ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS ΠΈΠ»ΠΈ jQuery UI ThemeRoller для настройки Ρ‚Π΅ΠΌ ΠΈ ΠΏΠΎΠ»Π½Ρ‹Ρ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ².

2.uiTableFilter -jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ Ρ‚Π°Π±Π»ΠΈΡ†


uiTableFilter β€” это ΠΏΠ»Π°Π³ΠΈΠ½ jQuery для Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ строк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Автор ΠΏΠ»Π°Π³ΠΈΠ½Π° прСдоставляСт ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваши собствСнныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡŽ Ρ‚Π°Π±Π»ΠΈΡ†.

3.Scrollable HTML Table -jQuery ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Ρ„ΠΎΡ€ΠΌΡ‹


Scrollable HTML Table jQuery ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π°ΡˆΡƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ.

4.Tablesorter -jQuery ΠΏΠ»Π°Π³ΠΈΠ½ сортировки Ρ‚Π°Π±Π»ΠΈΡ†


ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery Tablesorter ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для прСобразования стандартной HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, содСрТащСй Ρ‚Π΅Π³ΠΈ thead ΠΈ tbody, Π² ΡΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π±Π΅Π· обновлСния страницы. Он Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ сортировку ΠΏΠΎ нСскольким столбцам, Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ совмСстим с нСсколькими Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ систСмы Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ².

5.Flexigrid -Web2.0 jQuery form plugin


Flexigrid β€” это Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery для Web2.0. Он содСрТит мноТСство ΠΎΡ‡Π΅Π½ΡŒ интСрСсных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ настройка Ρ‚Π΅ΠΌΡ‹, Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ ΠΏΠΎ страницам, панСль инструмСнтов, поиск, сортировка, источник Π΄Π°Π½Π½Ρ‹Ρ… чтСния ajax, настройка ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты столбца ΠΈ Ρ‚. Π”.

6.HeatColor -jQuery ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ†Π²Π΅Ρ‚Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹


HeatColor позволяСт Π²Π°ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ элСмСнта Π² зависимости ΠΎΡ‚ Π΅Π³ΠΎ значСния. Π•Π³ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ сравниваСтся Π² соотвСтствии с Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ, ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, ΠΎΠ½ΠΈ автоматичСски ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ΡΡ для значСния Ρ†Π²Π΅Ρ‚Π°.

7.JQTreeTable -jQuery tree form plugin


Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ JQTreeTable, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄Ρ€Π΅Π²ΠΎΠ²ΠΈΠ΄Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ. Если Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ JavaScript, ΠΎΠ½ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Π½Π΅ влияя Π½Π° Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ.

8.Ingrid -jQuery form plugin


Ingrid β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery для Ρ‚Π°Π±Π»ΠΈΡ† Π΄Π°Π½Π½Ρ‹Ρ…. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° столбца, сортировка ΠΈ стили добавлСния строк ΠΈ столбцов. На Π²Π΅Π±-сайтС Π°Π²Ρ‚ΠΎΡ€Π° прСдставлСн ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½ Ρ„ΠΎΡ€ΠΌΡ‹ jQuery с нуля.

9.jQuery ColumnManager plugin


columnManager β€” это ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ скрытиСм любого столбца Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ состояниС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄ΠΎ вашСго ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ посСщСния. Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery ΠΎΡ‡Π΅Π½ΡŒ малСнький ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ, всСго 3,6 ΠšΠ‘.

10.jQuery treeTable -jQuery tree form plugin


jQuery treeTable β€” это нСбольшая Ρ‚Π°Π±Π»ΠΈΡ†Π° JQTreeTable, которая Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π²Π°ΡˆΡƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² Π²ΠΈΠ΄Π΅ Π΄Ρ€Π΅Π²ΠΎΠ²ΠΈΠ΄Π½ΠΎΠΉ структуры. Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π² чистотС ΠΈ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡΡ…ΠΎΠ΄Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΏΡ€ΠΈΠ³ΠΎΠ΄Π½ΠΎΠΉ для использования, ΠΊΠΎΠ³Π΄Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ JavaScript.

11.

CSV2Table β€” Плагин Ρ„ΠΎΡ€ΠΌΡ‹ чтСния Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° CSV


CSV2Table ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ CSV, ΠΎΠ½ считываСт содСрТимоС ΠΈΠ· Ρ„Π°ΠΉΠ»Π° CSV ΠΈ создаСт Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

12.Table Pagination -jQuery ΠΏΠ»Π°Π³ΠΈΠ½ разбиСния Π½Π° страницы


Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ разбиСния Π½Π° страницы jQuery ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ элСмСнты разбиСния ΠΏΠΎ страницам ΠΏΠΎΠ΄ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ, ΠΈ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ ΠΏΠΎ страницам с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ².

13.jQuery TableRowCheckboxToggle


этоjQuery ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ позволяСт ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ состояниС Ρ„Π»Π°ΠΆΠΊΠ° ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ CSS строки ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° строку Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

14.Table Drag and Drop jQuery plugin -jQuery ΠΏΠ»Π°Π³ΠΈΠ½ пСрСтаскивания Ρ„ΠΎΡ€ΠΌΡ‹

Π­Ρ‚ΠΎΡ‚ простой ΠΏΠ»Π°Π³ΠΈΠ½ jQuery позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ порядок строк Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅, пСрСтаскивая ΠΈΡ…. Π›ΡŽΠ±ΡƒΡŽ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΡƒΡŽ строку ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π΅ нСльзя Π±Ρ‹Π»ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ ΠΈ / ΠΈΠ»ΠΈ Π½Π΅ ΠΎΡ‚ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ.

15.uiTableEdit

uiTableEdit β€” это ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для рСдактирования Ρ‚Π°Π±Π»ΠΈΡ† jQuery, созданный Π“Ρ€Π΅Π³ΠΎΠΌ Π’Π΅Π±Π΅Ρ€ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ английский: 15 Great jQuery Plugins For Better Table Manipulation
Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄:
http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html

Π Π°Π±ΠΎΡ‚Π° с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ стилСй CSS Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ HTML5

This tutorial needs a review. You can edit it in GitHub following these contribution guidelines.
  • Для выполнСния этого ΡƒΡ‡Π΅Π±Π½ΠΎΠ³ΠΎ курса ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹.
  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ прилоТСния HTML5
  • ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах
  • ИзмСнСниС ΠΌΠ°ΠΊΠ΅Ρ‚Π°
    • Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй носитСлСй
    • Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ» CSS
  • ИспользованиС прСпроцСссоров CSS
  • Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅
  • Π‘ΠΌ. Ρ‚Π°ΠΊΠΆΠ΅

ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ HTML5 ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠΎΡ‡Π΅Ρ‚Π°ΡŽΡ‚ HTML, CSS ΠΈ JavaScript для создания ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… устройствах, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ смартфоны, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹ ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΈ. Π’ этом Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ описываСтся, ΠΊΠ°ΠΊ IDE прСдоставляСт инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ CSS для измСнСния ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ прилоТСния. Π‘Ρ€Π΅Π΄Π° IDE Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ созданиС ΠΈ использованиС прСпроцСссоров Sass ΠΈ LESS CSS Π² прилоТСниях.

Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ NetBeans Connector для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Chrome позволяСт ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ прилоТСния ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΈΡ… отобраТСния Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… устройствах. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ позволяСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Chrome ΠΈ IDE Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Ѐункция β€˜ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°β€™ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ NetBeans ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π½Π°ΠΉΡ‚ΠΈ элСмСнты Π² исходном ΠΊΠΎΠ΄Π΅, Π²Ρ‹Π±Ρ€Π°Π² ΠΈΡ… Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. ПослС Π²Ρ‹Π±ΠΎΡ€Π° элСмСнта Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ IDE для просмотра ΠΏΡ€Π°Π²ΠΈΠ» ΠΈ свойств CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ этому элСмСнту.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± установкС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ NetBeans Connector для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Chrome см. Π² ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ курсС Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с прилоТСниями HTML5.

Для просмотра дСмонстрационного Ρ€ΠΎΠ»ΠΈΠΊΠ° этого ΡƒΡ‡Π΅Π±Π½ΠΎΠ³ΠΎ курса см. Ρ€Π°Π·Π΄Π΅Π» Π’ΠΈΠ΄Π΅ΠΎΡ€ΠΎΠ»ΠΈΠΊ ΠΏΠΎ Ρ€Π°Π±ΠΎΡ‚Π΅ со страницами стилСй CSS Π² прилоТСниях HTML5.

Для выполнСния этого ΡƒΡ‡Π΅Π±Π½ΠΎΠ³ΠΎ курса ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹.

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС ΠΈΠ»ΠΈ рСсурсВрСбуСмая вСрсия

IDE NetBeans, Java

7.4, 8.0

ΠšΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π½Π° языкС Java (JDK)

7 ΠΈΠ»ΠΈ 8

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ Chrome

 — 

Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ NetBeans Connector для Chrome

1.1 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ поздняя вСрсия

HTML5DemoSiteTemplate.zip

 — 

ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ CSS

Sass ΠΈΠ»ΠΈ LESS

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ.

  • HTML5DemoSiteTemplate.zip прСдставляСт собой шаблон сайта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΏΡ€ΠΈ создании ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

  • ΠŸΡ€ΠΈ сравнСнии ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° с Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ + шаблон сайта+ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

  • ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ знаниями ΠΈΠ»ΠΈ ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ программирования Π½Π° HTML, CSS ΠΈ JavaScript.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ прилоТСния HTML5

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ курсС рассматриваСтся использованиС шаблона сайта для создания ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° HTML5. Π¨Π°Π±Π»ΠΎΠ½ сайта, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π² этом ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ курсС, являСтся Ρ‚Π΅ΠΌ ΠΆΠ΅ шаблоном, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» сохранСн ΠΊΠ°ΠΊ шаблон сайта Π² ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ курсС Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с прилоТСниями HTML5. Если Π²Ρ‹ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ дСйствия, описанныС Π² ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ руководствС β€˜ΠΠ°Ρ‡Π°Π»ΠΎ работы’, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ шаблон сайта, сохранСнный Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅. Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ шаблон сайта HTML5DemoSiteTemplate.zip.

Для создания прилоТСния Π½Π° основС шаблона сайта Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ шаги.

  1. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ шаблон сайта HTML5 (HTML5DemoSiteTemplate)

  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€˜Π€Π°ΠΉΠ»β€™ > β€˜ΠΠΎΠ²Ρ‹ΠΉ проСкт’ (Ctrl-Shift-N; ⌘-Shift-N Π² Mac) Π² Π³Π»Π°Π²Π½ΠΎΠΌ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ мастСр создания ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡŽ HTML5, Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ HTML5. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π”Π°Π»Π΅Π΅β€™.

  4. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ HTML5DemoCss Π² качСствС ΠΈΠΌΠ΅Π½ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ мСстополоТСниС. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π”Π°Π»Π΅Π΅β€™.

  5. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΡƒΠ½ΠΊΡ‚ Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ шаблон ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ β€˜ΠžΠ±Π·ΠΎΡ€β€™ для поиска шаблона сайта ( HTML5DemoSiteTemplate.zip ). НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π“ΠΎΡ‚ΠΎΠ²ΠΎβ€™.

Figure 1. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ шаблон сайта Π² мастСрС создания ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ HTML5

ПослС наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ β€˜Π“ΠΎΡ‚ΠΎΠ²ΠΎβ€™ срСда IDE создаст ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚ Ρ„Π°ΠΉΠ» index.html Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅. Π’ ΠΎΠΊΠ½Π΅ β€˜ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹β€™ отобраТаСтся, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ содСрТит

index.html , Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй CSS, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ JavaScript ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ изобраТСния. Окна β€˜ΠŸΡ€Π°Π²ΠΈΠ»Π° CSS’ ΠΈ β€˜ΠΠ°Π²ΠΈΠ³Π°Ρ‚ΠΎΡ€β€™ Ρ‚Π°ΠΊΠΆΠ΅ открываСтся Π² IDE.

ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах

Π’ этом ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ курсС Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ запуск ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome с установлСнным Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ NetBeans Connector. Когда Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ установлСно, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ смогут ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мСню NetBeans Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° для просмотра прилоТСния Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… распространСнных устройствах.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ. Π’ этом ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ курсС ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Chrome ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ NetBeans для Chrome. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎΠ± устанокС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ NetBeans Connector см. Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с прилоТСниями HTML5.

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ шаги.

  1. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Chrome с ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠ΅ΠΉ NetBeans Π²Ρ‹Π±Ρ€Π°Π½ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов.

  2. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒβ€™ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome.

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ отобразится простоС Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΠ΅ мСню.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° имССтся ТСлтая полоса, которая являСтся ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ ΠΎ Ρ‚ΠΎΠΌ, NetBeans Connector выполняСт ΠΎΡ‚Π»Π°Π΄ΠΊΡƒ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. IDE ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ связаны ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ Π² Ρ‚Π΅Ρ… случаях, ΠΊΠΎΠ³Π΄Π° ТСлтая полоса Π²ΠΈΠ΄Π½Π°. ΠŸΡ€ΠΈ запускС прилоТСния HTML5 ΠΈΠ· IDE ΠΎΡ‚Π»Π°Π΄Ρ‡ΠΈΠΊ JavaScript Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ автоматичСски. ПослС сохранСния ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ„Π°ΠΉΠ»Π΅ ΠΈΠ»ΠΈ внСсСнии ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй CSS Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ страницу, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° автоматичСски обновляСтся с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

ΠŸΡ€ΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ ΠΆΠ΅Π»Ρ‚ΠΎΠΉ полосы ΠΈΠ»ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ° β€˜ΠžΡ‚ΠΌΠ΅Π½Π°β€™ разрываСтся соСдинСниС ΠΌΠ΅ΠΆΠ΄Ρƒ IDE ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ. Π’ случаС Ρ€Π°Π·Ρ€Ρ‹Π²Π° соСдинСния Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ HTML5 ΠΈΠ· IDE.

Π’Π°ΠΊΠΆΠ΅ слСдуСт ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΎΠΊ NetBeans отобраТаСтся Π² мСстополоТСнии адрСса URL поля Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ мСню, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ прСдоставляСт Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ для измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΈ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ€Π΅ΠΆΠΈΠΌΠ° ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ NetBeans.

  1. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ β€˜ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ дСйствиС NetBeans’ Π² адрСсной строкС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° URL, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ мСню NetBeans ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π² мСню β€˜ΠŸΠ»Π°Π½ΡˆΠ΅Ρ‚ β€” портрСт’.

Π Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° измСнится Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π° Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π°. МСню ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΡƒΡŽ сторону, послС Ρ‡Π΅Π³ΠΎ мСню Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π½ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ.

Figure 2. Π Π°Π·ΠΌΠ΅Ρ€ отобраТСния ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

Если Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ· Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ устройств Π² мСню, ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° измСнится Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² устройства. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌ устройствС. ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ HTML5 ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана устройства, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° JavaScript ΠΈ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΡŽΡ‚ Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ способ отобраТСния ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠ°ΠΊΠ΅Ρ‚ Π±Ρ‹Π» ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ для устройства.

  1. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ NetBeans Π΅Ρ‰Π΅ Ρ€Π°Π· ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€˜Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½ β€” пСйзаТ’ Π² мСню NetBeans.

Figure 3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€˜Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½ β€” пСйзаТ’ Π² мСню NetBeans Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

Π Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° измСняСтся Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° смартфона Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ смоТСт ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ниТняя Ρ‡Π°ΡΡ‚ΡŒ мСню Π±Π΅Π· ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π½Π΅ Π²ΠΈΠ΄Π½Π°.

Figure 4. Π Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° измСняСтся Π½Π° β€˜Π‘ΠΌΠ°Ρ€Ρ‚Ρ„ΠΎΠ½ β€” пСйзаТ’

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ смогут ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ всС мСню Π±Π΅Π· ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π½Π° смартфонС Π² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ.

ИзмСнСниС ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Π£ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ возмоТности внСсСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π½Π΅Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² элСмСнты страницы Π±Π΅Π· примСнСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ. Π­Ρ‚ΠΈ измСнСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Ρ€Π°Π²Π΅Π½ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ смартфона ΠΈΠ»ΠΈ мСньшС. ΠŸΡ€ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° смартфона составляСт 480 пиксСлСй Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ 320 пиксСлСй Π² высоту.

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй носитСлСй

Π’ этом ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠΈ Π±ΡƒΠ΄Π΅Ρ‚ создана новая Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ носитСлСй для устройств с дисплСями, Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌΠΈ смартфонам. ПослС этого Π±ΡƒΠ΄ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ носитСлСй.

  1. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΡƒΠ·Π΅Π» ΠΏΠ°ΠΏΠΊΠΈ css Π² ΠΎΠΊΠ½Π΅ β€˜ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹β€™ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€˜Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒβ€™ > β€˜Π’Π°Π±Π»ΠΈΡ†Π° каскадных таблиц’ Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ мСню.

  2. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ mycss Π² качСствС ΠΈΠΌΠ΅Π½ΠΈ Ρ„Π°ΠΉΠ»Π°. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π“ΠΎΡ‚ΠΎΠ²ΠΎβ€™.

ПослС наТатия ΠΊΠ½ΠΎΠΏΠΊΠΈ β€˜Π“ΠΎΡ‚ΠΎΠ²ΠΎβ€™ Ρ‚Π°Π±Π»ΠΈΡ†Π° Π½ΠΎΠ²Ρ‹Ρ… стилСй открываСтся Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.

  1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ носитСлСй ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй.

/*My rule for smartphone*/
@media (max-width: 480px) {
}

Π›ΡŽΠ±Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π² скобках для этого ΠΏΡ€Π°Π²ΠΈΠ»Π°, Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° составляСт 480 пиксСлСй Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈΠ»ΠΈ мСньшС.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ шаблонов ΠΊΠΎΠ΄Π° для Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ часто. МоТно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΊΠΎΠ΄Π° CSS Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€˜Π¨Π°Π±Π»ΠΎΠ½Ρ‹ кода’ Π² ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ β€˜Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€β€™ ΠΎΠΊΠ½Π° β€˜ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹β€™.

  1. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ измСнСния.

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ index.html Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.

  1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ссылку Π½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <head> Π² index.html . Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ измСнСния.

<link type="text/css" rel="stylesheet" href="css/mycss.css">

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π°Π²Ρ‚ΠΎΠ·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ссылку Π½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ» CSS

  1. Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ NetBeans ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π² мСню β€˜ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅NetBeans’.

  2. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ подсвСчиваСтся, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ Π²Ρ‹Π±Ρ€Π°Π½ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ β€˜ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°β€™. На этом снимкС ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ подсвСчиваСтся синим Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

Figure 5. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ‹Π±Ρ€Π°Π½ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome

Π’ IDE ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈ свойства CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ img , пСрСчислСны Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’. Π’ΠΊΠ»Π°Π΄ΠΊΠ° β€˜Π’Ρ‹Π±ΠΎΡ€β€™ Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Ρ€ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹Π΅ свСдСния ΠΎ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌ элСмСнтС.

Figure 6. Окно β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’, Π³Π΄Π΅ Π²Ρ‹Π±Ρ€Π°Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

ВСрхняя панСль

Π’ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ β€˜Π‘Π²ΠΎΠΉΡΡ‚Π²Π°β€™ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΡˆΠ΅ΡΡ‚ΡŒ ΠΏΠ°Ρ€ свойство-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ элСмСнту img . Π’Ρ€ΠΈ ΠΏΠ°Ρ€Ρ‹ ( border , float ΠΈ margin ) ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS для элСмСнта img . ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Ρ€ΠΈ ΠΏΠ°Ρ€Ρ‹ примСняСтся ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ элСмСнт img наслСдуСт свойства класса срСдств Π²Ρ‹Π±ΠΎΡ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌ, содСрТащим элСмСнт img . ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ структуру DOM Π² ΠΎΠΊΠ½Π΅ β€˜ΠΠ°Π²ΠΈΠ³Π°Ρ‚ΠΎΡ€β€™. Бвойство border Π² настоящСС врСмя Π²Ρ‹Π±Ρ€Π°Π½ΠΎ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ β€˜Π‘Π²ΠΎΠΉΡΡ‚Π²Π°β€™ Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’.

БрСдняя панСль

На срСднСй ΠΏΠ°Π½Π΅Π»ΠΈ β€˜ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ стили’ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ свойство border ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π² ΠΏΡ€Π°Π²ΠΈΠ»Π΅ CSS, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСт элСмСнт img . ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ находится Π½Π° строкС 12 Π² Ρ„Π°ΠΉΠ»Π΅ basecss.css . МоТно Π½Π°ΠΆΠ°Ρ‚ΡŒ мСстополоТСниС Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅.

НиТняя панСль

Π’ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ всС свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² ΠΏΡ€Π°Π²ΠΈΠ»Π΅ CSS для ΠΏΡ€Π°Π²ΠΈΠ»Π°, Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ Π² срСднСй ΠΏΠ°Π½Π΅Π»ΠΈ. Π’ этом случаС Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ для img опрСдСляСт свойства border , float ΠΈ margin-right .

  1. Π’ ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ β€˜Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹β€™.

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΡƒΠ·Π΅Π» css/mycss.css ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS’ (). Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ откроСтся Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ β€˜Π˜Π·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ» CSS’.

Figure 7. Π”ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ β€˜Π˜Π·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ» CSS’

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ элСмСнт Π² качСствС Ρ‚ΠΈΠΏΠ° срСдства Π²Ρ‹Π±ΠΎΡ€Π° ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ img Π² качСствС срСдства Π²Ρ‹Π±ΠΎΡ€Π°.

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ css/mycss.css Π² качСствС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΈ (макс-ΡˆΠΈΡ€:480пкс) ΠΊΠ°ΠΊ At-Rule. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜ΠžΠšβ€™.

Figure 8. Π”ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ β€˜Π˜Π·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡ€Π°Π²ΠΈΠ» CSS’

ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ОК Π² IDE создаСтся ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ CSS для img Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй css/mycss.css ΠΌΠ΅ΠΆΠ΄Ρƒ скобками ΠΏΡ€Π°Π²ΠΈΠ»Π° носитСлСй. НовоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ сСйчас ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ β€˜ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ стили’.

  1. Π’ ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ β€˜Π’Ρ‹Π±ΠΎΡ€β€™.

МоТно Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ имССтся Π΄Π²Π° ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS для img . Одно ΠΈΠ· ΠΏΡ€Π°Π²ΠΈΠ» находится Π² mycss.css , Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ находится Π² basecss.css .

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΠΎΠ²ΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ img (ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ Π² mycss.css ) Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ β€˜ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ стили’ Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’.

Figure 9. Π‘Ρ‚ΠΈΠ»ΠΈ для Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ элСмСнта Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’

Π’ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΠΊΠ½Π° Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ это ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ свойств.

  1. НаТмитС β€˜Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство’ Π² Π»Π΅Π²ΠΎΠΌ столбцС Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΎΠΊΠ½Π° β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’ ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ width.

  1. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ 90px Π² ΠΏΡ€Π°Π²ΠΎΠΌ столбцС Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ² свойства width ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Return.

Figure 10. ПанСль β€˜Π‘Π²ΠΎΠΉΡΡ‚Π²Π° изобраТСния’ Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’

ΠŸΡ€ΠΈ Π²Π²ΠΎΠ΄Π΅ символов Π² столбцС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ отобраТаСтся список часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ свойства width .

ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ клавиши Return ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ автоматичСски мСняСтся Π½Π° 90 пиксСлСй. IDE добавляСт свойство ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ CSS Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй mycss.css . Π’ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Ρ‚Π°Π±Π»ΠΈΡ† стилСй Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ.

/*My rule for smartphone*/
@media (max-width: 480px) {
    img {
        width: 90px;
    }
}

НСкоторыС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ измСнСния Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ внСсСны Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ мСню ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π½Π΅ помСщаСтся Π² ΠΎΠΊΠ½ΠΎ.

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ элСмСнт нСупорядочСнного списка ( <ul> ) Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

Figure 11. Π’Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ список элСмСнтов, Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅

ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ элСмСнта списка Π² ΠΎΠΊΠ½Π΅ β€˜ΠžΠ±Π·ΠΎΡ€ DOM’ выбираСтся элСмСнт <ul> , Π° Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ стили, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ ΠΊ этому элСмСнту.

Figure 12. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ списка, Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Π² ΠΎΠΊΠ½Π΅ β€˜ΠžΠ±Π·ΠΎΡ€ DOM’

Если Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ font-family Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’, Ρ‚ΠΎ Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ свойство ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ font-family ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² срСдствС Π²Ρ‹Π±ΠΎΡ€Π° классов .ui-widget .

  1. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» index.html Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ β€˜Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚β€™ Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’.

  1. Π Π°Π·Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ ΡƒΠ·Π΅Π» css/mycss.css Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’.

Figure 13. Π’Π°Π±Π»ΠΈΡ†Π° стилСй, выбранная Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€˜Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚β€™ ΠΎΠΊΠ½Π° β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’

  1. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS’ () Π² ΠΎΠΊΠ½Π΅ β€˜Π‘Ρ‚ΠΈΠ»ΠΈ CSS’, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ β€˜Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS’.

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€˜ΠšΠ»Π°ΡΡβ€™ ΠΊΠ°ΠΊ β€˜Π’ΠΈΠΏ срСдства выбора’ ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ ui-widget ΠΊΠ°ΠΊ β€˜Π‘Ρ€Π΅Π΄ΡΡ‚Π²ΠΎ выбора’.

  1. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ * css/mycss.css * ΠΊΠ°ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй ΠΈ (макс-ΡˆΠΈΡ€:480пкс) ΠΊΠ°ΠΊ At-Rule. НаТмитС OK.

ПослС Ρ‰Π΅Π»Ρ‡ΠΊΠ° OK Π² IDE добавляСтся Π½ΠΎΠ²ΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй mycss.css ΠΈ открываСтся Ρ„Π°ΠΉΠ» Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅. Если Ρ„Π°ΠΉΠ» Π½Π΅ открываСтся Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ui-widget Π² ΡƒΠ·Π»Π΅ css/mycss.css ΠΎΠΊΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй. ΠšΡƒΡ€ΡΠΎΡ€ помСщаСтся Π² строку, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй.

  1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ свойство ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΎ ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ) ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»Ρƒ для ui-widget .

.ui-widget {
    *font-size: 0.9em;*
}

Когда Π²Ρ‹ измСняСтС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ стилСй, страница автоматичСски обновляСтся Π² ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

МоТно ввСсти свойство ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΊΠΎΠ΄Π° для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ .ui-widget Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство’ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ β€˜Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свойство’.

Figure 14. ΠΠ²Ρ‚ΠΎΠ·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° CSS Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅

ПослС добавлСния ΠΏΡ€Π°Π²ΠΈΠ»Π° Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ мСню Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ помСщаСтся Π½Π° страницС.

Figure 15. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°, просматриваСмая Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, с Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ CSS

  1. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ NetBeans Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π² мСню β€˜ΠŸΠ»Π°Π½ΡˆΠ΅Ρ‚- портрСт’.

ПослС измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π° стало ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ измСнСния Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй Π½Π΅ повлияли Π½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ссли ΡˆΠΈΡ€ΠΈΠ½Π° экрана Π±Ρ‹Π»Π° большС 480 пиксСлСй.

ИспользованиС прСпроцСссоров CSS

Помимо инструмСнтов рСдактирования стандартных Ρ„Π°ΠΉΠ»ΠΎΠ² CSS срСда IDE ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ прСпроцСссоры CSS β€” Sass ΠΈ LESS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ для создания Ρ‚Π°Π±Π»ΠΈΡ† стилСй для ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π’ срСдС IDE прСдусмотрСны мастСра для создания Ρ„Π°ΠΉΠ»ΠΎΠ² прСпроцСссоров CSS ΠΈ указания ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ΠΎΠ². Если ΡƒΠΊΠ°Π·Π°Π½ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³, Ρ„Π°ΠΉΠ»Ρ‹ CSS Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒΡΡ автоматичСски ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ„Π°ΠΉΠ»ΠΎΠ² прСпроцСссора CSS Π² этом ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Для использования прСпроцСссора CSS Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ располоТСниС исполняСмого Ρ„Π°ΠΉΠ»Π°. РасполоТСниС исполняСмого Ρ„Π°ΠΉΠ»Π° ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² ΠΎΠΊΠ½Π΅ β€˜ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹β€™.

  1. УстановитС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС прСпроцСссора CSS Π½Π° локальном ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅.

Π’ срСдС IDE ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ прСпроцСссоры Sass ΠΈ LESS. Π’ этом ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ курсС ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ CSS с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прСпроцСссора Sass. Для прСпроцСссора LESS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ сходная конфигурация.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. ΠŸΡ€ΠΈ установкС прСпроцСссора LESS Π² ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмС X ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ usr/bin присутствуСт Ρ„Π°ΠΉΠ» Node.js. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния см. Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠΈ.

  1. Π Π°Π·Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ структуру ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° HTML5Demo Π² ΠΎΠΊΠ½Π΅ β€˜Π€Π°ΠΉΠ»Ρ‹β€™.

  1. Π’ Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΎΠΊΠ½Π΅ β€˜Π€Π°ΠΉΠ»Ρ‹β€™ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΠΏΠ°ΠΏΠΊΡƒ public_html ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ > Папка Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню.

Если Π² мСню Π½Π΅Ρ‚ ΠΏΡƒΠ½ΠΊΡ‚Π° β€˜ΠŸΠ°ΠΏΠΊΠ°β€™, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€˜Π”Ρ€ΡƒΠ³ΠΈΠ΅β€™ ΠΈ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ Ρ‚ΠΈΠΏ Ρ„Π°ΠΉΠ»Π° β€˜ΠŸΠ°ΠΏΠΊΠ°β€™ Π² ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ β€˜Π”Ρ€ΡƒΠ³ΠΈΠ΅β€™ мастСра создания ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

  1. Π’ ΠΏΠΎΠ»Π΅ β€˜Π˜ΠΌΡ файла’ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ scss. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜Π“ΠΎΡ‚ΠΎΠ²ΠΎβ€™.

ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ β€˜Π“ΠΎΡ‚ΠΎΠ²ΠΎβ€™ Π² мастСрС срСда IDE создаСт Π½ΠΎΠ²ΡƒΡŽ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ Π² ΠΏΠ°ΠΏΠΊΠ΅ public_htmll .

  1. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ ΡƒΠ·Π΅Π» ΠΏΠ°ΠΏΠΊΠΈ scss Π² ΠΎΠΊΠ½Π΅ β€˜ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹β€™ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ > Π€Π°ΠΉΠ» Sass Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ мСню.

  1. Π’ ΠΏΠΎΠ»Π΅ β€˜Π˜ΠΌΡ файла’ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ mysass.

  1. НаТмитС β€˜ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒβ€™. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ откроСтся Π²ΠΊΠ»Π°Π΄ΠΊΠ° β€˜ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€ CSS’ Π² ΠΎΠΊΠ½Π΅ β€˜ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹β€™.

  1. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΏΡƒΡ‚ΡŒ ΠΊ исполняСмому Ρ„Π°ΠΉΠ»Ρƒ Sass ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜ΠžΠ±Π·ΠΎΡ€β€™ ΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ исполняСмый Ρ„Π°ΠΉΠ» Π½Π° локальном ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅. Для закрытия ΠΎΠΊΠ½Π° Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹Β» Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ «ОК».

Figure 16. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°, просматриваСмая Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, с Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ CSS

  1. Π’ мастСрС создания Ρ„Π°ΠΉΠ»ΠΎΠ² Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€˜ΠšΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ Sass ΠΏΡ€ΠΈ сохранСнии’. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ β€˜ΠžΠšβ€™.

Figure 17. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π°, просматриваСмая Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, с Π½ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΌΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ CSS

ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ОК Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ открываСтся Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» Sass mysass. scss .

  1. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты Π² Ρ„Π°ΠΉΠ» mysass.scss ΠΈ сохранитС измСнСния.

img {
    margin-right: 20px;
    float:left;
    border: 1px solid;
    @media (max-width: 480px) {
        width: 90px;
    }
}
.ui-widget {
    @media (max-width: 480px) {
        font-size: 0.9em;
        li {
            color: red;
        }
    }
}

ΠŸΡ€ΠΈ сохранСнии Ρ„Π°ΠΉΠ»Π° прСпроцСссор Sass создаСт Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» CSS mysass.css Π² ΠΏΠ°ΠΏΠΊΠ΅ css . Если ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» mysass.css Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π² Π½Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π°, созданныС Π½Π° основС Ρ„Π°ΠΉΠ»Π° scss . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² Ρ„Π°ΠΉΠ»Π΅ mysass.css гСнСрируСтся отладочная информация CSS. Если отладочная информация большС Π½Π΅ трСбуСтся, ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π΅ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ β€˜ΠŸΡ€Π΅ΠΏΡ€ΠΎΡ†Π΅ΡΡΠΎΡ€Ρ‹ CSS’ Π² ΠΎΠΊΠ½Π΅ β€˜ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹β€™.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ.

  • Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния Π² Ρ„Π°ΠΉΠ» прСпроцСссора Sass mysass. scss , Π° Π½Π΅ Π² Ρ„Π°ΠΉΠ» Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй mysass.css , ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй создаСтся Π·Π°Π½ΠΎΠ²ΠΎ ΠΏΡ€ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ сохранСнии ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° прСпроцСссора.

  • Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΎ синтаксисС Sass ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… Sass см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Sass.

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» index.html ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ссылку Π½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй с mycss.css Π½Π° mysass.css . Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ измСнСния.

<link type="text/css" rel="stylesheet" href="css/*mysass.css*">

ΠŸΡ€ΠΈ сохранСнии Ρ„Π°ΠΉΠ»Π° автоматичСски обновляСтся страница Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ списка Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ красным Ρ†Π²Π΅Ρ‚ΠΎΠΌ.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’ этом ΡƒΡ‡Π΅Π±Π½ΠΎΠΌ курсС описываСтся, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS прилоТСния HTML5 для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ отобраТСния прилоТСния Π½Π° устройствС с мСньшим Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана. Π’Ρ‹ просмотрСли прилоТСния Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±Ρ‹Π» ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ смартфона. Π’Ρ‹ использовали β€˜ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°β€™ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ NetBeans Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Chrome для поиска ΠΏΡ€Π°Π²ΠΈΠ» стилСй, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² соотвСтствии с мСньшим Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана.

ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π² ΠΏΠΎ этому ΡƒΡ‡Π΅Π±Π½ΠΎΠΌΡƒ курсу

Π‘ΠΌ. Ρ‚Π°ΠΊΠΆΠ΅

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ HTML5 Π² IDE см. Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°Ρ… Π½Π° сайтС www.netbeans.org:

  • Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с прилоТСниями HTML5. Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ NetBeans Connector для Chrome, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ созданиС ΠΈ запуск простого прилоТСния HTML5.

  • ΠžΡ‚Π»Π°Π΄ΠΊΠ° ΠΈ тСстированиС JavaScript Π² прилоТСниях HTML5. Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дСмонстрируСт, ΠΊΠ°ΠΊ IDE прСдоставляСт инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΎΡ‚Π»Π°Π΄ΠΊΠ΅ ΠΈ тСстировании Ρ„Π°ΠΉΠ»ΠΎΠ² сцСнариСв JAVA Π² IDE.

  • Π“Π»Π°Π²Π° Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ HTML5 Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ Руководство ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π² IDE NetBeans

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎ jQuery доступны Π² ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ:

  • ΠžΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ домашняя страница: http://jquery.com

  • Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница UI: http://jqueryui.com/

  • Π£Ρ‡Π΅Π±Π½Ρ‹Π΅ курсы: http://docs.jquery.com/Tutorials

  • Главная страница Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ: http://docs. jquery.com/Main_Page

  • ДСмонстрации интСрфСйса ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ докумСнтация: http://jqueryui.com/demos/

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ для Ρ‡Π°ΠΉΠ½ΠΈΠΊΠΎΠ²

Π›ΠΈΠΊΠ±Π΅Π· для UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ хотят ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ ΠΏΡ€ΠΎΡΡ‚ΠΎ Ρ‚Π°ΠΊ, Π° ΠΏΠΎΠ΄ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ.


Бобака Павлова

Π’Π•Π₯ΠΠžΠ›ΠžΠ“Π˜Π˜


ΠŸΠ΅Ρ€Π΅ Π‘ΠΎΡ€Ρ€Π΅Π»ΡŒ дСль Казо, «БСгство ΠΎΡ‚ ΠΊΡ€ΠΈΡ‚ΠΈΠΊΠΈΒ»

Π˜ΡΡ‚ΠΎΡ€ΠΈΡ‡Π΅ΡΠΊΠΈ слоТилось, Ρ‡Ρ‚ΠΎ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΈ Π΄Π΅ΡΠΊΡ‚ΠΎΠΏΠ½Ρ‹Π΅, Π½Π° Π²ΡΠ΅Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΏΠΎΠ½ΠΈΠΌΠ°ΡŽΡ‚ всСго лишь Ρ‚Ρ€ΠΈ Π²Π΅Ρ‰ΠΈ: HTML, CSS ΠΈ JavaScript (Π½Π΅ ΠΏΡƒΡ‚Π°Ρ‚ΡŒ с Java!).

Π‘Ρ‹Π»ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ ΠΏΠΎΠ΄Ρ€ΡƒΠΆΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ тСхнологиями: Visual Basic, Java, ActiveX, β€” Π½ΠΎ Π²ΡΠ΅ ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΠ²Π°Π»ΠΈΠ»ΠΈΡΡŒ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΠΈ ΠΆΠ΅Π»Π΅Π·Π° ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½Π΅ ΡΠΌΠΎΠ³Π»ΠΈ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒΡΡ ΠΎΠ± ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… стандартах. ΠžΡΡ‚Π°Π»ΠΈΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ стандарты, Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ консорциумами ΠΈ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΌΠΈ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌΠΈ. НапримСр, W3C Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ HTML ΠΈ CSS.

Π˜Ρ‚Π°ΠΊ, Ρƒ Π½Π°Ρ Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.

  • HTML ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Ρƒ страницы.
  • CSS β€” Π·Π° Π΅Π΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ (Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ² для Ρ€Π°Π·Π½Ρ‹Ρ… экранов).
  • JavaScript β€” Π·Π° Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΈΠ΅ страницы с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ (ΠΏΠΎ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π΄ΡƒΠΌΠΊΠ΅; сСйчас-Ρ‚ΠΎ ΡƒΠΆΠ΅ практичСски Π²ΠΎΠΎΠ±Ρ‰Π΅ Π·Π° Π²ΡΠ΅).

КаТдая тСхнология развиваСтся нСзависимо, Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π΅ΡΡ‚ΡŒ нСсколько вСрсий. Π‘Π°ΠΌΡ‹Π΅ свСТиС Π½Π° ΡΠ΅Π³ΠΎΠ΄Π½Ρ вСрсии: HTML5, CSS3, ECMAScript 2018 (это стандарт JavaScript).

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Ρ‚ΠΎΠΆΠ΅ Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‚ΡΡ нСзависимо. ΠšΡ‚ΠΎ-Ρ‚ΠΎ (Ρ‚ΠΎ Internet Explorer, Ρ‚ΠΎ Safari) отстаСт ΠΎΡ‚ ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚ΠΎΠ², ΠΊΡ‚ΠΎ-Ρ‚ΠΎ (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Chrome ΠΈΠ»ΠΈ Firefox) Π±Π΅ΠΆΠΈΡ‚ Π²ΠΏΠ΅Ρ€Π΅Π΄ΠΈ ΠΈ Π²Π½Π΅Π΄Ρ€ΡΠ΅Ρ‚ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΠΈΡ‡ΠΈ.

ΠžΡ‚ΡΡŽΠ΄Π° постоянная головная боль Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ²: сайт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π²ΠΎ Π²ΡΠ΅Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ (ΠΏΡ€ΠΈΡ‡Π΅ΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π» Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€). Плюс Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ быстро, бСзопасно ΠΈ Π² ΡΠΎΠΎΡ‚вСтствии со ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ.

Π’Π΄ΠΎΠ±Π°Π²ΠΎΠΊ HTML ΠΈ CSS β€” это Π½Π΅ ΡΠ·Ρ‹ΠΊΠΈ программирования, Π° ΡΠ·Ρ‹ΠΊΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ: ΠΎΠ΄ΠΈΠ½ лишь синтаксис, Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠ°Π½Π΄ β€” конструкций ΠΈ ΠΏΡ€Π°Π²ΠΈΠ» β€” для прСдставлСния содСрТимого страницы. Ну, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, Π² Π½ΠΈΡ… Π½Π΅Ρ‚ ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²Ρ‹Ρ… классов, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², присущих языкам программирования.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π΄Π΅Π»ΠΈΡ‚ΡŒ Π²Π΅Π±-сайт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΈ Π±ΠΈΠ·Π½Π΅Ρ-Π»ΠΎΠ³ΠΈΠΊΠΎΠΉ, приходится ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ язык программирования Π½Π° ΡΡ‚ΠΎΡ€ΠΎΠ½Π΅ сСрвСра ΠΈΠ»ΠΈ Π½Π° ΡΡ‚ΠΎΡ€ΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° (Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅), Π° Ρ‡Π°Ρ‰Π΅ всСго β€” ΠΈ Ρ‚Π°ΠΌ ΠΈ Ρ‚Π°ΠΌ.

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ Javascript β€” Π½Π΅ ΡΠ°ΠΌΡ‹ΠΉ эффСктивный ΠΈ ΠΏΡ€ΠΈΡΡ‚Π½Ρ‹ΠΉ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ язык программирования. БпСциалисты ΠΊΡ€ΠΈΡ‚ΠΈΠΊΡƒΡŽΡ‚ Π΅Π³ΠΎ Π·Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ для самых простых ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ приходится ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ строчСк ΠΊΠΎΠ΄Π°, постоянно ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ.

Π­Ρ‚ΠΎ замСдляСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ. ΠŸΠΎΡ‚ΠΎΠΌΡƒ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡΡ‚Ρ‹ ΠΈΡ‰ΡƒΡ‚ способы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ инструмСнты вмСсто «чистых» JavaScript, HTML ΠΈ CSS.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ с Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ нСэффСктивности всСй этой связки, возьмСм Ρ‚Π°ΠΊΡƒΡŽ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ, ΠΊΠ°ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π°.

Π’ HTML Π΅ΡΡ‚ΡŒ Π½Π°Π±ΠΎΡ€ Ρ‚Π΅Π³ΠΎΠ² для создания Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ (основныС ΠΈΠ· Π½ΠΈΡ… β€” table, th, tr, td). Π‘ ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ сСтку Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ настройками внСшнСго Π²ΠΈΠ΄Π°: Π·Π°Π΄Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ячССк ΠΈ Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ всё.

Π”ΠΎΠ±Π°Π²ΠΈΠ² CSS, ΠΌΠΎΠΆΠ½ΠΎ (изрядно ΠΏΠΎΠΌΡƒΡ‡Π°Π²ΡˆΠΈΡΡŒ) ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ Π΅ΠΉ ΠΏΡ€ΠΈΡΡ‚ΠΎΠΉΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ ΠΈ ΠΏΡ€ΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠΌ старании Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ для Ρ€Π°Π·Π½Ρ‹Ρ… экранов. Но ΠΌΡ‹ Π²ΡΠ΅ Ρ€Π°Π²Π½ΠΎ Π½Π΅ ΡΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ»ΠΈ нСскольким ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ, ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ порядок сортировки, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΡΡ‚ΠΎΠ»Π±Ρ†Ρ‹, ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ ячСйки Π² Π΄Ρ€ΡƒΠ³ΡƒΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒΠ»Ρ‹ для подсчСта сумм ΠΏΠΎ ΡΡ‚Ρ€ΠΎΠΊΠ°ΠΌ ΠΈ ΡΡ‚ΠΎΠ»Π±Ρ†Π°ΠΌ, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ условноС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ячССк (ΠΏΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΈΡ‚ΡŒ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€) ΠΈ Ρ‚. ΠΏ.

Всё это Π½Π° HTML ΠΈ CSS Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² HTML Π½Π΅Ρ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, ΠΊΠ°ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π°, ΠΈ Π½Π΅Ρ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π½Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈΡΡŒ Π±Ρ‹ Π»ΡŽΠ±Ρ‹ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ стандарта 20 Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄ Π½Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ захотят Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΡΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΡ‹ΠΌ Π²Π΅Π±-страницы.

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Ρƒ Π½Π°Ρ Π±ΡƒΠ΄ΡƒΡ‚, Ссли ΠΌΡ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΠΌ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π½Π° ΡΠ°ΠΉΡ‚ ΠΏΠ°Ρ‡ΠΊΡƒ Ρ„Π°ΠΉΠ»ΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΊ ΠΏΠΈΡΡŒΠΌΡƒ Π² Π²Π΅Π±-ΠΏΠΎΡ‡Ρ‚Π΅), Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π°ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ встрСчу Π² ΠΊΠ°Π»Π΅Π½Π΄Π°Ρ€Π΅) ΠΈΠ»ΠΈ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈ Ρ‚Ρƒ ΠΆΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ способами (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ ΠΏΠΎ ΠΆΠ΅Π»Π°Π½ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ строками).

Для всСго этого Π² HTML ΠΈ CSS Π½Π΅Ρ‚ подходящих Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ JavaScript β€” язык программирования, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ Π² ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π΅ HTML ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ Π½ΠΈΠΌ стили CSS.

Когда-Ρ‚ΠΎ для этого использовали Π΄Ρ€ΡƒΠ³ΠΈΠ΅ языки (Visual Basic, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€), ΠΏΡ‹Ρ‚Π°Π»ΠΈΡΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ (Adobe Flash, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€), Π½ΠΎ JavaScript всСх вытСснил. И Π½Π΅ Π² ΠΏΠΎΡΠ»Π΅Π΄Π½ΡŽΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ благодаря JavaScript-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌ.

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π½Π° JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Ρƒ ΠΆΠ΅ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΡƒ Ρ‚Π°Π±Π»ΠΈΡ†, β€” это, разумССтся, Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ дТСдая.

И ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ β€” Π½Π°Π±ΠΎΡ€Ρ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π½Π° JavaScript, Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‰ΠΈΠ΅ Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ с HTML-ΠΊΠΎΠ΄ΠΎΠΌ страницы. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ β€” jQuery.

Π­Ρ‚ΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π·Π° Π΄Π²Π°Π΄Ρ†Π°Ρ‚ΡŒ с Π»ΠΈΡˆΠ½ΠΈΠΌ Π»Π΅Ρ‚ сущСствования JavaScript появилось Π²Π΅Π»ΠΈΠΊΠΎΠ΅ мноТСство. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡΡ‚Π°ΠΌ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Π΄Ρ€ΡƒΠΆΠΈΡ‚ΡŒ ΠΈΡ… ΠΌΠ΅ΠΆΠ΄Ρƒ собой, ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ (вСдь каТдая развиваСтся своим Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠΌ), ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ. Π”Π° Π΅Ρ‰Π΅ самим ΠΊΠΎΠ΄ ΠΏΠΈΡΠ°Ρ‚ΡŒ β€” Π½Π΅ Π²ΡΠ΅ ΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°Ρ….

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ Π΄ΠΎ ΡΠΈΡ… ΠΏΠΎΡ€ ΠΆΠΈΠ²Π΅Ρ‚. Π’ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… достаточно ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΎΠ΄Π½Ρƒ-Π΄Π²Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠΉ. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ красивыС Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ бСсплатный Chart.js ΠΈΠ»ΠΈ ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΉ AmCharts. Если Π½ΡƒΠΆΠ½Π° анимация ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ интСрфСйса β€” Ρ‚ΠΎΡ‚ ΠΆΠ΅ jQuery, для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ интСрфСйса Π΅ΡΡ‚ΡŒ смысл Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° Sencha Ext JS ΠΈ Ρ‚. ΠΏ.

И Ρ‚ΡƒΡ‚ появились Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ

Для HTML+CSS Ρ‚ΠΎΠΆΠ΅ стали ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ Β«ΠΏΠΎΠ»ΡƒΡ„Π°Π±Ρ€ΠΈΠΊΠ°Ρ‚Ρ‹Β» β€” Π·Π°Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ ΠΈΠ· ΠΊΡƒΡΠΊΠΎΠ² ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ вСрстки. НапримСр, многоколоночная вСрстка, Π·Π°ΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π½Ρ‹ΠΉ Π½Π° ΡΡ‚Ρ€Π°Π½ΠΈΡ†Π΅ Ρ…Π΅Π΄Π΅Ρ€ ΠΈΠ»ΠΈ Ρ„ΡƒΡ‚Π΅Ρ€ ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Π³ΠΎΠ΄Π½Π΅Π΅ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π² Π½ΠΎΠ²Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

Π’Π°ΠΊ появились ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-каркасы Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΠΈΠ»ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΎΠ½ΠΈ Π½Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ? ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это Π½Π΅ Π½Π°Π±ΠΎΡ€ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π΅Ρ‡Π½ΠΎ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… страницах.

ΠšΠ°Ρ€ΠΊΠ°Ρ (Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ) ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ вСсь ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΠΈΠΌ ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π΅. Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½ Π·Π°Π΄Π°Π΅Ρ‚ ограничСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ, Ρ‚ΠΎΡ‡Π½Π΅Π΅ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ стандартам, ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ ΠΏΠΎΡ€ΠΎΠ³ вхоТдСния Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈ Ρ‚. ΠΏ.

Π‘Π°ΠΌΡ‹ΠΉ извСстный ΠΎΠ±Ρ€Π°Π·Π΅Ρ† HTML+CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° β€” Bootstrap (Π²ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, Π²ΠΎΡ‚ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² β€” ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ, Π²ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ β€” ΠΊΠ½ΠΎΠΏΠΊΠΈ).

Π’Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ всС сдСлано Π½Π° ΡΡ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹Ρ… HTML ΠΈ CSS ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ (ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ) Π²ΠΎ Π²ΡΠ΅Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ ΡƒΠΆΠ΅ содСрТат ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½Π½Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ ΠΊ Π΄Ρ€ΡƒΠ³Ρƒ совмСстимыС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ, ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ ограничСния ΠΈ Π·Π°Π±ΠΎΡ‚ΠΈΡ‚ΡŒΡΡ ΠΎ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚имости. Π’Π°ΠΊ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Bootstrap содСрТат ΠΊΠΎΠ΄ Π½Π° JavaScript с ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery.

Π”Ρ€ΡƒΠ³ΠΎΠΉ извСстный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, Foundation, ΠΊΡ€ΠΎΠΌΠ΅ jQuery ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Modernizr ΠΈ FastClick.

Π”Π²Π° Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΊΠΎΠ½ΠΊΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π° Π±Π°Π·ΠΎΠ²Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΎΠ΄ΠΈΠ½ Π·Π°Ρ…ΠΎΡ‡Π΅Ρ‚ 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку, Π΄Ρ€ΡƒΠ³ΠΎΠΉ β€” 16-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ; ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ названия ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² JavaScript для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ ΠΈ Ρ‚. Π΄.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΠ΅ΠΆΠ΄Ρƒ собой Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ нСсовмСстимы: Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½. Если Ρƒ вас ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π° Bootstrap, Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ Π²ΠΎΡ‚ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠΈ ΠΈΠ· Foundation β€” Ρ‚ΠΎ ΠΏΠΎΠΆΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… Π½Π΅ получится. (Но ΠΌΠΎΠΆΠ½ΠΎ самому Π·Π°ΠΏΠΈΠ»ΠΈΡ‚ΡŒ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠΈ для Bootstrap ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, ΠΊΡ‚ΠΎ-Ρ‚ΠΎ это ΡƒΠΆΠ΅ сдСлал.)

Π’Π°ΠΊ Π²ΠΎΡ‚, ΠΈΠ΄Π΅ΠΌ дальшС

Главная ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° соврСмСнного Π²Π΅Π±Π° β€” Ρ€Π°Π·Ρ€ΠΎΠ·Π½Π΅Π½Π½ΠΎΡΡ‚ΡŒ тСхнологичСского стСка. НСвозмоТно Π²Ρ‹ΡƒΡ‡ΠΈΡ‚ΡŒ всС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Π·Π½Π°Ρ‚ΡŒ ΠΈ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ.

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡΡ‚Ρ‹ Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ подСлились Π½Π° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ ΠΈ Π±ΡΠΊΠ΅Π½Π΄. А Π΅Ρ‰Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ, Π½Π΅ Π³ΠΎΠ²ΠΎΡ€Ρ ΡƒΠΆΠ΅ ΠΏΡ€ΠΎ Π°Π΄ΠΌΠΈΠ½ΠΎΠ² Π‘Π”, сисадминов, Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΈ Π½ΡƒΠΆΠ½Ρ‹Ρ… людСй.

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ прилоТСния трСбуСтся ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… спСциалистов, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ СстСствСнноС ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ. Если Π³ΠΎΠΌΠΎΠ³Π΅Π½ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСхнологичСский стСк β€” Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ Π½Π°Π±ΠΎΡ€ HTML-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ Ρ‚Ссно ΠΏΠΎΠ΄Ρ€ΡƒΠΆΠΈΡ‚ΡŒ ΠΈΡ… Ρ Π±ΡΠΊΠ΅Π½Π΄ΠΎΠΌ β€” Ρ‚ΠΎ Ρ„улстСк-программист смоТСт Π²Π·ΡΡ‚ΡŒ Π½Π° ΡΠ΅Π±Ρ всю Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ, ΠΎΡ‚ Ρ…ранСния Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ взаимодСйствия.

Π’ Ρ‚ΠΎ Π²Ρ€Π΅ΠΌΡ (Ρ€Π΅Ρ‡ΡŒ сСйчас ΠΈΠ΄Π΅Ρ‚ ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²ΠΎΠΉ мысли дСсятилСтнСй давности) страницу ΠΈΠ· ΡΡ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Ρ‹ ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… собирал сСрвСр. Π‘Ρ€Π°Π» Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· Π‘Π”, Π±Ρ€Π°Π» шаблон страницы, заполнял Π΅Π³ΠΎ, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π» Π½ΡƒΠΆΠ½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Ρ‹ ΠΈ ΠΎΡ‚правлял Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ.

Π‘Ρ‚Π°Π»ΠΈ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ сСрвСрныС Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° Π±ΡΠΊΠ΅Π½Π΄Π΅ ΠΊΠΎΠ΄, автоматичСски Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ вСрстку:

  • GWT ΠΈ Vaadin β€” спСциализированы для Java;
  • Telerik β€” для .NET;
  • Kivy β€” для Python;
  • Shoes β€” для Π ΡƒΠ±ΠΈ ΠΈ Ρ‚. Π΄.

JavaScript наступаСт

И Π²ΠΎΡ‚ Π² 2009 Π³ΠΎΠ΄Ρƒ β€” вСсьма ваТная Π²Π΅Ρ…Π° Π² ΠΈΡΡ‚ΠΎΡ€ΠΈΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ β€” появился NodeJS, программная ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°, которая сущСствСнно Ρ€Π°ΡΡˆΠΈΡ€ΠΈΠ»Π° возмоТности JavaScript.

И ΠΊΠΎΠ³Π΄Π° Π΅Ρ‰Π΅ Ρ‡Π΅Ρ€Π΅Π· ΠΏΠ°Ρ€Ρƒ Π»Π΅Ρ‚ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ ΠΊΠΎΠΌΡŒΡŽΠ½ΠΈΡ‚ΠΈ, стандарты ΠΈ Ρ‚. ΠΏ., программисты смогли ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ язык программирования ΠΈ Π½Π° ΡΡ‚ΠΎΡ€ΠΎΠ½Π΅ сСрвСра, ΠΈ Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅. Π­Ρ‚ΠΎ ΡƒΠΊΡ€Π΅ΠΏΠΈΠ»ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ JavaScript, хотя мСйнстримом для сСрвСрной Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΎΠ½ Ρ‚Π°ΠΊ ΠΈ Π½Π΅ ΡΡ‚Π°Π».

На Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅ Ρ‚Π΅ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ Π½Π°Ρ‡Π°Π»Π°ΡΡŒ Π±ΠΎΡ€ΡŒΠ±Π° Π·Π° ΠΊΠ°Ρ‡Π΅ΡΡ‚Π²ΠΎ ΠΊΠΎΠ΄Π°. Π’ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ клиСнтской части Π½Π° JavaScript с ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ jQuery ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ ΠΎΡ‚личался Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠ΅ΠΉ: ΠΏΠΈΡΠ°Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ, Ρ‡ΠΈΠ½ΠΈΡ‚ΡŒ слоТно. JavaScript-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Π»ΠΈ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ это: ΠΎΠ½ΠΈ навязывали Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ структуру ΠΊΠΎΠ΄Π°, Π²Π·Π°ΠΌΠ΅Π½ позволяя ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠΌ.

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ, спСциализированныС ΠΏΠΎΠ΄ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ бэкСнд, оказались Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄Π°Ρ‡Π½Ρ‹ΠΌ экспСримСнтом. Π”Π°ΠΆΠ΅ PhoneGap β€” Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΏΠΎΠ΄ «Андроид» β€” Ρ‚ΠΈΡ…ΠΎΠ½ΡŒΠΊΠΎ ΡƒΠΌΠΈΡ€Π°Π΅Ρ‚, вытСсняСмая ReactNative (Π΄ΠΎ Π½Π΅Π³ΠΎ ΠΌΡ‹ Π΅Ρ‰Π΅ Π΄ΠΎΠΉΠ΄Π΅ΠΌ). Π₯отя Π²ΠΎΡ‚ спСциализированныС Vaadin ΠΈ Telerik Π²Ρ‹ΠΆΠΈΠ»ΠΈ ΠΈ Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‚ся своим Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠΌ.

Π Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ

Π›Π΅Ρ‚ ΠΏΡΡ‚ΡŒ Π½Π°Π·Π°Π΄ появилась Π²ΠΏΠΎΠ»Π½Π΅ здравая идСя β€” ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ сайтов ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΎΠΏΠ΅Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ шаблонов, Ρ€Π°Π·ΡƒΠΌΠ½ΠΎ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚ΡŒ прСдставлСниС Π΄Π°Π½Π½Ρ‹Ρ… ΠΎΡ‚ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΠΎ Π΄Π°Π½Π½Ρ‹Ρ….

ΠŸΡƒΡΡ‚ΡŒ бэкСнд занимаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ…Ρ€Π°Π½Π΅Π½ΠΈΠ΅ΠΌ, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ ΠΈ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒΡŽ Π΄Π°Π½Π½Ρ‹Ρ… (ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅Ρ‚ ΠΈΡ… ΠΈΠ· Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π°, провСряСт Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΏΡ€Π°Π² доступа, ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ ΠΈΡ… Π½Π° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄), Π° Π²ΡΡ‘ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΡ€ΡƒΡ‡ΠΈΠΌ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ (Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ). Π”Π°Π΄ΠΈΠΌ Π΅ΠΌΡƒ ΠΏΠ°Ρ‡ΠΊΡƒ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½ β€” Π½Π°Π±ΠΎΡ€ инструкций ΠΏΠΎ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΡŽ Π΄Π°Π½Π½Ρ‹Ρ… Π² Π²Π΅Ρ€ΡΡ‚ΠΊΡƒ. Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π² ΡˆΠ°Π±Π»ΠΎΠ½, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ бизнСс-Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ страницСй, Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ΡŒ красоту ΠΈ Ρ‚. ΠΏ.

Π’Π°ΠΊΠΈΠ΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² Π½ΠΈΡ… состояниС интСрфСйса автоматичСски Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ…. Если ΡΠΊΠ°Π·Π°Ρ‚ΡŒ Β«Π²ΠΎΡ‚ эта пСрСмСнная управляСт Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π²ΠΎΠ½ Ρ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈΒ», Π° ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ β€” Ρ†Π²Π΅Ρ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ измСнится сам, ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡˆΠΈΠ²Π°Ρ‚ΡŒ Π΅Π΅ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π½Π΅ Π½Π°Π΄ΠΎ.

NB: Π Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ β€” Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎΠΏΠΎΡ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ вмСсто систСмы «запрос β€” ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΠ΅ ΠΎΡ‚Π²Π΅Ρ‚Π° β€” ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΎΡ‚Π²Π΅Ρ‚Π° β€” ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°Β» Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ «запрос (послали ΠΈ Π·Π°Π±Ρ‹Π»ΠΈ) β€” ΠΎΡ‚Π²Π΅Ρ‚ β€” ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΎΡ‚Π²Π΅Ρ‚Π°Β».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹: React, Angular, Vue ΠΈ Π΅Ρ‰Π΅ дСсятки ΠΌΠ΅Π½Π΅Π΅ извСстных.

Π˜Ρ‚Π°ΠΊ, Π½Π° Π±ΡΠΊΠ΅Π½Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой язык программирования, Π΄ΠΎΠ±Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΠΌ Π΄Π°Π½Π½Ρ‹Π΅, ΡƒΠΏΠ°ΠΊΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ… Π² JSON, XML ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ машинно-Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΠ΅ ΠΈ ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π° Ρ„Ρ€ΠΎΠ½Ρ‚.

А Π½Π° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅ JS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π΄Π΅Π»Π°Π΅Ρ‚ всю Ρ‡ΠΈΡΡ‚ΠΎΠ²ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ: рисуСт ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Ρ‹, Π°Π½ΠΈΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΡ…, провСряСт Π΄Π°Π½Π½Ρ‹Π΅, прСдставляСт ΠΈΡ… Π² ΡΠΎΠΎΡ‚вСтствии с Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ настройками ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ бизнСс-Π»ΠΎΠ³ΠΈΠΊΡƒ.

Ну Π²ΠΎΡ‚ Ρ‚Π΅ ΠΆΠ΅ ΡΠ°ΠΌΡ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π§Ρ‚ΠΎ с Π½ΠΈΠΌΠΈ Π΄Π΅Π»Π°Π»Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° jQuery β€” ΠΈ ΠΊΠ°ΠΊ ΠΏΠΎΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚ Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ?

  • jQuery: Ρ‚Π°Π±Π»ΠΈΡ†Π° вмСстС с Π΄Π°Π½Π½Ρ‹ΠΌΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π±Ρ‹Π»Π° Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° Π½Π° ΡΠ΅Ρ€Π²Π΅Ρ€Π΅, Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ jQuery Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π»Π° этой Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, сортировала Π΅Π΅).
  • React, Angular, Vue: структура Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ гСнСрируСтся Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ прямо Π½Π° ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π΅, Π² Π½Π΅Π΅ Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈΡˆΠ΅Π΄ΡˆΠΈΠ΅ с ΡΠ΅Ρ€Π²Π΅Ρ€Π° Π΄Π°Π½Π½Ρ‹Π΅.

ΠœΠ΅ΠΆΠ΄Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΈ ΡΠ΅Ρ€Π²Π΅Ρ€ΠΎΠΌ ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ ΠΈΠ½ΠΎΠ³Π΄Π° β€” Π½ΠΎΠ²Ρ‹Π΅ куски шаблона ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π°. Π Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Π½Π΅Π·Π°ΠΌΠ΅Π½ΠΈΠΌΡ‹ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Single Page Application, ΠΊΠΎΠ³Π΄Π° всё происходит Π½Π° ΠΎΠ΄Π½ΠΎΠΌ экранС.

Надстройки

JS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ сразу ΠΆΠ΅ обросли Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ GUI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΈΠ»ΠΈ надстройками, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Π΅ вопросы ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ³ΠΎ ΠΈ Π±ΠΎΠ³Π°Ρ‚ΠΎΠ³ΠΎ GUI Π² Ρ€Π°ΠΌΠΊΠ°Ρ… ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² мноТСство: KendoUI β€” Π½Π°Π±ΠΎΡ€ UI-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ для jQuery, React, Angular ΠΈ Vue, ReactStrap β€” Bootstrap для React, ReactNative β€” GUI Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΎΡ‚ «ЀСйсбука» ΠΈ Ρ‚. Π΄.

НСкоторыС надстройки Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ для Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠ², Onsen, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ»ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ KendoUI. Если ΠΊΠ»ΠΈΠ΅Π½Ρ‚ собираСтся Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ соврСмСнным способом (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ HTML5 SPA / HybridApp), Π½ΠΎ ΠΏΠΎΠΊΠ° Π½Π΅ Π·Π½Π°Π΅Ρ‚, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React, Angular ΠΈΠ»ΠΈ Vue, Ρ‚ΠΎ Π½ΡƒΠΆΠ½Π° ΠΎΠ΄Π½Π° ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Ρ… надстроСк.

Π˜Ρ‚Π°ΠΊ, Π²ΠΎΡ‚ ΠΊΠ°ΠΊ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ выглядит Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ»ΠΈ мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅:

  • бэкСнд Π½Π° Π»ΡŽΠ±ΠΎΠΌ языкС программирования;
  • Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ состоящий ΠΈΠ· JS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° (React, Angular, Vue) ΠΈ Π½Π°Π΄ΡΡ‚Ρ€ΠΎΠ΅ΠΊ.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊ KendoUI Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Grid ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Π»ΡŽΠ±ΠΎΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π½Π° React ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ сразу ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡŽ, ΠΈ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΡƒ, ΠΈ ΡΠΊΡΠΏΠΎΡ€Ρ‚ Π² Excel ΠΈ PDF, ΠΈ Π²ΡΡ‘ Ρ‡Ρ‚ΠΎ ΡƒΠ³ΠΎΠ΄Π½ΠΎ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это ΠΌΠΎΠΆΠ½ΠΎ Β«ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈΒ» Π² Π»ΡŽΠ±ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ с Π»ΡŽΠ±Ρ‹ΠΌ языком программирования Π½Π° Π±ΡΠΊΠ΅Π½Π΄Π΅, лишь Π±Ρ‹ Π½Π° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅ Π±Ρ‹Π» React.

Π’ΠΎΡ‚ Ρ‚ΡƒΡ‚ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ надстройки (GUI-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ) ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅:

  • Hacker Noon: 23 Best React UI Component Libraries And Frameworks;
  • Bits and Pieces: 11 Angular Component Libraries You Should Know In 2018;
  • Bits and Pieces: 11 Vue UI Component Libraries You Should Know In 2018.

8 Π°ΠΏΡ€Π΅Π»Ρ 2019

Бобака Павлова

we@sobakapav.ru

Π”ΠΈΠ·Π°ΠΉΠ½ слоТных интСрфСйсов

Π”ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ΄ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ Bootstrap ΠΈ Vaadin ΠΎΡ‚ Β«Π‘ΠΎΠ±Π°ΠΊΠΈ Павловой»

ΠœΠ½ΠΎΠ³ΠΎΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ систСма бронирования ΠΊΡ€ΡƒΠΈΠ·Π½Ρ‹Ρ… ΠΈ ΠΏΠ°Ρ€ΠΎΠΌΠ½Ρ‹Ρ… ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ·ΠΎΠΊ β€’ Π‘ΠΎΡ€Π°

Упростили интСрфСйс слоТной систСмы бронирования: ΠΏΡ€ΠΎΠ²Π΅Π»ΠΈ быстрый UX-Π°ΡƒΠ΄ΠΈΡ‚, нашли самыС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ½Ρ‹Π΅ мСста ΠΈ сдСлали Ρ‚ΠΎΡ‡Π΅Ρ‡Π½Ρ‹ΠΉ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½ систСмы.

Π”ΠΈΠ·Π°ΠΉΠ½ систСмы элСктронного Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΎΠ±ΠΎΡ€ΠΎΡ‚Π° для ΠΏΠΈΠ²ΠΎΠ²Π°Ρ€Π΅Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ†Π΅Ρ€Π½Π°

Упростили интСрфСйс систСмы Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΎΠ±ΠΎΡ€ΠΎΡ‚Π° Π½Π° ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΌ ΠΏΠΈΠ²ΠΎΠ²Π°Ρ€Π΅Π½Π½ΠΎΠΌ прСдприятии, ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΠ»ΠΈ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° оформлСния ΠΈ свСрстали UI-kit.

Π”ΠΈΠ·Π°ΠΉΠ½ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ мСста страхового Π°Π³Π΅Π½Ρ‚Π° β€’ ΠΠ»ΡŒΡ„Π°ΡΡ‚Ρ€Π°Ρ…ΠΎΠ²Π°Π½ΠΈΠ΅

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Π΅Π΄ΠΈΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ интСрфСйс для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² сотрудников ΠΠ»ΡŒΡ„Π°ΡΡ‚Ρ€Π°Ρ…ΠΎΠ²Π°Π½ΠΈΡ, повысили ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ систСмы ΠΈ снизили ΠΏΠΎΡ€ΠΎΠ³ вхоТдСния для Π½ΠΎΠ²Ρ‹Ρ… страховых Π°Π³Π΅Π½Ρ‚ΠΎΠ².

Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ


Как ΡƒΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° Ρ‚Ρ€Π΅Π½Π΄Π°ΠΌΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, Ссли Π²Ρ‹ Π½Π΅ программист

НС Π½Π°Π΄Π΅ΠΉΡ‚Π΅ΡΡŒ Π½Π° ΠΊΠ½ΠΈΠ³ΠΈ β€” ΠΏΠΎΠΊΠ° ΠΈΡ… Π½Π°ΠΏΠΈΡˆΡƒΡ‚, Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ Π±ΡƒΠ΄ΡƒΡ‚ Π²Π»Π°Π΄Π΅Ρ‚ΡŒ всС, ΠΊΠΎΠΌΡƒ Π½Π°Π΄ΠΎ. На русский язык Ρ‚ΠΎΠΆΠ΅ Π½Π΅ Π½Π°Π΄Π΅ΠΉΡ‚Π΅ΡΡŒ β€” ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π±ΡƒΠ΄ΡƒΡ‚ Π΅Ρ‰Π΅ дольшС. И ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° БМИ.


Π₯Π°ΠΉΠΏΠ°Π½ΡƒΡ‚ΡŒ Π½Π° Π±Π»ΠΎΠΊΡ‡Π΅ΠΉΠ½Π΅

Π‘Π»ΠΎΠΊΡ‡Π΅ΠΉΠ½ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ Π·Π°Π΄Π°Ρ‡Ρƒ византийских Π³Π΅Π½Π΅Ρ€Π°Π»ΠΎΠ² β€” ΠΈ это Π΅Π³ΠΎ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ достоинство. Если Ρƒ стартапа Π½Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΡ… Π·Π°Π΄Π°Ρ‡, скорСС всСго, Π΅ΠΌΡƒ ΠΈ Π½Π΅ Π½ΡƒΠΆΠ΅Π½ Π±Π»ΠΎΠΊΡ‡Π΅ΠΉΠ½.


Π‘ΠΎΡ‚ Π² инструмСнтах no code. Π”Π΅Ρ‚Π°Π»ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ

РассказываСм, ΠΊΠ°ΠΊ собрали Ρ‡Π°Ρ‚-Π±ΠΎΡ‚Π° Π½Π° сСрвисах Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ дСнь присылаСт ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΈΠ· Π°Ρ€Ρ…ΠΈΠ²Π° ΠΈ просит ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π».


Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² HTML

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² HTML

  • БайтостроСниС
  • Π‘Ρ‚Π°Ρ‚ΡŒΠΈ
  • ВСрстка сайта
  • HTML/xHTML

15.03.1453153

Π’ языкС Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для прСдставлСния ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π΄Π°Π½Π½Ρ‹Ρ… Π² Π²ΠΈΠ΄Π΅ строк ΠΈ столбцов, Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ срСдство форматирования страниц ΠΈ задания располоТСния Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов.

Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Π² HTML ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ вовсС Π½Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ каркаса, занимая всю Π²Π΅Π±-страницу.

МоТно ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π΅Ρ‘ Π»Π΅Π²Ρ‹ΠΉ столбСц мСню, ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² срСдний, Π° ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ β€” Π² ΠΏΡ€Π°Π²Ρ‹ΠΉ.

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² HTML?

Π‘ΠΎΠ·Π΄Π°Π΄ΠΈΠΌ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ Ρ‚Ρ€ΠΈ ячСйки ΠΎΠ΄Π½ΠΎΠΉ строки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅ ΠΊΠΎΠ΄Π°:

<body>

<table>

<tr>

<td>Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† 1</td>

<td>Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† 2</td>

<td>Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† 3</td>

</tr>

</table>

</body>

Π’ ΠΎΠΊΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ созданная Ρ‚Π°Π±Π»ΠΈΡ†Π° выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π’Π°Π±Π»ΠΈΡ†Π° начинаСтся с Ρ‚Π΅Π³Π° <table> ΠΈ заканчиваСтся ΠΏΠ°Ρ€Π½Ρ‹ΠΌ Π΅ΠΌΡƒ </table>. Всё содСрТимоС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ описываСтся свСрху Π²Π½ΠΈΠ· ΠΏΠΎ строкам, каТдая ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… начинаСтся с Ρ‚Π΅Π³Π° <tr> ΠΈ заканчиваСтся </tr>.

Π―Ρ‡Π΅ΠΉΠΊΠΈ строки ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² <td> ΠΈ </td>. Π’ ячСйку Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ тСкст, Ρ‚Π°ΠΊ ΠΈ графичСскиС Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ Π΄Π°ΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

  • Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Ρ€Π°ΠΌΠΊΠΈ
  • Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ тСкста
    • ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² HTML
    • Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² HTML
    • Вставка изобраТСния Π² HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ
    • ОбъСдинСниС ячССк Π² HTML Ρ‚Π°Π±Π»ΠΈΡ†Π΅
  • Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ HTML Ρ‚Π°Π±Π»ΠΈΡ†

Π“Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Ρ€Π°ΠΌΠΊΠΈ

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π½Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Ρ‘ ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° border Ρ‚Π΅Π³Π° <table>. Однако, ΠΈΠ½ΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Ρ‚Π°ΠΊΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ, поэтому Π»ΡƒΡ‡ΡˆΠ΅ Π΄Π°Π½Π½Ρ‹ΠΉ процСсс Π²ΠΎΠ·Π»ΠΎΠΆΠΈΡ‚ΡŒ Π½Π° Ρ€Π°Π±ΠΎΡ‚Ρƒ со стилями:

<body>

<table border=Β»1β€³>

<tr>

<td>Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† 1</td>

<td>Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† 2</td>

<td>Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† 3</td>

</tr>

</table>

</body>

Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ тСкста

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ HTML, строки ΠΈΠ»ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ячСйки, ΠΊ Ρ‚Π΅Π³Π°ΠΌ <table>, <td> ΠΈ <tr> ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:

  • background β€” Π² качСствС Ρ„ΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π£ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈΠ±ΠΎ имя Ρ„Π°ΠΉΠ»Π°, Π»ΠΈΠ±ΠΎ ΠΏΡƒΡ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ;
  • bgcolor β€” Ρ„ΠΎΠ½ΠΎΠΌ являСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚. Π£ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ°, Ρ‚Π°ΠΊ ΠΈ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄.

Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ тСкста Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ HTML, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ <font>.

НапримСр:

<table border=Β»1β€³ bgcolor=Β»greenΒ»>

<tr bgcolor=Β»blueΒ»>

<td><font color=Β»whiteΒ»>Π―Ρ‡Π΅ΠΉΠΊΠ° 1</font></td>

<td bgcolor=Β»redΒ»></td>

</tr>

<tr>

<td background=Β»http://t2. gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPWΒ»>Π―Ρ‡Π΅ΠΉΠΊΠ° 3</td>

<td>Π―Ρ‡Π΅ΠΉΠΊΠ° 4</td>

</tr>

</table>

ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² HTML

Π’ HTML отступы Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π·Π°Π΄Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° <table>:

  • cellspacing β€” расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ сосСдних ячССк;
  • cellpading β€” расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ содСрТимым ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ ячСйки.

НапримСр:

<table border=Β»1β€³ bgcolor=Β»greenΒ» cellspacing=Β»20β€³ cellpadding=Β»20β€³>

<tr bgcolor=Β»blueΒ»>

<td><font color=Β»whiteΒ»>Π―Ρ‡Π΅ΠΉΠΊΠ° 1</font></td>

<td bgcolor=Β»redΒ»></td>

</tr>

<tr>

<td>

background=Β»http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPWΒ»>Π―Ρ‡Π΅ΠΉΠΊΠ° 3</td>

<td>Π―Ρ‡Π΅ΠΉΠΊΠ° 4</td>

</tr>

</table>

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Ρ‚Π°ΠΊΠΎΠ²ΠΎ:

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² HTML

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ячСйки ΠΈΠ»ΠΈ строки Π·Π°Π΄Π°Ρ‚ΡŒ Π΄Π²Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ (align) ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ (valign) Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ HTML.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ align ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния:

  • left β€” Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅;
  • right β€” Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΠΏΡ€Π°Π²ΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅;
  • center β€” Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ valign ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ значСния:

  • bottom β€” Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅;
  • top β€” Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹;
  • middle β€” Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ посСрСдинС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

<table border= Β«1Β»>

<td>ВСкст 1</td>

<td align=Β»rightΒ» valign=Β»topΒ»>ВСкст 2</td>

</table>

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ Π² HTML? Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ упомянутого значСния center.

НапримСр:

Π― ндСкс.Π”ΠΈΡ€Π΅ΠΊΡ‚ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π·Π° ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΠΌΠΈ mrspro.ru Π”Π°Π½Π½Ρ‹Π΅ ΠΎ Ρ…ΠΎΠ΄Π΅  ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²Π°  Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ всСм участникам ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

<table cellpadding=Β»0β€³ cellspacing=Β»0β€³>

<tr>

<td align=Β»centerΒ»>

<table cellpadding=Β»60β€³ cellspacing=Β»4β€³ border=Β»1β€³>

<tr>

<td>

ВСкст Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹

</td>

</tr>

</table>

</td>

</tr>

</table>

Вставка изобраТСния Π² HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ

Π£ вСбмастСров часто Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ? Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ это ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ адрСс ΠΈΠ»ΠΈ имя изобраТСния Π² ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ ячСйкС послС Ρ‚Π΅Π³Π° <td>.

НапримСр:

<table border= Β«1Β»>

<tr align=Β»leftΒ»>

<td><img src=Β»http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpgΒ»></td>

<td> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ 2 ячСйки </td> </tr>

<tr align=Β»rightΒ»>

<td> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ 3 ячСйки </td>

<td> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ 4 ячСйки </td> </tr>

</table>

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС ΡΠ²Π»ΡΡŽΡ‚ΡΡ:

  • width β€” ΡˆΠΈΡ€ΠΈΠ½Π°;
  • height β€” высота;
  • alt β€” Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отобраТаСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ отобраТСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ;
  • title β€” подпись ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅;
  • align β€” Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅;
  • Π― ндСкс.Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΊΠ°ΠΊ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ вирус с ΠŸΠš rostov.k-itservice.ru 18+ Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠ΅  вирусов  ΠΈ ΡˆΠΏΠΈΠΎΠ½ΡΠΊΠΈΡ… ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ. ОбСзопасим ваш ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€!
  • valign β€” Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ±Π»Π°Ρ‡ΠΈΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π΅Π³ <a href=»страница, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Π΅Π΄Ρ‘Ρ‚ ссылка»><img src=»имя Ρ„Π°ΠΉΠ»Π°. jpgΒ»></a>, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС ссылки.

ОбъСдинСниС ячССк Π² HTML Ρ‚Π°Π±Π»ΠΈΡ†Π΅

Π‘ΠΎΡΠ΅Π΄ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ячСйки Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ столбца ΠΈΠ»ΠΈ строки ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² rowspan ΠΈ colspan Ρ‚Π΅Π³Π° <td>.

ОбъСдинСниС столбцов ΠΎΠ΄Π½ΠΎΠΉ строчки выглядит Ρ‚Π°ΠΊ:

<table border=Β»1β€³>

<tr>

<td colspan=Β»3β€³>ВСкст 2</td>

</tr>

<tr>

<td>ВСкст 2</td>

<td>ВСкст 3</td>

<td>ВСкст 4</td>

</tr>

</table>

Π£ HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ объСдинСниС ячССк ΠΎΠ΄Π½ΠΎΠ³ΠΎ столбца выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<table border=Β»1β€³>

<tr>

<td rowspan=Β»3β€³>ВСкст 1</td>

<td>ВСкст 2</td>

</tr>

<tr>

<td>ВСкст 3</td>

</tr>

<tr>

<td>ВСкст 4</td>

</tr>

</table>

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ HTML Ρ‚Π°Π±Π»ΠΈΡ†

Π― ндСкс. Π”ΠΈΡ€Π΅ΠΊΡ‚ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π·Π° ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΠΌΠΈ mrspro.ru Π”Π°Π½Π½Ρ‹Π΅ ΠΎ Ρ…ΠΎΠ΄Π΅  ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²Π°  Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ всСм участникам ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

РазумССтся, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ HTML Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, прописывая Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ всС Ρ‚Π΅Π³ΠΈ HTML. Π’Π°Π±Π»ΠΈΡ†Π° Π² Π΄Π°Π½Π½ΠΎΠΌ случаС рискуСт Π±Ρ‹Ρ‚ΡŒ составлСнной Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ чСловСчСский Ρ„Π°ΠΊΡ‚ΠΎΡ€ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с большими ΠΎΠ±ΡŠΡ‘ΠΌΠ°ΠΌΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π΄Π°Ρ‘Ρ‚ ΠΎ сСбС Π·Π½Π°Ρ‚ΡŒ.

Π£ΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ† HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ·Π²Π°Π½Ρ‹ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ вашС врСмя. Π‘ ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с мноТСством настроСк.

Одним ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² Ρ‚Π°Π±Π»ΠΈΡ† являСтся русскоязычный сСрвис http://rusws.ru/genertabtag . Π’ Π΅Π³ΠΎ арсСналС имССтся мноТСство настроСк для построСния Ρ‚Π°Π±Π»ΠΈΡ†: Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Ρƒ Ρ€Π°ΠΌΠΊΠΈ ΠΈ Ρ‚.Π΄.

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ сСрвис http://www.2createawebsite.com/build/table_generator.html являСтся Π·Π°Ρ€ΡƒΠ±Π΅ΠΆΠ½Ρ‹ΠΌ, настроСк для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ здСсь мСньшС, Ρ‡Π΅ΠΌ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π˜ΠΌΠ΅ΡŽΡ‚ΡΡ лишь самыС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ β€” количСство столбцов, строк, ΡˆΠΈΡ€ΠΈΠ½Π°, Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.

Π­Ρ‚ΠΎ β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†, ΠΎΠ΄Π½Π°ΠΊΠΎ для Π±ΠΎΠ»Π΅Π΅ ΡΠ΅Ρ€ΡŒΡ‘Π·Π½Ρ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ сСрвисами:

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ‚Π°Π±Π»ΠΈΡ† html  Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ слишком ΠΌΠ½ΠΎΠ³ΠΎ настроСк, ΠΎΠ΄Π½Π°ΠΊΠΎ Ρ†Π²Π΅Ρ‚ для Ρ„ΠΎΠ½Π° ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ².

Π­Ρ‚ΠΎΡ‚ ΠΆΠ΅ сСрвис ΠΈΠΌΠ΅Π΅Ρ‚ довольно ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ HTML Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΅Ρ‘ ΠΊΠΎΠ΄:

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚Π°Π±Π»ΠΈΡ†Π° являСтся Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΠΆΠ½Ρ‹ΠΌ статистичСским элСмСнтом Π²ΠΎ всСх сфСрах ΠΆΠΈΠ·Π½ΠΈ, Π½ΠΎ ΠΈ Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ вёрстки.

Если Π²Ρ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ услугами Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Π° Ρ‚Π°Π±Π»ΠΈΡ†, стоит Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΡ‚ΠΈ ΠΊ Π²Ρ‹Π±ΠΎΡ€Ρƒ подходящСго Π²Π°ΠΌ сСрвиса, ΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π² самыС популярныС ΠΈΠ· Π½ΠΈΡ… ΠΈ Π²Ρ‹Π±Ρ€Π°Π² Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠΉ.

Π–Π΅Π»Π°Π΅ΠΌ успСхов!

ΠΈΠ·ΡƒΡ‡Π°Π΅ΠΌ Jquery 1.3. эффСктивная Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π½Π° Javascript [DJVU] [7ruvk1hb1650]

ΠΈΠ·ΡƒΡ‡Π°Π΅ΠΌ Jquery 1.3. эффСктивная Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π½Π° Javascript [DJVU] [7ruvk1hb1650]
Includes
  • Multiple formats
  • No login requirement
  • Instant download
  • Verified by our users

ΠΈΠ·ΡƒΡ‡Π°Π΅ΠΌ Jquery 1.

3. эффСктивная Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π½Π° Javascript [DJVU]
  • 7301 views

DownloadEmbed

This document was uploaded by our user. The uploader already confirmed that they had the permission to publish it. If you are author/publisher or own the copyright of this documents, please report to us by using this DMCA report form. Report DMCA

E-Book Overview

ИзданиС, посвящСнноС jQuery вСрсии 1.3, Π·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ с основами использования этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ для создания ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов. jQuery ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ ΠΈ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ слоТных. ΠžΠΏΡ‹Ρ‚Π½Ρ‹Π΅ Π²Π΅Π± Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π·Π½Π°ΠΊΠΎΠΌΡ‹Π΅ с ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, смогут быстро ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ использованию jQuery благодаря Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° основана Π½Π° стандартах Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ HTML ΠΈ CSS. ΠžΠΏΡ‹Ρ‚Π½Ρ‹Π΅ программисты ΠΏΡ€ΠΈ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ оцСнят Π΅Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ Ρ†Π΅Π»ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ. На английском ΡƒΠΆΠ΅ Π²Ρ‹ΡˆΠ»Π° обновлСнная вСрсия для jQuery 1. 4.


E-Book Information
  • Series: High Tech

  • Year: 2,010

  • Pages: 445

  • Pages In File: 445

  • Language: Russian

  • Topic: 70

  • Library: www.infanata.com

  • Issue: 2010 07-10

  • Identifier: 978-5-93286-177-6

  • Commentary: 1146132976 Ρ…ΠΎΡ€

  • Org File Size: 8,152,901

  • Extension: djvu

  • Tags: Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Π°Ρ Π»ΠΈΡ‚Π΅Ρ€Π°Ρ‚ΡƒΡ€Π° HTML / CSS / JavaScript jQuery

  • Toc: Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ……Page 6
    Π’ΡΡ‚ΡƒΠΏΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ слово ……Page 14
    Об Π°Π²Ρ‚ΠΎΡ€Π°Ρ… ……Page 16
    Благодарности ……Page 17
    О тСхничСских Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… ……Page 18
    ΠŸΡ€Π΅Π΄ΠΈΡΠ»ΠΎΠ²ΠΈΠ΅ . …..Page 20
    О Ρ‡Π΅ΠΌ рассказываСтся Π² этой ΠΊΠ½ΠΈΠ³Π΅ ……Page 21
    Π§Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с этой ΠΊΠ½ΠΈΠ³ΠΎΠΉ ……Page 22
    ВипографскиС соглашСния ……Page 23
    ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚Π΅Π»Π΅ΠΉ ……Page 24
    Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° jQuery ……Page 26
    Π§Π΅ΠΌ обусловлСн успСх jQuery ……Page 28
    Π₯ронология развития ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° jQuery ……Page 29
    ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° HTML ……Page 31
    ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ jQuery ……Page 34
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 37
    ΠžΠ±ΡŠΠ΅ΠΊΡ‚Π½Π°Ρ модСль Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ……Page 39
    Ѐабричная функция $() ……Page 40
    Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ CSS ……Page 41
    ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ списка ……Page 42
    Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ……Page 44
    ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ссылок ……Page 45
    ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Ρ‡Π΅Ρ€Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ…ΡΡ строк ……Page 46
    Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ Ρ„ΠΎΡ€ΠΌ ……Page 49
    ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΎΠ±Ρ…ΠΎΠ΄Π° Π΄Π΅Ρ€Π΅Π²Π° DOM ……Page 50
    ИзмСнСниС оформлСния ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ячССк ……Page 51
    БоставлСниС Ρ†Π΅ΠΏΠΎΡ‡Π΅ΠΊ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ……Page 52
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 53
    ΠœΠΎΠΌΠ΅Π½Ρ‚ запуска ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° ……Page 55
    ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²ΠΎ сцСнариСв Π² ΠΎΠ΄Π½ΠΎΠΉ страницС . …..Page 56
    БосущСствованиС с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ ……Page 58
    ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ стилСй ……Page 59
    БокращСнная Ρ„ΠΎΡ€ΠΌΠ° ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ……Page 67
    ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ сокрытиС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй ……Page 69
    Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ элСмСнтов, ΠΏΡ€Π΅Π΄ΡƒΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… Ρ€Π΅Π°ΠΊΡ†ΠΈΡŽ Π½Π° Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΌΡ‹ΡˆΡŒΡŽ ……Page 70
    РаспространСниС события ……Page 72
    ΠŸΠΎΠ±ΠΎΡ‡Π½Ρ‹Π΅ эффСкты Ρ„Π°Π·Ρ‹ всплытия ……Page 74
    ИзмСнСниС двиТСния события: ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ события ……Page 75
    ΠžΡΡ‚Π°Π½ΠΎΠ²ΠΊΠ° распространСния события ……Page 76
    ДСйствия ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ……Page 77
    Π”Π΅Π»Π΅Π³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ событий ……Page 78
    Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° события ……Page 80
    ΠŸΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²ΠΎ ΠΈΠΌΠ΅Π½ события ……Page 81
    ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ событий ……Page 82
    Бобытия ΠΎΡ‚ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ……Page 84
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 87
    ИзмСнСниС встроСнных свойств стиля CSS ……Page 89
    ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ эффСкты скрытия ΠΈ отобраТСния ……Page 94
    Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ……Page 96
    Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ проявлСния ΠΈ растворСния .. ….Page 97
    БоставныС эффСкты ……Page 98
    Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ собствСнных Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… эффСктов ……Page 99
    ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ эффСкта проявлСния/растворСния ……Page 100
    Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ сразу нСсколькими свойствами ……Page 101
    Π Π°Π±ΠΎΡ‚Π° с ΠΎΠ΄Π½ΠΈΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ элСмСнтов ……Page 104
    Π Π°Π±ΠΎΡ‚Π° с нСсколькими Π½Π°Π±ΠΎΡ€Π°ΠΌΠΈ элСмСнтов ……Page 107
    Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° ……Page 109
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 111
    ΠœΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ ……Page 112
    Атрибуты, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΡ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° class ……Page 113
    Π•Ρ‰Π΅ Ρ€Π°Π· ΠΎ Ρ„Π°Π±Ρ€ΠΈΡ‡Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ $() ……Page 115
    Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²Ρ‹Ρ… элСмСнтов ……Page 117
    ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ элСмСнтов ……Page 119
    ΠœΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΠ°, нумСрация ΠΈ созданиС ссылок Π½Π° контСкст ……Page 123
    Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ сносок ……Page 125
    ΠžΠ±Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ элСмСнтов ……Page 126
    ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов ……Page 127
    Π‘Ρ‚ΠΈΠ»ΠΈ CSS ……Page 129
    ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ ……Page 130
    Π£ΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅ Π²Ρ€Π΅Π·ΠΎΠΊ ……Page 132
    ΠšΠΎΡ€ΠΎΡ‚ΠΊΠΎ ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ… манипулирования Π΄Π΅Ρ€Π΅Π²ΠΎΠΌ DOM … …Page 135
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 136
    6.AJAX ……Page 137
    Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΠΎ Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΡŽ ……Page 138
    Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML ……Page 139
    Π Π°Π±ΠΎΡ‚Π° с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ JavaScript ……Page 142
    Π˜Π·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² JavaScript ……Page 143
    Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ jQuery ……Page 144
    Запуск сцСнария ……Page 147
    Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° XML ……Page 149
    Π’Ρ‹Π±ΠΎΡ€ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π΄Π°Π½Π½Ρ‹Ρ… ……Page 152
    ΠŸΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° Π΄Π°Π½Π½Ρ‹Ρ… Π½Π° сСрвСр ……Page 154
    Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ запроса GET ……Page 155
    Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ запроса POST ……Page 158
    БСриализация Ρ„ΠΎΡ€ΠΌΡ‹ ……Page 159
    Π‘Π»Π΅ΠΆΠ΅Π½ΠΈΠ΅ Π·Π° Ρ…ΠΎΠ΄ΠΎΠΌ выполнСния запроса ……Page 162
    AJAX ΠΈ события ……Page 165
    ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ бСзопасности ……Page 166
    ИспользованиС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° JSONP для ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ……Page 167
    НизкоуровнСвый ΠΌΠ΅Ρ‚ΠΎΠ΄ AJAX ……Page 169
    Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° частСй страницы HTML ……Page 170
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 172
    7. Π Π°Π±ΠΎΡ‚Π° с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ ……Page 174
    Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΠ° Π½Π° сторонС сСрвСра …… Page 175
    Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript ……Page 177
    Π Π°Π·Π±ΠΈΠ²ΠΊΠ° Π½Π° страницы Π½Π° сторонС сСрвСра ……Page 194
    Π Π°Π·Π±ΠΈΠ²ΠΊΠ° Π½Π° страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript ……Page 195
    ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия ……Page 201
    Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ строк ……Page 203
    Подсказки ……Page 211
    Π‘Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ ΠΈ Ρ€Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ……Page 216
    Π€ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ ……Page 219
    ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия ……Page 224
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 227
    Π£Π»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ простой Ρ„ΠΎΡ€ΠΌΡ‹ ……Page 228
    ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΠ²Π½ΠΎΠ΅ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ оформлСния Ρ„ΠΎΡ€ΠΌΡ‹ ……Page 229
    Поля, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ ΠΏΠΎ ΡƒΡΠ»ΠΎΠ²ΠΈΡŽ ……Page 236
    ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° содСрТимого Ρ„ΠΎΡ€ΠΌΡ‹ ……Page 239
    ΠœΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„Π»Π°ΠΆΠΊΠ°ΠΌΠΈ ……Page 247
    ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия ……Page 249
    ΠšΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ ……Page 252
    ВСкст-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ для ΠΏΠΎΠ»Π΅ΠΉ ……Page 253
    Ѐункция автодополнСния Π½Π° основС Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ AJAX ……Page 256
    ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия ……Page 264
    Π Π°Π±ΠΎΡ‚Π° с числовыми Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ… ……Page 266
    Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ для ΠΊΠΎΡ€Π·ΠΈΠ½Ρ‹ с ΠΏΠΎΠΊΡƒΠΏΠΊΠ°ΠΌΠΈ . …..Page 267
    ΠŸΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ возмоТности Π²Π²ΠΎΠ΄Π° нСчисловых Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ……Page 270
    АрифмСтичСскиС вычислСния ……Page 271
    Π£Π΄Π°Π»Π΅Π½ΠΈΠ΅ элСмСнтов ……Page 278
    ИзмСнСниС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ с адрСсом доставки ……Page 283
    ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия ……Page 286
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 288
    ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ……Page 289
    ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° страницы ……Page 290
    ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ рассылки ……Page 292
    ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° ΠΊ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ……Page 295
    Ѐункция ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ……Page 296
    ΠŸΡ€ΠΈΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ ……Page 299
    ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ рассылки ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π΄ΠΎΠΌΠ΅Π½Π° ……Page 302
    Π­Ρ„Ρ„Π΅ΠΊΡ‚ измСнСния прозрачности ΠΏΠΎ высотС ……Page 304
    ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия ……Page 306
    ΠšΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ……Page 308
    ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° страницы ……Page 309
    ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ ……Page 312
    Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ изобраТСния ……Page 320
    ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ вСрсия ……Page 333
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 336
    Поиск Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ справочной ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ . …..Page 337
    Как ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ……Page 338
    Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Form ……Page 339
    Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΈ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ……Page 340
    Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ jQuery UI ……Page 341
    Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ……Page 342
    ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ взаимодСйствий ……Page 344
    Π’ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ ……Page 347
    jQuery UI ThemeRoller ……Page 349
    Π”Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ……Page 350
    Π€ΠΎΡ€ΠΌΡ‹ ……Page 351
    Π’Π°Π±Π»ΠΈΡ†Ρ‹ ……Page 352
    Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ……Page 354
    Окна с подсвСткой ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΈ ……Page 355
    Π”ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ……Page 358
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 360
    Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²Ρ‹Ρ… Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ……Page 361
    Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ……Page 362
    Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ……Page 363
    ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ……Page 365
    ОбъСдинСниС ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² Π² Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΈ ……Page 368
    ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΎΠ±Ρ…ΠΎΠ΄Π° Π΄Π΅Ρ€Π΅Π²Π° DOM ……Page 369
    Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½ΠΎΠ²Ρ‹Ρ… сокращСнных ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ……Page 374
    ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ……Page 377
    ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ……Page 379
    ЗначСния ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ . …..Page 381
    Π€ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° ……Page 382
    НастраиваСмыС значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ……Page 383
    Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ сСлСкторных Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ……Page 385
    ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΊ Ρ€Π°ΡΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½Π΅Π½ΠΈΡŽ ……Page 388
    Π˜Π½Ρ‚Π΅Ρ€Ρ„Π΅ΠΉΡΡ‹ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ……Page 389
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 390
    jQuery API ……Page 391
    Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ MSDN JScript ……Page 392
    JSMin ……Page 393
    Mezzoblue CSS cribsheet ……Page 394
    JavaScript ant ……Page 395
    DOM scripting ……Page 396
    ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с использованиСм jQuery ……Page 397
    Firebug ……Page 398
    ПанСль инструмСнтов Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° для Microsoft Internet Explorer ……Page 399
    Web Inspector ……Page 400
    NitobiBug ……Page 401
    Aptana ……Page 402
    Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ……Page 403
    Π’Π΅Π»ΠΈΠΊΠΈΠΉ ΠΏΠΎΠ±Π΅Π³ ……Page 405
    ΠžΠ±Π»Π°ΡΡ‚ΡŒ видимости ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… ……Page 406
    ВзаимодСйствия ΠΌΠ΅ΠΆΠ΄Ρƒ замыканиями ……Page 408
    АргумСнты ΠΌΠ΅Ρ‚ΠΎΠ΄Π° $(document).ready() ……Page 409
    ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий . …..Page 410
    Π£Π³Ρ€ΠΎΠ·Π° ΡƒΡ‚Π΅Ρ‡ΠΊΠΈ памяти ……Page 412
    ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΡƒΡ‚Π΅Ρ‡ΠΊΠΈ памяти Π² Internet Explorer ……Page 414
    Добрая Π²Π΅ΡΡ‚ΡŒ ……Page 415
    Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ……Page 416
    Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ выраТСния ……Page 417
    ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ Π΄Π΅Ρ€Π΅Π²Ρƒ DOM ……Page 420
    ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ событий ……Page 422
    ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ эффСктов ……Page 425
    ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ манипулирования Π΄Π΅Ρ€Π΅Π²ΠΎΠΌ DOM ……Page 426
    ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ AJAX ……Page 430
    ΠŸΡ€ΠΎΡ‡ΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ……Page 432
    Алфавитный ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ……Page 434

ЗачСтная Ρ€Π°Π±ΠΎΡ‚Π° β€” ΠžΡΠ½ΠΎΠ²Ρ‹ WEB -Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ

Π’ Π·Π°Ρ‡Π΅Ρ‚Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт-Π²ΠΈΠ·ΠΈΡ‚ΠΊΡƒ . Для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС упраТнСния Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π½Π½Ρ‹Π΅ Π½Π° практичСских занятиях.. Π’ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ сайта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ языки Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ гипСртСкста XHTML, HTML5, CSS2, CSS3, Ajax-JQuery для ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’Срстка ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ. Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° языкС сцСнариСв JavaScript с использованиСм Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ JQuery. ΠΡƒΡ‚Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° PHP+MySQL. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ajax-ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°( ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° страничкС: 

ссылка: Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ простого AJAX сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery).

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ΡΡ свободный Π²Ρ‹Π±ΠΎΡ€ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π½ΠΎΠΉ области. ΠΠΈΠΆΠ΅ прСдставлСн ΠΏΡ€ΠΈΠΌΠ΅Ρ€ выполнСния Π·Π°Ρ‡Π΅Ρ‚Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹.

  1. ΠŸΠ΅Ρ€Π²Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ – сами страницы сайта. 
  2. Вторая Ρ‡Π°ΡΡ‚ΡŒ – аутСнтификация ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ 

Π’ процСссС выполнСния Π·Π°Ρ‡Π΅Ρ‚Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ студСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ этапы Ρ€Π°Π±ΠΎΡ‚Ρ‹: 
1. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ модСль сайта, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰ΡƒΡŽ Π² сСбя систСму стилСвого оформлСния (тСхнология CSS), Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½, ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ графичСского оформлСния (рисунки ΠΈ Ρ‚.ΠΏ.). 

2. Π‘ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΡƒΡŽ структуру сайта.

 3. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ Π°ΡƒΡ‚Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ сайта.  

4. ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΡ‚Ρ‡Π΅Ρ‚ ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°Ρ… Ρ€Π°Π±ΠΎΡ‚Ρ‹ содСрТащий Π² сСбС: 

β€” Ρ‚ΠΈΡ‚ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ лист β€” Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΊΠΎΡ‚Ρ€ΠΎΠ»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΈ Π·Π°Π΄Π°Π½ΠΈΠ΅

 β€” листинг ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницы

β€” ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½ΠΎΠ³ΠΎ WEB-прилоТСния

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½Π°Ρ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ° для ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ студСнтов:

 1. Π Π΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ΅ агСнтство 

2. Магазин ΠΊΠ°Π½Ρ†Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ²

 3. МСбСльная Ρ„Π°Π±Ρ€ΠΈΠΊΠ° 

4. ΠšΠΎΠ½ΡΠ°Π»Ρ‚ΠΈΠ½Π³ΠΎΠ²ΠΎΠ΅ агСнтство 

5. Π˜Π·Π΄Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π΄ΠΎΠΌ 

6. ВуристичСскоС агСнтство 

7. Гостиничный комплСкс 

8. Π‘Ρ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ компания 

9. АгСнтство нСдвиТимости 

10. РСсторан

 11. Городской ΠΏΠΎΡ€Ρ‚Π°Π»

 12. ΠœΠ΅Π΄ΠΈΡ†ΠΈΠ½ΡΠΊΠΈΠΉ Ρ†Π΅Π½Ρ‚Ρ€ 

13. ДСтский Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ Ρ†Π΅Π½Ρ‚Ρ€

 14. ΠŸΠΎΠ»ΠΈΠ³Ρ€Π°Ρ„ΠΈΡ‡Π΅ΡΠΊΠ°Ρ компания 

15. Π“Π°Π·Π΅Ρ‚Π° 

16. Доставка Π΅Π΄Ρ‹ 

17. Π”ΠΈΠ·Π°ΠΉΠ½ ΠΊΠ»ΡƒΠ± 

18. Автоломбард 

19. Π”ΠΎΠΌΠ°ΡˆΠ½ΠΈΠ΅ гостиницы 

20. Π‘ΠΏΠΎΡ€Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΊΠ»ΡƒΠ± 

21. Π‘Π°Π»ΠΎΠ½ красоты 

22. Ѐотостудия 

23. Π€ΡƒΡ‚Π±ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ ΠΊΠ»ΡƒΠ± 

24. БрСдняя школа 

25. Авиакомпания 

26. ΠΠ²Ρ‚ΠΎΡˆΠΊΠΎΠ»Π° 

27. ΠšΡƒΡ€ΡŒΠ΅Ρ€ΡΠΊΠ°Ρ слуТба 

28. Π‘Π°Π½ΠΊ 

29. Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ ΠΌΠ°Π³Π°Π·ΠΈΠ½ 

30. Π‘Ρ‹Ρ‚ΠΎΠ²Ρ‹Π΅ услуги (Ρ…ΠΈΠΌ. чистка) 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… страничСк сайта.

1 страничка β€” PHP, Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Ρ‹ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ Post.(ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π°Π΄ΠΎ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° PHP ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠΈ этого курса)

 Π£ΡΠ»ΠΎΠΆΠ½Π΅Π½Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚(максимум Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π½Π°Π΄ΠΎ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π° PHP ΠΏΠΎ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠΈ этого курса).

РСализация ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° β€” аутСнтификация ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, написана Π½Π° языкС сцСнариСв JavaScript с использованиСм Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ JQuery, языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML5, каскадной Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS3. Π˜Π½Ρ„ормация ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΡ…  Ρ…ранится Π² Π±Π°Π·Π΅ Π΄Π°Π½Π½Ρ‹Ρ… (MySql, PHP).

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π²Π΅ Ρ„ΠΎΡ€ΠΌΡ‹ Π² HTML5: Ρ„ΠΎΡ€ΠΌΠ° Π²Ρ…ΠΎΠ΄Π° ΠΈ Ρ„ΠΎΡ€ΠΌΠ° рСгистрации. Π­Ρ‚ΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстами с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ эффСкта animate ΠΈΠ· Jquery. Для оформлСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS3. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΡ… (Π»ΠΎΠ³ΠΈΠ½Ρ‹, ΠΏΠ°Ρ€ΠΎΠ»ΠΈ) хранится Π² Π±Π°Π·Π΅ Π΄Π°Π½Π½Ρ‹Ρ… (ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ β€” 2 Ρ‚Π°Π±Π»ΠΈΡ†)

 

     

   

 ΠΡƒΡ‚Снтификация ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (авторизация ΠΈ рСгистрация).АутСнтификация ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (ΡƒΡΠΏΠ΅ΡˆΠ½Π°Ρ рСгистрация, ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΉ рСгистрации, ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ с Ρ‡ΡƒΠΆΠΈΠΌ ΠΏΠ°Ρ€ΠΎΠ»Π΅ΠΌ).

2-5 странички.Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ.(Xhtml-JQuery)

   Π’Срстка Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊ:

Π’ΠΎΡˆΠ»ΠΈ Π½Π° сайт. Главная страница

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Β«ΠŸΠΠ Π˜Π–Β»Π’Π΅ΠΊΡΡ‚ сворачиваСтся ΠΈ разворачиваСтся.

 

 Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Β«ΠœΠ£Π—Π•Π™ ОРБИ»-Ρ€Π°Π±ΠΎΡ‚Π° с изобраТСниями, Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ

                                                             






 Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Β«Π›ΡƒΠ²Ρ€Β»

 

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Β«Π’Π΅Ρ€ΡΠ°Π»ΡŒΒ»-события Ρ€Π°Π΄ΠΈΠΎΠΊΠ½ΠΎΠΏΠΎΠΊ, чСкбоксов

 

 

Δ‹

chalkwork-payments[1]. zip
View
  Dec 25, 2014, 1:52 AMOl Gerenko

Δ‹

MySite.7z
View
  Dec 25, 2014, 1:18 AMOl Gerenko

Π’Π°Π±Π»ΠΈΡ†Ρ‹ jQuery: ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ для создания Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ управлСния ΠΈΠΌΠΈ

JavaScript

    jQuery

Π’Π°Π±Π»ΠΈΡ†Ρ‹ β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΡ‚Π°Ρ€Π΅ΠΉΡˆΠΈΡ… элСмСнтов HTML. Π‘Ρ‹Π»ΠΎ врСмя, ΠΊΠΎΠ³Π΄Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΡˆΠΈΡ€ΠΎΠΊΠΎ использовались ΠΊΠ°ΠΊ для ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Ρ‚Π°ΠΊ ΠΈ для Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π° основС Ρ‚Π°Π±Π»ΠΈΡ† Π² основном ΠΌΠ΅Ρ€Ρ‚Π²Ρ‹ (Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HTML), ΠΈ ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π² настоящСС врСмя Π½ΡƒΠΆΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Π°, ΠΎΠ½Π° ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для Ρ‚ΠΎΠΉ Ρ†Π΅Π»ΠΈ, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½Π° Π±Ρ‹Π»Π° ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ создана β€” для отобраТСния Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ….

Π‘ΡƒΠ΄ΡƒΡ‡ΠΈ Π±ΠΎΠ»Π΅Π΅ старой Ρ‡Π°ΡΡ‚ΡŒΡŽ спСцификации HTML, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π΅ подходят для Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства, ΠΈ Π½Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ. Π’Π°Π±Π»ΠΈΡ†Ρ‹ Π² основном просто ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ ваши Π΄Π°Π½Π½Ρ‹Π΅, ΠΈ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ.

Однако часто Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Ρ‹Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ соврСмСнными, Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ экосистСму, дСмонстрируя Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Π»ΠΈΠ±ΠΎ прСдоставляя Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ поиск, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, сортировка ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим Π½Π°Π±ΠΎΡ€ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π½Π° основС jQuery для создания, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈΠ»ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†. Π­Ρ‚ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Π²Π°Ρ€ΡŒΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΎΡ‚ Π»Π΅Π³ΠΊΠΎΠ³ΠΎ рСстайлинга Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ.

Dynatable

Dynatable β€” это нСвСроятно ΠΌΠΎΡ‰Π½Ρ‹ΠΉ ΠΈ всСсторонний ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, срСди ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ, создаСт Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с ΠΌΠΎΡ‰Π½Ρ‹ΠΌΠΈ функциями, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, сортировка ΠΈ нумСрация страниц. Dynatable ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², позволяя Π²Π°ΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ отобраТаСтся Ρ‚Π°Π±Π»ΠΈΡ†Π°, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ ΠΈ поиск, ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ прСдоставляСт Π²Π°ΠΌ настраиваСмоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ всС Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Ρ‚ΠΎ этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ стоит вашСго внимания. Если Π²Ρ‹ Π½ΠΎΠ²ΠΈΡ‡ΠΎΠΊ Π² JavaScript/jQuery, Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈ/ΠΈΠ»ΠΈ авторская докумСнтация ΠΌΠΎΠ³ΡƒΡ‚ вас ΠΎΡ‚ΠΏΡƒΠ³Π½ΡƒΡ‚ΡŒ. Однако всС ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, поэтому Π½Π΅Ρ‚ нСобходимости Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ настройкС.

Π£Π΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ старый (послСдний ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠΈΡ‚ Π±Ρ‹Π» сдСлан Π΅Ρ‰Π΅ Π² 2014 Π³ΠΎΠ΄Ρƒ). На этом ΠΏΡƒΡ‚ΠΈ Π±Ρ‹Π»ΠΎ нСсколько ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ² ΠΈ участиС сообщСства, Π½ΠΎ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ Π»ΠΈ разрабатываСтся ΠΏΠ»Π°Π³ΠΈΠ½ (Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° Ρ‚ΠΎ, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΈΠ»ΠΈ внСсти свой Π²ΠΊΠ»Π°Π΄). Помимо всСго этого, это Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‰ΠΈΠΉ мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π° любом Π²Π΅Π±-сайтС.

GitHub

Bootstrap Table

Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ CSS ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ популярны, ΠΈ Bootstrap Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π»ΠΈΠ΄ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ. Плагин Bootstrap Table ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ, Π½ΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ с минимальной Ρ€Π°Π±ΠΎΡ‚ΠΎΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

ΠœΠΎΡ‰Π½ΠΎΡΡ‚ΡŒ ΠΈ возмоТности этого ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‚. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для измСнСния стиля Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ ΠΈ красивыми, ΠΈ, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, поиск, условноС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ столбцов (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ столбцы для простоты), Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Π»Π°ΠΊΠΎΠΌΡ‹Π΅ кусочки, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ экспорт Π² CSV ΠΈ JSON.

На страницС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ эти элСмСнты. Π’Π°ΠΌ придСтся ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя Π½Π° ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ, Π½ΠΎ это Ρ‚ΠΎΠ³ΠΎ стоит, ΠΊΠΎΠ³Π΄Π° Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получаСтся ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π°Ρ Ρ‚Π°Π±Π»ΠΈΡ†Π° с Ρ‚Π°ΠΊΠΈΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π»ΠΈΠ±ΠΎ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Bootstrap, Π»ΠΈΠ±ΠΎ, ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Ρ„Π°ΠΉΠ» Bootstrap CSS ΠΈ JS. Плагин Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π»ΠΈΠ±ΠΎ Ρ‡Π΅Ρ€Π΅Π· стандартныС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… HTMTL Π² Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ… (с описаниСм Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… Π²Π°ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ/ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²), Π»ΠΈΠ±ΠΎ Ρ‡Π΅Ρ€Π΅Π· Π±ΠΎΠ»Π΅Π΅ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ JS. Если Π²Ρ‹ ΡƒΠΆΠ΅ участвуСтС Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ Bootstrap, это ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ Π½Π°Ρ‡Π°Π»ΠΎ. Если Π²Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π°Π΄ Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ, ΠΊΡ€ΠΎΠΌΠ΅ Bootstrap, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Π·Π²Π΅ΡΠΈΡ‚ΡŒ всС Π·Π° ΠΈ ΠΏΡ€ΠΎΡ‚ΠΈΠ².

Π’ Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π»Π΅Ρ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ поддСрТивался дСсятками участников ΠΈ тысячами ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ². Π­Ρ‚ΠΎ постоянно Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉΡΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Π’Ρ€ΡƒΠ΄Π½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ это Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΎ Π½Π° Bootstrap 4 (ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ для этого трСбуСтся Bootstrap 2/3), Π½ΠΎ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΏΠΎΡ€ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ.

Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ историчСски ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΈ постоянно обновляСтся (ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ исправили Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ошибок), Ρ‚ΠΎ этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄ΠΎΠΉΡ‚ΠΈ Π²Π°ΠΌ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° интСрСсныС Ρ‚Π΅ΠΌΡ‹ ΠΈ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ сдСлали для Π½Π΅Π³ΠΎ здСсь.

Π’Π΅Π±-сайт
ДСмонстрация

Π’Π°Π±Π»ΠΈΡ†Π° с фиксированным Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅: ΠΎΠ½Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ фиксированный Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π½Π΅ тСряли столбцы ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅.

Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ со стандартной Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΎΠΉ HTML-Ρ‚Π°Π±Π»ΠΈΡ†. Он Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ваш Ρ‚Π΅Π³ ΠΈΠ»ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ваш Ρ‚Π΅Π³ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ фиксированный Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ для вашСй Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π•ΡΡ‚ΡŒ нСсколько Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠΏΡ†ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΊΠ»ΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» Π² Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» ΠΈ, ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ/ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ. Π’ Ρ†Π΅Π»ΠΎΠΌ, Ρ†Π΅Π»ΡŒ этого ΠΏΠ»Π°Π³ΠΈΠ½Π° проста ΠΈ состоит ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… элСмСнтов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ. Π‘Ρ‚ΠΈΠ»ΡŒ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, Ссли Π²Π°ΠΌ это Π½ΡƒΠΆΠ½ΠΎ.

Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π΅Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Π±ΠΎΠ»Π΅Π΅ подходящими. Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ это Π±ΠΎΠ»Π΅Π΅ старый ΠΏΠ»Π°Π³ΠΈΠ½ (начиная с 2011 Π³ΠΎΠ΄Π°), поэтому ΠΌΠΎΠΆΠ½ΠΎ с ΡƒΠ²Π΅Ρ€Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ. Π’Π°ΠΌ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ, Π΄ΠΎΠ²ΠΎΠ»ΡŒΠ½Ρ‹ Π»ΠΈ Π²Ρ‹ использованиСм ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅Π³ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°.

Π’Π΅Π±-сайт/ДСмонстрация

DataTables

Π­Ρ‚ΠΎΡ‚ ΠΎΡ‡Π΅Π½ΡŒ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ† jQuery ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ основных Ρ‚Π°Π±Π»ΠΈΡ† HTML, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Π±ΠΎΠ»Π΅Π΅ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятными ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ.

DataTables β€” это ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для прСдоставлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ для Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ сортировка, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠ° Π½Π° страницы ΠΈ настраиваСмыС Ρ‚Π΅ΠΌΡ‹.

Плагин Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ прямо ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, ΠΊΠ°ΠΊ ΠΈ слСдовало ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ, Π½ΠΎ ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΠ±ΡˆΠΈΡ€Π½ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ваш стол Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ, Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

Π¨ΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ настроСк Π΄Π΅Π»Π°Π΅Ρ‚ это Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², Π½ΠΎ ΠΈ ΠΏΠΎΠ΄ΠΊΡ€Π΅ΠΏΠ»Π΅Π½ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠΉ систСмой Ρ„ΠΎΡ€ΡƒΠΌΠΎΠ² Π½Π° своСм сайтС.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ с CSS-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ для измСнСния стиля ΠΏΠ»Π°Π³ΠΈΠ½Π° впСчатляСт. Он совмСстим с Bootstrap, Foundation, jQuery UI ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ. Π”Ρ€ΡƒΠ³ΠΈΠ΅ аспСкты, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ доступ ΠΊ событиям, систСма API ΠΈ динамичСскиС Π΄Π°Π½Π½Ρ‹Π΅ Ρ‡Π΅Ρ€Π΅Π· AJAX, Π΄Π΅Π»Π°ΡŽΡ‚ DataTables Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ.

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ аспСктом ΠΏΠ»Π°Π³ΠΈΠ½Π° являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· ΠΎΡ‚Ρ‡Π΅Ρ‚Ρ‹ ΠΎΠ± ΠΎΡˆΠΈΠ±ΠΊΠ°Ρ… GitHub ΠΈΠ»ΠΈ Ρ‡Π΅Ρ€Π΅Π· прямой ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ, Π½ΠΎ эти рСбята ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· свой Ρ„ΠΎΡ€ΡƒΠΌ, доступ ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅, ΠΊΡƒΠΏΠΈΠ² ΠΎΠ΄Π½Ρƒ ΠΈΠ· ΠΈΡ… Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΉ. Π₯отя Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΌΡ‹ΡΠ»ΡŒ ΠΎΠ± ΠΎΠΏΠ»Π°Ρ‚Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, судя ΠΏΠΎ Ρ„ΠΎΡ€ΡƒΠΌΡƒ, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ быстро.

Π§Ρ‚ΠΎ касаСтся ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, Ссли Π²Ρ‹ заинтСрСсованы Π² ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ DataTables Π² ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΡƒΡŽ систСму ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ критичСски Π²Π°ΠΆΠ½ΠΎΠ΅, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ приобрСсти ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²Π°ΠΌ ΠΏΡ€ΡΠΌΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ доступ ΠΊ Π·Π°ΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌ функциям.

Π’ Ρ†Π΅Π»ΠΎΠΌ, это интСрСсный ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтом ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ, Ссли Π²Π°ΠΌ это Π½ΡƒΠΆΠ½ΠΎ.

Π’Π΅Π±-сайт/дСмонстрации

jQuery HighchartTable

HighchartTable β€” это ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΡƒΡ‚Π΅ΠΌ динамичСского создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Highcharts ΠΈΠ· Π΄Π°Π½Π½Ρ‹Ρ… вашСй Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ ΡΠ΅Ρ€ΠΈΡŽ ΠΈΠ· Π΄Π°Π½Π½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π² элСмСнты вашСй Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Highcharts для прСобразования Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… Π² Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ/ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡƒ.

На Π΅Π³ΠΎ Π²Π΅Π±-сайтС прСдставлСны всС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, с описаниСм простого JSFiddle для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ всС это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ‚ΠΈΠΏΠΎΠΌ Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ, ΠΌΠ΅Ρ‚ΠΊΠ°ΠΌΠΈ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ элСмСнтами Π² соотвСтствии с вашими потрСбностями.

Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ этот ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ выполняСт прСобразования Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ. Π­Ρ‚ΠΎ обрабатываСтся Highcharts, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΡ… Ρ„Π°ΠΉΠ»Ρ‹ JS ΠΈ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, хотя Ρƒ этого ΠΏΠ»Π°Π³ΠΈΠ½Π° Π΅ΡΡ‚ΡŒ нСкоторая Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ/Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°, ΠΏΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π½Π΅ слишком Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ Π½Π° GitHub, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ссли для Highcharts Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ Π½ΠΎΠ²ΠΎΠ΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ функция, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ, Π±ΡƒΠ΄ΡƒΡ‚ Π»ΠΈ ΠΎΠ½ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½ для Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ. .

Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΈΠΌ Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слСдуСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Highcharts Π½Π΅ являСтся бСсплатным для коммСрчСского использования. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° Π·Π°ΠΊΠΎΠ½Π½Ρ‹Ρ… основаниях, Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° лицСнзия (ΠΈ Ссли Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ для ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Π²Ρ‹ ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ‚Π΅ Π² эту ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡŽ). БправСдливости Ρ€Π°Π΄ΠΈ слСдуСт ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Highcharts довольно ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ² ΠΈ прСдоставляСт мноТСство ΠΎΠΏΡ†ΠΈΠΉ, поэтому Ρ€Π°Π·ΡƒΠΌΠ½ΠΎ Π·Π°ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ Π·Π° использованиС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, Ссли Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΎΡ‚ этого ΠΏΡ€ΠΈΠ±Ρ‹Π»ΡŒ.

Π’Π΅Π±-сайт
Π”Π΅ΠΌΠΎ
GitHub

Tabulator

Tabulator β€” это ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для динамичСского создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ† ΠΈΠ· HTML, массива JavaScript, источника Π΄Π°Π½Π½Ρ‹Ρ… Ajax ΠΈΠ»ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… JSON. Вабулятор ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, сортировка, рСгулируСмая ΡˆΠΈΡ€ΠΈΠ½Π° столбцов, ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, нумСрация страниц ΠΈ прямоС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π²ΠΎΠ΄Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Вабулятор находится Π² этом спискС ΠΈΠ·-Π·Π° Π΅Π³ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ гибкости Π² Ρ†Π΅Π»ΠΎΠΌ. На Π΅Π³ΠΎ Π²Π΅Π±-сайтС описаны всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, с простыми для понимания Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ вмСстС с нСсколькими встроСнными ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ докумСнтация длинная ΠΈ слоТная, ΠΎΠ½Π° содСрТит всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ.

Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свои Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Π°ΠΌ хочСтся. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ строки Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ вмСстС ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ простыС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для объяснСния Π²Π°ΡˆΠΈΡ… Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора, Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ содСрТимоС строки Π½Π° страницы ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько Π΄Ρ€ΡƒΠ³ΠΈΡ… Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ. Π­Ρ‚ΠΎ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ инструмСнт для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ я ΡƒΠΆΠ΅ нСсколько Ρ€Π°Π· пользовался.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Вабулятора достаточно Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ Π½Π° GitHub, выпуская обновлСния ΠΊΠ°ΠΆΠ΄Ρ‹Π΅ нСсколько мСсяцСв ΠΈ ΠΊΡƒΡ‡Ρƒ ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ² ΠΈ исправлСний ошибок Π·Π° Π³ΠΎΠ΄. ВСрсия 2.7 ΠΏΠ»Π°Π³ΠΈΠ½Π° Π±Ρ‹Π»Π° Π²Ρ‹ΠΏΡƒΡ‰Π΅Π½Π° Π² октябрС 2016 Π³ΠΎΠ΄Π°, ΠΈ ΠΌΠΎΠΆΠ½ΠΎ с ΡƒΠ²Π΅Ρ€Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ сам ΠΏΠ»Π°Π³ΠΈΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ Ρ€Π°Π·Π²ΠΈΠ²Π°Ρ‚ΡŒΡΡ с Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΌ Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ для вас ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠ½ΠΎΠ³Π΄Π° Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΈΠ»ΠΈ Π²Ρ‹ ΡΡ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚Π΅ΡΡŒ с ошибками.

Π’Π΅Π±-сайт
ДСмонстрации
GitHub

FancyGrid

FancyGrid дополняСт ваши стандартныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ функциями ΠΈ функциями. НуТна Π»ΠΈ Π²Π°ΠΌ простая Ρ‚Π°Π±Π»ΠΈΡ†Π° с Π»Π΅Π³ΠΊΠΈΠΌ стилСм ΠΈΠ»ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Π° с функциями Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ, сортировки ΠΈΠ»ΠΈ разбиСния Π½Π° страницы, Ρƒ FancyGrid Π΅ΡΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ для Π²Π°ΡˆΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ возмоТности для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ.

БущСствуСт нСсколько способов использования Fancy Grid, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для оформлСния Ρ‚Π°Π±Π»ΠΈΡ†, прСдоставлСния Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈΠ»ΠΈ для ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠΈ с Highcharts для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ….

ДокумСнтация FancyGrid описываСт всС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ ΠΏΠΎ страницам, Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΡƒ, настраиваСмыС события, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π—Π΄Π΅ΡΡŒ ΠΊΡƒΡ‡Π° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ β€” достаточно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡˆΠ΅Π»ΠΎΠΌΠΈΡ‚ΡŒ вас β€” Π½ΠΎ ΠΎΠ½ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ нСсколько быстрых ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ быстро Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ. Он ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ с настройками ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ для ΠΏΠ»Π°Π³ΠΈΠ½Π° Π½Π΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ рСпозитория GitHub. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ бСсплатно Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ с ΠΈΡ… Π²Π΅Π±-сайта для Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ использования, Π½ΠΎ для коммСрчСского использования Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ приобрСсти Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ Π½Π° Π΅Π³ΠΎ использованиС. Highcharts (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для 2D-Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ) Ρ‚Π°ΠΊΠΆΠ΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ лицСнзирования для Π΅Π³ΠΎ использования, поэтому Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Π³ΠΎΡ‚ΠΎΠ²Ρ‹ Π»ΠΈ Π²Ρ‹ приобрСсти эти элСмСнты для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π•Ρ‰Π΅ нСсколько интСрСсных ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ²: я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ», Ρ‡Ρ‚ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΡ… Π²Π΅Π±-сайта происходит с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ (ΠΈΠ½ΠΎΠ³Π΄Π° ΠΎΠ½ Π½Π΅ загруТался ΠΈΠ»ΠΈ для создания ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π»ΠΎΡΡŒ врСмя). Π­Ρ‚ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ просто ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, Π½ΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ (ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π»ΡŽΠ±ΠΈΡ‚ ΠΆΠ΄Π°Ρ‚ΡŒ Ρ†Π΅Π»ΡƒΡŽ Π²Π΅Ρ‡Π½ΠΎΡΡ‚ΡŒ, ΠΏΠΎΠΊΠ° загрузятся Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹/ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹). ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, мобильная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π½Π΅ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π°. Π’Ρ€ΡƒΠ΄Π½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, связано Π»ΠΈ это с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ разрабатывался для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, ΠΈΠ»ΠΈ просто докумСнтация устарСла. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ бСспроблСмный, ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π·Π° столом с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ подходящими.

Π’ Ρ†Π΅Π»ΠΎΠΌ, ΠΎΠ΄Π½Π°ΠΊΠΎ, FancyGrid прСдставляСт собой довольно Π²ΡΠ΅ΠΎΠ±ΡŠΠ΅ΠΌΠ»ΡŽΡ‰ΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ с ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌΠΈ возмоТностями настройки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для своСго сайта.

Π’Π΅Π±-сайт/дСмонстрации

jQuery KingTable

KingTable β€” это слоТноС Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания слоТных условий поиска/Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ, идСально подходящСС для ΡƒΡ‡Π΅Ρ‚Π½Ρ‹Ρ… записСй, управлСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΉ, Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π½Π° Π΄Π°Π½Π½Ρ‹Π΅.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… Π½Π°ΡˆΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², KingTable ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° GitHub, Π° Π½Π° ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π²ΠΈΠΊΠΈ-страницС описаны всС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ настройки ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ использования ΠΏΠ»Π°Π³ΠΈΠ½Π°.

Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ поставляСтся с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Ρ‚Π΅ΠΌ (Π½ΠΎ общая Ρ†Π΅Π»ΡŒ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² соотвСтствии с вашими потрСбностями) ΠΈ нСсколькими Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ ΠΈ событиями, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ, этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° сильно ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° с ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои собствСнныС настраиваСмыС Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ ΠΈ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΡ‹ Π΄Π°Π½Π½Ρ‹Ρ…. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ настройки, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ большС ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡƒΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹. Однако, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ваша Ρ‚Π°Π±Π»ΠΈΡ†Π°, Ρ‚ΠΎ это ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

Мобильная ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стоит ΠΎΠ±ΡΡƒΠ΄ΠΈΡ‚ΡŒ. Плагин Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ особСнного для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, поэтому ваша Ρ‚Π°Π±Π»ΠΈΡ†Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π²Π±ΠΎΠΊ ΠΈΠ»ΠΈ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒ столбцы Π½Π° Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах). Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ это ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π½ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π΅ справится с этим Π·Π° вас. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π² Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠ΅ KingTable ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ с Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€ΠΎΠΉ, с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ΠΌ Π½Π° страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π»Π΅Π²ΠΎΠΉ ΠΈ ΠΏΡ€Π°Π²ΠΎΠΉ (ΠΈΠ»ΠΈ A / D) клавиш, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ нСбольшими ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡΠΌΠΈ.

Над KingTable ΡƒΠΆΠ΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ врСмя Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, ΠΈ Π·Π° Π³ΠΎΠ΄ Π±Ρ‹Π»ΠΎ сдСлано нСсколько ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ² ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ. Он ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ мСньшС, Ρ‡Π΅ΠΌ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, упомянутыС здСсь, Π½ΠΎ всС ΠΆΠ΅ это Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ для своих Π±ΡƒΠ΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².

Π’Π΅Π±-сайт/GitHub

ДокумСнтация (Wiki)

Stackable.js

Stackable.js β€” это ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, Ρ†Π΅Π»ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ β€” ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваши Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΏΡƒΡ‚Π΅ΠΌ настройки ΠΈΡ… ΠΌΠ°ΠΊΠ΅Ρ‚Π° для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройств.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, stackable.js ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах ваши элСмСнты Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Ρ‹Π»ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹. Он Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ запись строки ΠΎΠ΄Π½Ρƒ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΎΠΉ, Π° элСмСнты ΠΊΠ»ΡŽΡ‡/Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ пСрСчислСны рядом для простоты.

Π•ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нСсколько ΠΎΠΏΡ†ΠΈΠΉ ΠΈ докумСнтация ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π°, Π½ΠΎ вся Π΅Π΅ Ρ†Π΅Π»ΡŒ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ваши стандартныС элСмСнты Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π²ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π» ΠΈ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π» ΠΏΠ»Π°Π³ΠΈΠ½ Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ послСднСго Π³ΠΎΠ΄Π°, поэтому ΠΎΠ½ Π½Π΅ выглядит ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½. Однако, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ нСбольшой / Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, я Π½Π΅ оТидаю, Ρ‡Ρ‚ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ слишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ слоТный, Π²ΡΠ΅ΠΎΠ±ΡŠΠ΅ΠΌΠ»ΡŽΡ‰ΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставит Π²Π°ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ нСсколько Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈΠ· нашСго списка.

GitHub
Π’Π΅Π±-сайт/дСмонстрация

JQuery ReStable

Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваши Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ, прСобразуя ΠΊΠ°ΠΆΠ΄ΡƒΡŽ запись строки Π² ΡΠ΅Ρ€ΠΈΡŽ ΠΈΠ· li элСмСнтов для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ возмоТности ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Как ΠΈ stackable.js, этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΡ€ΠΈΠ·Π²Π°Π½ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваши Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. Плагин Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, настраивая ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки ΠΏΡ€ΠΈ просмотрС Π½Π° малСньком экранС. Он ΡƒΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚ столбцы ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ ΠΈΡ… Ρ‡Ρ‚Π΅Π½ΠΈΠ΅.

Π‘Π°ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… настроСк: ΠΎΠ½ Π½Π΅ добавляСт Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² для настройки; это простой ΠΏΠ»Π°Π³ΠΈΠ½ Π² стилС drop-and-go. Пока Ρƒ вас ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Π°Ρ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° ΠΈ Π²Ρ‹ добавляСтС Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ jQuery, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ всС, всС уладится само собой.

ReStable β€” довольно нСбольшой ΠΏΠ»Π°Π³ΠΈΠ½, ΠΈ поэтому Ρƒ Π½Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ нСсколько ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ² Π½Π° GitHub. Π­Ρ‚ΠΎ Π½Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ сообщСства/ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹, Ρ‡Ρ‚ΠΎ само ΠΏΠΎ сСбС Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Π½ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ это, Ссли Π²Π°ΠΌ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ понадобится ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° для ΠΏΠΎΠΌΠΎΡ‰ΠΈ. Как ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Β«ΠΊΠ°ΠΊ Π΅ΡΡ‚ΡŒΒ» ΠΈ Π½Π°Π΄Π΅ΡΡ‚ΡŒΡΡ Π½Π° Π»ΡƒΡ‡ΡˆΠ΅Π΅.

Π’Π΅Π±-сайт/дСмонстрация
GitHub

FooTable

FooTable β€” это ΠΏΠ»Π°Π³ΠΈΠ½ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ Boostrap, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ обСспСчиваСт поиск, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡŽ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†.

FooTable ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π° Boostrap, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ рассматривали Ρ€Π°Π½Π΅Π΅, Π½ΠΎ Ρ€Π°Π·Π½ΠΈΡ†Π° с FooTable Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ с Boostrap, Ρ‚Π°ΠΊ ΠΈ Π±Π΅Π· Π½Π΅Π³ΠΎ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Ρ„Π°ΠΉΠ»Ρ‹ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

Плагин ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡŽ, Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ ΠΏΠΎ страницам, сортировку ΠΈ встроСнноС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ВсС эти Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΏΡ€ΠΈ совмСстном использовании Π΄Π°ΡŽΡ‚ Π²Π°ΠΌ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС внСшнСго Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для рСдактирования Ρ‚Π°Π±Π»ΠΈΡ†.

На Π²Π΅Π±-сайтС описаны Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ настройки, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ, Π½ΠΎ Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ FooTable Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΊΡ€ΠΎΠ²Π΅Π½Π½Ρ‹ΠΌ, докумСнтация ΠΎΡ‡Π΅Π½ΡŒ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π° Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с событиями, настройками ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌΠΈ элСмСнтами. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ простой ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π² качСствС простой Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΉ Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ, Ρ‚Π°ΠΊ ΠΈ Π² качСствС ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° этот.

FooTable β€” Π΄Π»ΠΈΠ½Π½Ρ‹ΠΉ стандартный ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с нСсколькими сотнями ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ² ΠΎΡ‚ дСсятков участников. Π˜Π΄Π΅Ρ‚ постоянная Π΄Π΅ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Π½ΠΈΠ΅. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» протСстирован, ΠΈΡ‚Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ (с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… участников), Ρ‚ΠΎ этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΌ для вас. ВСрсия 3 этого ΠΏΠ»Π°Π³ΠΈΠ½Π° Π±Ρ‹Π»Π° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅Ρ€Π°Π±ΠΎΡ‚Π°Π½Π°, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ случайныС ошибки/ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, Π½ΠΎ, судя ΠΏΠΎ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ я Π²ΠΈΠ΄Π΅Π», ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ практичСски сразу послС установки с нСбольшой настройкой.

Π’Π΅Π±-сайт/дСмонстрация
GitHub

Tabella.js

Tabella β€” это ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ для создания динамичСских Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ фокусируСтся Π½Π° прСдоставлСнии Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ касания/пСрСлистывания для простой ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ…/слоТных Ρ‚Π°Π±Π»ΠΈΡ†.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Tabella для создания своСй Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π’Ρ‹ Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅ элСмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° для своСй Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π° Π·Π°Ρ‚Π΅ΠΌ прСдоставляСтС свои Π΄Π°Π½Π½Ρ‹Π΅ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° (с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ столбцов). Π‘Ρ‹Π»ΠΎ Π±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Ссли Π±Ρ‹ этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠ³ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π½Π΅ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ JSON ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΡ… Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ для очистки ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°, Π½ΠΎ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, прСдоставляя Π²Π°ΠΌ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

Если ваша главная Ρ†Π΅Π»ΡŒ β€” ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄Π»ΠΈΠ½Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠΉ, Ρ‚ΠΎ этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π² Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ простом, Π½ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ ΠΏΠ°ΠΊΠ΅Ρ‚Π΅.

Π’ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π½Π° Github Π½Π΅ Π±Ρ‹Π»ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… дСйствий с 2015 Π³ΠΎΠ΄Π°, Π½ΠΎ, учитывая Π΅Π³ΠΎ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, это ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΈΠ»ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°, Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, придСтся ΠΏΠΎΠ·Π°Π±ΠΎΡ‚ΠΈΡ‚ΡŒΡΡ ΠΎ сСбС, Π½ΠΎ этого слСдуСт ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ ΠΎΡ‚ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².

На этот ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ стоит ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш стол Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

GitHub
Π’Π΅Π±-сайт/ДСмонстрация

ПодвСдСниС ΠΈΡ‚ΠΎΠ³ΠΎΠ²

Π­Ρ‚ΠΎ лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ внСшнСго Π²ΠΈΠ΄Π° Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†. НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, заинтСрСсованы Π»ΠΈ Π²Ρ‹ просто Π² Π»Π΅Π³ΠΊΠΎΠΌ стилС ΠΈΠ»ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ поиск, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, сортировка столбцов, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Ajax/JSON, Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сдСлаСт Π²Π°ΡˆΡƒ Тизнь ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ надстройки для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ? ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π΄Ρ‹ ΡƒΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ ΠΎΡ‚ вас, Ссли Π²Ρ‹ использовали ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅Ρ‚ Π² спискС Π²Ρ‹ΡˆΠ΅.

НаконСц, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ свои Π½Π°Π²Ρ‹ΠΊΠΈ JavaScript, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с нашСй Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ ΠΊΠ½ΠΈΠ³ ΠΏΠΎ JavaScript!

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ΠΉ

Π‘Π°ΠΉΠΌΠΎΠ½ ΠšΠΎΠ΄Ρ€ΠΈΠ½Π³Ρ‚ΠΎΠ½

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ стСка ΠΈ Π²Π΅Π±-энтузиаст. МнС нравится всС, Ρ‡Ρ‚ΠΎ связано с Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΈ моя ΡΡ‚Ρ€Π°ΡΡ‚ΡŒ связана с созданиСм ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… Π²Π΅Π±-сайтов. Π‘ΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΠ²ΡˆΠΈΡΡŒ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π° WordPress, я создаю Ρ‚Π΅ΠΌΡ‹, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ.

    jameshjQuery

    10 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСльзя ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π² 2018 Π³ΠΎΠ΄Ρƒ

    Π˜Ρ‰Π΅Ρ‚Π΅ способ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠΏΠ»ΠΎΡˆΠ½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ свойствами ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ?

    Π—Π΄Π΅ΡΡŒ я пСрСчислил 10 ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅!

    Π‘Ρ‹Π»ΠΎ врСмя, ΠΊΠΎΠ³Π΄Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΡˆΠΈΡ€ΠΎΠΊΠΎ использовались Π² содСрТании ΠΈ Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Π² нашС врСмя, ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π½Π° основС Ρ‚Π°Π±Π»ΠΈΡ† Π² основном ΠΌΠ΅Ρ€Ρ‚Π²Ρ‹, ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ измСнился. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, это Π² основном для отобраТСния Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ выпуска.

    Ninja Tables – WordPress Table builder

    Π‘ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ концСпция процСсса дСмонстрации Ρ‚Π°Π±Π»ΠΈΡ† сильно измСнилась. Π£Π΄ΠΎΠ±Π½Ρ‹ΠΉ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств стол Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ являСтся Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’ настоящСС врСмя рассматриваСтся Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС вопросов. Π‘ΡƒΠ΄ΡƒΡ‡ΠΈ старой Ρ‡Π°ΡΡ‚ΡŒΡŽ HTML, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π΅ Π»ΡƒΡ‡ΡˆΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ подходят для Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства, ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ. Π’Π°Π±Π»ΠΈΡ†Ρ‹ Π² основном ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для отобраТСния Π²Π°ΡˆΠΈΡ… Π΄Π°Π½Π½Ρ‹Ρ…, ΠΈ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаСв ΠΈΡ… использования Π²ΠΏΠΎΠ»Π½Π΅ достаточно.

    Однако часто Π±Ρ‹Π²Π°Π΅Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Ρ‹Π»ΠΈ Π±ΠΎΠ»Π΅Π΅ соврСмСнными ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, обСспСчивая Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠ»ΠΈ прСдоставляя Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ поиск, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, сортировка ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π² этом постС я ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΠΏΡ€ΠΎΠΉΡ‚ΠΈΡΡŒ ΠΏΠΎ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π½Π° основС jQuery для создания, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ любого Ρ‚ΠΈΠΏΠ° Ρ‚Π°Π±Π»ΠΈΡ†.

    Π›ΡƒΡ‡ΡˆΠΈΠ΅ бСсплатныС ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Ρ‚Π°Π±Π»ΠΈΡ† jQuery

    Π—Π΄Π΅ΡΡŒ я собрал для вас 10 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для Ρ‚Π°Π±Π»ΠΈΡ† jQuery с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° своих Π²Π΅Π±-страницах. Π― надСюсь, Ρ‡Ρ‚ΠΎ это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ, ΠΈ ΠΎΠ½ΠΈ Π²Π°ΠΌ понравятся! Π”Π°Π²Π°ΠΉΡ‚Π΅ углубимся нСпосрСдствСнно Π² пост ΠΈ выясним Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Ρ‚Π°Π±Π»ΠΈΡ† jQuery.

    1. Dynatable

    jQuery Dynatable

    Плагин Dynatable jQuery Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Π·Π°Π΄Π°Ρ‡Π°ΠΌΠΈ создания Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ заслуТиваСт внимания. Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ²Π»Π΅Ρ‡Π΅Π½Ρ‹ JavaScript/jQuery, Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈΠ»ΠΈ докумСнтация ΠΌΠΎΠ³ΡƒΡ‚ вас ΠΎΡ‚ΠΏΡƒΠ³Π½ΡƒΡ‚ΡŒ.

    Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Dynatble, Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ всС Π³ΠΎΡ‚ΠΎΠ²ΠΎ ΠΊ использованию, ΠΈ Π²Π°ΠΌ Π½Π΅ ΠΎ Ρ‡Π΅ΠΌ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚ΡŒΡΡ. ВсС просто ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ идСально ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΈ, Ρ‡Ρ‚ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, Π²Π°ΠΌ Π½Π΅ понадобится ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ настройщик для ΠΏΠΎΠ»ΠΈΡ€ΠΎΠ²ΠΊΠΈ любой Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, нСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ старый, ΠΎΠ½ всС Π΅Ρ‰Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ с ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ возмоТностями. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ…Π²Π°ΡΡ‚Π°Ρ‚ΡŒΡΡ 70 572 Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°ΠΌΠΈ ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°ΠΌ Ρ‚ΠΎΡ‡Π½ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ.

    Dynatable позволяСт своим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ сортировку ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΠ»ΠΈ нСскольким столбцам, ΠΈ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π· ΠΏΠΎ Π²ΠΎΠ·Ρ€Π°ΡΡ‚Π°Π½ΠΈΡŽ, Π΅Ρ‰Π΅ Ρ€Π°Π· ΠΏΠΎ ΡƒΠ±Ρ‹Π²Π°Π½ΠΈΡŽ ΠΈ Π΅Ρ‰Π΅ Ρ€Π°Π·, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ сортировку ΠΏΠΎ этому столбцу. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ для Π²Π°ΡˆΠΈΡ… Ρ†Π΅Π»Π΅ΠΉ.

    Π›Π°ΠΊΠΎΠΌΡ‹Π΅ кусочки: ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ запрос ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ сортировка.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ:   Π’Π΅Π±-сайт ΠΈ GitHub .

    2. Π’Π°Π±Π»ΠΈΡ†Π° Bootstrap

    CSS ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ ΡˆΠΈΡ€ΠΎΠΊΠΎ популярСн, Π° Bootstrap β€” ΠΎΠ΄Π½Π° ΠΈΠ· Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… срСд CSS. Плагин Bootstrap table β€” это ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт Π²Π°ΠΌ всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для выполнСния минимальной Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅.

    ΠΠ°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery

    Одной ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… особСнностСй ΠΏΠ»Π°Π³ΠΈΠ½Π° являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΡ‰Π½ΠΎΡΡ‚ΡŒ ΠΈ возмоТности ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ своих Ρ‚Π°Π±Π»ΠΈΡ†, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌΠΈ. Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ этому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, поиск, условноС ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ столбцов ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ столбцы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ довольно простой.

    Плагин поддСрТиваСтся тысячами участников ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ тысячи ΠΊΠΎΠΌΠΌΠΈΡ‚ΠΎΠ². Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΠ»Π°Π³ΠΈΠ½Π° β€” это Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½Ρ‹ΠΉ процСсс, ΠΈ это Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉΡΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ.

    Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ историчСски ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ обСспСчивал ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ своих ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΈ ΠΎΠ½ постоянно ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΠΎΠ²Π°Π»ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅. Π’Ρ‹Π±ΠΎΡ€ этого ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΡƒΠ΄Ρ€Ρ‹ΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ для вас. Плагин Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ мноТСство Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ для прСдоставлСния большого количСства ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… услуг.

    Π›Π°ΠΊΠΎΠΌΡ‹Π΅ кусочки : НаходчивоС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅. Экспорт Π² CSV ΠΈ JSON.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½: Π²Π΅Π±-сайт  ΠΈ  Demo .

    3. Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Ρ‰ΠΈΠΊ Ρ‚Π°Π±Π»ΠΈΡ† jQuery

    jQuery Table Sorter β€” это ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с Ρ‚Π΅Π³Π°ΠΌΠΈ THEAD TBODY Π² ΡΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡƒΡŽ Π±Π΅Π· обновлСния страницы.

    jQuery Table Sorter

    Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ мноТСство Ρ‚ΠΈΠΏΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ…, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ связанныС Π΄Π°Π½Π½Ρ‹Π΅ Π² ячСйкС. Плагин Table Sorter ΠΈΠΌΠ΅Π΅Ρ‚ мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Π­Ρ‚ΠΎ позволяСт ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ нСсколько столбцов ΠΈ нСсколько Ρ‚Π΅Π».

    Одним ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Ρ… аспСктов ΠΏΠ»Π°Π³ΠΈΠ½Π° являСтся Π΅Π³ΠΎ ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с IE 6.0+, FF2+, Safari 2.0+, Opera 9..0+ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ систСму Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅Ρ‚ возмоТности использования.

    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π° ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ сайтС ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° Github.

    4. DataTables

    Π­Ρ‚ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прСдоставляСт Π²Π°ΠΌ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для создания Π»ΡŽΠ±Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ сортировка, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΡ, Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠ° Π½Π° страницы ΠΈ настраиваСмыС Ρ‚Π΅ΠΌΡ‹. Плагин отличаСтся ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΠ±ΡˆΠΈΡ€Π½ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ созданиС своСй Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    Data Tables Plugin

    Π¨ΠΈΡ€ΠΎΠΊΠΈΠ΅ возмоТности ΠΈ возмоТности настройки Π΄Π΅Π»Π°ΡŽΡ‚ этот ΠΏΠ»Π°Π³ΠΈΠ½ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Плагин прСдоставляСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π½ΠΎ ΠΈ ΡΠΎΠ»ΠΈΠ΄Π½ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ. Π˜Π½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡ с Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ CSS для измСнСния стиля ΠΏΠ»Π°Π³ΠΈΠ½Π° довольно вСличСствСнна.

    Одной ΠΈΠ· Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… частСй ΠΏΠ»Π°Π³ΠΈΠ½Π° являСтся Π΅Π³ΠΎ ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½Π°Ρ систСма ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Ρ‡Π΅Ρ€Π΅Π· ΠΎΡ‚Ρ‡Π΅Ρ‚Ρ‹ ΠΎΠ± ΠΎΡˆΠΈΠ±ΠΊΠ°Ρ… GitHub ΠΈΠ»ΠΈ прямой ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ Ρ‡Π΅Ρ€Π΅Π· Ρ„ΠΎΡ€ΡƒΠΌ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ DataTables Π² ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΡƒΡŽ систСму ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ критичСски Π²Π°ΠΆΠ½ΠΎΠ΅. Π’ этом случаС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ приобрСсти ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½ΡƒΡŽ Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ, которая Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΏΡ€ΡΠΌΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

    Π’ Ρ†Π΅Π»ΠΎΠΌ, я ΠΌΠΎΠ³Ρƒ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ DataTables ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ элСмСнтом ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈ ΠΏΠΎΠΌΠΎΡ‰Π½ΠΈΠΊΠΎΠΌ.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½:  Π’Π΅Π±-сайт ΠΈ дСмовСрсия.

    5. Sortable β€” ΠΏΠ»Π°Π³ΠΈΠ½ jQuery

    Sortable β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых извСстных ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² основном Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для сортировки Ρ‚Π°Π±Π»ΠΈΡ†. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ сортировки, Π²Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΈ всС Π±ΡƒΠ΄Π΅Ρ‚ сдСлано! ?

    Плагин сортируСмой Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹

    Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ прСдставляСт собой ΠΏΠ»Π°Π³ΠΈΠ½ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, основанный Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ JavaScript ΠΈ CSS. Основная ΠΎΠ±ΡΠ·Π°Π½Π½ΠΎΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Π° β€” сортировка Ρ‚Π°Π±Π»ΠΈΡ†. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любой сцСнарий ΠΈ ΡΡ‚ΠΈΠ»ΡŒ с 6 ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΌΠΈ Ρ‚Π΅ΠΌΠ°ΠΌΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π°.

    Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΡƒΠ΄ΠΎΠ±Π΅Π½ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΌΠ°Π»ΠΎ мСста ΠΈ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ зависимостСй. Π­Ρ‚ΠΎ кросс-браузСрная ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ, которая ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ с IE8+ , Firefox 4+ , Current Webkit (Chrome, Safari) ΠΈ 9.0017 ΠžΠΏΠ΅Ρ€Π° Ρ‚ΠΎΠΆΠ΅.

    Π§Ρ‚ΠΎΠ±Ρ‹ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ Π² Π²Π°ΡˆΡƒ срСду, Π²Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ стили ΠΈ исходный скрипт. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π±Π°Π·Ρ‹ ΠΊΠΎΠ΄Π° ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅ для вашСго Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ понимания.

       

    Π—Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ sortable Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ классы.

     <Ρ‚Π°Π±Π»ΠΈΡ†Π° с сортировкой Π΄Π°Π½Π½Ρ‹Ρ…>
        
     

    Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π±Π΅Π· ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½:  Π’Π΅Π±-сайт ΠΈ GitHub.

      6. JSON Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

    JSON Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Плагин jQuery позволяСт Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ† ΠΈΠ· Π΄Π°Π½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π° JSON. Плагин создаст Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, ΠΏΠΎΠ»Π½ΡƒΡŽ Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ·Π²Π»Π΅ΠΊΠ°ΡŽΡ‚ΡΡ ΠΈΠ· бэкэнда.

    JSON для Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery.

    Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ являСтся прСвосходным ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Bootstrap с ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ разбиСния Π½Π° страницы ΠΈ дСйствиями. Π’Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваши Π΄Π°Π½Π½Ρ‹Π΅ JSON ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΈΡ… Π² ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ JSON to Bootstrap, ΠΈ ΠΎΠ½ динамичСски создаст Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ.

    Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΠΎΠ³ΠΎ модуля jQuery Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ страницы, столбСц ΠΏΠ΅Ρ€Π²ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΊΠ»ΡŽΡ‡Π°, ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ/ΡΠΊΡ€Ρ‹Ρ‚ΡŒ/Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ дСйствия ΠΈ Ρ‚. Π΄.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ:

    7. TinyTable β€” ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ‚Π°Π±Π»ΠΈΡ† jQuery

    TinyTable β€” ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания Π»ΡŽΠ±Ρ‹Ρ… Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†. ВсС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ мобильного Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°/Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°, ΠΈ этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Π°ΡˆΡƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

    Плагин jQuery для TinyTable

    Плагин автоматичСски ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. БущСствуСт ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Β«ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅Β», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅, Π° ΠΏΡ€ΠΈ Π΅Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π½Π° мобильном Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ ТСст смахивания.

    БущСствуСт Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ β€” ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с двумя столбцами, которая растягиваСт ваш сайт ΠΏΠΎ всСй Π΄Π»ΠΈΠ½Π΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² дСмонстрации Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†, ΡƒΠΊΡ€Π°ΡˆΠ°Ρ ΠΈΡ….

    Плагин кроссбраузСрно совмСстим с IE9, IE10, IE11, Firefox, Safari, Opera ΠΈ Chrome ΠΈ Ρ‚. Π΄. Π­Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ для Ρ€Π°Π±ΠΎΡ‚Ρ‹.

    Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½: C Π’Π΅Π±-сайт odecanyon.

    8. Tablesaw β€” бСсплатный ΠΏΠ»Π°Π³ΠΈΠ½ jQuery

    Π­Ρ‚ΠΎ бСсплатный ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠ΅ прСдставлСниС с сохранСниСм качСствСнных Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ экрана. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ слоТно ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с Π½Π°Π΄Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ экрана. Плагин

    Tablesaw jQuery Плагин

    Tablesaw jQuery Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя нСсколько Ρ‚ΠΈΠΏΠΎΠ² Ρ€Π΅ΠΆΠΈΠΌΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π°ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваши Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. ΠšΡ€Π°Ρ‚ΠΊΠΈΠΉ список Ρ€Π΅ΠΆΠΈΠΌΠΎΠ² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅:

    • Π‘Ρ‚Π΅ΠΊ β€” это ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² Π΄Π²Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π° столбца с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ слСва ΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ справа. Π­Ρ‚ΠΎ происходит, ΠΊΠΎΠ³Π΄Π° ΠΎΠΊΠ½ΠΎ просмотра мСньшС 40 em ΠΈΠ»ΠΈ 640 пиксСлСй Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ.
    • ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ столбцов β€” позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ столбца.
    • Π Π΅ΠΆΠΈΠΌ смахивания β€” ИспользованиС Ρ€Π΅ΠΆΠΈΠΌΠΎΠ² смахивания.
    • ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ Ρ€Π΅ΠΆΠΈΠΌΠ° β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌΠΈ.
    • Sortable β€” Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для сортировки Π΄Π°Π½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.
    • ΠšΡƒΡ…ΠΎΠ½Π½Π°Ρ ΠΌΠΎΠΉΠΊΠ° – Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для объСдинСния всСх Ρ€Π΅ΠΆΠΈΠΌΠΎΠ² Π² ΠΎΠ΄Π½ΠΎΠΌ устройствС.
    • ΠžΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ всС β€” Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ„Π»Π°ΠΆΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„Π»Π°ΠΆΠΊΠΎΠ² Π² столбцС.

    Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ стал пСрвоклассной ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ для IE9+, Android Browser 2.3 ΠΈ Blackberry OS 6+.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½: GitHub .

    9. Плагин Tablesorter β€” jQuery Table

    Плагин Tablesorter jQuery β€” это бСсплатный ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для прСобразования стандартной HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ ΡΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ. ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π΅ΠΌΡƒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ страницу ΠΏΡ€ΠΈ сортировкС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Плагин ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅Π³ΠΊΠΎ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ‚ΠΈΠΏΡ‹ Π΄Π°Π½Π½Ρ‹Ρ…, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ связанныС Π΄Π°Π½Π½Ρ‹Π΅ Π² ячСйкС.

    tablesorter jQuery Pluign

    Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Tablesorter, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ возмоТности, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π°Π»Ρ„Π°Π²ΠΈΡ‚Π½ΠΎ-цифровая сортировка, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π° страницы, нСсколько Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ², Π»ΠΈΠΏΠΊΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π΅ΠΌΡ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ столбцов ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ Ρ‚. Π΄.

    Tablesorter ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Bootstrap V2-4 ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ парсСры, доступныС для сортировки простого тСкста, URL-адрСсов, чисСл с ΠΏΠ»Π°Π²Π°ΡŽΡ‰Π΅ΠΉ запятой, Ρ†Π΅Π»Ρ‹Ρ… чисСл, Π²Π°Π»ΡŽΡ‚Ρ‹, IP-адрСса, Π΄Π°Ρ‚Ρ‹ ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ Ρ‚. Π΄. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ собствСнный парсСр ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. Плагин ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ малСнький Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°, начиная всСго с 25 ΠšΠ‘ Π² ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½: GitHub .

    10. FooTable β€” ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery

    FooTable β€” ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠΉ. Плагин встроСн Π² jQuery ΠΈ Π² основном Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Bootstrap. Π­Ρ‚ΠΎ ΡƒΠΌΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅Π»Π°Π΅Ρ‚ ваши Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΡƒΠΌΠ½Π΅Π΅, Ρ‡Π΅ΠΌ ΠΊΠΎΠ³Π΄Π°-Π»ΠΈΠ±ΠΎ.

    FooTable Плагин jQuery

    FooTable позволяСт ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ столбцы Π½Π° Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах ΠΈ ΡƒΡΡ‚Ρ€Π°Π½ΡΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ для большой Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ строку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ содСрТимоС скрытых столбцов.

    НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, сколько столбцов Π΄Π°Π½Π½Ρ‹Ρ… Ρƒ вас ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅, созданной этим ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΌ, FooTable ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ всС эти HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    Плагин прСдоставляСт своим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ 3 Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹ для стола, ΠΈ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ CSS Π² любом мСстС стола. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ сСлСктор CSS, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‚Π°Ρ€Π³Π΅Ρ‚ΠΈΠ½Π³ Π½Π° Π»ΡŽΠ±ΡƒΡŽ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π½Π° вашСм сайтС.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½: GitHub .

    Π­Ρ‚ΠΎ самыС Π²Π»ΠΈΡΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ создании любой динамичСской Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π½Π° вашСм сайтС. ВсС пСрСчислСнныС здСсь ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для создания Ρ‚Π°Π±Π»ΠΈΡ† практичСски ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. Π›ΡŽΠ±ΠΎΠΉ ΠΈΠ· этих ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², упомянутых Π²Ρ‹ΡˆΠ΅, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ для вас.

    ПослС прочтСния поста Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ любом ΠΏΠ»Π°Π³ΠΈΠ½Π΅ для WordPress, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»ΡƒΡ‡ΡˆΠ΅ всСго слуТит Ρ‚ΠΎΠΉ ΠΆΠ΅ Ρ†Π΅Π»ΠΈ. Π― Π±Ρ‹ ΠΏΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Π²Π°ΠΌ Ninja Tables WordPress Plugin , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создан Π½Π° основС ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery ΠΈ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ Bootstrap Π² ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ для WordPress ΠΌΠ°Π½Π΅Ρ€Π΅.

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ Ninja Tables

    Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

    Π’ практичСских случаях сущСствуСт мноТСство способов добавлСния Ρ‚Π°Π±Π»ΠΈΡ† Π½Π° сайт, всС зависит ΠΎΡ‚ вас, ΠΊΠ°ΠΊΠΈΠ΅ Ρ‚ΠΈΠΏΡ‹ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ WordPress ΠΈΠ»ΠΈ ΠΈΠΌ Π±Ρ‹Ρ‚ΡŒ.

    Если Π²Ρ‹ Π½Π΅ ΡΠ²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ WordPress, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любой ΠΈΠ· упомянутых Π²Ρ‹ΡˆΠ΅ Π² спискС. Или, Ссли Π²Ρ‹ ΡΠ²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ WordPress, я Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ Π²Π°ΠΌ Π±Π΅Π· всяких сомнСний Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ninja Tables.

    Если Π²Ρ‹ ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΈΠ· Π½ΠΈΡ…, сообщитС ΠΌΠ½Π΅ ΠΎ своСм ΠΎΠΏΡ‹Ρ‚Π΅ использования ΠΏΠ»Π°Π³ΠΈΠ½Π°. Или, Ссли Π²Ρ‹ Π΅Ρ‰Π΅ Π½Π΅ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ, просто ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ любой ΠΈΠ· Π½ΠΈΡ…. Π‘ΠΎΠΎΠ±Ρ‰ΠΈΡ‚Π΅ Π½Π°ΠΌ ΠΎ Π²Π°ΡˆΠΈΡ… трСбованиях, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ прСдлоТСния ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅.

    Если Π²Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ WordPress, Ρ‚ΠΎ Π²Π°ΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎ стоит ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ninja Tables.

    Плагин Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery

    Плагин Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery β€” страница 1

    Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ бСсплатныС ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ jQuery Data Table, Data Grid, Table Sort ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ Π² нашСм Ρ€Π°Π·Π΄Π΅Π»Π΅ jQuery Table Plugin. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° 1 .

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 49 просмотров

    ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π² использовании ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ столбцов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ пСрСтаскивания ΠΌΡ‹ΡˆΡŒΡŽ.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 41471 просмотров

    Tabulator β€” это ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для создания простых ΠΈΠ»ΠΈ слоТных Ρ‚Π°Π±Π»ΠΈΡ† Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· Π»ΡŽΠ±Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… JSON.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 154 просмотров

    ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ для создания ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ, Π²Ρ‹ΡΠΎΠΊΠΎΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ, ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈ настраиваСмой Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹/сСтки Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ· Π±ΠΎΠ»ΡŒΡˆΠΈΡ… объСмов Π΄Π°Π½Π½Ρ‹Ρ….

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 500 просмотров

    Π›Π΅Π³ΠΊΠΈΠΉ, Π½ΠΎ настраиваСмый ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠΈ Π½Π° страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ большоС количСство строк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π½Π° страницы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ вашСй большой HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 39044 просмотров

    Bootstrap Table β€” это ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ, Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΉ, Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ, ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈ Π»Π΅Π³ΠΊΠΎ настраиваСмый ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… jQuery для Bootstrap 4, Bootstrap 3 ΠΈ Bootstrap 2.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 39623 просмотров

    ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ fancyTable jQuery добавляСт ΠΌΠΎΠ»Π½ΠΈΠ΅Π½ΠΎΡΠ½ΡƒΡŽ сортировку Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Ρ€Π°Π·Π±ΠΈΠ²ΠΊΡƒ Π½Π° страницы ΠΈ поиск Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² Π²Π°ΡˆΡƒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π΄Π°Π½Π½Ρ‹Ρ….

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 16839 просмотров

    tui.grid β€” это Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ сСтки Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ динамичСски ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ большиС Π΄Π°Π½Π½Ρ‹Π΅ Π² Π²Ρ‹ΡΠΎΠΊΠΎΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ сСткС Π΄Π°Π½Π½Ρ‹Ρ… Π·Π° ΠΌΠΈΠ½ΡƒΡ‚Ρƒ.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 201 просмотров

    Плагин сортировки Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ автоматичСски Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ подходящий ΠΌΠ΅Ρ‚ΠΎΠ΄ сортировки Π½Π° основС значСния Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ слоТныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с rowspan/colspan.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 528 просмотров

    Π›Π΅Π³ΠΊΠΈΠΉ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ваши HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ (ΠΈΠ»ΠΈ Π΄Π°Π½Π½Ρ‹Π΅ JSON) Π² ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΌΠΈ функциями.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 375 просмотров

    ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ JavaScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаСт ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π΄Π°Π½Π½Ρ‹Ρ…, которая ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ любой Ρ‚ΠΈΠΏ Π΄Π°Π½Π½Ρ‹Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡΡ‚Π°Ρ‚ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ HTML, массивы JS, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ JS ΠΈ Π΄Π°Π½Π½Ρ‹Π΅ Ajax JSON.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 70857 просмотров

    handsontable β€” это мощная, гибкая, ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ, похоТая Π½Π° Excel Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° сСток/Ρ‚Π°Π±Π»ΠΈΡ† Π΄Π°Π½Π½Ρ‹Ρ… CRUD для JavaScript, Angular, React ΠΈ Vue.js.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 382 просмотров

    Π›Π΅Π³ΠΊΠΈΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π»Π°ΠΆΠΊΠΈ для Π²Ρ‹Π±ΠΎΡ€Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… строк Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ HTML.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 172 просмотров

    Плагин jQuery, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΉ нСсколько API для простого прСобразования чисСл Π² HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 1739 просмотров

    Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ, настраиваСмый ΠΏΠ»Π°Π³ΠΈΠ½ jQuery для динамичСских Ρ‚Π°Π±Π»ΠΈΡ† Π΄Π°Π½Π½Ρ‹Ρ… для прСдставлСния Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Π½Π°Π±ΠΎΡ€ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ… Π² Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΌ Π²ΠΈΠ΄Π΅ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ сортировки, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈ пСрСтаскивания.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 331 просмотров

    Π›Π΅Π³ΠΊΠΈΠΉ, Π½ΠΎ ΠΌΠΎΡ‰Π½Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery JSON to Table, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ быстро создаСт HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈΠ· прСдоставлСнных Π²Π°ΠΌΠΈ массивов JSON ΠΈΠ»ΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² JSON.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 4667 просмотров

    Плагин jQuery, ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‰ΠΈΠΉ экспорт Ρ‚Π°Π±Π»ΠΈΡ† Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ JSON, XML, CSV, TSV, TXT, SQL, DOC, XLS, XLSX, PNG ΠΈΠ»ΠΈ PDF.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 48763 просмотров

    ΠœΠΎΡ‰Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery ΠΈ Vanilla JavaScript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт динамичСски ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ элСктронныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ сСтка Π΄Π°Π½Π½Ρ‹Ρ… CRUD (Ρ‚Π°Π±Π»ΠΈΡ†Π°), ΠΈΠ· Π»ΠΎΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… JS ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² JSON, CSV, XSLX.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 2383 просмотров

    ΠšΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΎΠ±Ρ‹Ρ‡Π½ΡƒΡŽ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ прСобразования Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 49074 просмотров

    Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ Ρ‚Π°Π±Π»ΠΈΡ† Π½Π° основС jQuery Π² CSV, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ экспортируСт Π²Π°ΡˆΡƒ html-Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹ΠΉ Ρ„Π°ΠΉΠ» CSV.

    Π”Π΅ΠΌΠΎΠ‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

    β€” Π’Π°Π±Π»ΠΈΡ†Π° β€” 2928 просмотров

    ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ„Π»Π°ΠΆΠΎΠΊ Β«ΠžΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ всС», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ всС ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ строки Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ HTML.

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ
    • ПослСдний

    Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery – stats.seandolinar.com

    Для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ я Ρ€Π°Π±ΠΎΡ‚Π°Π», ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ быстроС ΠΈ простоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для создания динамичСской Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π½Π° основС Π΄Π°Π½Π½Ρ‹Ρ…, ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹Ρ… ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ ΠΈΠ· Π²Ρ‹Π·ΠΎΠ²Π° AJAX. Π― использовал jQuery для создания Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ HTML ΠΈ управлСния Сю, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ jQuery Π±Ρ‹Π»ΠΎ быстро, ΠΈ ΠΎΠ½ ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π² ΠΌΠΎΠ΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

    ПослС рассмотрСния Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² ΠΊ этому я Ρ€Π΅ΡˆΠΈΠ», Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ массивы Π±ΡƒΠ΄ΡƒΡ‚ самым простым способом ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…. Π”Π°Π½Π½Ρ‹Π΅ выглядят Ρ‚Π°ΠΊ:

    ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ = {
        k: ['Имя', 'Π ΠΎΠ΄ занятий', 'Π—Π°Ρ€ΠΏΠ»Π°Ρ‚Π°', 'БосСд ΠΏΠΎ ΠΊΠΎΠΌΠ½Π°Ρ‚Π΅'],
        v: [['Π§Π΅Π½Π΄Π»Π΅Ρ€', 'ΠœΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ ΠΏΠΎ Π·Π°ΠΊΡƒΠΏΠΊΠ°ΠΌ ИВ', '120 000 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ²', 'Π”ΠΆΠΎΡƒΠΈ'],
            ['Π”ΠΆΠΎΡƒΠΈ', 'Π‘Π΅Π·Ρ€Π°Π±ΠΎΡ‚Π½Ρ‹ΠΉ Π°ΠΊΡ‚Π΅Ρ€', '50 000 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ²', 'Π§Π΅Π½Π΄Π»Π΅Ρ€'],
            ['Моника', 'Π¨Π΅Ρ„', '80 000 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ²', 'РэйчСл'],
            ['РэйчСл', 'ΠŸΠΎΠΌΠΎΡ‰Π½ΠΈΠΊ покупатСля', '70 000 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ²', 'Моника'],
            ['Росс', 'Π”ΠΈΠ½ΠΎΠ·Π°Π²Ρ€Ρ‹', '100 000 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ²', 'НСт сосСда ΠΏΠΎ ΠΊΠΎΠΌΠ½Π°Ρ‚Π΅']]
    }
     

    Π­Ρ‚ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ JavaScript с двумя ΠΊΠ»ΡŽΡ‡Π°ΠΌΠΈ: ΠΎΠ΄ΠΈΠ½ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я сократил k , ΠΈ основныС значСния Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΊΠ»ΡŽΡ‡ v . Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ β€” это просто массив строк, Π° значСния β€” это массив массивов. Π― ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π» этот ΠΊΠΎΠ΄ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с этими ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ, поэтому ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ встроСно большС ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΎΠΊ, Π½ΠΎ источник Π΄Π°Π½Π½Ρ‹Ρ… довольно ТСсткий.

    Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ класс Table , я ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ» Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹:

    Π’Π°Π±Π»ΠΈΡ†Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ () {
        //устанавливаСт Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹
        this.header = [];
        это.Π΄Π°Π½Π½Ρ‹Π΅ = [[]];
        this.tableClass = ''
    }
     

    ИспользованиС этого ΠΊΠΎΠ΄Π° ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ излишнС, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ. Π― ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΡŽ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½ΠΎΠ²Ρ‹ΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ функциями. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ° позволяСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ Ρ‡ΠΈΡ‰Π΅.

    Π£ мСня Π΅ΡΡ‚ΡŒ Ρ‚Ρ€ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° установки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ просто ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ Table ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ свои Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ….

    Table.prototype.setHeader = функция (ΠΊΠ»ΡŽΡ‡ΠΈ) {
        //устанавливаСт Π΄Π°Π½Π½Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
        this.header = ΠΊΠ»ΡŽΡ‡ΠΈ
        Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ это
    }
    
    Table.prototype.setData = функция (Π΄Π°Π½Π½Ρ‹Π΅) {
        //устанавливаСм основныС Π΄Π°Π½Π½Ρ‹Π΅
        это.Π΄Π°Π½Π½Ρ‹Π΅ = Π΄Π°Π½Π½Ρ‹Π΅
        Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ это
    }
    
    Table.prototype.setTableClass = функция (tableClass) {
        //Π·Π°Π΄Π°Π΅ΠΌ имя класса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
        this.tableClass = класс Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
        Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ это
    }
     

    Π’ΠΎ всСх ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я написал, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ это . Π­Ρ‚ΠΎ позволяСт ΡΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΊΠΎΠ΄Π°. Основная Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π° находится Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ build .

    Table.prototype.build = функция (ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€) {
    
        //сСлСктор ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ
        ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ = ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ || '.table-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€'
     
        //создаСт Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ
        Ρ‚Π°Π±Π»ΠΈΡ†Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… = $('

    β€˜).addClass(this.tableClass) var tr = $(β€˜

    β€˜) //создаСт строку var th = $(β€˜

    β€˜).append(Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ)) //создаСт var tbody = $(β€˜

    β€˜) //заполняСт Ρ‚Π΅Π»ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ this. data.forEach (функция (d) { var row = tr.clone() // создаСт строку d.forEach (функция (e, j) { row.append(td.clone().text(e)) // заполняСт строку }) tbody.append(row) //ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ строку Π² tbody }) $(container).append(table.append(tbody)) //ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ всю Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ это }

    Π― Π°Π½Π½ΠΎΡ‚ΠΈΡ€ΠΎΠ²Π°Π» Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°, Π½ΠΎ Π² основном это создаСт ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ jQuery для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ части структуры Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹: Ρ‚Π°Π±Π»ΠΈΡ†Π° ( Ρ‚Π°Π±Π»ΠΈΡ†Π° ), строка ( tr ), ячСйка Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ( th ) ΠΈ обычная ячСйка Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ( td ). ΠœΠ΅Ρ‚ΠΎΠ΄ clone() Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ jQuery создал Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ элСмСнт HTML. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ элСмСнт.

    Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ созданный ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ довольно просто, ΠΌΡ‹ ΡƒΠΆΠ΅ сдСлали ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ слово new для создания экзСмпляра Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°. Π­Ρ‚ΠΎ позволяСт Π½Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… нСзависимых Π’Π°Π±Π»ΠΈΡ†Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

    //создаСт Π½ΠΎΠ²Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
    Ρ‚Π°Π±Π»ΠΈΡ†Π° ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ… = новая Ρ‚Π°Π±Π»ΠΈΡ†Π° ()
        
    //устанавливаСт Π΄Π°Π½Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ строит Π΅Π΅
    стол
        .setHeader(Π΄Π°Π½Π½Ρ‹Π΅.k)
        .setData(Π΄Π°Π½Π½Ρ‹Π΅.v)
        .setTableClass (Β«Π¨ΠΎΠ½Β»)
        .ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ()
     

    Π’Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° с Ρ†Π΅ΠΏΠΎΡ‡ΠΊΠΎΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ². Π­Ρ‚ΠΎ позволяСт Π½Π°ΠΌ Π½Π΅ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ строки ΠΊΠΎΠ΄Π° для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выглядСл Π±Ρ‹ ΠΊΠ°ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π°.setData() . Π― использовал setHeader() для установки массива ( data.k ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ заполняСт Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. ΠœΠ΅Ρ‚ΠΎΠ΄ setData() устанавливаСт массив массива ( data.v ) Π² качСствС источника Π΄Π°Π½Π½Ρ‹Ρ… для ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    НаконСц, ΠΌΠ΅Ρ‚ΠΎΠ΄ build() ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ установили, для фактичСского запуска ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ HTML, ΠΈ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π² своСм Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

    ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π½Π° Π²Π΅Π±-страницС, Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ HTML. (И Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Π° выглядСла ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½ΠΎ. ) Π‘Π°ΠΌΠΎΠ΅ Π³Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎ div ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈΠΌΠ΅Π΅Ρ‚ класс "стол-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€" . Класс Table ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡ‰Π΅Ρ‚ этот класс для добавлСния Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ это, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² строку Π²Ρ‹Π±ΠΎΡ€Π° jQuery Π² качСствС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Π² ΠΌΠ΅Ρ‚ΠΎΠ΄Π΅ table.build([строка Π²Ρ‹Π±ΠΎΡ€Π° jQuery]) .

    
    
        
    
     

    Π’Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π° рабочая вСрсия всСго ΠΊΠΎΠ΄Π° Π²Ρ‹ΡˆΠ΅. ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я использовал для этого поста, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° ΠΌΠΎΠ΅ΠΌ GitHub.

    β€˜) //создаСт ячСйки Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ var td = $(β€˜

    β€˜) //создаСт ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ var header = tr.clone() //создаСт строку Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° //заполняСт строку Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° this.header.forEach (функция (d) { header.append(th.clone().text(d)) }) // присоСдиняСм строку Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° table.append($(β€˜

    Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ

    Для отобраТСния Π΄Π°Π½Π½Ρ‹Ρ… Π½Π° Π²Π΅Π±-страницах Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π² основном ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ div вмСсто HTML-Ρ‚Π°Π±Π»ΠΈΡ†. ЦСль состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΎΠΏΡ‹Ρ‚.

    ИмСнно поэтому ΠΌΡ‹ дСмонстрируСм ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ† jQuery для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, ΠΊΠ°ΠΊ Π²Ρ‹, ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ практичСски Π±Π΅Π· усилий.

    Команда профСссионалов ΠΈΠ· wpDataTables собрала Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ….

    ВзглянитС Π½Π° Π½ΠΈΡ…!

    ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ Neat jQuery Table

    Freezeheader

    Freezeheader, ΠΊΠ°ΠΊ слСдуСт ΠΈΠ· названия, Π·Π°ΠΌΠΎΡ€Π°ΠΆΠΈΠ²Π°Π΅Ρ‚ строку Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² стандартной HTML-Ρ‚Π°Π±Π»ΠΈΡ†Π΅. Π­Ρ‚ΠΎ простой ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, Ρ‚Π°ΠΊΠΆΠ΅ извСстный ΠΊΠ°ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π° фиксированных Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ².

    jQueryTabledit

    jQueryTabledit β€” встроСнный Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ HTML-Ρ‚Π°Π±Π»ΠΈΡ†, совмСстимый с Bootstrap. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠ°ΠΊ Π² элСктронной Ρ‚Π°Π±Π»ΠΈΡ†Π΅, Ρ‚Π°ΠΊ ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΎΠΊ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π΅ΠΆΠΈΠΌΠ°ΠΌΠΈ рСдактирования ΠΈ просмотра.

    Π’Π°Π±Π»ΠΈΡ†Π° фиксированных Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ²

    Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery создаСт Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с фиксированными Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для любой допустимой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ HTML.

    WaTable

    WaTable β€” это настраиваСмый ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ‚Π°Π±Π»ΠΈΡ† jQuery. Он ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ сортировки, Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠΈ ΠΏΠΎ страницам ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ.

    Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… Π² WordPress?

    wpDataTables ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π·Π° вас. Π•ΡΡ‚ΡŒ вСская ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ это ΠΏΠ»Π°Π³ΠΈΠ½ WordPress β„–1 для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ.

    ЀактичСский ΠΏΡ€ΠΈΠΌΠ΅Ρ€ wpDataTables Π² Π΄ΠΈΠΊΠΎΠΉ ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅

    И ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого:

    1. Π’Ρ‹ прСдоставляСтС Π΄Π°Π½Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹
    2. ΠΠ°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ
    3. ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Π² постС ΠΈΠ»ΠΈ Π½Π° страницС

    И это Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ красиво, Π½ΠΎ ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½ΠΎ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ большиС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с ΠΌΠΈΠ»Π»ΠΈΠΎΠ½Π°ΠΌΠΈ строк, ΠΈΠ»ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ ΠΈ поиск, ΠΈΠ»ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΡ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ.

    Β«Π”Π°, Π½ΠΎ я просто слишком люблю Excel, Π° Π½Π° сайтах Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Π½Π΅Ρ‚Β». Π”Π°, Π΅ΡΡ‚ΡŒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ условноС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Π² Excel ΠΈΠ»ΠΈ Google Sheets.

    Π― Π³ΠΎΠ²ΠΎΡ€ΠΈΠ» Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ с вашими Π΄Π°Π½Π½Ρ‹ΠΌΠΈ? И это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ малая Ρ‡Π°ΡΡ‚ΡŒ. Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ для вас.

    Π’Π°Π±Π»ΠΈΡ†Π° Π΄Π°Π½Π½Ρ‹Ρ… Bootstrap

    Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для стилизации. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡ€ΠΎΠ»ΠΈΡΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²Π°Ρ‚ΡŒ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для Π·Π½Π°Ρ‡ΠΊΠΎΠ² FontAwesome, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² Π·Π½Π°Ρ‡ΠΊΠ°Ρ… Ρ‚Π°Π±Π»ΠΈΡ†.

    Datable

    Datatable β€” это ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для разбиСния Π½Π° страницы Ρ‚Π°Π±Π»ΠΈΡ† jQuery, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ AJAX.

    Bootstrap Table

    Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ с Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Он ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π΄Π°Π½Π½Ρ‹Π΅ Π² Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π±ΠΎΠ³Π°Ρ‚ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ для Ρ€Π°Π΄ΠΈΠΎ, Ρ„Π»Π°ΠΆΠΊΠΎΠ², сортировки Ρ‚Π°Π±Π»ΠΈΡ† Bootstrap, разбиСния Π½Π° страницы ΠΈ Ρ‚. Π΄. SQL, MS Word, MS Excel, MS Powerpoint ΠΈΠ»ΠΈ PDF.

    StickyTableHeaders

    StickyTableHeaders β€” это ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ заставляСт Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»ΡΡ‚ΡŒΡΡ ΠΊ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана ΠΏΡ€ΠΈ использовании ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery. Π­Ρ‚ΠΎ особСнно ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†.

    jQuery edit Table

    Π­Ρ‚ΠΎ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ заполняСт ΠΏΡ€ΠΎΠ±Π΅Π», ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»Π΅ Π²Π²ΠΎΠ΄Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Ρ‚Π°Π±Π»ΠΈΡ† Π΄Π°Π½Π½Ρ‹Ρ… отсутствуСт. РСдактируСмая Ρ‚Π°Π±Π»ΠΈΡ†Π° jQuery ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ Π² сорСвнованиях AJAX, Ρ‚Π°ΠΊ ΠΈ/ΠΈΠ»ΠΈ HTTP POST. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ позволяСт Π²Π°ΠΌ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ количСство столбцов. Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΏΠΎΠ»Π½ΡƒΡŽ свободу.

    Dynatable

    Dynatable являСтся сСмантичСским, ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ ΠΈ интСрСсным Π² использовании. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ HTML5 ΠΈ JSON. Он прСдоставляСт простой Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ API. Π­Ρ‚ΠΎ особСнно ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Π½Π°Π±ΠΎΡ€ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ…, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ просмотр ΠΈ взаимодСйствиС.

    Dynatable прСдоставляСт ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных элСмСнтов ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ поиск ΠΏΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ jQuery. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для любой сортируСмой Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery ΠΈ для Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ.

    Π’Π°Π±Π»ΠΈΡ†Π° HighChart

    HighchartTable β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· этих ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для Ρ‚Π°Π±Π»ΠΈΡ†. Он простым способом ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… HTML Π² Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Highchart. Он ΠΈΠΌΠ΅Π΅Ρ‚ мноТСство Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊ.

    jQuery Table Sorter

    jQuery Table Sorter Ρ‚Π°ΠΊΠΆΠ΅ являСтся Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²ΠΎΠΉ DataTables. Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery создаСт HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ добавляСт Π² Π½ΠΈΡ… элСмСнты THEAD ΠΈ TBODY. Π­Ρ‚ΠΎ позволяСт ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π±Π΅Π· нСобходимости постоянного обновлСния страницы.

    Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡ‡Π΅Π½ΡŒ Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ‚ΠΈΠΏΡ‹ Π΄Π°Π½Π½Ρ‹Ρ…. Он Π΄Π°ΠΆΠ΅ способСн ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ связанныС Π΄Π°Π½Π½Ρ‹Π΅ Π² ячСйкС. Он ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ сортировку ΠΏΠΎ нСскольким столбцам ΠΈ ΠΏΠΎ нСскольким Ρ‚Π΅Π»Π°ΠΌ.

    Π’Π°ΠΊΠΆΠ΅ этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΡƒΡŽ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. Π‘Ρ€Π΅Π΄ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ, ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Internet Explorer 6.0+, Firefox 2+, Opera 9.0+ ΠΈ Safari 2.0+. Он ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΡΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· систСму Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ².

    ReStable

    ReStable β€” ΠΎΡ‡Π΅Π½ΡŒ простой ΠΈ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ смотрятся Π½Π° Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΏΠ»Π°Π³ΠΈΠ½Π° любая адаптивная Ρ‚Π°Π±Π»ΠΈΡ†Π° jQuery сворачиваСтся Π² список.

    АдаптивныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹

    Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для создания Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΡƒΠ΄ΠΎΠ±Π½Ρ‹Ρ… для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

    Π’Π°Π±Π»ΠΈΡ†Π° Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² jQuery

    Плагин jQuery Filter Table ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΆΠΈΠ²ΠΎΠ³ΠΎ поиска ΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ HTML-Ρ‚Π°Π±Π»ΠΈΡ† Π² ΠΏΠ»Π°Π³ΠΈΠ½Π΅ jQuery. Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ Π² Π²Π°ΡˆΡƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ поисковый Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ jQuery. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π² Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ jQuery, Π»ΡŽΠ±Ρ‹Π΅ строки, Π½Π΅ содСрТащиС Ρ„ΠΈΠ»ΡŒΡ‚Ρ€, Π±ΡƒΠ΄ΡƒΡ‚ скрыты Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅.

    Stupid Table

    StupidTable β€” ΠΏΠ»Π°Π³ΠΈΠ½ для сортировки Ρ‚Π°Π±Π»ΠΈΡ†. Он Π΄ΠΎ абсурда Π»Π΅Π³ΠΊΠΈΠΉ ΠΈ Π΄ΠΎ глупости простой. Π’Π°ΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅ основы сортировки Ρ‚Π°Π±Π»ΠΈΡ† JavaScript. ΠŸΡ€ΠΈ этом Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery. Π—Π°ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ»ΠΈ мСньшС, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅!

    Stacktable.js

    Π”Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ‚Π°Π±Π»ΠΈΡ† β€” Stacktable.js. Π­Ρ‚ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ для выравнивания высоты ΠΈ/ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ элСмСнтов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery прСдоставляСт простой способ прСобразования ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ† jQuery Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, Π±ΠΎΠ»Π΅Π΅ подходящий для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов. Он создаст копию Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ Π΅Π΅ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΊΠ»ΡŽΡ‡Π°/значСния с двумя столбцами.

    FooTable

    HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ FooTablemakes ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. НСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, сколько столбцов Π΄Π°Π½Π½Ρ‹Ρ… Ρƒ вас Π΅ΡΡ‚ΡŒ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅, ΠΏΠ»Π°Π³ΠΈΠ½ FooTable сдСлаСт Π΅Π΅ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅ΠΉ. Он ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ HTML Π² красивыС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ ΠΈ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

    Плагин JSON To Bootstrap Table

    Плагин JSON To Bootstrap Table β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых простых Π² использовании ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для Ρ‚Π°Π±Π»ΠΈΡ† jQuery. Π­Ρ‚ΠΎ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для отобраТСния Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ† ΠΈΠ· Π΄Π°Π½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»Π° JSON. Он Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΠ· бэкэнда (Ρ„Π°ΠΉΠ» JSON, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ JavaScript) ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π° ΠΈΡ… основС Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ.

    Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΠ°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваши Π΄Π°Π½Π½Ρ‹Π΅ JSON ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½Ρƒ JSON To Bootstrap Table. Плагин jQuery для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств Π·Π°Ρ‚Π΅ΠΌ автоматичСски создаст Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ дСйствий, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ сортировки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Bootstrap ΠΈ разбиСния Π½Π° страницы.

    Π’Π°Π±Π»ΠΈΡ†Π° Ρ†Π΅Π½ CSS3 – ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery

    Π­Ρ‚ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ для создания Ρ‚Π°Π±Π»ΠΈΡ† Ρ†Π΅Π½ с использованиСм CSS3 ΠΈ jQuery. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ чистыС эффСкты Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ CSS3 для создания Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†. Он ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ стили Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ для экспСримСнтов с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†.

    Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΏΠ»Π°Π³ΠΈΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ† jQuery Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с Ρ†Π΅Π½Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ стили. Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ Π±Π°Π½Π½Π΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΠ»Π°Π½Ρ‹.

    Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ, этот ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Π°ΠΌ часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Π΅ вопросы ΠΈ исходныС Ρ„Π°ΠΉΠ»Ρ‹, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ. Он Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ бСсплатныС обновлСния Π½Π° Π±ΡƒΠ΄ΡƒΡ‰Π΅Π΅.

    Вабулятор

    Вабулятор β€” Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° запись Π² нашСй ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ… Ρ‚Π°Π±Π»ΠΈΡ† jQuery. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для динамичСского создания ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†. Они ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ· HTML, массива JavaScript, источника Π΄Π°Π½Π½Ρ‹Ρ… AJAX ΠΈΠ»ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… JSON.

    Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ Π½Π°Π±ΠΎΡ€ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ сортировки, Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅ΠΌΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ столбцов, ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π΄Π°Π½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ страниц Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery ΠΈ прямоС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²Π²ΠΎΠ΄Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    Вабулятор ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΎΡ‡Π΅Π½ΡŒ Π³ΠΈΠ±ΠΊΠΈΠΉ. На Π΅Π³ΠΎ Π²Π΅Π±-сайтС описаны всС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, ΠΈ поэтому ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² этот список.

    Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ просты для понимания ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ вмСстС с нСсколькими встроСнными ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ. ДокумСнтация длинная ΠΈ слоТная, Π½ΠΎ ΠΎΠ½Π° содСрТит всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с этим ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ jQuery.

    FancyGrid

    FancyGrid β€” это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ добавляСт Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΊ вашим стандартным Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌ. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌ Π΄Π°Π½Π½Ρ‹Ρ… большС возмоТностСй.

    Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° простая, слСгка оформлСнная Ρ‚Π°Π±Π»ΠΈΡ†Π°, FancyGrid позаботится ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΡƒΡŽ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ для Ρ€Π°Π±ΠΎΡ‚Ρ‹. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Π° с Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°ΠΌΠΈ ΠΈΠ»ΠΈ функциями сортировки ΠΈ разбиСния Π½Π° страницы, FancyGrid прСдоставит Π²Π°ΠΌ это. Π’ любом случаС ваши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π·Π° столом.

    FancyGrid ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколькими способами, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ свои столы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ· Π½ΠΈΡ… красивыС столы. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для добавлСния Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. Или Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ с Highcharts для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ….

    jQueryTreetable

    jQueryTreetable позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π΄Π΅Ρ€Π΅Π²ΠΎ Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ HTML. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ структуру ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ΠΎΠ² ΠΈΠ»ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ список.

    jQueryKingTable

    Π­Ρ‚ΠΎΡ‚ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery являСтся ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Ρ…ΠΎΡ‡Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†Π° Π΄Π°Π½Π½Ρ‹Ρ…. Он идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΡƒΡ‡Π΅Ρ‚Π½Ρ‹Ρ… записСй, управлСния ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… дСйствий, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни сосрСдоточСны Π½Π° Π΄Π°Π½Π½Ρ‹Ρ….

    Π­Ρ‚ΠΎ слоТный ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания слоТной Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ поиска ΠΈ строгими условиями Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ.

    Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ† jQuery, этот ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ‚Π°Π±Π»ΠΈΡ† jquery ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ Π½Π° GitHub. Π•ΠΌΡƒ Π΄Π°ΠΆΠ΅ посвящСна страница Π² Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ, Π³Π΄Π΅ описаны всС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ настройки ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π΅Π³ΠΎ использования.

    ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ‚Π΅ΠΌ, настраивая ΠΈΡ… ΠΏΠΎΠ΄ свои Π½ΡƒΠΆΠ΄Ρ‹. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² ΠΈ событий, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ.

    Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΡƒΠΌΠ΅Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои собствСнныС Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ ΠΈ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΡ‹ Π΄Π°Π½Π½Ρ‹Ρ…. Π­Ρ‚ΠΎ сильно ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ настройки, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ подходящими.

    Заканчивая Ρ€Π°Π·ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΡ ΠΎ Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ… для Ρ‚Π°Π±Π»ΠΈΡ† jQuery

    Π­Ρ‚ΠΎ лишь Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ† jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для своих Ρ‚Π°Π±Π»ΠΈΡ† Π΄Π°Π½Π½Ρ‹Ρ…. Π˜Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ внСшнСго Π²ΠΈΠ΄Π° Π²Π°ΡˆΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†. Если вас ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π»Π΅Π³ΠΊΠΈΠ΅ стили ΠΈ созданиС красивых Ρ‚Π°Π±Π»ΠΈΡ†, для этого Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½.

    Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹, сортировка столбцов, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° AJAX/JSON ΠΈ Ρ‚. Π΄., для этого Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ поиска β€” для этого Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½. ΠšΠΎΡ€ΠΎΡ‡Π΅ говоря, пСрСчислСнныС Π²Ρ‹ΡˆΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Ρ‚Π°Π±Π»ΠΈΡ† ΡΠ΄Π΅Π»Π°ΡŽΡ‚ Π²Π°ΡˆΡƒ Тизнь ΠΏΡ€ΠΎΡ‰Π΅, Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅.

    Если Π²Ρ‹ чувствуСтС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Π°Ρ ΠΏΠΎΠΌΠΎΡ‰ΡŒ, Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ wpDataTables . ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ ΠΏΠΎΠ±Π»ΠΈΠΆΠ΅ со всСми функциями нашСго ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΈΠ»ΠΈ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ ΠΎΠ±Π»Π΅Π³Ρ‡Π΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π² Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² WordPress, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄.

    wpDataTables Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ количСства столбцов ΠΈ строк ΠΈΠ»ΠΈ структуры Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ СстСствСнным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Плагин ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ мноТСство Ρ‚ΠΈΠΏΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ… ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ Π²Π²ΠΎΠ΄Π° Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅. Π― ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π», Ρ‡Ρ‚ΠΎ это мобильно? Ну, я сдСлал сСйчас.

    Если Π²Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»Π°ΡΡŒ эта ΡΡ‚Π°Ρ‚ΡŒΡ ΠΎ ΠΏΠ»Π°Π³ΠΈΠ½Π°Ρ… для Ρ‚Π°Π±Π»ΠΈΡ† jQuery, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ эту ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ… Bootstrap.

    ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ писали ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… связанных Ρ‚Π΅ΠΌΠ°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ CSS, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с CSS, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ HTML, ΠΊΠ°ΠΊ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ† Ρ†Π΅Π½ WordPress ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ† Π΄Π°Π½Π½Ρ‹Ρ….

    ΠžΠΏΡ†ΠΈΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Β· Π’Π°Π±Π»ΠΈΡ†Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ

    ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° GitHub

    API ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Bootstrap Table.

    ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² jQuery.fn.bootstrapTable.defaults .

    β€”

    аякс

    ajaxOptions

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-ajax-ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹

    • Π’ΠΈΠΏ: ΠžΠ±ΡŠΠ΅ΠΊΡ‚

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ запроса ajax. Бписок Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ: jQuery.ajax.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: {}

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠžΠΏΡ†ΠΈΠΈ AJAX

    ΠΊΠ½ΠΎΠΏΠΊΠΈ

    • Атрибут: ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ/Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π° «панСль ΠΊΠ½ΠΎΠΏΠΎΠΊΒ» (справа Π²Π²Π΅Ρ€Ρ…Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹). Π­Ρ‚ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠΏΡ†ΠΈΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ buttonsOrder, для этого слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠ»ΡŽΡ‡/имя для события!

      НастраиваСмая ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΎΠΊΠΈΠ΅ возмоТности настройки, ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:

      • тСкст
        • ОписаниС: Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ showButtonText.
        • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°
      • Π·Π½Π°Ρ‡ΠΎΠΊ
        • ОписаниС: Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ showButtonIcons.
        • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ° β€” ВрСбуСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ класс Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. fa-ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ
      • визуализация
        • ОписаниС: УстановитС для этого ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ false , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Кнопка снова станСт Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π΄Π°Π½Π½Ρ‹Ρ… data-show-BUTTONNAME="true" .
      • Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹
        • ОписаниС: Π­Ρ‚Π° опция позволяСт Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ html, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π½Π°Π·Π²Π°Π½ΠΈΠ΅
        • Π’ΠΈΠΏ: ΠžΠ±ΡŠΠ΅ΠΊΡ‚
        • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: {Π½Π°Π·Π²Π°Π½ΠΈΠ΅: 'НазваниС ΠΊΠ½ΠΎΠΏΠΊΠΈ'}
      • HTML
        • ОписаниС: Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ автоматичСски Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ HTML-ΠΊΠΎΠ΄, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту ΠΎΠΏΡ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой собствСнный HTML-ΠΊΠΎΠ΄. ΠžΠΏΡ†ΠΈΡ event Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, Ссли ваш ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ HTML содСрТит name="BUTTONNAME" . Если ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ:
          • тСкст
          • Π·Π½Π°Ρ‡ΠΎΠΊ
          • Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹
        • Π’ΠΈΠΏ: Ѐункция|Π‘Ρ‚Ρ€ΠΎΠΊΠ°
      • событиС
        • ОписаниС: Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ событиС ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅
        • Π’ΠΈΠΏ: Ѐункция|ΠžΠ±ΡŠΠ΅ΠΊΡ‚|Π‘Ρ‚Ρ€ΠΎΠΊΠ°

      ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ event ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ трСмя способами. Одно событиС с ΠΊΠ»ΠΈΠΊ событиС:

       {
         'событиС': () => { }
       }
       

      Одно событиС с самоопрСдСляСмым Ρ‚ΠΈΠΏΠΎΠΌ события:

       {
           'мСроприятиС': {
             'ΠΌΡ‹ΡˆΠΈΠ½Ρ‹ΠΉ Π²Π²ΠΎΠ΄': () => { }
           }
         }
       

      НСсколько событий с самоопрСдСляСмыми Ρ‚ΠΈΠΏΠ°ΠΌΠΈ событий:

       {
             'мСроприятиС': {
               'ΠΊΠ»ΠΈΠΊ': () => {},
               'mouseenter': () => { },
               'mouseleave': () => { }
             }
           }
       

      Подсказка: ВмСсто встроСнных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ.

      Бконфигурированная ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:

       {
        btnRemoveEvenRows: {
          'тСкст': 'Π£Π΄Π°Π»ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ‚Π½Ρ‹Π΅ строки',
          'Π·Π½Π°Ρ‡ΠΎΠΊ': 'Ρ„Π°-мусор',
          'событиС': () => {
            //Π”Π•Π™Π‘Π’Π’Π£Π™Π’Π•, Π§Π’ΠžΠ‘Π« Π£Π”ΠΠ›Π˜Π’Π¬ ЧЕВНЫЕ БВРОКИ
          },
          'Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹': {
            'title': 'Π£Π΄Π°Π»ΠΈΡ‚ΡŒ всС строки с Ρ‡Π΅Ρ‚Π½Ρ‹ΠΌ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ'
          }
        }
      }
       
    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: {}

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Кнопки

    ΠΊΠ½ΠΎΠΏΠΊΠΈΠ’Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ

    • Атрибут: Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов. Β«Π»Π΅Π²Ρ‹ΠΉΒ» , Β«ΠΏΡ€Π°Π²Ρ‹ΠΉΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«ΠΏΡ€Π°Π²ΠΎΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΎΠΊ

    кнопкиКласс

    • Атрибут: ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…-класс

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ класс (Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ послС 'btn-' ) ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«Π²Ρ‚ΠΎΡ€ΠΈΡ‡Π½Ρ‹ΠΉΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Кнопки Класс

    ΠΊΠ½ΠΎΠΏΠΊΠΈΠ—Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-ΠΊΠ½ΠΎΠΏΠΊΠΈ-Π·Π°ΠΊΠ°Π·

    • Π’ΠΈΠΏ: Массив

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ['paginationSwitch', 'ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ', 'ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ', 'полноэкранный Ρ€Π΅ΠΆΠΈΠΌ', 'столбцы']

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Кнопки Π—Π°ΠΊΠ°Π·

    ΠΊΠ½ΠΎΠΏΠΊΠΈΠŸΡ€Π΅Ρ„ΠΈΠΊΡ

    • Атрибут: ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ… прСфикс

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ прСфикс ΠΊΠ½ΠΎΠΏΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 'ΠΊΠ½ΠΎΠΏΠΊΠ°'

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΡ€Π΅Ρ„ΠΈΠΊΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ

    кнопкиПанСль инструмСнтов

    • Атрибут: ΠΊΠ½ΠΎΠΏΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…-панСль инструмСнтов

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°/ΡƒΠ·Π΅Π»

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ jQuery, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ панСль инструмСнтов с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: #buttons-toolbar , .buttons-toolbar ΠΈΠ»ΠΈ ΡƒΠ·Π΅Π» DOM.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ПанСль инструмСнтов ΠΊΠ½ΠΎΠΏΠΎΠΊ

    кэш

    • Атрибут: кэш Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС false , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ запросов AJAX.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’Π°Π±Π»ΠΈΡ‡Π½Ρ‹ΠΉ кэш

    ΠΊΠ°Ρ€Ρ‚Π°Π’ΠΈΠ΄

    • Атрибут: просмотр ΠΊΠ°Ρ€Ρ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»Π°ΡΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Π° просмотра ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, мобильноС прСдставлСниС.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ΠΊΠ°Ρ€Ρ‚Ρ‹

    • Атрибут: data-checkbox-header

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС false , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π»Π°ΠΆΠΎΠΊ Β«ΠžΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ всС» Π² строкС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ„Π»Π°ΠΆΠΊΠ°

    классы

    • Атрибут: классы Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Имя класса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. 'Ρ‚Π°Π±Π»ΠΈΡ†Π°' , 'Ρ‚Π°Π±Π»ΠΈΡ†Π° с Ρ€Π°ΠΌΠΊΠΎΠΉ' , 'table-hover' , 'table-striped' , 'table-dark' , 'table-sm' ΠΈ 'table-borderless' . По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Π° ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°ΠΌΠΊΡƒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 'Ρ‚Π°Π±Π»ΠΈΡ†Π° с Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора'

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠšΠ»Π°ΡΡΡ‹ Ρ‚Π°Π±Π»ΠΈΡ†

    Π½Π°ΠΆΠΌΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-Ρ‰Π΅Π»Ρ‡ΠΎΠΊ-Π²Ρ‹Π±ΠΎΡ€

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„Π»Π°ΠΆΠΎΠΊ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ строк.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: НаТмитС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ

    столбцы

    Ρ‚ΠΈΠΏ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°

    • Атрибут: Ρ‚ΠΈΠΏ содСрТимого Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ContentType запроса ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: application/x-www-form-urlencoded .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 'ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅/json'

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’ΠΈΠΏ содСрТимого

    ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ поиск

    • Атрибут: ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ поиск Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Ѐункция ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ поиска выполняСтся вмСсто встроСнной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ поиска, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚Ρ€ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°:

      • Π΄Π°Π½Π½Ρ‹Π΅ : Π΄Π°Π½Π½Ρ‹Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.
      • тСкст : тСкст поиска.
      • filter : ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π° ΠΈΠ· ΠΌΠ΅Ρ‚ΠΎΠ΄Π° filterBy .

      ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования:

     функция customSearch(Π΄Π°Π½Π½Ρ‹Π΅, тСкст) {
        Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ data.filter (функция (строка) {
          Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ row.field.indexOf (тСкст) > -1
        })
      }
       

    ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Π°Ρ сортировка

    • Атрибут: ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Π°Ρ сортировка Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ функция сортировки выполняСтся вмСсто встроСнной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ сортировки, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚Ρ€ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°:

      • sortName : имя сортировки.
      • sortOrder : порядок сортировки.
      • Π΄Π°Π½Π½Ρ‹Π΅ : Π΄Π°Π½Π½Ρ‹Π΅ строк.
    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π˜Π½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π·Π°ΠΊΠ°Π·

    Π΄Π°Π½Π½Ρ‹Π΅

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-Π΄Π°Π½Π½Ρ‹Π΅

    • Π’ΠΈΠΏ: Массив | ΠžΠ±ΡŠΠ΅ΠΊΡ‚

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π”Π°Π½Π½Ρ‹Π΅ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

      Если Π² Π΄Π°Π½Π½Ρ‹Ρ… Π΅ΡΡ‚ΡŒ свойство __rowspan ΠΈΠ»ΠΈ __colspan , Ρ‚ΠΎ ячСйки ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡΡ автоматичСски, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

       $table.bootstrapTable({
        Π΄Π°Π½Π½Ρ‹Π΅: [
          {
            ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€: 1,
            имя: Β«Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 1Β»,
            _name_rowspan: 2,
            Ρ†Π΅Π½Π°: '$1'
          },
          {
            ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€: 2,
            Ρ†Π΅Π½Π°: $2
          }
        ]
      })
       

      ΠŸΡ€ΠΈ использовании этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для обСспСчСния ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: []

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Из Π΄Π°Π½Π½Ρ‹Ρ…

    ΠΏΠΎΠ»Π΅ Π΄Π°Π½Π½Ρ‹Ρ…

    • Атрибут: ΠΏΠΎΠ»Π΅ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠšΠ»ΡŽΡ‡ Π²ΠΎ входящСм JSON, содСрТащСм «строк» ​​ списка Π΄Π°Π½Π½Ρ‹Ρ….

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: «строки»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π˜Ρ‚ΠΎΠ³ΠΎ/ΠΏΠΎΠ»Π΅ Π΄Π°Π½Π½Ρ‹Ρ…

    Ρ‚ΠΈΠΏ Π΄Π°Π½Π½Ρ‹Ρ…

    Π΄Π΅Ρ‚Π°Π»ΡŒΠ€ΠΈΠ»ΡŒΡ‚Ρ€

    • Атрибут: Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ свСдСний ΠΎ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки, Ссли для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° detailView Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true . Π’Π΅Ρ€Π½ΠΈΡ‚Π΅ true, ΠΈ строка Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° для Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ, Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ false, ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для строки Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ. Ѐункция ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для всСх строк.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: функция (индСкс, строка) { Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ true }

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€

    DetailFormatter

    • Атрибут: Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ прСдставлСниС, Ссли для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° detailView Π·Π°Π΄Π°Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true . Π’Π΅Ρ€Π½ΠΈΡ‚Π΅ строку, ΠΈ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ​​в ячСйку ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ прСдставлСния, ΠΏΡ€ΠΈ нСобходимости Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ элСмСнт Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся элСмСнтом jQuery Ρ†Π΅Π»Π΅Π²ΠΎΠΉ ячСйки.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: функция (индСкс, строка, элСмСнт) { return '' }

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π”Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄

    DetailView

    • Атрибут: ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ прСдставлСниС Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ просмотра. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ uniqueId ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ для сохранСния состояния ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ прСдставлСния ΠΏΡ€ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ Π²ΠΈΠ΄ UniqueId

    DetailViewAlign

    • Атрибут: data-detail-view-align

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π°. Β«Π»Π΅Π²Ρ‹ΠΉΒ» , Β«ΠΏΡ€Π°Π²Ρ‹ΠΉΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«Π»Π΅Π²Ρ‹ΠΉΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π”Π΅Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²ΠΈΠ΄ Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅

    DetailViewByClick

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-подробности-просмотр ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ прСдставлСниС подробностСй ΠΏΡ€ΠΈ Ρ‰Π΅Π»Ρ‡ΠΊΠ΅ ΠΏΠΎ ячСйкС.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π—Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ просмотра

    DetailViewIcon

    • Атрибут: data-detail-view-icon

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ столбСц ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ прСдставлСния (Π·Π½Π°Ρ‡ΠΎΠΊ плюс/минус).

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π—Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ³ΠΎ просмотра

    ΠΏΠΎΠ±Π΅Π³

    • Атрибут: экранированиС Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π­ΠΊΡ€Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚ строку для вставки Π² HTML, замСняя символы &, <, >, β€œ, ` ΠΈ β€˜.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’Ρ‹Ρ…ΠΎΠ΄ ΠΈΠ· Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹

    ΠžΠΏΡ†ΠΈΠΈ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°

    • Атрибут: ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π° Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, filterAlgorithm: 'ΠΈ' ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ всС ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ, filterAlgorithm: 'ΠΈΠ»ΠΈ' ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: {Алгоритм Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ: 'ΠΈ'}

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°

    • Атрибут: ΠΏΠΎΠ»Π΅ Π΄Π°Π½Π½Ρ‹Ρ… Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π°

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΊΠ»ΡŽΡ‡ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° (ΠΈΠ· массива Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Π° сСрвСра JSON). ΠžΠ±ΡŠΠ΅ΠΊΡ‚ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для установки/опрСдСлСния столбцов Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° ΠΈ/ΠΈΠ»ΠΈ значСния Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π°. срабатываСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠ° Π½Π° страницы Π΄Π°Π½Π½Ρ‹Ρ… β€” это true , Π° Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠ° Π½Π° страницы Π½Π° сторонС Π΄Π°Π½Π½Ρ‹Ρ… β€” это server .

     {
          "ряды": [
            {
              "ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€": 0,
              "имя": "Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ 0",
              "Ρ†Π΅Π½Π°": "$0",
              "количСство": 3
            }
          ],
          "Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»": {
            "id": "ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π°",
            "_id_colspan": 2,
            "name": "имя Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π°"
          }
        }
         
    • Атрибут: ΡΡ‚ΠΈΠ»ΡŒ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Ѐункция форматирования стиля Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€:

      • столбСц : ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ столбца.

      ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° классов ΠΈΠ»ΠΈ css . ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования:

     функция Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» (столбСц) {
        Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ {
          css: { 'ΡˆΡ€ΠΈΡ„Ρ‚': 'Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ' },
          классы: 'ΠΌΠΎΠΉ-класс'
        }
      }
       
    • Атрибут: ΡΡ‚ΠΈΠ»ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Ѐункция форматирования стиля Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€:

      • столбСц : ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ столбца.

      ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° классов ΠΈΠ»ΠΈ css . ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования:

     ΡΡ‚ΠΈΠ»ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ (столбСц) {
        Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ {
          css: { 'ΡˆΡ€ΠΈΡ„Ρ‚': 'Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ' },
          классы: 'ΠΌΠΎΠΉ-класс'
        }
      }
       

    высота

    • Атрибут: высота Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: НомСр

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Высота Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ фиксированный Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Высота стола

    ΠΈΠΊΠΎΠ½ΠΊΠΈ

    • Атрибут: Π·Π½Π°Ρ‡ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ΠžΠ±ΡŠΠ΅ΠΊΡ‚

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов, Π² Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠΈ Π½Π° страницы ΠΈ Π² прСдставлСнии свСдСний.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

     {
        paginationSwitchDown: 'fa-caret-square-down',
        paginationSwitchUp: 'fa-caret-square-up',
        ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: 'fa-sync',
        toggleOff: 'fa-toggle-off',
        toggleOn: 'fa-toggle-on',
        столбцы: 'fa-th-list',
        полноэкранный Ρ€Π΅ΠΆΠΈΠΌ: 'fa-стрСлки-alt',
        DetailOpen: 'fa-plus',
        DetailClose: 'Ρ„Π°-минус'
      }
       
    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’Π°Π±Π»ΠΈΡ‡Π½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ

    Π Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ°

    • Атрибут: Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ°, undefined , 'lg' , 'sm' ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ°

    iconsPrefix

    • Атрибут: data-icons-prefix

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ имя Π½Π°Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² ( 'glyphicon' ΠΈΠ»ΠΈ 'fa' для FontAwesome). По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Bootstrap v4 ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ 'fa' .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«Ρ„Π°Β»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΡ€Π΅Ρ„ΠΈΠΊΡ Π·Π½Π°Ρ‡ΠΊΠΎΠ²

      idField

    • Атрибут: ΠΏΠΎΠ»Π΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² качСствС значСния Ρ„Π»Π°ΠΆΠΊΠ°/ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»Ρ, Π΅Π³ΠΎ Π°Π½Π°Π»ΠΎΠ³ для selectItemName.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ПолС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°

    ignoreClickToSelectOn

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ-Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ-для-Π²Ρ‹Π±ΠΎΡ€Π°-Π½Π°

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтов clickToSelect . ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€:

      • элСмСнт : элСмСнт, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΆΠ°Π»ΠΈ.

      Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ true, Ссли Ρ‰Π΅Π»Ρ‡ΠΎΠΊ слСдуСт ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈ false, Ссли Ρ‰Π΅Π»Ρ‡ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ привСсти ΠΊ Π²Ρ‹Π±ΠΎΡ€Ρƒ строки. Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π°ΠΊΡ‚ΡƒΠ°Π»Π΅Π½, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли clickToSelect ΠΈΠΌΠ΅Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: { return ['A', 'BUTTON'].includes(tagName)}

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π˜Π³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ для Π²Ρ‹Π±ΠΎΡ€Π°

    Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°

    • Атрибут: Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ тСкста, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 'auto' , вычисляСмоС автоматичСски Π² соотвСтствии с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΌΠ΅ΠΆΠ΄Ρƒ 12 ΠΈ 32 пиксСлями.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«Π°Π²Ρ‚ΠΎΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°

    Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° шаблона

    локаль

    • Атрибут: локаль Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстанавливаСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡƒΡŽ локаль (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 'zh-CN' ). Π€Π°ΠΉΠ»Ρ‹ Π»ΠΎΠΊΠ°Π»ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹Π΅ Π»ΠΎΠΊΠ°Π»ΠΈ, Ссли ΠΎΠ½ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹, Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ порядкС:

      • ΠŸΠ΅Ρ€Π²Ρ‹Π΅ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠΈ для Π»ΠΎΠΊΠ°Π»ΠΈ, ΠΊΠ°ΠΊ ΡƒΠΊΠ°Π·Π°Π½ΠΎ,
      • Π—Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚ языковой стандарт с Β«_Β», ΠΏΠ΅Ρ€Π΅Π²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌ Π½Π° Β«-Β», ΠΈ ΠΊΠΎΠ΄ΠΎΠΌ Ρ€Π΅Π³ΠΈΠΎΠ½Π° Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ рСгистрС,
      • Π—Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΉ ΠΊΠΎΠ΄ Π»ΠΎΠΊΠ°Π»ΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 'zh' вмСсто 'zh-CN' ),
      • И, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ послСдний Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» Π»ΠΎΠΊΠ°Π»ΠΈ (ΠΈΠ»ΠΈ локаль ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ссли Π»ΠΎΠΊΠ°Π»ΠΈ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹).

      Если оставлСно Π½Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ ΠΈΠ»ΠΈ пустая строка, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ послСднюю Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΡƒΡŽ локаль (ΠΈΠ»ΠΈ 'en-US' , Ссли Ρ„Π°ΠΉΠ»Ρ‹ Π»ΠΎΠΊΠ°Π»ΠΈ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹).

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π―Π·Ρ‹ΠΊΠΎΠ²ΠΎΠΉ стандарт Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹

    ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-обслуТиваниС-ΠΌΠ΅Ρ‚Π°-Π΄Π°Π½Π½Ρ‹Π΅

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ Π½Π° страницС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ ΠΈ поискС:

      • Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ строки
      • скрытыС строки
    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅

    ΠΌΠ΅Ρ‚ΠΎΠ΄

    • Атрибут: ΠΌΠ΅Ρ‚ΠΎΠ΄ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π’ΠΈΠΏ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° для запроса ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ….

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’Π°Π±Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄

    ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΠšΠΎΠ»ΠΎΠ½ΠΊΡ

    • Атрибут: минимальноС количСство столбцов Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: НомСр

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      МинимальноС количСство столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΠ· Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ списка столбцов.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 1

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: МинимальноС количСство столбцов

    мноТСствСнный SelectRow

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-мноТСствСнный-Π²Ρ‹Π±ΠΎΡ€-строки

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ мноТСствСнный Π²Ρ‹Π±ΠΎΡ€ строки. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ctrl + Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ строку ΠΈΠ»ΠΈ Shift + Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ строк.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠœΠ½ΠΎΠΆΠ΅ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ строки

    Бписок страниц

    • Атрибут: список страниц Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Массив

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠŸΡ€ΠΈ настройкС свойства Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ страниц ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ страницы, Π²Ρ‹Π±Ρ€Π°Π² список. Если Π²Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ ΠΎΠΏΡ†ΠΈΡŽ «всС» ΠΈΠ»ΠΈ Β«Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΒ» , всС записи Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π² вашСй Ρ‚Π°Π±Π»ΠΈΡ†Π΅.

      Подсказка: Ссли Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π΅ΡΡ‚ΡŒ мСньшиС строки Π² качСствС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ скрыты автоматичСски. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ SmartDisplay Π½Π° лоТь

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: [10, 25, 50, 100]

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Бписок страниц

    Π½ΠΎΠΌΠ΅Ρ€ страницы

    • Атрибут: Π½ΠΎΠΌΠ΅Ρ€ страницы Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: НомСр

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠŸΡ€ΠΈ установкС свойства Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ страниц ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π½ΠΎΠΌΠ΅Ρ€ страницы.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 1

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: НомСр страницы

    Π Π°Π·ΠΌΠ΅Ρ€ страницы

    • Атрибут: Ρ€Π°Π·ΠΌΠ΅Ρ€ страницы Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: НомСр

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠŸΡ€ΠΈ настройкС свойства Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ страниц ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ страницы.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 10

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π Π°Π·ΠΌΠ΅Ρ€ страницы

    • Атрибут: Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ панСль инструмСнтов разбиСния Π½Π° страницы Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΡ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹

    пагинацияDetailHAalign

    • Атрибут: data-pagination-detail-h-align

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π΄Π΅Ρ‚Π°Π»ΠΈ разбиСния Π½Π° страницы. 'Π»Π΅Π²Ρ‹ΠΉ' , "ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ" ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«Π»Π΅Π²Ρ‹ΠΉΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

    • Атрибут: data-pagination-h-align

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ способ выравнивания Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠΈ страниц. 9МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ 0049 Β«Π»Π΅Π²Ρ‹ΠΉΒ» , Β«ΠΏΡ€Π°Π²Ρ‹ΠΉΒ» .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«ΠΏΡ€Π°Π²ΠΎΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

    • Атрибут: Ρ†ΠΈΠΊΠ» Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠΈ Π½Π° страницы

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Π½ΠΎ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ€Π΅ΠΆΠΈΠΌ Π½Π΅ΠΏΡ€Π΅Ρ€Ρ‹Π²Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π° разбиСния Π½Π° страницы.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π¦ΠΈΠΊΠ» ΠΏΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΠΈ

    • Атрибут: data-pagination-next-text

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΠ»ΠΈ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² свСдСниях ΠΎ Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠΈ Π½Π° страницы, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ΠΊΠ½ΠΎΠΏΠΊΠ΅.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 'β€Ί'

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ВСкст страницы

    пагинацияPagesBySide

    • Атрибут: Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы Π΄Π°Π½Π½Ρ‹Ρ… рядом

    • Π’ΠΈΠΏ: НомСр

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ страниц с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ стороны (справа, слСва) ΠΎΡ‚ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницы.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 1

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: НомСр индСкса страницы

    • Атрибут: части Π΄Π°Π½Π½Ρ‹Ρ…-разбиСния Π½Π° страницы

    • Π’ΠΈΠΏ: Массив

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π­Ρ‚ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚, ΠΊΠ°ΠΊΠΈΠ΅ части разбиСния Π½Π° страницы Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ΄Π½Ρ‹.

      • pageInfo ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊΠΎΠΉ Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ… Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ страницС (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с 1 ΠΏΠΎ 10 ΠΈΠ· 54 строк ).
      • pageInfoShort Подобно pageInfo , ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ количСство строк Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ 54 строки ).
      • pageSize ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ, сколько строк Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° страницС.
      • pageList ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ ΠΏΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΠΈ (Бписок страниц).
    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ['pageInfo', 'pageSize', 'pageList']

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Части ΠΏΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΠΈ

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠ° Π½Π° страницы-ΠΏΡ€Π΅-тСкст

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΠ»ΠΈ тСкст, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ Π² дСталях страницы, ΠΊΠ½ΠΎΠΏΠΊΡƒ «Назад».

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 'β€Ή'

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ВСкст страницы

    • Атрибут: Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… страниц Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: НомСр

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      МаксимальноС количСство ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… страниц подряд.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 5

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: НомСр индСкса страницы

    • Атрибут: ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½ΠΎΠ΅ использованиС ΠΏΠ΅ΠΉΠ΄ΠΆΠΈΠ½Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      РасчСт ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹Ρ… страниц для быстрого доступа.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: НомСр индСкса страницы

    • Атрибут: data-pagination-v-align

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ страницы ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Β«Π²Π΅Ρ€Ρ…Β» , Β«Π½ΠΈΠ·Β» , МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Β«ΠΎΠ±Π°Β» (ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ страниц свСрху ΠΈ снизу).

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«Π½ΠΈΠΆΠ½ΠΈΠΉΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΡ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ

    ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ запроса

    • Атрибут: ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ запроса Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠŸΡ€ΠΈ запросС ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² queryParams.

      Если queryParamsType = 'limit' , ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ params содСрТит: limit , offset , search , sort , order .

      ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ содСрТит: pageSize , pageNumber , searchText , sortName , sortOrder .

      Π’ΠΎΠ·Π²Ρ€Π°Ρ‚ Π›ΠΎΠΆΡŒ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ запрос.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: функция (ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹) { Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΡ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ }

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ запроса

    Π—Π°ΠΏΡ€ΠΎΡΠŸΠ°Ρ€Π°ΠΌΡΠ’ΠΈΠΏ

    • Атрибут: data-query-params-type

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС 'limit' для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² запроса с Ρ‚ΠΈΠΏΠΎΠΌ RESTFul.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«ΠΏΡ€Π΅Π΄Π΅Π»Β»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’ΠΈΠΏ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² запроса

    Поиск рСгулярных Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

    • Атрибут: рСгулярноС Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-поиск Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ поиск рСгулярных Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Если эта опция Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΊΠ°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ рСгулярных Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. [47a] Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² БША Π·Π° всС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, ΠΎΠΊΠ°Π½Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Π½Π° 4 , 7 ΠΈΠ»ΠΈ a . РСгулярноС Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ввСсти с Ρ„Π»Π°Π³Π°ΠΌΠΈ /[47a]$/gim ΠΈΠ»ΠΈ Π±Π΅Π· Ρ„Π»Π°Π³ΠΎΠ² [47a]$ . Π€Π»Π°Π³ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: gim .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Поиск рСгулярных Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

    Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒΠ—Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ

    • Атрибут: порядок запоминания Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ порядок для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ столбца.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅ ΠΎ Π·Π°ΠΊΠ°Π·Π΅

    ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΎΡ‚Π²Π΅Ρ‚Π°

    • Атрибут: ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π΄Π°Π½Π½Ρ‹Ρ…-ΠΎΡ‚Π²Π΅Ρ‚Π°

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠŸΠ΅Ρ€Π΅Π΄ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°ΠΉΡ‚Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π΄Π°Π½Π½Ρ‹Ρ… ΠΎΡ‚Π²Π΅Ρ‚Π°. ΠžΠ±ΡŠΠ΅ΠΊΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² содСрТит:

      • Ρ€Π΅Π· : Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΡ‚Π²Π΅Ρ‚Π°.
      • jqXHR : ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ jqXHR, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся надмноТСством ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° XMLHTTPRequest. Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ см. Π’ΠΈΠΏ jqXHR.
    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: function(res) { return res }

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠžΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΎΡ‚Π²Π΅Ρ‚Π°

    Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ строки

    • Атрибут: Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ строки Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Ѐункция форматирования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° строки ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π΄Π²Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°:

      • строка : Π΄Π°Π½Π½Ρ‹Π΅ записи строки.
      • индСкс : индСкс строки.

      ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° всСх ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ².

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: {}

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Атрибуты строки

    ΡΡ‚ΠΈΠ»ΡŒ строки

    • Атрибут: ΡΡ‚ΠΈΠ»ΡŒ строки Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Ѐункция

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Ѐункция форматирования строк, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π΄Π²Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°:

      • строка : Π΄Π°Π½Π½Ρ‹Π΅ записи строки.
      • индСкс : индСкс строки.

      ΠšΠ»Π°ΡΡΡ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈΠ»ΠΈ css.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: {}

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘Ρ‚ΠΈΠ»ΡŒ строки

    поиск

    • Атрибут: поиск Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π²Π²ΠΎΠ΄ поиска.

      БущСствуСт Ρ‚Ρ€ΠΈ способа поиска:

      • Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ содСрТит поисковый запрос (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ). ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Github содСрТит git.
      • Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ с поисковым запросом. ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Github (Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅) ΠΈ Github (поисковый запрос).
      • БравнСния (<, >, <=, =<, >=, =>). ΠŸΡ€ΠΈΠΌΠ΅Ρ€: 4 большС 3.

      ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΡ:

      • Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π²Π²ΠΎΠ΄ для поиска, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ searchSelector.
      • Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ поиск ΠΏΠΎ рСгулярному Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ regexSearch.
    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Поиск ΠΏΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π΅

    ΠΏΠΎΠΈΡΠΊΠΠΊΡ†Π΅Π½Ρ‚ΠΠ΅ΠΉΡ‚Ρ€Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ

    • Атрибут: поиск Π΄Π°Π½Π½Ρ‹Ρ…-Π°ΠΊΡ†Π΅Π½Ρ‚-нСйтрализация

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true , Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π°ΠΊΡ†Π΅Π½Ρ‚Π°.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: АкцСнт поиска ΠΠ΅ΠΉΡ‚Ρ€Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ

    поискВыравниваниС

    • Атрибут: Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ поиска Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ поисковый Π²Π²ΠΎΠ΄. Β«Π»Π΅Π²Ρ‹ΠΉΒ» , Β«ΠΏΡ€Π°Π²Ρ‹ΠΉΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«ΠΏΡ€Π°Π²ΠΎΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ поиска

    ΠΏΠΎΠΈΡΠΊΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ°

    • Атрибут: Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅-поиск Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ искомый тСкст (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ HTML-Ρ‚Π΅Π³ ). Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ собствСнный ΠΌΠΎΠ΄ΡƒΠ»ΡŒ форматирования выдСлСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ с HTML ΠΈΠ»ΠΈ для использования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° выдСлСния.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: «лоТь»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠ΄ΡΠ²Π΅Ρ‚ΠΊΠ° поиска

    searchOnEnterKey

    • Атрибут: поиск Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΠΎ клавишС Π²Π²ΠΎΠ΄Π°

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠœΠ΅Ρ‚ΠΎΠ΄ поиска Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΆΠ°Ρ‚Π° клавиша Enter.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Поиск ΠΏΠΎ клавишС Π²Π²ΠΎΠ΄Π°

    поискБСлСктор

    • Атрибут: сСлСктор поиска Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘ΡƒΠ»Π΅Π²ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅|Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Если этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ установлСн (Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ допустимым сСлСктором dom, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, #customSearch ), Π½Π°ΠΉΠ΄Π΅Π½Π½Ρ‹ΠΉ элСмСнт dom (элСмСнт Π²Π²ΠΎΠ΄Π° ) Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² качСствС поиска ΠΏΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ вмСсто встроСнного Π²Π²ΠΎΠ΄Π° поиска.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ поиска

    поисктСкст

    • Атрибут: тСкст поиска Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠŸΡ€ΠΈ настройкС свойства поиска ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ тСкст поиска.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Поиск тСкста

    searchTimeOut

    • Атрибут: Ρ‚Π°ΠΉΠΌ-Π°ΡƒΡ‚ поиска Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: НомСр

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΉΠΌ-Π°ΡƒΡ‚ для поиска огня.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 500

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’Π°ΠΉΠΌ-Π°ΡƒΡ‚ поиска

    имя_Π²Ρ‹Π±ΠΎΡ€Π°_элСмСнта

    • Атрибут: data-select-item-name

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Имя Π²Ρ…ΠΎΠ΄Π° Ρ€Π°Π΄ΠΈΠΎ ΠΈΠ»ΠΈ Ρ„Π»Π°ΠΆΠΊΠ°.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: 'btSelectItem'

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ПолС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°

    сСрвСр Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΠ°

    • Атрибут: сортировка сСрвСра Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС false для сортировки Π΄Π°Π½Π½Ρ‹Ρ… Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° sidePagination являСтся server .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΠ° ΠΏΠΎ сСрвСру

    ΡˆΠΎΡƒΠ±ΡƒΡ‚Ρ‚ΠΎΠ½ΠΈΠΊΠΎΠ½Ρ

    • Атрибут: data-show-button-icons

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      На всСх ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ… Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π·Π½Π°Ρ‡ΠΊΠΈ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΊΠ½ΠΎΠΏΠΎΠΊ

    ΡˆΠΎΡƒΠ±ΡƒΡ‚Ρ‚ΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚

    • Атрибут: data-show-button-text

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      На всСх ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ… Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ тСкст.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ тСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ

    ΡˆΠΎΡƒΠšΠΎΠ»ΠΎΠ½ΠΊΡ

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ-столбцы

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉΡΡ список столбцов. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ столбСц Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ false , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ элСмСнт столбца Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ столбцы ΠΈ большиС столбцы

    showColumnsSearch

    • Атрибут: data-show-columns-search

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ поиск Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π° столбца.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Поиск ΠΏΠΎ столбцам

    showColumnsToggleAll

    • Атрибут: data-show-columns-toggle-all

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Ρ„Π»Π°ΠΆΠΎΠΊ Β«ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ всС» Π² ΠΎΠΏΡ†ΠΈΠΈ/Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС столбцов.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹ ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ всС

    • Атрибут: data-show-extended-pagination

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠΈ Π½Π° страницы (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ количСство всСх строк Π±Π΅Π· Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²). Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ страниц Π½Π° сторонС сСрвСра, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ totalNotFilteredField для опрСдСлСния количСства.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΡƒΡŽ Ρ€Π°Π·Π±ΠΈΠ²ΠΊΡƒ Π½Π° страницы

    • Атрибут: data-show-footer

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Π½ΠΎ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΡΠ²ΠΎΠ΄Π½ΡƒΡŽ строку Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π°.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»

    ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹ΠΉ

    • Атрибут: data-show-fullscreen

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Π½ΠΎ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅

    • Атрибут: data-show-header

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС false , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

    • Атрибут: data-show-pagination-switch

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ страниц.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΠΈ

    ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΠžΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ

    • Атрибут: ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ обновлСния.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅

    showSearchButton

    • Атрибут: ΠΊΠ½ΠΎΠΏΠΊΠ° поиска Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ поиска послС Π²Π²ΠΎΠ΄Π° поиска. Поиск Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, Ссли ΠΊΠ½ΠΎΠΏΠΊΠ° Π½Π°ΠΆΠ°Ρ‚Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для прСдотвращСния ΠΏΡ€ΠΎΠ±ΠΎΠΊ ΠΈΠ»ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ).

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ поиска

    showSearchClearButton

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ-поиск-ΠΊΠ½ΠΎΠΏΠΊΠ° очистки

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ очистки Π·Π° Π²Π²ΠΎΠ΄ΠΎΠΌ поиска, которая очистит Π²Π²ΠΎΠ΄ поиска (Ρ‚Π°ΠΊΠΆΠ΅ вСсь Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ ΠΈΠ· элСмСнта управлСния Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠΌ (Ссли Π²ΠΊΠ»ΡŽΡ‡Π΅Π½)).

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ очистки поиска

    ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒToggle

    • Атрибут: data-show-toggle

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ-ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ просмотра Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹/ΠΊΠ°Ρ€Ρ‚Ρ‹.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ

    • Атрибут: Ρ€Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы Π½Π° сторонС Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΡŽ страниц Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 'ΠΊΠ»ΠΈΠ΅Π½Ρ‚' ΠΈΠ»ΠΈ 'сСрвСр' . Для использования стороны 'server' трСбуСтся ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ 'url' ΠΈΠ»ΠΈ 'ajax' .

      ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΎΡ‚Π²Π΅Ρ‚Π° сСрвСра зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, установлСн Π»ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ 'sidePagination' Π½Π° 'ΠΊΠ»ΠΈΠ΅Π½Ρ‚' ΠΈΠ»ΠΈ 'сСрвСр' . Π‘ΠΌ. ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹:

      • Π‘Π΅Π· ΠΏΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΠΈ Π½Π° сторонС сСрвСра
      • Π‘ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠ΅ΠΉ страниц Π½Π° сторонС сСрвСра
    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«ΠΊΠ»ΠΈΠ΅Π½Ρ‚Β»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π Π°Π·Π±ΠΈΠ΅Π½ΠΈΠ΅ Π½Π° страницы Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° ΠΈ Π½Π° сторонС сСрвСра

    ΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΠ΅Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²ΠΊΠ°

    • Атрибут: ΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΠ΅ сортировки Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС false , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΡΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ с сообщСниСм ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅. Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° sidePagination установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ 9.0049 β€˜ΡΠ΅Ρ€Π²Π΅Ρ€β€™ .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘Π΅ΡΡˆΡƒΠΌΠ½Π°Ρ сортировка

    • Атрибут: ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€ Ρ„Π»Π°ΠΆΠΊΠΎΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎΠΉ строки.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€

    смарт-дисплСй

    • Атрибут: data-smart-display

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true для ΠΈΠ½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠΈ Π½Π° страницы ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π˜Π½Ρ‚Π΅Π»Π»Π΅ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ дисплСй

    сортируСмый

    • Атрибут: сортируСмый ΠΏΠΎ Π΄Π°Π½Π½Ρ‹ΠΌ

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС false , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ сортировку всСх столбцов.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: БортируСмая Ρ‚Π°Π±Π»ΠΈΡ†Π°

    класс сортировки

    sortEmptyLast

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-сортировка-пусто-послСдниС

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ true для сортировки <пустая строка> , undefined ΠΈ null Π² качСствС послСднСго значСния.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ пустым послСдним

    имясортировки

    • Атрибут: имя сортировки Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, ΠΊΠ°ΠΊΠΎΠΉ столбСц Π±ΡƒΠ΄Π΅Ρ‚ отсортирован.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ сортировки ΠΈΠΌΠ΅Π½

    порядок сортировки

    • Атрибут: порядок сортировки Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ порядок сортировки столбцов, ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ undefined , 'asc' ΠΈΠ»ΠΈ 'desc' .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ сортировки ΠΈΠΌΠ΅Π½

    сортировкаБброс

    sortΠ‘Ρ‚Π°Π±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ

    • Атрибут: ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½Π°Ρ сортировка Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΡƒΡŽ сортировку. ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π² строку свойство '_position' .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘Ρ‚Π°Π±ΠΈΠ»ΡŒΠ½Π°Ρ сортировка

    строгий поиск

    • Атрибут: строгий поиск Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ строгий поиск. ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ сравнСния.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘Ρ‚Ρ€ΠΎΠ³ΠΈΠΉ поиск

    theadClasses

    • Атрибут: классы Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Имя класса Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ thead. Bootstrap v4, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ классы ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ² .thead-light ΠΈΠ»ΠΈ .thead-dark , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ thead свСтло- ΠΈΠ»ΠΈ Ρ‚Π΅ΠΌΠ½ΠΎ-сСрым.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠšΠ»Π°ΡΡΡ‹ Thead

    панСль инструмСнтов

    • Атрибут: панСль Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°/ΡƒΠ·Π΅Π»

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ jQuery, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ панСль инструмСнтов, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: #toolbar , . toolbar ΠΈΠ»ΠΈ ΡƒΠ·Π΅Π» DOM.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ панСль инструмСнтов

    панСль инструмСнтовВыравниваниС

    • Атрибут: data-toolbar-align

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅, ΠΊΠ°ΠΊ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ панСль инструмСнтов. Β«Π»Π΅Π²Ρ‹ΠΉΒ» , Β«ΠΏΡ€Π°Π²Ρ‹ΠΉΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Β«Π»Π΅Π²Ρ‹ΠΉΒ»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠ°Π½Π΅Π»ΠΈ инструмСнтов

    ΠΎΠ±Ρ‰Π΅Π΅ ΠΏΠΎΠ»Π΅

    • Атрибут: ΠΏΠΎΠ»Π΅ Π΄Π°Π½Π½Ρ‹Ρ… всСго

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠšΠ»ΡŽΡ‡ Π²ΠΎ входящСм JSON, содСрТащСм «всСго» Π΄Π°Π½Π½Ρ‹Ρ….

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: «всСго»

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π˜Ρ‚ΠΎΠ³ΠΎ/ΠΏΠΎΠ»Π΅ Π΄Π°Π½Π½Ρ‹Ρ…

    Π’ΡΠ΅Π³ΠΎΠΠ΅Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²Π°Π½ΠΎ

    всСгоNotFilteredField

    • Атрибут: ΠΎΠ±Ρ‰Π΅Π΅ количСство Π½Π΅Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: строка

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ПолС ΠΈΠ· ΠΎΡ‚Π²Π΅Ρ‚Π° JSON Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для showExtendedPagination .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: totalNotFiltered

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ВсСго Π½Π΅ ΠΎΡ‚Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΠΏΠΎΠ»Π΅ΠΉ

    всСго строк

    ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° ΠΏΡ€ΠΈ поискС

    • Атрибут: ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΈ поискС

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π²Π΅Ρ€Π½ΠΎ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ Π² ΠΏΠΎΠ»Π΅ поиска.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: ΠΏΡ€Π°Π²Π΄Π°

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠžΠ±Ρ€Π΅Π·ΠΊΠ° ΠΏΡ€ΠΈ поискС

    undefinedText

    • Атрибут: Π΄Π°Π½Π½Ρ‹Π΅-Π½Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ тСкст

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ тСкст.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: '-'

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: НСопрСдСлСнный тСкст

    ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€

    • Атрибут: ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строки. Π£Π½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ всСгда Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ бСзопасным для html, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π±ΡƒΠΊΠ²Π΅Π½Π½ΠΎ-Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ, ΠΎΠ½ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ символов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒ html, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. " .

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: getRowByUniqueId

    адрСс

    • Атрибут: URL-адрСс Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: Π‘Ρ‚Ρ€ΠΎΠΊΠ°

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      URL-адрСс для запроса Π΄Π°Π½Π½Ρ‹Ρ… с ΡƒΠ΄Π°Π»Π΅Π½Π½ΠΎΠ³ΠΎ сайта.

      ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΎΡ‚Π²Π΅Ρ‚Π° сСрвСра зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΡƒΠΊΠ°Π·Π°Π½Π° Π»ΠΈ опция 'sidePagination' . Π‘ΠΌ. ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹:

      • Π‘Π΅Π· ΠΏΠ°Π³ΠΈΠ½Π°Ρ†ΠΈΠΈ Π½Π° сторонС сСрвСра
      • Π‘ Π½ΡƒΠΌΠ΅Ρ€Π°Ρ†ΠΈΠ΅ΠΉ страниц Π½Π° сторонС сСрвСра
    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘ URL-адрСса

    • ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ошибок

      Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ошибки Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ onLoadError

    • Атрибут: Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½Π°Ρ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ для отобраТСния Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ «бСсконСчного» списка.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: лоТь

    • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π‘ΠΎΠ»ΡŒΡˆΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Π΅

    • Атрибут: высота элСмСнта Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: НомСр

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      Если этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ высота ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ элСмСнта.

      Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ, Ссли высота Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ большС, Ρ‡Π΅ΠΌ высота ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π­Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, сколько ячССк Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ создано ΠΏΡ€ΠΈ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΈ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ высоту ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ области. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ высоты ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ пиксСлСй Π΅Π΄ΠΈΠ½ΠΈΡ†.

    • По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ: Π½Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ

    Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉΠŸΠΎΠΈΡΠΊ

    • Атрибут: Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ поиск Π΄Π°Π½Π½Ρ‹Ρ…

    • Π’ΠΈΠΏ: ЛогичСский

    • Π”Π΅Ρ‚Π°Π»ΡŒ:

      УстановитС true для поиска Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Π²ΠΈΠ΄ΠΈΠΌΠΎΠΌ столбцС/Π΄Π°Π½Π½Ρ‹Ρ….

    Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

    Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *