{"id":258082,"date":"2015-05-27T16:56:02","date_gmt":"2015-05-27T12:56:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=258082"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=258082","title":{"rendered":"\u0423\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043e\u043b\u0434\u0430\u0442: \u043a\u0430\u043a \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0438 \u0432\u043d\u0435\u0434\u0440\u0438\u043b\u0438 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 Mail.Ru"},"content":{"rendered":"<p>     \t\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u042f \u0415\u0433\u043e\u0440 \u0414\u044b\u0434\u044b\u043a\u0438\u043d, \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0433\u0440\u0443\u043f\u043f\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b Mail.Ru. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u0440\u0435\u0448\u0430\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u2014 \u0431\u043b\u043e\u043a\u0430, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 Mail.Ru. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c, \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u043a\u0440\u043e\u0441\u0441\u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f (\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0438 \u043d\u0430\u0448\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e) \u2013 \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u044a\u0435\u043c\u043d\u0430\u044f \u0438 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430. \u0422\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 Mail.Ru \u2014 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u0443\u044e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0431\u044b\u043b\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0438 \u043c\u043e\u0433\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u2014 \u043b\u0435\u0433\u043a\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043b\u043e\u0433\u0438\u043a\u0435. <\/p>\n<p>  \u041d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0430\u0441\u044c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u0440\u0443\u043f\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0433\u043e\u0434\u0443. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0438 \u0437\u0430\u0447\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/www.behance.net\/gallery\/18253171\/New-branding-of-MailRu\">Behance<\/a>. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 Mail.Ru, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0435\u0434\u0438\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u043d\u0438\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e. \u041d\u0430 \u043a\u0430\u043a\u043e\u043c \u0431\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0435\u043c\u0443 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u043f\u043e \u043d\u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u043d\u044e \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u043c, \u043a\u0440\u043e\u0441\u0441\u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u043c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/5c7\/8da\/4cb\/5c78da4cbd3a42a9879a71acb9c0a32f.png\"\/><br \/>  <a name=\"habracut\"><\/a><br \/>  \u0418\u0442\u043e\u0433\u043e\u043c \u043d\u0430\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441\u0442\u0430\u043b\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u0430\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u00ab\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u00bb \u0438\u0437 \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c \u0442\u043e\u0433\u043e \u0438\u043b\u0438 \u0438\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043b\u0430\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c. \u0424\u043e\u0440\u043c\u0430\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043a\u0436\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043a\u0440\u044b\u043b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u043b\u0438.<\/p>\n<h1>\u041b\u0435\u0431\u0435\u0434\u044c, \u0440\u0430\u043a \u0438 \u0449\u0443\u043a\u0430<\/h1>\n<p>  \u041d\u0443\u0436\u0434\u044b \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u0432\u043e\u0438. \u041e\u0434\u043d\u043e\u043c\u0443 \u043d\u0430\u0434\u043e \u043f\u044f\u0442\u044c \u043a\u043d\u043e\u043f\u043e\u043a, \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u2013 \u0434\u0432\u0435, \u0434\u0430 \u0441 \u0434\u0440\u043e\u043f\u0434\u0430\u0443\u043d\u0430\u043c\u0438, \u0442\u0440\u0435\u0442\u044c\u0435\u043c\u0443 \u2013 \u0447\u0442\u043e\u0431 \u0434\u0432\u0435 \u043a\u043d\u043e\u043f\u043a\u0438 \u0441\u043b\u0435\u0432\u0430, \u0430 \u043e\u0434\u043d\u0430 \u0441\u043f\u0440\u0430\u0432\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0432\u0435\u0437\u0434\u0435 \u0438\u0433\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0440\u043e\u043b\u0438. \u0412\u043e\u0437\u044c\u043c\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. \u0412 \u041f\u043e\u0438\u0441\u043a\u0435 Mail.Ru \u043e\u043d\u0430, \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0446\u0435\u043d\u0442\u0440\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e. \u0412 \u041f\u043e\u0447\u0442\u0435 \u2014 \u043e\u0442\u043e\u0439\u0434\u0435\u0442 \u043d\u0430 \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043b\u0430\u043d: \u043b\u044e\u0434\u044f\u043c \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u0432\u0430\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0432 \u044f\u0449\u0438\u043a\u0435 \u0444\u0430\u0439\u043b \u0438\u043b\u0438 \u043f\u0438\u0441\u044c\u043c\u043e, \u043d\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u044d\u0442\u043e \u043d\u0435 \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f. \u0410, \u0441\u043a\u0430\u0436\u0435\u043c, \u043d\u0430 \u041d\u043e\u0432\u043e\u0441\u0442\u044f\u0445 Mail.Ru \u043f\u043e\u0438\u0441\u043a\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0440\u0435\u0434\u043a\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u043c. \u0414\u0430 \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u044b \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u043e \u043a\u0430\u043a \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 (\u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u044f\u0437\u044b\u043a\u0438 \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u044b), \u0442\u0430\u043a \u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 (\u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0434\u043e\u043a\u0442\u0430\u0439\u043f\u044b, \u0441\u0442\u0438\u043b\u0438 \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438). \u0422\u0430\u043a\u0436\u0435 \u043d\u0430\u0434\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0438 \u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u0432 SPA.<\/p>\n<p>  \u041e\u0434\u0438\u043d \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u0440\u043e\u0441\u0441\u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u2014 \u0442\u0440\u0443\u0434\u043e\u0435\u043c\u043a\u043e\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043d\u0435 \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u043c\u0435\u043d\u044e \u0431\u044b\u043b\u043e \u043b\u0435\u0433\u043a\u043e, \u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u0441\u044f \u0432 \u043c\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c: \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0430\u043c\u0438, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u044f\u0442 \u0432 \u0432\u0438\u0434\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u043d\u043e\u0441\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043c\u0435\u043d\u044e, \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c\u0438 \u0435\u0433\u043e \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 \u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u0435\u0449\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0432\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u043e\u0431\u0449\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u043d\u0430 \u043f\u043e\u0440\u0442\u0430\u043b\u0435. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0432 \u043d\u043e\u0432\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u043f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043a\u0443\u0434\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0435\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0439, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438. \u0412\u0432\u0438\u0434\u0443 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e\u0439 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u043c\u043e\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0432\u0432\u0435\u0441\u0442\u0438 \u0442\u0430\u043a\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u043a \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0438\u043b\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u043c\u044b\u0435 \u0438 \u0442\u044f\u043d\u0443\u0449\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0432\u044b\u0448\u0435\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043b\u0435\u0433\u043a\u043e\u0441\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0434\u0432\u0430 \u0443\u0441\u043b\u043e\u0432\u0438\u044f. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u043e\u0441\u043e\u0431\u043b\u0435\u043d\u043d\u044b\u0439 \u043e\u0442 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043b\u0435\u0433\u043a\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u043b\u0435\u0433\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u0431\u0443\u0434\u0435\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0432\u0435\u0442 \u043c\u0435\u043d\u044e \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043f\u043e\u0440\u0442\u0430\u043b\u0443 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043d\u0443\u0436\u043d\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u0439 \u043a\u043e\u0434, \u0441\u043f\u0440\u044f\u0442\u0430\u0432 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044e\u044e \u043a\u0443\u0445\u043d\u044e. \u041f\u0440\u043e\u0435\u043a\u0442 \u0441\u043a\u0430\u0437\u0430\u043b \u00ab\u0445\u043e\u0447\u0443 \u043a\u043d\u043e\u043f\u043a\u0443\u00bb \u2013 \u043d\u0430 \u0442\u0435\u0431\u0435 \u043a\u043d\u043e\u043f\u043a\u0443, \u00ab\u0445\u043e\u0447\u0443 \u0441\u043f\u0440\u0430\u0432\u0430\u00bb \u2013 \u0432\u043e\u0442 \u0442\u0435\u0431\u0435 \u0441\u043f\u0440\u0430\u0432\u0430. \u0418\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0435.<\/p>\n<h1>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h1>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script src=&quot;hat.js&quot;&gt;&lt;\/script&gt; &lt;script&gt; \that.draw({}); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0418\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u044f \u0432\u0438\u0436\u0443 \u0442\u0430\u043a\u0438\u043c: \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043b \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0432\u0435\u0440\u0441\u0438\u044e, \u0432\u043d\u043e\u0441\u044f \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043f\u0440\u0430\u0432\u043e\u043a \u0432 \u043a\u043e\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438\u043b\u0438 \u0432\u043e\u0432\u0441\u0435 \u0435\u0433\u043e \u043d\u0435 \u0442\u0440\u043e\u0433\u0430\u044f. \u041d\u043e \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u2013 \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u043c\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0439\u0441\u044f \u0432 \u0441\u0430\u043c\u043e\u043c \u0432\u0435\u0440\u0445\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0435\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0430\u0431\u044b \u043a\u0430\u043a \u0438 \u0430\u0431\u044b \u043a\u043e\u0433\u0434\u0430. \u041d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u043b\u043e\u043a \u0437\u0430\u043d\u0438\u043c\u0430\u043b \u0441\u0432\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0438 \u0434\u0430\u043b\u0435\u0435 \u043d\u0435 \u0432\u043b\u0438\u044f\u043b \u043d\u0430 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438\u043d\u044b\u0445 \u0431\u043b\u043e\u043a\u043e\u0432. \u0417\u043d\u0430\u0447\u0438\u0442, \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043e \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043d\u0430 \u0442\u0440\u0438 \u0447\u0430\u0441\u0442\u0438: \u0441\u0442\u0438\u043b\u0438, \u0441\u043a\u0440\u0438\u043f\u0442 \u0438 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 HTML. HTML \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0440\u0438\u0441\u0443\u044e\u0449\u0435\u0435\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435; \u0434\u0430\u043b\u0435\u0435 \u0441\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u0443\u0434\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<pre><code class=\"html\">&lt;link href=&quot;hat.css&quot;\/&gt; &lt;div class=&quot;hat&quot;&gt;...&lt;\/div&gt; &lt;script src=&quot;hat.js&quot;&gt;&lt;\/script&gt; &lt;script&gt; \that.draw({}); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0424\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432 \u043d\u043e\u0432\u043e\u043c \u043c\u0435\u043d\u044e \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0438 \u0432\u0435\u0441 \u0443 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439. \u041d\u0435\u043b\u044c\u0437\u044f \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u2013 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u043d\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435, \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043a\u043e\u0434 \u043d\u0430 \u0434\u0432\u0435 \u0447\u0430\u0441\u0442\u0438: \u043a\u043e\u0434, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u0430 (\u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0435\u043d\u044e), \u0438 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e.<\/p>\n<pre><code class=\"html\">&lt;style&gt;\/* base styles *\/&lt;\/style&gt; &lt;div class=&quot;hat&quot;&gt;...&lt;\/div&gt; &lt;script&gt; \tloadExternalScript(); &lt;\/script&gt; &lt;script&gt; \that.init(); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435. \u041d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0443\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435. \u041d\u0430\u0434\u043e \u0438\u0441\u043a\u0430\u0442\u044c \u0438\u043d\u043e\u0439 \u043f\u0443\u0442\u044c. \u0414\u0430\u0431\u044b \u043e\u0431\u043e\u0441\u043e\u0431\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0437\u043d\u0430\u043d\u0438\u044f, \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d API \u043f\u0440\u043e\u043a\u0441\u0438, \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c\u044b\u0439 \u0432 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. <\/p>\n<pre><code class=\"javascript\">hat.draw = new DeferredQuery.getQuery(); hat.draw({}); \/\/ put in queue hat.draw({}); \/\/ put in queue hat.draw.replace(realDrawFn); \/\/ run two times hat.draw({}); \/\/ run immediately <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u043a\u0441\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u2013 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0432\u0441\u0435 \u0435\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0441 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0435 \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 \u043a \u0432\u044b\u0437\u043e\u0432\u0443 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c\u0443\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437 \u0441 \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0412 \u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0435 \u043b\u0435\u0436\u0430\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u043d\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430\/\u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043e\u0434\u043d\u0438\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c, \u0441\u0442\u0438\u043b\u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0432 \u0441\u043a\u0440\u0438\u043f\u0442 \u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438. \u041f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043a\u043e\u0434\u0430 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u0441\u043e\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u043e\u0439 \u0432 \u0441\u043a\u0440\u0438\u043f\u0442 \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0434\u043e\u043c \u0434\u043e \u043f\u043e\u0434\u043c\u0435\u043d\u044b API.<\/p>\n<pre><code class=\"html\">var styles = &quot;.body{background:url(\\&quot;http:\/\/...\\&quot;)}&quot;, \tstyle = document.createElement('style'); style.appendChild(document.createTextNode(styles)); body.appendChild(style); init(); <\/code><\/pre>\n<p>  \u041d\u0430\u0434\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0430\u043c\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u0440\u0438 \u043d\u0435\u0432\u0435\u0434\u043e\u043c\u044b\u0445 \u043e\u0431\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u0430\u0445 \u043d\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442 \u0441\u0442\u0438\u043b\u0438. \u0422\u043e \u0435\u0441\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442, \u0438\u0434\u0443\u0449\u0438\u0439 \u0437\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0441\u0442\u0438\u043b\u0435\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0441\u0442\u0430\u0440\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438. \u041d\u0435\u0434\u043e\u043b\u0433\u043e \u0434\u0443\u043c\u0430\u044f, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u0432 \u0438\u043d\u043b\u0430\u0439\u043d HTML \u043f\u0443\u0441\u0442\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0441\u0442\u0438\u043b\u044f\u0445 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b. \u041f\u043e \u0435\u0433\u043e \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f. \u041f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0432 \u043b\u043e\u0431 \u2013 \u043f\u043e \u0442\u0430\u0439\u043c\u0430\u0443\u0442\u0443.<\/p>\n<pre><code class=\"html\">appendStyles(); whenStylesLoaded(init); <\/code><\/pre>\n<p>  <\/p>\n<h1>\u0421\u0431\u043e\u0440\u043a\u0430 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e<\/h1>\n<p>  \u0423 \u043d\u0430\u0441 \u043f\u0440\u0435\u0434\u0443\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u043e \u0442\u0440\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 (\u043d\u0430 \u0432\u0441\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0436\u0438\u0437\u043d\u0438):  <\/p>\n<ol>\n<li>\u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u2013 \u0441\u0431\u043e\u0440\u043a\u0430 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0438 \u043a\u0430\u043a \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2013 \u0447\u0442\u043e \u043e\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/li>\n<li>\u041f\u043e\u043b\u0443\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u2013 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439.<\/li>\n<li>\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u2013 \u0434\u043b\u044f \u0433\u0443\u0440\u0443 \u0432\u0435\u0431\u0430.<\/li>\n<\/ol>\n<h4>\u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430<\/h4>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;style&gt;\/* base styles *\/&lt;\/style&gt; &lt;div class=&quot;hat&quot;&gt;...&lt;\/div&gt; &lt;script&gt; \tcreateAPI(); \tloadExternalScript(); &lt;\/script&gt; &lt;script&gt;hat.draw({});&lt;\/script&gt; <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430: \u0432\u0442\u044b\u043a\u0430\u0435\u043c \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e, \u0430 \u0434\u0430\u043b\u044c\u0448\u0435 \u043e\u043d\u043e \u0441\u0430\u043c\u043e \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0438 \u043a\u0430\u043a \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c\u0441\u044f. \u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u044d\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u043d\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u043a\u043e\u0434\u0435 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<h4>\u041f\u043e\u043b\u0443\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430<\/h4>\n<p>  \u0414\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u043d \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439, \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c, \u043d\u043e \u0431\u0435\u0437 \u0441\u0442\u0438\u043b\u0435\u0439, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u2013 \u041f\u043e\u0447\u0442\u0430. \u041f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044c \u0432 \u043f\u043e\u043b\u0443\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u0435\u0441\u0442\u044c \u0438\u0437-\u0437\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0442\u0435\u043c \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435. \u0412 \u041f\u043e\u0447\u0442\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0430 CSS-\u0444\u0430\u0439\u043b\u0430 \u2013 \u043e\u0434\u0438\u043d \u0441 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0435\u0439 \u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u0438 \u0432\u0442\u043e\u0440\u043e\u0439 \u0441 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b. \u041c\u044b \u0443\u0436\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b\u0438 \u043f\u0440\u043e \u044d\u0442\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 <a href=\"http:\/\/habrahabr.ru\/company\/mailru\/blog\/137552\/\">\u0441\u0442\u0430\u0442\u044c\u0435<\/a>. \u0412 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u043d\u044e \u0441\u0442\u0438\u043b\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432 \u043d\u0435\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0435 \u043c\u0435\u0441\u0442\u043e: \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0432 \u043c\u0435\u043d\u044e \u0438\u043b\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043c\u043e\u0436\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u043c\u0435\u043d\u044e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0442\u0435\u043c\u044b (\u0441\u043c. \u043d\u0438\u0436\u0435 \u043f\u043e \u043a\u043e\u0434\u0443), \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u0431\u0443\u0434\u0443\u0442 \u0431\u043e\u043b\u0435\u0435 \u0432\u0435\u0441\u043e\u043c\u044b\u043c\u0438. \u041f\u043e\u043b\u0443\u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430 \u0434\u0430\u0435\u0442 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043d\u0430\u0434 \u0441\u0442\u0438\u043b\u044f\u043c\u0438, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u00ab\u0441\u0430\u043c\u043e\u00bb.<\/p>\n<pre><code class=\"html\">&lt;link href=&quot;full.css&quot;&gt; &lt;div class=&quot;hat&quot;&gt;...&lt;\/div&gt; &lt;script&gt; \tcreateAPI(); \tloadExternalScriptWithoutCSS(); &lt;\/script&gt; &lt;script&gt;hat.draw({});&lt;\/script&gt; <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430<\/h4>\n<p>  \u0414\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u043d \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0437\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u0441\u0434\u0435\u043b\u0430\u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0430\u044f \u0432 \u0441\u0435\u0431\u044f \u043a\u0443\u0441\u043e\u043a \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e\u0433\u043e HTML \u0438 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u044b \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c, \u0431\u0435\u0437 \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430. \u041f\u0440\u043e\u0435\u043a\u0442 \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u0441\u0432\u043e\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0433\u0440\u0443\u0437\u0438\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e.<\/p>\n<pre><code class=\"html\">&lt;link href=&quot;full.css&quot;&gt; &lt;script src=&quot;full.js&quot;&gt;&lt;\/script&gt; &lt;div class=&quot;hat&quot;&gt;...&lt;\/div&gt; &lt;script&gt;hat.draw({});&lt;\/script&gt; <\/code><\/pre>\n<p>  <\/p>\n<h1>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f<\/h1>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0432 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u043a\u043e\u043d\u0444\u0438\u0433 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u043d \u043d\u0430\u0431\u043e\u0440 API \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<pre><code class=\"html\">hat.draw({ \u00a0\u00a0\u00a0logo: {}, \u00a0\u00a0\u00a0toolbar: {}, \u00a0\u00a0\u00a0submenu: {} }, function(menuItems){ \u00a0\u00a0\u00a0menuItems.toolbar \/\/ \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u00a0\u00a0\u00a0menuItems.submenu \/\/ \u0432\u0442\u043e\u0440\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043c\u0435\u043d\u044e }); <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/a61\/01d\/909\/a6101d909e2d426c9570776cc4657b6c.png\"\/><\/p>\n<p>  \u0412 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u043d\u044e \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0443\u0440\u043e\u0432\u043d\u044f \u043c\u0435\u043d\u044e: \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 (\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 toolbar) \u0438 \u0441\u0435\u0440\u043e\u0435 \u043f\u043e\u0434\u043c\u0435\u043d\u044e (\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 \u043f\u043e\u0434\u043c\u0435\u043d\u044e). <\/p>\n<p>  \u041e \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0443\u043b\u0431\u0430\u0440, \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043a\u043e\u0434 \u0443\u0437\u043d\u0430\u0435\u0442 \u0443\u0436\u0435 \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u0430 \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0432\u044b\u0441\u043e\u0442\u0443, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440 \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0440\u0435\u0437\u0435\u0440\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u043c\u0435\u043d\u044e \u043c\u0435\u0441\u0442\u043e. \u0417\u043d\u0430\u0447\u0438\u0442, \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0435 \u0437\u043d\u0430\u0442\u044c \u043e \u043f\u043b\u0430\u043d\u0430\u0445 \u043d\u0430\u0441\u0447\u0435\u0442 \u043f\u043e\u0434\u043c\u0435\u043d\u044e \u0438 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u043e\u0435 \u043c\u0435\u043d\u044e. <\/p>\n<pre><code class=\"html\">hatConfig = { \u00a0\u00a0\u00a0submenu: true } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u043c\u0435\u043d\u044e \u043d\u0430\u0443\u0447\u0438\u043b\u0441\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u043f\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 \u043e\u043f\u0446\u0438\u0438 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f.<\/p>\n<p>  \u0414\u0430\u043b\u044c\u0448\u0435 \u044f \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435 \u043c\u0435\u043d\u044e.<\/p>\n<h1>\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h1>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/0d8\/380\/de2\/0d8380de20cc49b5a06303201fec7a8d.png\"\/><\/p>\n<p>  \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0445 \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0435\u043d\u044e \u043c\u043d\u043e\u0433\u043e. \u042d\u0442\u043e \u0441\u0442\u0440\u043e\u043a\u0430 \u043f\u043e\u0438\u0441\u043a\u0430, \u043a\u043d\u043e\u043f\u043a\u0438, \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0438, \u0442\u044f\u043d\u0443\u0449\u0438\u0435\u0441\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0423 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043e\u043f\u0446\u0438\u0439 \u043f\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0432\u0438\u0434\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 <b>N<\/b> \u0432\u0438\u0434\u043e\u0432 \u0441\u0442\u0440\u043e\u043a\u0438 \u043f\u043e\u0438\u0441\u043a\u0430. \u0420\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0432 \u043f\u0440\u0435\u0434\u0435\u043b\u0430\u0445 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u043e\u0432 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c \u0433\u0438\u0431\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u0432\u0438\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0435\u043d\u044e \u043f\u043e\u0434 \u0441\u0435\u0431\u044f. \u0412\u0441\u0435 \u044d\u0442\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u043c \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u043f\u0446\u0438\u0439. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043d\u0430 \u043d\u0438\u0445 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0431\u0443\u0434\u0443. \u041e\u0441\u043e\u0431\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u044e\u0449\u0438\u0435\u0441\u044f \u043c\u043e\u0433\u0443\u0442 \u043f\u043e\u0433\u0443\u043b\u044f\u0442\u044c \u043f\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c Mail.Ru \u0438 \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u043c\u0435\u043d\u044e.<\/p>\n<h1>\u041f\u0430\u043a \u0438\u043a\u043e\u043d\u043e\u043a <\/h1>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/32f\/4fc\/3a7\/32f4fc3a7d1b4b899bd94ef4517c393a.png\"\/><\/p>\n<p>  \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u043d\u043e\u0432\u044b\u043c \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u043c\u0435\u043d\u044e \u043c\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0438 \u0432\u043d\u0435\u0434\u0440\u0438\u043b\u0438 \u0443\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438. \u0415\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u0435 \u0438\u043a\u043e\u043d\u043e\u043a \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u0439 user experience \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043f\u043e\u0440\u0442\u0430\u043b\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043a\u043e\u043d\u043a\u0430 \u043d\u043e\u0432\u043e\u0433\u043e \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0438 \u043d\u0430 \u0418\u0433\u0440\u0430\u0445, \u0438 \u0432 \u041c\u043e\u0435\u043c \u041c\u0438\u0440\u0435. <\/p>\n<p>  \u0412 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0430\u0441\u0441 \u0438\u043a\u043e\u043d\u043a\u0438. \u0415\u0441\u043b\u0438 \u043e\u043d \u0437\u0430\u0434\u0430\u043d, \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441 \u044d\u0442\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c. \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043b\u0430\u0441\u0441 \u0438\u043a\u043e\u043d\u043a\u0438 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0438\u043b\u0438 \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c. \u041f\u0440\u0435\u0434\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043f\u0440\u0430\u0439\u0442 \u0438\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u0438\u043a\u043e\u043d\u043e\u043a \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435. \u041a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043f\u043e \u0438\u043c\u0435\u043d\u0430\u043c \u0438 \u0442\u0438\u043f\u0430\u043c. \u0412 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0441\u0442\u044c \u00ab\u0440\u0435\u0442\u0438\u043d\u043e\u0432\u0430\u044f\u00bb \u0438 \u00ab\u043d\u0435\u0440\u0435\u0442\u0438\u043d\u043e\u0432\u0430\u044f\u00bb png \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 name.png \u0438 name@2x.png, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0432\u0435 \u0438\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0438\u043a\u043e\u043d\u043a\u0438, \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0438 \u0434\u0440\u043e\u043f\u0434\u0430\u0443\u043d\u0430. \u0420\u0435\u0442\u0438\u043d\u043e\u0432\u044b\u043c\u0438 \u043c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u043a\u043e\u043d\u043a\u0438 \u0443\u0434\u0432\u043e\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043e\u043d\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0441 \u043f\u043b\u043e\u0442\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c 2. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043e\u0431\u0430 \u0444\u0430\u0439\u043b\u0430, \u0442\u043e \u0438\u043a\u043e\u043d\u043a\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0431\u043e\u0440. \u0418\u0437 \u043d\u0430\u0431\u043e\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/aheckmann\/gm\">https:\/\/github.com\/aheckmann\/gm<\/a> \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0432 \u0441\u0431\u043e\u0440\u043a\u0443.<\/p>\n<pre><code class=\"css\">.icon { \u00a0\u00a0\u00a0background: url(icons.png) no-repeat -3427px 0; \tbackground-size: 3458px 21px; } @media only screen and (min-device-pixel-ratio: 1.5){ \t.icon { \t\tbackground-image: url(icons@2x.png); }} <\/code><\/pre>\n<p>  \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 API.<\/p>\n<h1>API \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h1>\n<p>  \u041f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0431\u043e\u0440 API \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u042d\u0442\u043e \u043d\u0430\u0431\u043e\u0440 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 hat.getItems(function(items){}).<\/p>\n<pre><code class=\"html\">hat.draw({}, function(menuItems){ \u00a0\u00a0\u00a0menuItems.toolbar \/\/ \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u00a0\u00a0\u00a0menuItems.submenu \/\/ \u0432\u0442\u043e\u0440\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043c\u0435\u043d\u044e }); hat.getItems(function(menuItems){}); <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 API \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c, \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0441\u043a\u0440\u044b\u0442\u044c\/\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u043e\u0442 \u0438\u043b\u0438 \u0438\u043d\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0442\u0438\u043f\u043e\u0432 \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438. \u0422\u0430\u043a, \u0443 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u00ab\u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b\u00bb (\u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0434\u0432\u0435 \u00ab\u0442\u0435\u043a\u0443\u0449\u0438\u0435\u00bb \u043a\u043d\u043e\u043f\u043a\u0438), \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0438 \u0438\u043a\u043e\u043d\u043a\u0443, \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0447\u0438\u0441\u043b\u043e \u0432 \u043d\u043e\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0435. \u0423 \u0434\u0440\u043e\u043f\u0434\u0430\u0443\u043d\u0430 \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u0441\u0447\u0435\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 HTML-\u0434\u0440\u043e\u043f\u0434\u0430\u0443\u043d\u043e\u0432. \u0423 \u043f\u043e\u0438\u0441\u043a\u0430 \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0441\u0430\u0434\u0436\u0435\u0441\u0442\u0430\u043c\u0438 \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u044b\u043c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c.<\/p>\n<h1>\u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h1>\n<p>  <b>\u0421\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0435\u0441\u044f \u0433\u0440\u0443\u043f\u043f\u044b<\/b>. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0442\u0430\u043a\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u0432 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0435 \u043c\u0435\u043d\u044e \u00ab\u0415\u0449\u0435\u00bb, \u0435\u0441\u043b\u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043c\u0435\u0441\u0442\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/7dd\/b4c\/994\/7ddb4c994b42411395851e8c2850a68c.png\"\/><\/p>\n<h1>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h1>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/454\/2eb\/e12\/4542ebe125654715984f40db0d86d0c4.png\"\/><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/02a\/ac5\/101\/02aac5101c024793b224d4eeb05211d0.gif\"\/><\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u043a\u043d\u043e\u043f\u043a\u0430 \u0441 \u0438\u043a\u043e\u043d\u043a\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0440\u0430\u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u0438\u043a\u043e\u043d\u043a\u0438 \u0432 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430 \u044d\u0442\u043e \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043c\u0435\u0441\u0442\u0430.<\/p>\n<h1>\u0422\u044f\u043d\u0443\u0449\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h1>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/95b\/0c8\/6f7\/95b0c86f7916449a8006ec5a1f6666ac.png\"\/><\/p>\n<p>  \u041d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u0442\u044f\u043d\u0443\u0449\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u2013 \u044d\u0442\u043e spacer \u0431\u0435\u0437 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0448\u0438\u0440\u0438\u043d\u044b \u0438 \u043f\u043e\u0438\u0441\u043a \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c flexible: true \u0438 \u043f\u043e\u0438\u0441\u043a.<\/p>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0441\u043a\u0440\u044b\u0442\u0438\u044f \u043d\u0435 \u0443\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u0440\u0430\u0441\u0447\u0435\u0442\u0430 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043f\u043e\u0440\u043e\u0432\u043d\u0443 \u043c\u0435\u0436\u0434\u0443 \u0432\u0441\u0435\u043c\u0438 \u0442\u044f\u043d\u0443\u0449\u0438\u043c\u0438\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0442\u043e \u0435\u0441\u0442\u044c flex = 1. \u0414\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0442\u044f\u043d\u0443\u0449\u0435\u0433\u043e\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 flex, \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u0442 1, \u2014 \u0442\u043e\u0433\u0434\u0430 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u044d\u0442\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0442\u044f\u043d\u0443\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 flex = 1 \u0438 \u043e\u0434\u0438\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441 flex = 2, \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0432 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u043e 50 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c \u2014 \u043f\u043e 25.<\/p>\n<p>  <i>&lt;\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&gt; = &lt;\u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e&gt; \/ &lt;\u2211 \u0432\u0441\u0435\u0445 flex &gt; * &lt;flex \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&gt;<\/i><\/p>\n<p>  \u0415\u0449\u0435 \u043e\u0434\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u0442\u044f\u043d\u0443\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043d\u044f\u0442\u0438\u0435 \u2013 \u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430. \u042d\u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430, \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0440\u0430\u0441\u0447\u0435\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430. \u0411\u0435\u0440\u0435\u0442\u0441\u044f \u0438\u0437 width \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 (\u0443 \u0442\u044f\u043d\u0443\u0449\u0435\u0433\u043e\u0441\u044f \u0441\u043f\u0435\u0439\u0441\u0435\u0440\u0430 = 0).<\/p>\n<p>  \u0414\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u044f\u0442\u0441\u044f \u0441 \u0448\u0438\u0440\u0438\u043d\u043e\u0439, \u0440\u0430\u0432\u043d\u043e\u0439 \u0431\u0430\u0437\u043e\u0432\u043e\u0439. \u041e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043c\u0435\u0441\u0442\u043e \u0434\u0435\u043b\u0438\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u0442\u044f\u043d\u0443\u0449\u0438\u043c\u0438\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 flex-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0438 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435.<\/p>\n<p>  <i>&lt;\u0448\u0438\u0440\u0438\u043d\u0430 \u0442\u044f\u043d\u0443\u0449\u0435\u0433\u043e\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&gt; =<br \/>  &lt;\u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&gt; + &lt;\u0431\u0430\u0437\u043e\u0432\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430&gt;<\/i><\/p>\n<h1>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/h1>\n<p>  hat.draw({});<\/p>\n<p>  \u0412 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c. \u041f\u043e\u0441\u043b\u0435 \u0438\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 (\u0442.\u0435. \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u00a0API) \u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043d\u0443\u0436\u043d\u044b\u0445 \u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0413\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0441\u043a\u0440\u0438\u043f\u0442, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0438, \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u00ab\u043a\u043b\u0430\u0441\u0441\u044b\u00bb \u0432\u0441\u0435\u0445 \u0438\u043c\u0435\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433.<\/p>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433, toolbar.items \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u043d\u0430\u0431\u043e\u0440\u0443 \u0433\u0440\u0443\u043f\u043f. \u0415\u0441\u043b\u0438 \u0431\u044b\u043b\u043e<\/p>\n<pre><code class=\"css\">[ \t{type: \u2018button\u2019}, \t{type: \u2018button\u2019}, \t{type: \u2018group\u2019, items:  \t\t[{type: \u2018button\u2019},{type: \u2018button\u2019}]}, \t{type: \u2018button\u2019} ] <\/code><\/pre>\n<p>  \u0442\u043e \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0442\u0440\u0438 \u0433\u0440\u0443\u043f\u043f\u044b: \u0441 \u043f\u0435\u0440\u0432\u044b\u043c\u0438 \u0434\u0432\u0443\u043c\u044f \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438, \u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0433\u0440\u0443\u043f\u043f\u0430 \u0438 \u0433\u0440\u0443\u043f\u043f\u0430 \u0441 \u043e\u0434\u043d\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u043e\u0439.<\/p>\n<pre><code class=\"css\">[ \t{type: \u2018group\u2019, items: ... } \t{type: \u2018group\u2019, items: ... } \t{type: \u2018group\u2019, items: ... } ] <\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043d\u043e\u0440\u043c\u0430\u043b\u0438\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u043d\u0444\u0438\u0433 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c. \u0422\u0443\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0445 \u0441\u043c\u044b\u0441\u043b\u0430 \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043e\u043f\u0446\u0438\u044f\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043e \u0438\u043a\u043e\u043d\u043a\u0438, \u0435\u0441\u043b\u0438 \u043a\u043d\u043e\u043f\u043a\u0430 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0430\u044f.<\/p>\n<pre><code class=\"html\">item = classes[item.type].getConfig(item); <\/code><\/pre>\n<p>  \u041a\u043e\u043d\u0444\u0438\u0433\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 (Fest), \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443. \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043d\u0443\u0436\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f JS-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0435\u0431\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0432\u044f\u0437\u0438, \u0432\u0435\u0448\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0442.\u0434. <\/p>\n<pre><code class=\"html\">html = fest(config); block.innerHTML = html; $(block).find('.elements').bem() <\/code><\/pre>\n<p>  \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0435\u0435 \u0431\u044b\u043b\u043e \u0441 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438: \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u043c\u0438\u0441\u044f \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u043c\u0438 \u043a\u043d\u043e\u043f\u043a\u0430\u043c\u0438 \u0438 \u0442\u044f\u043d\u0443\u0449\u0438\u043c\u0438\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438.<\/p>\n<h1>\u0420\u0430\u0437\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u043e \u0433\u0440\u0443\u043f\u043f\u0430\u043c<\/h1>\n<p>  <\/p>\n<pre><code class=\"javascript\">getEls(); getCollapsibleGroups(); getMoreButtons(); getAdaptive(); getFlexible(); <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0438\u0445 \u0440\u0430\u0441\u0447\u0435\u0442\u043e\u0432 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c \u2013 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0433\u0440\u0443\u043f\u043f, \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0415\u0449\u0435\u00bb \u0438\u0437 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u0433\u0440\u0443\u043f\u043f, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0442\u044f\u043d\u0443\u0449\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u0443\u043c\u043c\u0430\u0440\u043d\u044b\u0439 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 flex. \u042d\u0442\u043e \u0436\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432 \u043d\u0430\u0431\u043e\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<h4>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/h4>\n<p>  <\/p>\n<pre><code class=\"javascript\">elements.show(); adaptive.collapse(); flexible.width(baseWidth);  els.each(funcion(el){ \tel._width = el.width(); }); fullWidth = sum(el._width); <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0414\u043b\u044f \u0442\u044f\u043d\u0443\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430, \u0440\u0430\u0432\u043d\u0430\u044f \u0431\u0430\u0437\u043e\u0432\u043e\u0439, \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u044e\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0433\u0440\u0443\u043f\u043f \u0438 \u043f\u043e\u043b\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0442\u0443\u043b\u0431\u0430\u0440\u0430.<\/p>\n<p>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432 \u043d\u0430\u0431\u043e\u0440\u0435 (\u043a\u043e\u043d\u0444\u0438\u0433\u0435) \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0441\u043a\u0440\u044b\u0442\u0438\u0438\/\u043f\u043e\u043a\u0430\u0437\u0435, \u0442\u043e \u0435\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0440\u043e\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0430\u0445 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u043d\u0430\u0431\u043e\u0440\u0430.<\/p>\n<p>  \u041f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u043e \u043d\u0430 \u0434\u0432\u0435 \u044f\u0447\u0435\u0439\u043a\u0438 \u0441 display: table-cell. \u0412 \u043b\u0435\u0432\u043e\u0439 \u0441\u0442\u043e\u0438\u0442 \u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u0430 \u043f\u0440\u0430\u0432\u0430\u044f \u2014 \u0441 \u0442\u0443\u043b\u0431\u0430\u0440\u043e\u043c \u2014 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u0435\u0441\u044f \u043c\u0435\u0441\u0442\u043e. \u0422\u0443\u0431\u043b\u0430\u0440 \u043b\u0435\u0436\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0440\u0430\u0432\u043e\u0439 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0441\u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e, \u0434\u0430\u0431\u044b \u043d\u0435 \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0448\u0438\u0440\u0438\u043d\u0443 \u0432\u0441\u0435\u0433\u043e \u043c\u0435\u043d\u044e.<\/p>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u0432\u0438\u0434\u0438\u043c\u043e\u043c\u0443), \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0437\u043d\u0430\u0435\u043c \u0448\u0438\u0440\u0438\u043d\u0443 \u044f\u0447\u0435\u0439\u043a\u0438 \u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430, \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0437\u043d\u0430\u0435\u043c, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0435 \u0432\u043b\u0435\u0437\u043b\u043e \u0438\u043b\u0438, \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430.<\/p>\n<h4>\u0420\u0430\u0441\u0447\u0435\u0442 \u0432\u0438\u0434\u0438\u043c\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u043d\u0430\u044f \u0448\u0438\u0440\u0438\u043d\u0430 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u043c\u0435\u044e\u0449\u0435\u0439\u0441\u044f, \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0415\u0449\u0435\u00bb.<\/p>\n<pre><code class=\"javascript\">if (fullWidth &lt;= currentWidth) \tmoreButtonsHide(); \tcollapsibleEls.show(); } <\/code><\/pre>\n<p>  \u0418\u043d\u0430\u0447\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0415\u0449\u0435\u00bb \u0438 \u043f\u0440\u043e\u0431\u0435\u0433\u0430\u0435\u043c\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u0433\u0440\u0443\u043f\u043f\u0430\u043c \u0441 \u0446\u0435\u043b\u044c\u044e \u0441\u043a\u0440\u044b\u0442\u044c \u0432 \u043d\u0435\u0439 \u043d\u0443\u0436\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n<pre><code class=\"javascript\">if (fullWidth &gt; currentWidth) \tmoreButtonsShow(); \tgroups.each(function(group){ \t\t... \t}) } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0420\u0430\u0441\u0447\u0435\u0442 \u0433\u0440\u0443\u043f\u043f\u044b<\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0432 \u043b\u043e\u0431 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0440\u0430\u0432\u0430 \u043d\u0430\u043b\u0435\u0432\u043e \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0433\u0440\u0443\u043f\u043f, \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b \u2014 \u0442\u043e\u0439, \u0447\u0442\u043e \u043f\u0440\u0430\u0432\u0435\u0435 \u2014 \u043c\u044b \u0441\u043a\u0440\u043e\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u0441\u0435. \u042d\u0442\u043e \u043d\u0435\u0445\u043e\u0440\u043e\u0448\u043e. \u0418\u0449\u0435\u043c \u0438\u043d\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u041c\u043e\u0436\u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043f\u043e \u0440\u0430\u0432\u043d\u043e\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u0437 \u043a\u0430\u0436\u0434\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b. \u0422\u043e\u0436\u0435 \u043d\u0435\u0445\u043e\u0440\u043e\u0448\u043e: \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u0447\u0442\u043e \u043c\u044b \u0441\u043a\u0440\u043e\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0447\u0435\u043c \u043d\u0430\u0434\u043e. \u0417\u043d\u0430\u0447\u0438\u0442, \u043d\u0430\u0434\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043e\u0431\u0449\u0435\u0439 \u0432\u0438\u0434\u0438\u043c\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435 \u0433\u0440\u0443\u043f\u043f\u044b. \u0427\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0430\u0434\u043e \u0432 \u043d\u0435\u0439 \u0441\u043a\u0440\u044b\u0442\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/854\/060\/afa\/854060afa1ec45ee97c0e386abd71dd0.png\"\/><\/p>\n<p>  \u0421\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0442\u0430\u043a, \u0447\u0442\u043e \u0433\u0440\u0443\u043f\u043f\u0443 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u0447\u0435\u043c \u043c\u043e\u0436\u043d\u043e. \u0412\u0435\u0434\u044c \u043d\u0435\u043b\u044c\u0437\u044f \u0441\u043a\u0440\u044b\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u044b \u0441\u043a\u0440\u043e\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435. \u042d\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435: \u043f\u0440\u0430\u0432\u0430\u044f \u043b\u0438\u043d\u0438\u044f \u2013 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0438\u043b\u0438, \u043b\u0435\u0432\u0430\u044f \u2013 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<p>  \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442, \u0447\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u044b\u0433\u0430\u044e\u0442 \u043f\u0440\u0438 \u0440\u0435\u0441\u0430\u0439\u0437\u0435. \u0422\u043e \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u0435 \u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u0439, \u0442\u043e \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430\u0434\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0442\u044b\u043c\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438 \u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u0443 \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043f\u0438\u043a\u0441\u0435\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0433\u0440\u0443\u043f\u043f\u044b.<\/p>\n<pre><code class=\"javascript\">var groupToHide = Math.round(pixelsToHide *  \tgroup.collapsibleWidth \/collapsibleFullWidth); var hiddenFromGroup = group.expand(groupToHide + notHidden); notHidden = groupToHide - hiddenFromGroup; <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0410\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h4>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/187\/234\/2b2\/1872342b261447238c2471a4aa06b58b.png\"\/><\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u0441 \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438 \u043f\u043e\u043a\u043e\u043d\u0447\u0438\u043b\u0438, \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0435\u0441\u044f \u043f\u0438\u043a\u0441\u0435\u043b\u0438.<br \/>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0434\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0440\u0430\u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u043a\u043d\u043e\u043f\u043a\u0438.<br \/>  \u041b\u043e\u0433\u0438\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f. \u041d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u0435\u0448\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0440\u0430\u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0433\u043e \u0438 \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0433\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. <\/p>\n<pre><code class=\"javascript\">this.expand(); this._expandedWidth = this.el.clientWidth; this.collapse(); this._width = this.el.clientWidth; <\/code><\/pre>\n<p>  \u0422\u043e \u0435\u0441\u0442\u044c \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0437\u043d\u0430\u0442\u044c, \u0443\u043c\u0435\u0441\u0442\u044f\u0442\u0441\u044f \u043b\u0438 \u0440\u0430\u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u043e\u0441\u0442\u0430\u0432\u0448\u0435\u043c\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435. \u0415\u0441\u043b\u0438 \u0434\u0430, \u0442\u043e \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0440\u0438\u0441\u0443\u0435\u043c \u0442\u0435\u043a\u0441\u0442, \u0430 \u043f\u043e\u0438\u0441\u043a \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432 \u043f\u043e\u043b\u043d\u044b\u0439 \u0432\u0438\u0434. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442,\u00a0\u043a\u043d\u043e\u043f\u043a\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0438\u043a\u043e\u043d\u043a\u0438, \u0430 \u043f\u043e\u0438\u0441\u043a \u2013 \u0432 \u0432\u0438\u0434\u0435 \u043a\u043d\u043e\u043f\u043a\u0438, \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u0432\u0435\u0440\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0444\u043e\u0440\u043c\u0430.<\/p>\n<pre><code class=\"javascript\">if (currentWidth + adaptiveFullWidth &lt;= avaibleWidth){ \tadaptive.expand(); } <\/code><\/pre>\n<p>  <\/p>\n<h4>\u0422\u044f\u043d\u0443\u0449\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h4>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/95b\/0c8\/6f7\/95b0c86f7916449a8006ec5a1f6666ac.png\"\/><\/p>\n<p>  \u041e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0442\u044f\u043d\u0443\u0449\u0438\u0435\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0415\u0441\u043b\u0438 \u0438\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043c\u0435\u0441\u0442\u0430, \u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u043c \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043a \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435.<\/p>\n<pre><code class=\"javascript\">if (avaibleWidth &lt;= 0){ \tflexible.width(baseWidth); } <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u0442\u044f\u043d\u0443\u0449\u0438\u043c\u0438\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e\u0440\u043e\u0432\u043d\u0443.<\/p>\n<pre><code class=\"javascript\">if (avaibleWidth &gt; 0){ \tflexible.width(baseWidth +  \t\t\t\t\t+ avaibleWidth \/ flexible.length); } <\/code><\/pre>\n<p>  \u041d\u043e, \u043a\u0430\u043a \u043c\u044b \u043f\u043e\u043c\u043d\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b flex, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0434\u043e \u0443\u0447\u0435\u0441\u0442\u044c. \u0418\u0442\u043e\u0433\u043e, \u0448\u0438\u0440\u0438\u043d\u0430 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0442\u044f\u043d\u0443\u0449\u0435\u0433\u043e\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0432\u043d\u0430 \u0435\u0433\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u0435, \u0441\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0448\u0438\u0440\u0438\u043d\u043e\u0439, \u0440\u0430\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0430\u043c flex.<\/p>\n<pre><code class=\"javascript\">var pix = (flexEl.flex) * (avaibleWidth) \/ (flexSum); flexEl.width(baseWidth + pix); <\/code><\/pre>\n<p>  \u0422\u0443\u0442 \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441. \u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c 100 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0438 \u0442\u0440\u0438 \u0442\u044f\u043d\u0443\u0449\u0438\u0445\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 flex 1. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043c\u044b \u043e\u0442\u0434\u0430\u0434\u0438\u043c \u043f\u043e 33 \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u0438 1 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0435\u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c. \u0420\u0435\u0441\u0430\u0439\u0437\u0438\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, 99 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u2013\u00a0\u0432\u0441\u0435 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438.<\/p>\n<p>  \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0440\u0430\u0432\u0430 \u043e\u0442 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u0442\u044f\u043d\u0443\u0449\u0435\u0433\u043e\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u044b\u0433\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0430\u0432\u043e\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/bc9\/99a\/f2e\/bc999af2ec924dccb82aff34b9235c98.png\"\/><\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0445\u0435\u043c\u043e\u0439, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u0433\u0440\u0443\u043f\u043f. \u041d\u0430\u0434\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0441\u0447\u0435\u0442\u043d\u043e\u0439 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u043e\u0439, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u043e\u0439 \u2013\u00a0\u0442\u043e \u0435\u0441\u0442\u044c \u043e\u043a\u0440\u0443\u0433\u043b\u0438\u0442\u044c \u0438 \u0441\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0430 \u044d\u0442\u0443 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0443.<\/p>\n<pre><code class=\"javascript\">var pix = (flexEl.flex) * (avaibleWidth) \/ \t\t\t\t\/ (flexSum) + delta; var roundedPix = Math.round(pix); flexEl.width(baseWidth + roundedPix); delta += (pix - roundedPix); <\/code><\/pre>\n<p>  <\/p>\n<h1>\u0412 \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h1>\n<p>  \u0418\u0442\u0430\u043a, \u043d\u0430\u043c \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0435 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 \u043e\u0431\u043e\u0438\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043e\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c \u2014 \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u044b, \u0438 \u043d\u043e\u0432\u044b\u0439 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0432\u0435\u0437\u0434\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043c\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u043b\u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u0430\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0433\u0438\u0431\u043a\u043e\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0435\u043d\u044e. \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434 \u043c\u043e\u0436\u0435\u0442 \u043e\u043f\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u043e \u0435\u0433\u043e \u00ab\u0442\u044e\u043d\u0438\u043d\u0433\u043e\u0432\u0430\u0442\u044c\u00bb, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0441\u0442\u0430\u0432\u0430\u044f\u0441\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u043e\u0432.<\/p>\n<p>  \u0422\u043e, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c, \u043d\u0430\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u2014 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 \u043c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u043d\u043e\u0439. \u041d\u043e \u0442\u0430\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447, \u043e\u0431\u044a\u0435\u043c\u043d\u044b\u0445 \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445, \u0443 \u043d\u0430\u0441 \u0435\u0449\u0435 \u043c\u043d\u043e\u0433\u043e. \u0418\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e? \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0435 \u043a\u043e\u0434\u0438\u0442\u044c \u043a \u043d\u0430\u043c!     \t<\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/258901\/\"> http:\/\/habrahabr.ru\/post\/258901\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>     \t\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u042f \u0415\u0433\u043e\u0440 \u0414\u044b\u0434\u044b\u043a\u0438\u043d, \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c \u0433\u0440\u0443\u043f\u043f\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b Mail.Ru. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043c\u044b \u0440\u0435\u0448\u0430\u043b\u0438 \u0437\u0430\u0434\u0430\u0447\u0443 \u043f\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u2014 \u0431\u043b\u043e\u043a\u0430, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 Mail.Ru. \u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c, \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u043a\u0440\u043e\u0441\u0441\u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f (\u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0438 \u043d\u0430\u0448\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u043e\u0435 \u043c\u0435\u043d\u044e) \u2013 \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u044a\u0435\u043c\u043d\u0430\u044f \u0438 \u0441\u043b\u043e\u0436\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430. \u0422\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 Mail.Ru \u2014 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0438 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u0443\u044e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437 \u043d\u0438\u0445. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0431\u044b\u043b\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0438 \u043c\u043e\u0433\u043b\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043b\u044e\u0431\u043e\u0439 \u0441\u0440\u0435\u0434\u0435 \u2014 \u043b\u0435\u0433\u043a\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043b\u043e\u0433\u0438\u043a\u0435. <\/p>\n<p>  \u041d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u043d\u044e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0430\u0441\u044c \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u0440\u0443\u043f\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0440\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c \u0433\u043e\u0434\u0443. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0438 \u0437\u0430\u0447\u0435\u043c \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u043d\u0430 <a href=\"https:\/\/www.behance.net\/gallery\/18253171\/New-branding-of-MailRu\">Behance<\/a>. \u0412 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043f\u043e\u0440\u0442\u0430\u043b\u0430 Mail.Ru, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0435\u0434\u0438\u043d\u044b\u0439 \u0441\u0442\u0438\u043b\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u043d\u0438\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e. \u041d\u0430 \u043a\u0430\u043a\u043e\u043c \u0431\u044b \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0435\u043c\u0443 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u043f\u043e \u043d\u0435\u043c\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u043d\u044e \u0438 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0435\u0434\u0438\u043d\u044b\u043c, \u043a\u0440\u043e\u0441\u0441\u043f\u0440\u043e\u0435\u043a\u0442\u043d\u044b\u043c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/5c7\/8da\/4cb\/5c78da4cbd3a42a9879a71acb9c0a32f.png\"\/>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-258082","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/258082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=258082"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/258082\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=258082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=258082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=258082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}