Π Π°Π·Π½ΠΎΠ΅

Π’ΠΊΠ»Π°Π΄ΠΊΠΈ html css: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π’ΠΊΠ»Π°Π΄ΠΊΠΈ

17.05.2023

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

tabs Β» Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ для сайтов

АдаптивныС Π²ΠΊΠ»Π°Π΄ΠΊΠΈ β€” Responsive Tabs

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

Tabulous β€” ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, Ρ‚Π°Π±ΠΎΠ²

Tabulous — прСдставляСт собой ΠΏΠ»Π°Π³ΠΈΠ½ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Ρƒ сСбя Π½Π° сайтС Π±Π»ΠΎΠΊΠ° с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ эффСктами ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ самих Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.

АдаптивныС Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π½Π° jQuery

НСсколько строк ΠΊΠΎΠ΄Π° Π½Π° jQuery + ΠΎΠ΄ΠΈΠ½ CSS Ρ„Π°ΠΉΠ» ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π³ΠΎΡ‚ΠΎΠ²Ρ‹. Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ настраиваСтся стилями. ΠŸΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π΄ΠΎ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π² @media{} Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈΠ· Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ΡΡ Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΊΠΊΠΎΡ€Π΄ΠΈΠΎΠ½.

АдаптивныС Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‰ΠΈΠ΅ΡΡ Π² Π°ΠΊΠΊΠΎΡ€Π΄ΠΈΠΎΠ½

Π›Π΅Π³ΠΊΠΈΠΉ jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅Ρ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π½Π° устройствах с мСньшим Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ экрана Π² Π°ΠΊΠΊΠΎΡ€Π΄ΠΈΠΎΠ½.

DOMTab — Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π½Π° javascript

DOMtab — это jΠ°vascript, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ связываСт ссылки ΠΈΠ· списка с сСкциями ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² Π²ΠΈΠ΄Π΅ Ρ‚Π°Π± интСрфСйса. Π”Π°Π½Π½Ρ‹Π΅ Ρ‚Π°Π±Ρ‹ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Π΄Π°ΡŽΡ‚ΡΡ Π²Π½Π΅ΡˆΠ½Π΅ΠΌΡƒ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойств, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΈΡ… Π² любой Π΄ΠΈΠ·Π°ΠΉΠ½. Ни ΠΊΠ°ΠΊΠΈΡ… jQuery ΠΈ Mootools Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ чистый jΠ°vascript.

jTabs — ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

jTabs — ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ jQuery.

Π£Π½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π½Π° jQuery

ΠŸΡ€ΠΎΡΡ‚Π°Ρ рСализация создания Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ располоТСнных Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π½Π° jQuery с использованиСм Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… строк ΠΊΠΎΠ΄Π° для управлСния Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ.

Ajax Π²ΠΊΠ»Π°Π΄ΠΊΠΈ

Π‘Π΄Π΅Π»Π°Π΅ΠΌ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ (tabs) ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ jQuery ΠΈ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΡŽ ajax для ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΊΠΈ содСрТимого ΠΈΠ· Ρ„Π°ΠΉΠ»ΠΎΠ² (ΠΈΠ»ΠΈ Π±Π°Π·Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…).

Π’ΠΊΠ»Π°Π΄ΠΊΠΈ — tabs

ΠŸΡ€ΠΎΡΡ‚Π°Ρ рСализация Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π½Π° jΠ°vascript Π±Π΅Π· ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ сторонних java Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ.

Π“ΠΈΠ±ΠΊΠΈΠΉ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½

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

Π’ΠΊΠ»Π°Π΄ΠΊΠΈ со ΡΠΊΠΎΡˆΠ΅Π½Π½Ρ‹ΠΌΠΈ ΡƒΠ³Π»Π°ΠΌΠΈ

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

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ tabmenu

Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ скрипт создаСт Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΈΠ· ul ΠΈ li элСмСнтов. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ отобраТаСтся, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ курсор ΠΌΡ‹ΡˆΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ мСню. Π‘ΠΊΡ€ΠΈΠΏΡ‚ прСдтсавляСт собой ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈΡ‘ΠΌΠΎΠ² CSS ΠΈ jQuery.

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

Π Π΅ΠΊΠ»Π°ΠΌΠ°

ΠžΠΏΡ€ΠΎΡ

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ Π² Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… CSS Grid Layout ?

Π”Π°

НСт, ΠΈΠ·-Π·Π° нСобходимости ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ старыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹

НСт, Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ flexbox

НСт, Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ display-table ΠΈ float

Π§Ρ‚ΠΎ это Π²ΠΎΠΎΠ±Ρ‰Π΅ Π·Π° css grid?

Новости

Подпишись

ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ всС самоС интСрСсноС для frontend Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° и анонсы статСй с сайта.

Π Π°Π·Π½ΠΎΠ΅

Π Π΅ΠΊΠ»Π°ΠΌΠ°

Π‘Π²Π΅ΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ — Teams

  • Π‘Ρ‚Π°Ρ‚ΡŒΡ

Π’Π°ΠΆΠ½ΠΎ!

Π’ΠΊΠ»Π°Π΄ΠΊΠΈ с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² качСствС Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹.

  • Вопросы HTML ΠΈ CSS
  • Π”Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°
  • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ iFrame
  • ΠžΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Π·Π°Ρ‚Ρ€Π°Ρ‚Ρ‹ сСрвСра

Π’ΠΊΠ»Π°Π΄ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈΒ β€” это Π½ΠΎΠ²Ρ‹ΠΉ способ создания Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π² Teams. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π½Π΅Π΄Ρ€ΡΡ‚ΡŒ Π²Π΅Π±-содСрТимоС Π² iFrame, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ внСшний интСрфСйс отрисовываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, сСрвСрная Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° основС Π±ΠΎΡ‚Π°. Π‘ΠΎΡ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π·Π° принятиС запросов ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΎΡ‚Π²Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ отрисованной Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ.

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

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ рисункС ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ сборки с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ… ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ условия

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ созданию Π²ΠΊΠ»Π°Π΄ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅.

  • ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π±ΠΎΡ‚ΠΎΠ², Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ ΠΈ модулями Π·Π°Π΄Π°Ρ‡ Π² Teams.
  • Для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π² Teams Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΏΡƒΡ‰Π΅Π½ Π±ΠΎΡ‚.

ИзмСнСния манифСста прилоТСния

Π›ΠΈΡ‡Π½Ρ‹Π΅ прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ массив staticTabs Π² манифСст прилоТСния. Π’ΠΊΠ»Π°Π΄ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° свойство contentBotId прСдоставляСтся Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠΈ staticTab. ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΡ статичСских Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ contentBotId, указывая Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π»ΠΈΠ±ΠΎ contentUrl, указывая Ρ‚ΠΈΠΏΠΈΡ‡Π½ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ с Π²Π΅Π±-содСрТимым.

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

Бвойство contentBotId доступно Π² манифСстС вСрсии 1.9 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½Π΅ΠΉ.

ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ свойству

contentBotIdbotId, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ адаптивная ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ. Класс entityId настроСнный для Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, отправляСтся Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π΅ tabContext ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ запроса Π½Π° Π²Ρ‹Π·ΠΎΠ² ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для различСния Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° основС ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π±ΠΎΡ‚Π°. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… полях опрСдСлСния статичСских Π²ΠΊΠ»Π°Π΄ΠΎΠΊ см. Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π‘Ρ…Π΅ΠΌΠ° манифСста.

НиТС приводится ΠΏΡ€ΠΈΠΌΠ΅Ρ€ манифСста Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ:

