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

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ с jQuery Π½Π° Vue.js Π—Π°Ρ‡Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΈ Ρ‡Ρ‚ΠΎ ΠΈΠ· этого Π²Ρ‹ΡˆΠ»ΠΎ

ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ: 25 Июн 2019

Π’Π΅Ρ€Π½ΡƒΡ‚ΡŒΡΡ Π² Π±Π»ΠΎΠ³

МСня Π·ΠΎΠ²ΡƒΡ‚ Π‘Π΅Ρ€Π³Π΅ΠΉ, я Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ Π² Π‘Ρ‚ΡƒΠ΄ΠΈΠΈ Π€Π»Π°Π³ с 2017 Π³ΠΎΠ΄Π° ΠΈ, ΠΊΠΎΠ³Π΄Π° я ΠΏΡ€ΠΈΡˆΠ΅Π», состояниС Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π° оставляло ΠΆΠ΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ.

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅

МСня Π·ΠΎΠ²ΡƒΡ‚ Π‘Π΅Ρ€Π³Π΅ΠΉ, я Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ Π² Π‘Ρ‚ΡƒΠ΄ΠΈΠΈ Π€Π»Π°Π³ с 2017 Π³ΠΎΠ΄Π° ΠΈ, ΠΊΠΎΠ³Π΄Π° я ΠΏΡ€ΠΈΡˆΠ΅Π», состояниС Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π° оставляло ΠΆΠ΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ. Если CSS Ρ…ΠΎΡ‚ΡŒ ΠΊΠ°ΠΊ-Ρ‚ΠΎ собирался, Π±Ρ‹Π» Ρ€Π°Π·Π±ΠΈΡ‚ Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΠΈ, Ρ‚ΠΎ Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… вСсь JavaScript хранился Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅ Π΄Π»ΠΈΠ½ΠΎΠΉ нСсколько тысяч строк, Π½Π΅ минифицировался, ΠΈ пСриодичСски Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Π»ΠΈΡΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Ρ‚ΠΈΠΏΠ° «НС лСзь, ΠΎΠ½ΠΎ тСбя соТрСт». Π’ Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС JS-функция ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π»Π° β€œtrulio” вмСсто true. Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΠ΄ΠΎΠ²ΠΎΠΉ Π±Π°Π·Ρ‹ Π±Ρ‹Π»Π° написана Π½Π° jQuery, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ ΡƒΠΏΡ€ΠΎΡ‰Π°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

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

ΠŸΠΎΡΡ‚Π΅ΠΏΠ΅Π½Π½ΠΎ, ΠΌΡ‹ занялись созданиСм сборки Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π°, Π½Π°Ρ‡Π°Π»ΠΈ с ΠΌΠΈΠ½ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ (сТатия) ΠΈ транспиляции (трансформации ΠΊΠΎΠ΄Π° Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π» Π² старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…) JavaScript с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ популярного сборщика Gulp. ПозТС стали Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΠΈ. Π‘ 2017 Π³ΠΎΠ΄Π° ΠΌΡ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π»ΠΈ постСпСнно Π²Π½Π΅Π΄Ρ€ΡΡ‚ΡŒ php-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Laravel. ΠšΡΡ‚Π°Ρ‚ΠΈ, создатСли Laravel (Taylor Otwell) ΠΈ Vue.js (Evan You) ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΠ±Ρ‰Π°ΡŽΡ‚ΡΡ ΠΈ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚ Π½Π° конфСрСнциях Π΄Ρ€ΡƒΠ³ Ρƒ Π΄Ρ€ΡƒΠ³Π°.

ПослС измСнСния тСхнологичСского стэка, измСнились ΠΈ наши ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹. Π‘Ρ‚Π°Π»ΠΎ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ всС большС слоТных ΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΡ… постоянной ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΎΠΊ, со слоТной Π»ΠΎΠ³ΠΈΠΊΠΎΠΉ, которая Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ Π·Π°Π΄ΡƒΠΌΠ°Π»ΠΈΡΡŒ ΠΎΠ± использовании Π½ΠΎΠ²ΠΎΠ³ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° для frontend-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Vue

Vue.js – это прогрСссивный Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ для создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… интСрфСйсов. Π‘ΠΎΠ·Π΄Π°Ρ‚Π΅Π»Π΅ΠΌ Vue.js являСтся Evan You, Π±Ρ‹Π²ΡˆΠΈΠΉ сотрудник Google ΠΈ Meteor Dev Group. Начал ΠΎΠ½ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ Π² 2013-ΠΌ, Π° Π² Ρ„Π΅Π²Ρ€Π°Π»Π΅ 2014-Π³ΠΎ состоялся ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡƒΠ±Π»ΠΈΡ‡Π½Ρ‹ΠΉ Ρ€Π΅Π»ΠΈΠ·.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅Π³ΠΎ?

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Vue.js Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π΅Π½, ΠΈ это Π΅Π³ΠΎ основноС прСимущСство ΠΏΠ΅Ρ€Π΅Π΄ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ использовали Ρ€Π°Π½Π΅Π΅. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ… Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ автоматичСский Ρ€Π΅Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ Π² Ρ‚Π΅Ρ… мСстах, Π³Π΄Π΅ ΠΎΠ½ΠΈ выводятся. Π­Ρ‚ΠΎ позволяСт ΠΏΠΈΡΠ°Ρ‚ΡŒ мСньшС ΠΊΠΎΠ΄Π°, Β ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠ΄Π°.

Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Vue довольно Π»Π΅Π³ΠΊΠΎ интСгрируСтся с Laravel, backend-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ.

Π’-Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈΡ…, ΠΎΠ½ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для постСпСнного внСдрСния. ΠŸΠΎΡΡ‚Π΅ΠΏΠ΅Π½Π½ΠΎ изучая Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π±Ρ‹Π»ΠΈ написаны Π½Π° Vue.js с нуля.

НСмаловаТным являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ(Π² Ρ‚ΠΎΠΌ числС Π½Π° Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΌ русском языкС).
Vue.js появился ΠΏΠΎΠ·ΠΆΠ΅ Angular ΠΈ React, ΠΈ, ΠΊΠ°ΠΊ ΠΎΠ±Π΅Ρ‰Π°Π»ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, взял Π»ΡƒΡ‡ΡˆΠ΅Π΅ ΠΎΡ‚ ΠΎΠ±ΠΎΠΈΡ…. На Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΎΠ½ ΡƒΠΆΠ΅ Π½Π°Ρ‡Π°Π» ΠΎΠ±Π³ΠΎΠ½ΡΡ‚ΡŒ React ΠΏΠΎ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠ°ΠΌ Π½Π° GitHub, ΠΈ Π² Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³Π΅ любви Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΈΠΌΠ΅Π» ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π½Π΅ Π½ΠΈΠΆΠ΅, Ρ‡Π΅ΠΌ React. Π‘ΠΎΠ²ΠΎΠΊΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ этих Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΏΡ€ΠΈΠ²Π΅Π»Π° ΠΊ Π²Ρ‹Π±ΠΎΡ€Ρƒ Vue.js, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ Π½Π°Ρ‡Π°Π»ΠΈ Π²Π½Π΅Π΄Ρ€ΡΡ‚ΡŒ с Π½Π°Ρ‡Π°Π»Π° 2018 Π³ΠΎΠ΄Π°, ΠΈ Π΅Ρ‰Π΅ Π½ΠΈ Ρ€Π°Π·Ρƒ Π½Π΅ ΠΏΠΎΠΆΠ°Π»Π΅Π»ΠΈ ΠΎΠ± этом.

ИспользованиС Vue.js

Для изучСния Vue.js трСбуСтся Π±Π°Π·ΠΎΠ²ΠΎΠ΅ Π·Π½Π°Π½ΠΈΠ΅ HTML, CSS, JavaScript, ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π½Π°Π½ΠΈΠ΅ стандарта ES6 ΠΈ Π²Ρ‹ΡˆΠ΅. Vue ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈ Π΄Π°ΠΆΠ΅ Internet Explorer 9-11 ΠΈ вСсит всСго ΠΎΠΊΠΎΠ»ΠΎ 20 ΠΊΠ± (min + gzip).

Для старта простого ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½Π° Vue.js достаточно ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ JS-Ρ„Π°ΠΉΠ» ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° страницу с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° <script>. Π‘ΡƒΠ΄Π΅Ρ‚ зарСгистрирована глобальная пСрСмСнная Vue. Π’Π°ΠΊΠΆΠ΅ сущСствуСт Vue CLI – инструмСнт, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ быстро Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ всС ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ возмоТности Vue (ΠΎ Π½ΠΈΡ… расскаТу Π΄Π°Π»Π΅Π΅) Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° настройку ΠΊΠΎΠ½Ρ„ΠΈΠ³ΠΎΠ² систСм сборки Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π°. ΠœΡ‹ ΠΆΠ΅ Π½Π° своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Webpack + Laravel Mix (ΠΏΠ°ΠΊΠ΅Ρ‚ для Laravel, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ быстро Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Webpack).

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ

ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌΠΈ концСпциями Vue ΡΠ²Π»ΡΡŽΡ‚ΡΡ:

  • конструктор
  • ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹
  • Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹
  • ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€

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

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

ΠšΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ слоТных Π²Π΅Ρ‰Π΅ΠΉ: «Никогда Π½Π΅ Π΄Π΅Π»Π°ΠΉΡ‚Π΅ слоТныС Π²Π΅Ρ‰ΠΈΒ». Если Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ становится слоТным – Ρ€Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌ это Π½Π° части ΠΏΠΎΠΏΡ€ΠΎΡ‰Π΅ ΠΈ связываСм ΠΈΡ… Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΌ способом. Π›ΡŽΠ±ΠΎΠΉ слоТный интСрфСйс Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ – сущности, для ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ максимально ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ ΠΈ понятно ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅ ΠΈ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ ΡƒΠΌΠ΅Π΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ.

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ основныС html элСмСнты ΠΈ Π²Π½Π΅Π΄Ρ€ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ΄. По сути, ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ β€” ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ части UI. На этапС проСктирования ΠΌΡ‹ Ρ€Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌ нашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° нСзависимыС части ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π΄Ρ€Π΅Π²ΠΎΠ²ΠΈΠ΄Π½ΡƒΡŽ структуру ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Vue-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° β€” счСтчика ΠΊΠ»ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π° страницу нСсколько Ρ€Π°Π· ΠΈ всС Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ этого счСтчика Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ нСзависимо Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°.