{
  "$schema": "https://raw.githubusercontent.com/OfficeDev/microsoft-teams-app-schema/preview/DevPreview/MicrosoftTeams.schema.json",
  "manifestVersion": "1.9",
  "id": "00000000-0000-0000-0000-000000000000",
  "version": "0.0.1",
  "developer": {
    "name": "Contoso",
    "websiteUrl": "https://contoso.yourwebsite.com",
    "privacyUrl": "https://contoso.yourwebsite.com/privacy.html",
    "termsOfUseUrl": "https://contoso.yourwebsite.com/terms.html"
  },
  "name": {
    "short": "Contoso",
    "full": "Contoso Home"
  },
  "description": {
    "short": "Add short description here",
    "full": "Add full description here"
  },
  "icons": {
    "outline": "icon-outline.png",
    "color": "icon-color.png"
  },
  "accentColor": "#D85028",
  "configurableTabs": [],
  "staticTabs": [
    {
      "entityId": "homeTab",
      "name": "Home",
      "contentBotId": "00000000-0000-0000-0000-000000000000",
      "scopes": ["personal"]
    },
    {
      "entityId": "moreTab",
      "name": "More",
      "contentBotId": "00000000-0000-0000-0000-000000000000",
      "scopes": ["personal"]
    }
  ],
  "connectors": [],
  "composeExtensions": [],
  "permissions": ["identity", "messageTeamMembers"],
  "validDomains": [
    "contoso.
yourwebsite.com", "token.botframework.com" ] }

Запуск дСйствия

Бвязь ΠΌΠ΅ΠΆΠ΄Ρƒ Π²ΠΊΠ»Π°Π΄ΠΊΠΎΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ Π±ΠΎΡ‚ΠΎΠΌ рСализуСтся Ρ‡Π΅Ρ€Π΅Π· дСйствия β€” invoke. КаТдоС дСйствиС

invoke ΠΈΠΌΠ΅Π΅Ρ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ имя. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΠΌΠ΅Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ дСйствия для различСния ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ запроса. tab/fetch ΠΈ tab/submitΒ β€” это дСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² этом Ρ€Π°Π·Π΄Π΅Π»Π΅.

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

  • Π‘ΠΎΡ‚Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ всС ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° URL-адрСс слуТбы. URL-адрСс слуТбы ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ Π² составС входящСй ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ activity.
  • Π Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Ρ‹Π·ΠΎΠ²Π° ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ Π΄ΠΎ 80Β ΠšΠ‘.

Π˜Π·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ для отрисовки Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅

tab/fetchΒ β€” это ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ запрос Π½Π° Π²Ρ‹Π·ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ваш Π±ΠΎΡ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ. Когда Π±ΠΎΡ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ запрос, ΠΎΠ½ отправляСт ΠΎΡ‚Π²Π΅Ρ‚ ΠΎ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠΈ ΠΈΠ»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ аутСтификация

Π² ΠΎΡ‚Π²Π΅Ρ‚. ΠžΡ‚Π²Π΅Ρ‚ continue Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ массив для ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отобраТаСтся Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ массивС.

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

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎΠ± ΠΎΡ‚Π²Π΅Ρ‚Π΅ auth см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° подлинности.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ содСрТит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ запроса tab/fetch ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Π°:

tab/fetch: запрос

// tab/fetch POST request: agents/{botId}/invoke
{
    "name": "tab/fetch",
    "value: {
        "tabContext": {
            "tabEntityId": "{tab_entity_id}"
        },
        "context": {
            "theme": "default"
            }
    },
    "conversation": {
        "id": "{generated_conversation_id}"
    },
    "imdisplayname": "{user_display_name}"
}

tab/fetch: ΠΎΡ‚ΠΊΠ»ΠΈΠΊ

// tab/fetch **continue** POST response:
{
    "tab": {
        "type": "continue",
        "value": {
            "cards": [
                {
                    "card": adaptiveCard1,
                },
                {
                    "card": adaptiveCard2,
                },
                {
                    "card": adaptiveCard3
                }  
            ]
        },
    },
    "responseType": "tab"
}

ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΎΡ‚ΠΏΡ€Π°Π²ΠΎΠΊ с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ

ПослС отрисовки Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° дСйствия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π­Ρ‚ΠΎΡ‚ ΠΎΡ‚Π²Π΅Ρ‚ обрабатываСтся запросом Π½Π° Π²Ρ‹Π·ΠΎΠ² tab/submit.

Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°ΠΆΠ°Π» ΠΊΠ½ΠΎΠΏΠΊΡƒ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, запрос tab/submit запускаСтся ΠΊ Π±ΠΎΡ‚Ρƒ с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ Π΄Π°Π½Π½Ρ‹ΠΌΠΈ Ρ‡Π΅Ρ€Π΅Π· Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Action.Submit Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ. Π”Π°Π½Π½Ρ‹Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ доступны Ρ‡Π΅Ρ€Π΅Π· свойство Π΄Π°Π½Π½Ρ‹Ρ… запроса tab/submit. Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ² Π½Π° ваш запрос:

  • Код состояния HTTP 200 Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Π΅Π»Π°. Π”Π²Π΅ сотни пустых ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ² Π½Π΅ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ Π½ΠΈΠΊΠ°ΠΊΠΈΠΌ дСйствиям ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°.
  • Бтандартная 200 Π²ΠΊΠ»Π°Π΄ΠΊΠ° continue ΠΎΡ‚Π²Π΅Ρ‡Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ объяснСно Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Адаптивная ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°. ΠžΡ‚ΠΊΠ»ΠΈΠΊ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ continue Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ отрисовку Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, прСдоставлСнных Π² массивС ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΎΡ‚ΠΊΠ»ΠΈΠΊΠ° continue.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ содСрТит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ запроса tab/submit ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Π°:

tab/submit: запрос

// tab/submit POST request: agents/{botId}/invoke:
{
    "name": "tab/submit",
    "value": {
        "data": {
            "type": "tab/submit",
            //. ..<data properties>
            },
        "context": {
            "theme": "default"
            },
        "tabContext": {
            "tabEntityId": "{tab_entity_id}"
            },
        },
    "conversation": {
           "id": "{generated_conversation_id}" 
        },
    "imdisplayname": "{user_display_name}"
}

tab/submit: ΠΎΡ‚ΠΊΠ»ΠΈΠΊ

//tab/fetch **continue** POST response:
{
    "tab": {
        "type": "continue",
        "value": {
            "cards": [
              {
                "card": adaptiveCard1,
                },
              {
                "card": adaptiveCard2,
                } 
            ]
        },
    },
    "responseType": "tab"
}

БвСдСния ΠΎ Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ процСссС модуля Π·Π°Π΄Π°Ρ‡

ΠœΠΎΠ΄ΡƒΠ»ΡŒ Π·Π°Π΄Π°Ρ‡ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ для Π²Ρ‹Π·ΠΎΠ²Π° запросов ΠΈ ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ² task/fetch ΠΈ task/submit. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΎΠ± использовании ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π·Π°Π΄Π°Ρ‡ Π² Π±ΠΎΡ‚Π°Ρ… Microsoft Teams.

Π‘ появлСниСм Π²ΠΊΠ»Π°Π΄ΠΊΠΈ «ΠΠ΄Π°ΠΏΡ‚ивная ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°» измСнилось Ρ‚ΠΎ, ΠΊΠ°ΠΊ Π±ΠΎΡ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π½Π° запрос task/submit. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ, Π±ΠΎΡ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π½Π° запрос Π²Ρ‹Π·ΠΎΠ²Π° task/submit стандартной Π²ΠΊΠ»Π°Π΄ΠΊΠΎΠΉ continue ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Π·Π°Π΄Π°Ρ‡. Π’ΠΊΠ»Π°Π΄ΠΊΠ° «ΠΠ΄Π°ΠΏΡ‚ивная ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°» обновляСтся ΠΏΡƒΡ‚Π΅ΠΌ отрисовки Π½ΠΎΠ²ΠΎΠ³ΠΎ списка ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, прСдоставлСнных Π² основной части ΠΎΡ‚ΠΊΠ»ΠΈΠΊΠ° Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ continue.

Π’Ρ‹Π·ΠΎΠ²

task/fetch

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ содСрТит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ запроса task/fetch ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Π°:

task/fetch: запрос

// task/fetch POST request: agents/{botId}/invoke
{
    "name": "task/fetch",
    "value": {
        "data": {
            "type": "task/fetch"
        },
        "context": {
            "theme": "default",
        },
        "tabContext": {
            "tabEntityId": "{tab_entity_id}"
        }
    },
    "imdisplayname": "{user_display_name}",
    "conversation": {
        "id": "{generated_conversation_id}"
    } 
}

task/fetch: ΠΎΡ‚ΠΊΠ»ΠΈΠΊ

// task/fetch POST response: agents/{botId}/invoke
{
    "task": {
        "value": {
            "title": "Ninja Cat",
            "height": "small",
            "width": "small",
            "card": {
                "contentType": "application/vnd. microsoft.card.adaptive",
                "content": adaptiveCard,
            }
        },
    "type": "continue"
    },
    "responseType": "task"
}

Π’Ρ‹Π·ΠΎΠ²

task/submit

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ содСрТит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ запроса task/submit ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Π°:

task/submit: запрос

// task/submit POST request: agent/{botId}/invoke:
{
    "name": "task/submit",
    "value": {
        "data": {serialized_data_object},
        "context": {
            "theme": "default"
        },
    "tabContext": {
        "tabEntityId": "{tab_entity_id}"
        },
    },
    "conversation": {
        "id": "{generated_conversation_id}"
    },
    "imdisplayname": "{user_display_name}",
}

task/submit: Ρ‚ΠΈΠΏ ΠΎΡ‚Π²Π΅Ρ‚Π° Π²ΠΊΠ»Π°Π΄ΠΊΠΈ

// tab/fetch **continue** POST response: 
{
    "task":{
        "value": {
            "tab": {
                "type": "continue",
                "value": {
                    "cards": [
                        {
                            "card": adaptiveCard1
                        },
                        {
                            "card": adaptiveCard2
                        }
                    ]
                }
            }
        },
        "type": "continue"
    },
    "responseType": "task"
}

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° подлинности

Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… Π²Ρ‹ Π²ΠΈΠ΄Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ стратСгий Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ ΠΈΠ· запросов модуля Π·Π°Π΄Π°Ρ‡ ΠΈ ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ² Π½Π° запросы ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. ΠŸΡ€ΠΈ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ процСсс для Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ слСдуСт ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠΉ для сообщСний. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния см. Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности.

Запросы tab/fetch ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚ continue ΠΈΠ»ΠΈ auth. Когда запрос tab/fetch запускаСтся ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ Π² ΠΎΡ‚Π²Π΅Ρ‚ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ auth, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ отобраТаСтся страница Π²Ρ…ΠΎΠ΄Π°.

ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности Ρ‡Π΅Ρ€Π΅Π· Π²Ρ‹Π·ΠΎΠ² tab/fetch

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ страница Π²Ρ…ΠΎΠ΄Π°.

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

    Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ прилоТСния прСдоставляСтся Ρ‡Π΅Ρ€Π΅Π· свойство icon, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ Π² манифСстС прилоТСния. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появляСтся послС опрСдСлСния Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° Π² свойствС title, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌΠΎΠΌ Π² Ρ‚Π΅Π»Π΅ ΠΎΡ‚Π²Π΅Ρ‚Π° auth.

  2. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ссылку Π’ΠΎΠΉΡ‚ΠΈ. Π’Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Ρ‹ Π½Π° URL-адрСс ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности, прСдоставлСнный Π² свойствС value Π² Ρ‚Π΅Π»Π΅ ΠΎΡ‚Π²Π΅Ρ‚Π° auth.

  3. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ΡΡ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ. Π­Ρ‚ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π½Π° Π²Π΅Π±-страницС с использованиСм URL-адрСса ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности.

  4. ПослС Π²Ρ…ΠΎΠ΄Π° Π·Π°ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΎΠΊΠ½ΠΎ. Код ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности отправляСтся Π² ΠΊΠ»ΠΈΠ΅Π½Ρ‚ Teams.

  5. Π—Π°Ρ‚Π΅ΠΌ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ Teams ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚ запрос tab/fetch слуТбС, которая Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΊΠΎΠ΄ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности, прСдоставлСнный вашСй Π²Π΅Π±-страницСй.

ΠŸΠΎΡ‚ΠΎΠΊ Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности

tab/fetch

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ прСдставлСн ΠΎΠ±Π·ΠΎΡ€ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ подлинности для Π²Ρ‹Π·ΠΎΠ²Π° tab/fetch.

tab/fetch: ΠΎΡ‚Π²Π΅Ρ‚ auth

Π­Ρ‚ΠΎΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° прСдставляСт собой ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΎΡ‚Π²Π΅Ρ‚Π° Π½Π° ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΡƒ подлинности tab/fetch:

// tab/auth POST response (openURL)
{
    "tab": {
        "type": "auth",
        "suggestedActions":{
            "actions":[
                {
                    "type": "openUrl",
                    "value": "https://example. com/auth",
                    "title": "Sign in to this app"
                }
            ]
        }
    }
}

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

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΊΠΎΠ΄Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠΉ Π²Ρ‹Π΄Π°Ρ‡ΠΈ запроса:

{
    "name": "tab/fetch",
    "type": "invoke",
    "timestamp": "2021-01-15T00:10:12.253Z",
    "channelId": "msteams",
    "serviceUrl": "https://smba.trafficmanager.net/amer/",
    "from": {
        "id": "{id}",
        "name": "John Smith",
        "aadObjectId": "00000000-0000-0000-0000-000000000000"
    },
    "conversation": {
        "tenantId": "{tenantId}",
        "id": "tab:{guid}"
    },
    "recipients": {
        "id": "28:00000000-0000-0000-0000-000000000000",
        "name": "ContosoApp"
    },
    "entities": [
        {
            "locale": "en-us",
            "country": "US",
            "platform": "Windows",
            "timezone": "America/Los_Angeles",
            "type": "clientInfo"
        }
    ],
    "channelData": {
        "tenant": { "id": "00000000-0000-0000-0000-000000000000" },
        "source": { "name": "message" }
    },
    "value": {
        "tabContext": { "tabEntityId": "homeTab" },
        "state": "0. 43195668034524815"
    },
    "locale": "en-US",
    "localTimeZone": "America/Los_Angeles"
}

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°

НазваниС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅.NETNode.jsΠœΠ°Π½ΠΈΡ„Π΅ΡΡ‚
ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ TeamsΠžΠ±Ρ€Π°Π·Π΅Ρ† ΠΊΠΎΠ΄Π° Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Microsoft Teams, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π² Teams.ViewΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ этап

Π Π°Π·Π²Π΅Ρ€Ρ‚Ρ‹Π²Π°Π½ΠΈΠ΅ ссылок Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈ прСдставлСниС «Π­ΠΊΡ€Π°Π½»

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ рСсурсы

  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ для Teams
  • Π’ΠΊΠ»Π°Π΄ΠΊΠΈ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах
  • ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ
  • ИспользованиС ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π·Π°Π΄Π°Ρ‡ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ°Ρ…
  • ΠžΡ‚Π·Ρ‹Π²Ρ‹ ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΠΈ Ρ„ΠΎΡ€ΠΌΡ‹

37+ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… интСрфСйсов Π½Π° основС Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Ajax, CSS

Π—Π° послСдниС нСсколько Π»Π΅Ρ‚ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ мноТСство интСрфСйсов Π½Π° основС Π²ΠΊΠ»Π°Π΄ΠΎΠΊ AJAX ΠΈ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стали ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых интСрСсных ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², Π΄Π°ΡŽΡ‰ΠΈΡ… Π½Π°ΠΌ простой способ получСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π±Π΅Π· нСобходимости ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ нСсколько ΠΎΠΊΠΎΠ½ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

ΠœΡ‹ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΠ»ΠΈ часы Π½Π° поиск Π»ΡƒΡ‡ΡˆΠΈΡ… интСрфСйсов Π½Π° основС Π²ΠΊΠ»Π°Π΄ΠΎΠΊ с использованиСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, CSS/Ajax ΠΈ руководств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ собствСнныС интСрфСйсы Π½Π° основС Ajax ΠΈΠ»ΠΈ CSS.

Pro Tip

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

ΠœΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ нашСго поиска:

АвтозамСна Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

1) Easy Tabs 1.2 с Π°Π²Ρ‚ΠΎΠ·Π°ΠΌΠ΅Π½ΠΎΠΉ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π΅ΠΆΠΈΠΌ Π°Π²Ρ‚ΠΎΠ·Π°ΠΌΠ΅Π½Ρ‹ для ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π²Π°ΡˆΠΈΡ… мСню Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.