jQuery

Для jQuery Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΈΡ… ΠΏΠΎΡ‡Ρ‚ΠΈ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅.

Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹

Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ html-элСмСнтам. ВсС Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ прСфикс Β«v-Β». Π‘ ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий, ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ элСмСнтов, ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

НапримСр, Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅ элСмСнту добавляСтся класс β€œactive”, Ссли пСрСмСнная isActive Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ β€œtrue”.

jQuery

Π’ jQuery для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ Π±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс ΠΈΠ»ΠΈ id ΠΊ этому элСмСнту (Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Ссли ΠΎΠ½ Π΅Ρ‰Π΅ Π±ΡƒΠ΄Π΅Ρ‚ с прСфиксом jsβ€”), послС этого ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ этому элСмСнту ΠΈ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠΉ isActive Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ±ΠΈΡ€Π°Ρ‚ΡŒ класс.

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹

Vue Π΄Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ самым Ρ€Π°Π·Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ ΠΏΡ€ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² DOM, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈ ΠΈΡ… Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΈ ΡƒΠ΄Π°Π»Π΅Π½ΠΈΠΈ. Π•Π³ΠΎ инструмСнты Π΄Π°ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ:

  • автоматичСски ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ CSS-классы для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ²
  • ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сторонниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Animate. css
  • ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JavaScript для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с DOM Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π² Ρ…ΡƒΠΊΠ°Ρ… ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ²
  • ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сторонниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ JavaScript-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Velocity.js
jQuery

jQuery Ρ‚ΠΎΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ встроСнныС эффСкты ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ², Ρ‡Ρ‚ΠΎ Π² своС врСмя упростило Тизнь ΠΌΠ½ΠΎΠ³ΠΈΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, Π½ΠΎ возмоТностСй для кастомизации этих эффСктов мСньшС, Ρ‡Π΅ΠΌ Π²ΠΎ Vue.

ΠžΡ‚Π»Π°Π΄ΠΊΠ°

Для ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° vue-devtools, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½ΡƒΡŽ структуру ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π­Ρ‚ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ позволяСт ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ состояниС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°, Ρ€Π΅Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π² Π½Π΅ΠΌ, измСняя Π΅Π³ΠΎ состояниС. Π’Π°ΠΊΠΆΠ΅ Π² Π½Π΅ΠΌ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ возмоТности для ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ Vue Router ΠΈ Vuex, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… расскаТу Ρ‡ΡƒΡ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅.

Π‘ΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ интСрфСйса Vue-devtools прСдставлСн Π½ΠΈΠΆΠ΅.

jQuery

Для jQuery Ρ‚Π°ΠΊΠΆΠ΅ сущСствуСт Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для ΠΎΡ‚Π»Π°Π΄ΠΊΠΈ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π΅Π³ΠΎ возмоТностСй часто Π±Ρ‹Π²Π°Π΅Ρ‚ нСдостаточно.

ΠžΠ΄Π½ΠΎΡ„Π°ΠΉΠ»ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±Ρ‹Π»ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΡ‚Π»Π°ΠΆΠΈΠ²Π°Ρ‚ΡŒ рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΡ„Π°ΠΉΠ»ΠΎΠ²Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Vue, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· ΠΊΠΈΠ»Π»Π΅Ρ€-Ρ„ΠΈΡ‡ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΉ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠΎΠ΄Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ – это ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Ρ€ΠΈ части: Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, скрипт ΠΈ стили. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ – Π²ΠΈΠ΄Π΅Ρ‚ΡŒ всю Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° любом ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌ Π²Π°ΠΌ прСпроцСссорС (SASS, PostCSS, …) ΠΈ языкС, ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΌΡΡ Π² JS (CoffeeScript, TypeScript). На ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΡ… Π½ΠΈΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ спСрва ΠΈΠ΄Π΅Ρ‚ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, Π·Π°Ρ‚Π΅ΠΌ JavaScript ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, стили CSS. ВсС рядом, Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ„Π°ΠΉΠ»Π΅, ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΡƒΠΆΠ΅ Π½Π΅ΠΊΡƒΠ΄Π°!

jQuery

Π’ jQuery Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Π½Π΅Ρ‚.

Vuex

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

Для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Vue ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Vuex. Vuex – это ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° управлСния состояниСм для ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° Vue.js. Он позволяСт Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС Π² Π²ΠΈΠ΄Π΅ JSON-ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Ρ‡Ρ‚ΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

jQuery

Если снова Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎ jQuery, Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… встроСнных инструмСнтов управлСния состояниСм прилоТСния ΠΎΠ½ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚.

SPA

Для создания SPA (Single Page Application) прСдусмотрСн ΠΌΠΎΠ΄ΡƒΠ»ΡŒ VueRouter. SPA – это Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π΅Π΅ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС. На SPA-сайтС ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°Ρ… ΠΌΠ΅ΠΆΠ΄Ρƒ URL-адрСсами страница Π½Π΅ пСрСзагруТаСтся, Π° обновляСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ. Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ сайта производится Π½Π° сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Π° Ссли Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ с сСрвСра, Ρ‚ΠΎ это ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ дСлаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ajax.

Π’ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… сайтах ΠΎΡ‡Π΅Π½ΡŒ часто ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ содСрТимого. НапримСр, шапка сайта, Ρ„ΡƒΡ‚Π΅Ρ€, мСню ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ ΠΎΡ‚ страницы ΠΊ страницС, Ρ‚Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ с сСрвСра. Π‘ использованиСм SPA ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Ρ‚Π°ΠΊΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ просто Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚, Ρ‚.

ΠΊ. ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ нСобходимости, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ повысит ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ прилоТСния. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ SPA-сайта: https://meduza.io/

Vue Router ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠΎΡ‰Π½Ρ‹Π΅ возмоТности ΠΏΠΎ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ Ρ€ΠΎΡƒΡ‚ΠΈΠ½Π³ΠΎΠΌ прилоТСния, ΠΈ ΠΏΡ€ΠΈ этом Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ. Она Π³Π»ΡƒΠ±ΠΎΠΊΠΎ интСгрируСтся с Vue.js ΠΈ позволяСт Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ SPA-прилоТСния. Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ возмоТности:

  • Π’Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Ρ‹/прСдставлСния;
  • ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ конфигурация ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚ΠΈΠ·Π°Ρ‚ΠΎΡ€Π°;
  • Доступ ΠΊ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ ΠΌΠ°Ρ€ΡˆΡ€ΡƒΡ‚Π°, query, wildcards;
  • Анимация ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² прСдставлСний Π½Π° основС Vue.js;
  • Π£Π΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ;
  • АвтоматичСскоС проставлСниС Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ CSS класса для ссылок;
  • Π Π΅ΠΆΠΈΠΌΡ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ HTML5 history ΠΈΠ»ΠΈ Ρ…ΡΡˆ, с Π°Π²Ρ‚ΠΎΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Π² IE9;
  • НастраиваСмоС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ страницы.

Π•ΡΡ‚ΡŒ инструмСнты ΠΈ для сСрвСрного Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° HTML страниц.

jQuery

ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ SPA ΠΈ Π½Π° jQuery, ΠΎΠ΄Π½Π°ΠΊΠΎ всС, Ρ‡Ρ‚ΠΎ описано Π²Ρ‹ΡˆΠ΅ придСтся ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ самому ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для этого сторонниС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ.

Vuetify

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ быстро ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² – Vuetify. Он соотвСтствуСт ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Material Design. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ UI-элСмСнты (сСлСкты, Π΄Π°Ρ‚Π°ΠΏΠΈΠΊΠ΅Ρ€Ρ‹), Ρ‚Π°ΠΊ ΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹ интСрфСйсов.
НиТС ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ Π°Π²Ρ‚ΠΎΡ€ΠΈΠ·Π°Ρ†ΠΈΠΈ Vuetify.

jQuery

Надо ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ jQuery Ρ‚ΠΎΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΈΡ… Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшС, Ρ‡Π΅ΠΌ Π²ΠΎ Vuetify, ΠΈ ΠΈΡ… Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΆΠ΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ послСдний Ρ€Π΅Π»ΠΈΠ· Π±Ρ‹Π» Π² 2016 Π³ΠΎΠ΄Ρƒ.

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

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

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ SPA ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ состояниСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Vue Router ΠΈ Vuex, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Vuetify.

А Π΅Ρ‰Π΅ Ρƒ Vue Π΅ΡΡ‚ΡŒ Π½Π°Π±ΠΎΡ€ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½Ρ‹Ρ… эмодТи! ΠœΡ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅ΠΌ с Vue.js большС Π³ΠΎΠ΄Π°, ΠΈ Π·Π° это врСмя ΡƒΠ±Π΅Π΄ΠΈΠ»ΠΈΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΊ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΎΠ½ удовлСтворяСт всС наши потрСбности ΠΈ стимулируСт ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ Π½ΠΎΠ²ΠΎΠ΅ ΠΈ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π²ΠΏΠ΅Ρ€Π΅Π΄.

ВсСм Vue!


ПослСдниС записи блога


Please enable JavaScript to view the comments powered by Disqus.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс Π² jQuery – TheSassWay.com