2) Π’Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ jQuery

3) Π‘Ρ†Π΅Π½Π°Ρ€ΠΈΠΉ содСрТимого Π²ΠΊΠ»Π°Π΄ΠΊΠΈ слайд-ΡˆΠΎΡƒ-β€œ

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π΅ΠΆΠΈΠΌ «слайд-ΡˆΠΎΡƒΒ», Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ сцСнарий автоматичСски цикличСски ΠΏΠ΅Ρ€Π΅Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΈ пСриодичСски Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, ΠΏΠΎΠΊΠ° Π²ΠΊΠ»Π°Π΄ΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ явно Π²Ρ‹Π±Ρ€Π°Π½Π°.

Π‘ΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ

4) Π‘ΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ

Π‘ΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ β€” это ΠΏΠ»Π°Π³ΠΈΠ½ mootools, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ добавляСт довольно Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹ΠΉ эффСкт. Π­Ρ‚ΠΎ ΠΊΠ»ΠΎΠ½ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° сайтС Coda ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Panic Software, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΎΡ‡Π΅Π½ΡŒ сильно Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ Π² iTunes Music Store.

5) Coda-Slider

Π£Π΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ jQuery Coda-Slider ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для красивого ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ прСдставлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

6) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ с пСрспСктивой

РаньшС Π² Sliding Tabs использовались инструмСнты mootools, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ большоС количСство Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Π½Π° нСбольшом пространствС.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Ajax