Π’Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Ρ…ΠΎΡ‚Π΅Π»ΠΈ динамичСски ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ ΠΈΠ»ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ элСмСнта Π½Π° вашСй Π²Π΅Π±-страницС? Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ класса Π² jQuery β€” мощная Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ это. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ рассмотрим, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery ΠΈ Ρ€Π°ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π» манипулирования классами для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π²Π°ΡˆΠΈΡ… Π½Π°Π²Ρ‹ΠΊΠΎΠ² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

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

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

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ своими мыслями, ΠΈ Π΄Π°Π²Π°ΠΉΡ‚Π΅ вмСстС отправимся Π² это ΡƒΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅ ΠΏΠΎ добавлСнию классов Π² jQuery! Π“ΠΎΡ‚ΠΎΠ²Ρ‹ Π»ΠΈ Π²Ρ‹ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ свои Π²Π΅Π±-страницы всСго нСсколькими строками ΠΊΠΎΠ΄Π°? Π”Π°Π²Π°ΠΉΡ‚Π΅ погрузимся ΠΈ ΠΈΠ·ΡƒΡ‡ΠΈΠΌ бСсконСчныС возмоТности манипулирования классами jQuery.

ΠŸΡ€Π΅Π΄ΠΏΠΎΡΡ‹Π»ΠΊΠΈ

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: акадСмичСский совСт

ΠŸΡ€Π΅Π΄ΠΏΠΎΡΡ‹Π»ΠΊΠΈ для добавлСния класса Π² jQuery Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ HTML, CSS, JavaScript, Π° Ρ‚Π°ΠΊΠΆΠ΅ знакомство с синтаксисом ΠΈ сСлСкторами jQuery.

Π­Ρ‚ΠΈ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ области Π·Π½Π°Π½ΠΈΠΉ слуТат ΠΏΡ€ΠΎΡ‡Π½ΠΎΠΉ основой для эффСктивного использования возмоТностСй jQuery ΠΏΠΎ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ классами.

НачнСм с Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ HTML ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅. HTML (язык гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ) β€” это основа Π²Π΅Π±-страниц, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π°Ρ структуру ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π—Π½Π°Π½ΠΈΠ΅ Ρ‚Π΅Π³ΠΎΠ², элСмСнтов ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² HTML позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π½Π°Ρ†Π΅Π»ΠΈΠ²Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ элСмСнты Π² структурС HTML ΠΏΡ€ΠΈ использовании jQuery.

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

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Π°ΠΆΠ½ΠΎ Π·Π½Π°Π½ΠΈΠ΅ JavaScript. JavaScript β€” это язык программирования, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΈ динамичСскиС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π½Π° Π²Π΅Π±-страницах. ПониманиС ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΉ, синтаксиса ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² JavaScript обСспСчиваСт основу для эффСктивного использования ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² манипулирования классами jQuery.

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

Π½Π° основС Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… условий.

Подводя ΠΈΡ‚ΠΎΠ³, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ условия для добавлСния класса Π² jQuery Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ HTML, CSS ΠΈ JavaScript, Π° Ρ‚Π°ΠΊΠΆΠ΅ знакомство с синтаксисом ΠΈ сСлСкторами jQuery. Π’ΠΎΠΎΡ€ΡƒΠΆΠΈΠ²ΡˆΠΈΡΡŒ этими Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ Π½Π°Π²Ρ‹ΠΊΠ°ΠΌΠΈ, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ возмоТности jQuery ΠΏΠΎ ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ классами для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ интСрактивности ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ своих Π²Π΅Π±-страниц.

ПошаговоС руководство

  1. Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ jQuery

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

  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ элСмСнт для добавлСния класса

    ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ jQuery, ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ элСмСнт(Ρ‹), ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс. jQuery прСдоставляСт ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ спСктр сСлСкторов для Π²Ρ‹Π±ΠΎΡ€Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтов ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏ элСмСнтов Π½Π° вашСй Π²Π΅Π±-страницС.

    • Π§Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ элСмСнты ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ ΠΈΡ… Ρ‚Π΅Π³Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСлСкторы элСмСнтов. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ всС Ρ‚Π΅Π³ΠΈ

      , Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ $('p') .

    • Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ элСмСнты ΠΏΠΎ ΠΈΡ… классу, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСлСкторы классов . ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ класса Ρ‚ΠΎΡ‡ΠΊΡƒ. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ всС элСмСнты с классом Β«ΠΌΠΎΠΉ-класс», Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ $('.my-class') .
    • Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, Ссли Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ элСмСнты ΠΏΠΎ ΠΈΡ… ID, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСлСкторы ID. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΡƒ. НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ элСмСнт с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ Β«ΠΌΠΎΠΉ элСмСнт», Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ
      $('#ΠΌΠΎΠΉ-элСмСнт')
      .
  3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Ρ‚ΠΎΠ΄

    addClass()

    Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΌΠ΅Ρ‚ΠΎΠ΄ addClass() . Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ позволяСт Π±Π΅Π· особых усилий Π½Π°Π·Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько классов Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌ элСмСнтам.

ΠŸΠ΅Ρ€Π΅Π΄ΠΎΠ²ΠΎΠΉ ΠΎΠΏΡ‹Ρ‚

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ осмыслСнныС ΠΈΠΌΠ΅Π½Π° классов, ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΡ‚ΠΈΠ»ΡŒ элСмСнта

    ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ классов Π² jQuery Π²Π°ΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π° классов, Ρ‚ΠΎΡ‡Π½ΠΎ ΠΎΡ‚Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠ΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΡΡ‚ΠΈΠ»ΡŒ элСмСнта. Π—Π½Π°Ρ‡ΠΈΠΌΡ‹Π΅ ΠΈΠΌΠ΅Π½Π° классов Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π΅Π»Π°ΡŽΡ‚ ваш ΠΊΠΎΠ΄ Π±ΠΎΠ»Π΅Π΅ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ Π² сопровоТдСнии, Π½ΠΎ ΠΈ ΡΠΏΠΎΡΠΎΠ±ΡΡ‚Π²ΡƒΡŽΡ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡŽ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ SEO.

    Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΌΠ΅Π½Π° классов, поисковыС систСмы ΠΌΠΎΠ³ΡƒΡ‚ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ содСрТаниС ΠΈ контСкст Π²Π°ΡˆΠΈΡ… Π²Π΅Π±-страниц.

    Π­Ρ‚ΠΎ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° ваш Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ Π² поисковых систСмах ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΠΎΠ±Ρ‰ΡƒΡŽ Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ вашСго сайта.

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

  • Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ добавлСния Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½Ρ‹Ρ… классов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π°Ρ‚ΡŒ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ

    Π₯отя Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ классов ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ ΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ элСмСнтов, Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡΠ²Π»ΡΡ‚ΡŒ ΡΠ΄Π΅Ρ€ΠΆΠ°Π½Π½ΠΎΡΡ‚ΡŒ ΠΈ ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ загромоТдСния HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½Ρ‹ΠΌΠΈ классами. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ чистоты ΠΈ лаконичности ΠΊΠΎΠ΄Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ удобство сопровоТдСния, Π½ΠΎ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ SEO.

    ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с jQuery ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ классов ΠΎΡ‚Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ простотС ΠΈ эффСктивности. БпроситС сСбя, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ класс ΠΈΠ»ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… классов ΠΈΠ»ΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ². БвСдя количСство классов ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ, Π²Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ своСго ΠΊΠΎΠ΄Π° ΠΈ повыситС Π΅Π³ΠΎ ΠΎΠ±Ρ‰ΡƒΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ.

    ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, качСство всСгда Π²Π°ΠΆΠ½Π΅Π΅ количСства. Π‘ΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΡŒΡ‚Π΅ΡΡŒ Π½Π° стратСгичСском использовании классов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠ΅ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ ΡΡ‚ΠΈΠ»ΡŒ элСмСнтов, Π½Π΅ пСрСгруТая HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ.

  • ИспользованиС ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² событий ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΎΠ±Ρ…ΠΎΠ΄Π° DOM jQuery для эффСктивного управлСния классами

    Для ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ манипулирования классами Π² jQuery ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΎΠ±Ρ…ΠΎΠ΄Π° DOM jQuery. Π­Ρ‚ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ эффСктивноС Π½Π°Ρ†Π΅Π»ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ элСмСнтами, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π±ΠΎΠ»Π΅Π΅ чистому ΠΊΠΎΠ΄Ρƒ ΠΈ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡŽ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

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

    ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΎΠ±Ρ…ΠΎΠ΄Π° DOM Π² jQuery, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ find() ΠΈ Nearest() , ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ эффСктивныС способы поиска ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… элСмСнтов Π² ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ DOM. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ эти ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ Π² сочСтании с ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ классами, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π°Ρ†Π΅Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° элСмСнты Π½Π° основС ΠΈΡ… ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтам ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ классы.

    Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ событий ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΎΠ±Ρ…ΠΎΠ΄Π° DOM, Π²Ρ‹ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ удобство сопровоТдСния вашСго ΠΊΠΎΠ΄Π°, достигая ΠΏΡ€ΠΈ этом ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹Ρ… эффСктов манипулирования классом .

Π’ΠΊΡ€Π°Ρ‚Ρ†Π΅

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

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ обсудили, ΠΊΠ°ΠΊ шаг Π·Π° шагом Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery. Для Π½Π°Ρ‡Π°Π»Π° Π±Ρ‹Π»Π° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ​​библиотСка jQuery, Π° Π·Π°Ρ‚Π΅ΠΌ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² наши классы. Π—Π°Ρ‚Π΅ΠΌ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ использовался для назначСния классов ΠΈ ΠΈΡ… удалСния, ΠΈ ΠΌΡ‹ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΌΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ классы ΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ, ΠΈΠΌΠ΅Π΅Ρ‚ Π»ΠΈ элСмСнт ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ класс, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΠΈ.

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

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

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅, Π½Π°Ρ‡Π½ΠΈΡ‚Π΅ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с классами jQuery. ΠžΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚Π΅ Π΅Π³ΠΎ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ функциями jQuery, ΠΈ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½ΠΎΠ²Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ.

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° Π½Π΅ ΠΈΠ΄Π΅Ρ‚ напСрСкосяк. ΠŸΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π² ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ² ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ знания, Π²Ρ‹ смоТСтС быстрСС Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ классы Π² jQuery. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Ρ‚ΡŒ ΠΈΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ, ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅.

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

ΠšΠ»Π°ΡΡΡ‹ | ДокумСнтация мобильного API jQuery


ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ: CSS Framework

ΠšΠ»Π°ΡΡΡ‹