7) Π‘Ρ†Π΅Π½Π°Ρ€ΠΈΠΉ содСрТимого Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Ajax

Π­Ρ‚ΠΎ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ сцСнарий содСрТимого Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Ajax, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ содСрТимоС, ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½Π½ΠΎΠ΅ ΠΈΠ· Π²Π½Π΅ΡˆΠ½ΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ DIV ΠΈ упорядочСнноС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ CSS.

Π—Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ

8) ПанСли вкладок

Π”Π²Π΅ вСрсии с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ закрытия ΠΈ добавлСния ΠΏΠ°Π½Π΅Π»Π΅ΠΉ.

9) ΠœΠΎΠ΄ΡƒΠ»ΡŒ Β«Π—Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈΒ»

Π’ΠΈΠ΄ΠΆΠ΅Ρ‚ Β«Π—Π°ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈΒ» позволяСт ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ.

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ посмотритС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

10) Fabtabulous

ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ с использованиСм Prototype

11) Π’Π΅ΠΌΠ° JQuery TabContainer

ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ пСрСмСщаСтся ΠΌΠ΅ΠΆΠ΄Ρƒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΌΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ

13) MooTabs

MooTabs β€” это ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½Ρ‹ΠΉ (3 ΠšΠ‘) класс для MooTools. Как слСдуСт ΠΈΠ· названия, Π΅Π³ΠΎ основная Ρ†Π΅Π»ΡŒ β€” ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π² создании простой Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΏΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌ.

14) ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ TabView

ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ TabView позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ прСдставлСния содСрТимого с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ.

15) ΠŸΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²ΠΎΠ΅ ΡΠΊΠΎΠ»ΡŒΠ·ΡΡ‰Π΅Π΅ мСню Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

Π­Ρ‚ΠΎ классноС мСню Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ΠΎ Π² script.aculo.us

16) Control.Tabs

НСнавязчивыС Π²ΠΊΠ»Π°Π΄ΠΊΠΈ CSS для Prototype.js

17) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ Zapatec Ajax

Π’ этой дСмонстрации ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ транспортный ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Zapatec AJAX для динамичСской ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ содСрТимого Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ Ajax

18) 15daysofjquery- jQuery Tabs

ΠŸΡ€ΠΎΡΡ‚Π°Ρ Ρ„ΠΎΡ€ΠΌΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ для Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.

Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

19) Π Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ

Π­Ρ‚Π° панСль Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ построСна с использованиСм JavaScript ΠΈ дСмонстрируСт: автоматичСскоС ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ, Π²ΠΊΠ»Π°Π΄ΠΊΠΈ со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ (контСкстноС мСню), Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JS.

20) ΠŸΠ»Π°Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ

Π­Ρ‚ΠΎΡ‚ скрипт основан Π½Π° простых ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… Ρ‚Π΅Π³Π°Ρ… div. Π­Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π΅Π³ΠΎ ΠΎΡ‡Π΅Π½ΡŒ простым Π² настройкС. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ свой HTML-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ Π²Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ javascript для ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΎΠΊΠ½Π°.

21) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ AJAX (Rails redux)

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ здСсь Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² использовании Ajax для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΈΠ·Π²Π»Π΅ΠΊΠ°Π΅Ρ‚ запись.

22) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ Ajax ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ (ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚) Π±Π΅Π· обновлСния страницы.

23) ВлоТСнная Π²ΠΊΠ»Π°Π΄ΠΊΠ° JQuery

Π’ΠΊΠ»Π°Π΄ΠΊΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с CSS

24) ΠšΡ€ΠΎΡΡ-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Ρ‹Π΅ страницы с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ ΠΈ встроСнными ссылками

НЕВ javascript β€” Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS β€” ΠΈ ΠΎΠ½ провСряСт. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ страницу тСкста с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ встроСнными ссылками. ΠŸΡ€ΠΈ нСобходимости для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницы добавляСтся рабочая полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

25) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ CSS

ЦСль состояла Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ CSS Π±Π΅Π· использования ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ Ρ…Π°ΠΊΠΎΠ² ΠΈ с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌ использованиСм CSS.

26) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ, управляСмыС CSS

27) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ, управляСмыС CSS

28) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ CSS

На основС вСрсии Π”ΠΆΠΎΡˆΡƒΠ° ΠšΠ°ΡƒΡ„ΠΌΠ°Π½Π°

29) МСню скрытых Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ мСню скрытых Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ открываСтся ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ.

30) ΠŸΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ для Ρ€Π°Π·Π΄Π²ΠΈΠΆΠ½Ρ‹Ρ… Π΄Π²Π΅Ρ€Π΅ΠΉ

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

31) ΠžΠ±Π½ΠΎΠ²Π»Π΅Π½Ρ‹ простыС Π²ΠΊΠ»Π°Π΄ΠΊΠΈ CSS

Π’ΠΊΠ»Π°Π΄ΠΊΠΈ CSS с Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌ мСню.

32) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ CSS с подмСню

Π­Ρ‚ΠΎ способ выполнСния Π²ΠΊΠ»Π°Π΄ΠΎΠΊ ΠΈ ΠΏΠΎΠ΄Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ с использованиСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS ΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… нСупорядочСнных списков.

33) Π£ΠΏΡ€ΠΎΡ‰Π΅Π½Π½Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ CSS

34) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ

ИспользованиС CSS для создания отобраТСния с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ. Π’ΠΎΡ‚, Π³Π΄Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°ΠΆΠΈΠΌΠ°Ρ‚ΡŒ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Ρ‚ΠΎΠΌ ΠΆΠ΅ пространствС.

Π£Ρ‡Π΅Π±Π½ΠΈΠΊΠΈ ΠΏΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌ Ajax

35) ДинамичСскиС Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Ajax Π² 20 строках

ДинамичСскиС Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Ajax всСго Π² 17 строках ΠΊΠΎΠ΄Π° благодаря каркасу Prototype Javascript.

36) Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ содСрТимого с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ

На этом сСминарС ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ содСрТимого с Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ Π½Π° Π±Π°Π·Π΅ Ajax. Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ½Π΅Ρ‚ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ, Ajax свяТСтся с сСрвСром ΠΈ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Π΅ для этой Π²ΠΊΠ»Π°Π΄ΠΊΠΈ.

37) Π’ΠΊΠ»Π°Π΄ΠΊΠΈ CSS

ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΡƒΡ‡ΠΈΡ‚ нас ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ CSS.

Π­Ρ‚Π° ΡΡ‚Π°Ρ‚ΡŒΡ Π±Ρ‹Π»Π° ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π° 21 фСвраля 2008 Π³. ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½Π° ​​24 января 2023 Π³.

Π£Ρ‡ΠΈΡ‚Π΅ΡΡŒ ΠΆΠΈΡ‚ΡŒ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΡƒΠΌΠ½Π΅Π΅, Π° Π½Π΅ усСрднСС!

ΠŸΠΎΠ»ΡƒΡ‡Π°ΠΉΡ‚Π΅ наши Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ нСдСлю прямо Π² свой ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹ΠΉ ящик.

Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ваш адрСс элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹

Π’ΠΊΠ»Π°Π΄ΠΊΠΈ β€” Spectrum CSS

НаправлСниС

ВСрсия Vars

Бтатус ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°

Π’ΠΊΠ»Π°Π΄

ПослСдний выпуск 26 апрСля 2023 Π³.
ВСкущая вСрсия @spectrum-css/[email protected]

Π’Π΅Π±-сайт Spectrum

GitHub


Π Π°Π·ΠΌΠ΅Ρ€

Π’ΠΊΠ»Π°Π΄

S

Π’ΠΊΠ»Π°Π΄ΠΊΠ° 1

Π’ΠΊΠ»Π°Π΄ΠΊΠ° 2

Π’ΠΊΠ»Π°Π΄ΠΊΠ° 3

90 002 Π’ΠΊΠ»Π°Π΄ΠΊΠ° 4

M (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)

Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° 1

Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° 2

Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° 3

Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° 4

L

Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° 1

Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° 2

Π—Π°ΠΊΠ»Π°Π΄ΠΊΠ° 3 9000 3

Π―Π·Ρ‹Ρ‡ΠΎΠΊ 4

XL

Π―Π·Ρ‹Ρ‡ΠΎΠΊ 1

Π―Π·Ρ‹Ρ‡ΠΎΠΊ 2

Π―Π·Ρ‹Ρ‡ΠΎΠΊ 3

Π’ΠΊΠ»Π°Π΄ΠΊΠ° 4

ΠŸΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ

 
S
<Π΄Π΅Π»>
Π’ΠΊΠ»Π°Π΄ΠΊΠ° 1
Π’ΠΊΠ»Π°Π΄ΠΊΠ° 2
Π’ΠΊΠ»Π°Π΄ΠΊΠ° 3
Π’ΠΊΠ»Π°Π΄ΠΊΠ° 4
<Π΄Π΅Π»>
М (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ)
<Π΄Π΅Π»>
Π’ΠΊΠ»Π°Π΄ΠΊΠ° 1
Π’ΠΊΠ»Π°Π΄ΠΊΠ° 2
Π’ΠΊΠ»Π°Π΄ΠΊΠ° 3
Π’ΠΊΠ»Π°Π΄ΠΊΠ° 4
<Π΄Π΅Π»>