ОписаниС: классы CSS для ΠΎΠ±Ρ‰ΠΈΡ… стилСй

классы стилСй

jQuery Mobile ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ классы стилСй:

ui-corner-all

ДобавляСт Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ ΠΊ элСмСнту.

ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ Ρ‚Π΅Π½ΡŒ

ДобавляСт Ρ‚Π΅Π½ΡŒ элСмСнта Π²ΠΎΠΊΡ€ΡƒΠ³ элСмСнта.

ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс-ΠΎΠ²Π΅Ρ€Π»Π΅ΠΉ-Ρ‚Π΅Π½ΡŒ

ДобавляСт Π½Π°Π»ΠΎΠΆΠ΅Π½Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³ элСмСнта. НамСчСнный эффСкт Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ°Ρ€ΠΈΡ‚ΡŒ Π½Π°Π΄ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами.

ΠΌΠΈΠ½ΠΈ-интСрфСйс

Π£ΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ отступы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ элСмСнта для использования Π½Π° панСлях инструмСнтов ΠΈ Π² ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΌ пространствС.

Π­Ρ‚ΠΈ классы ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ Π»ΡŽΠ±Ρ‹ΠΌ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°ΠΌ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°.

ΠšΠ»Π°ΡΡΡ‹, спСцифичныС для Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°

ui-collapsible-inset

Π‘Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ поля, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ ΠΏΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ этого класса.

ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс-список-вставка

Π’ΠΈΠ΄ΠΆΠ΅Ρ‚ списка ΠΈΠΌΠ΅Π΅Ρ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ поля, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΈ Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ ΠΏΡ€ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ этого класса.

ΠšΠ»Π°ΡΡΡ‹, спСцифичныС для ΠΊΠ½ΠΎΠΏΠΎΠΊ

Π’ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ классам стилСй Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ классы ΠΊ a (ΡΠΊΠΎΡ€ΡŒ) ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ° элСмСнты, Π΄Π΅Π»Π°ΡŽΡ‰ΠΈΠ΅ ΠΈΡ… сСнсорными:

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ ΠΎΠΏΡ†ΠΈΠΈ

ui-btn

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

ui-btn-inline

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ мСста, сколько Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для ΠΌΠ΅Ρ‚ΠΊΠΈ. Π­Ρ‚ΠΎ позволяСт Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΠΈ рядом с тСкстом.

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса

РисуСт Ρ‚Π΅Π½ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³ Π·Π½Π°Ρ‡ΠΊΠ°.
РасполоТСниС Π·Π½Π°Ρ‡ΠΊΠΎΠ²

ui-btn-icon-top

Π—Π½Π°Ρ‡ΠΎΠΊ появляСтся Π½Π°Π΄ тСкстом

ui-btn-icon-right

Π—Π½Π°Ρ‡ΠΎΠΊ появляСтся справа ΠΎΡ‚ тСкста

ui-btn-icon-bottom

Π—Π½Π°Ρ‡ΠΎΠΊ появляСтся ΠΏΠΎΠ΄ тСкстом

ui-btn-icon-left

Π—Π½Π°Ρ‡ΠΎΠΊ появляСтся слСва ΠΎΡ‚ тСкста

ui-btn-icon-notext

ВСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ скрыт, отобраТаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π½Π°Ρ‡ΠΎΠΊ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получаСтся круглая ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ с ΠΈΠΊΠΎΠ½ΠΊΡƒ.
Π’Π΅ΠΌΠ°

ui-btn-[a-z]

Π—Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму (ΠΎΠ±Ρ€Π°Π·Π΅Ρ†) для ΠΊΠ½ΠΎΠΏΠΊΠΈ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ΄Π½Ρƒ Π±ΡƒΠΊΠ²Ρƒ ΠΎΡ‚ Π° Π΄ΠΎ я, которая соотвСтствуСт ΠΎΠ±Ρ€Π°Π·Ρ†Π°ΠΌ, Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌ Π² Π²Π°ΡˆΡƒ Ρ‚Π΅ΠΌΡƒ. НапримСр: ΡƒΠΈ-Π±Ρ‚Π½-Π±

ΠšΠ»Π°ΡΡΡ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ²

Π—Π½Π°Ρ‡ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π°ΠΌΠΈ. Π’ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π½ΠΈΠΆΠ΅ пСрСчислСны всС доступныС классы Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π’ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ Π·Π½Π°Ρ‡ΠΎΠΊ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ с ΠΈΠΌΠ΅Π½Π΅ΠΌ Β«Π·Π½Π°Ρ‡ΠΎΠΊΒ». Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ этого ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° являСтся имя Π·Π½Π°Ρ‡ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ добавляСтся ΠΊ прСфиксу ui-icon- для создания ΠΈΠΌΠ΅Π½ΠΈ класса Π·Π½Π°Ρ‡ΠΊΠ°. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ спискС классов ΠΈΠΌΠ΅Π½Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π²Ρ‹Π΄Π΅Π»Π΅Π½Ρ‹ ΠΊΠ°ΠΊ Ρ‡Π°ΡΡ‚ΡŒ ΠΈΠΌΠ΅Π½ΠΈ класса Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- 9ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ 0003

Π’ΠΎΡΠΊΠ»ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π½Π°ΠΊ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°.

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- стрСлка-Π»

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ°, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π²Π»Π΅Π²ΠΎ ( ←).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- стрСлка-Ρ€

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ°, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π²ΠΏΡ€Π°Π²ΠΎ (β†’).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- стрСлка-Ρƒ

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ° Π²Π²Π΅Ρ€Ρ… (↑).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- стрСлка-d

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ°, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π²Π½ΠΈΠ· (↓).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- Π½Π°Π·Π°Π΄

Π˜Π·ΠΎΠ³Π½ΡƒΡ‚Π°Ρ стрСлка, направлСнная Π²Π²Π΅Ρ€Ρ… ΠΏΡ€ΠΎΡ‚ΠΈΠ² часовой стрСлки.

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- полосы

Π’Ρ€ΠΈ Ρ‚ΡƒΡ€Π½ΠΈΠΊΠ° ΠΎΠ΄ΠΈΠ½ Π½Π°Π΄ Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

ui-icon- ΠΊΠ°Ρ€Π°Ρ‚-b

ΠšΠ°Ρ€Π°Ρ‚, Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½Ρ‹ΠΉ Π²Π½ΠΈΠ· (v).

ui-icon- ΠΊΠ°Ρ€Π°Ρ‚-Π» 9).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ°

Π“Π°Π»ΠΎΡ‡ΠΊΠ° (βœ“).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ

Косой крСст, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ (βœ•).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

ΠšΠ°Ρ€Π°Π½Π΄Π°Ρˆ β€” ΠΏΠΎΡ…ΠΎΠΆ Π½Π° (✎), Π½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π² Π½ΠΈΠΆΠ½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ».

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- Π²ΠΏΠ΅Ρ€Π΅Π΄

Π˜Π·ΠΎΠ³Π½ΡƒΡ‚Π°Ρ стрСлка, направлСнная Π²Π²Π΅Ρ€Ρ… ΠΏΠΎ часовой стрСлкС.

Π·Π½Π°Ρ‡ΠΎΠΊ интСрфСйса ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ- ΡˆΠ΅ΡΡ‚Π΅Ρ€Π½Ρ

ШСстСрня (βš™).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- сСтка

Π‘Π΅Ρ‚ΠΊΠ° 3βœ•3.

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- Π΄ΠΎΠΌ

Π”ΠΎΠΌ, ΠΏΠΎΡ…ΠΎΠΆΠΈΠΉ Π½Π° (βŒ‚).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- минус

Π—Π½Π°ΠΊ «ΠΌΠΈΠ½ΡƒΡ» (-).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- плюс

Π—Π½Π°ΠΊ «ΠΏΠ»ΡŽΡ» (+).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ

ΠšΡ€ΡƒΠ³ΠΎΠ²Π°Ρ стрСлка, похоТая Π½Π° (⟳).

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- поиск

Π£Π²Π΅Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ стСкло.

Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса- Π·Π²Π΅Π·Π΄Π°

Π—Π²Π΅Π·Π΄Π°, похоТая Π½Π° (✭).

ΠšΠ»Π°ΡΡΡ‹, связанныС с Ρ‚Π΅ΠΌΠΎΠΉ

ΠŸΡ€Π΅Ρ„ΠΈΠΊΡΡ‹ классов Π² Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π½ΠΈΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для примСнСния ΠΎΠ±Ρ€Π°Π·Ρ†Π° ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ частям ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. ЀактичСскоС имя класса строится ΠΏΡƒΡ‚Π΅ΠΌ добавлСния ΠΊ прСфиксу ΠΎΠ±Ρ€Π°Π·Ρ†Π° Π±ΡƒΠΊΠ²Ρ‹ (az). НапримСр, 9 класс.0048 ui-body- a β€” это ΠΎΠ±Ρ€Π°Π·Π΅Ρ†, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΉ ΠΊ страницС.

ui-Π±Π°Ρ€-[a-z]

Π—Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму (ΠΎΠ±Ρ€Π°Π·Π΅Ρ†) для полосы. Бюда входят Π²Π΅Ρ€Ρ…Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Ρ‹ ΠΈΠ»ΠΈ полосы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚Π΅ Π½Π° страницу.

ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс-[a-z]

Π—Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму (ΠΎΠ±Ρ€Π°Π·Π΅Ρ†) для Π±Π»ΠΎΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Бюда входят ΠΏΠ°Π½Π΅Π»ΠΈ содСрТимого страницы (устарСли с вСрсии 1.4.0), элСмСнты списка, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°, сворачиваСмыС элСмСнты, Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠ·Ρ‡ΠΈΠΊΠ°, ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΈ ΠΈ ΠΏΠ°Π½Π΅Π»ΠΈ.

ui-btn-[a-z]

Π—Π°Π΄Π°Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΡƒΡŽ схСму (ΠΎΠ±Ρ€Π°Π·Π΅Ρ†) для ΠΊΠ½ΠΎΠΏΠΊΠΈ.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *