{"id":2415,"date":"2021-07-19T09:43:31","date_gmt":"2021-07-19T09:43:31","guid":{"rendered":"https:\/\/www.bearloga.space\/?page_id=2415"},"modified":"2021-07-19T09:43:32","modified_gmt":"2021-07-19T09:43:32","slug":"mega-uchebnik-flask-chast-xx-magiya-javascript","status":"publish","type":"page","link":"https:\/\/www.bearloga.space\/uk\/mega-uchebnik-flask-chast-xx-magiya-javascript\/","title":{"rendered":"\u041c\u0435\u0433\u0430-\u0423\u0447\u0435\u0431\u043d\u0438\u043a Flask, \u0427\u0430\u0441\u0442\u044c XX: \u041c\u0430\u0433\u0438\u044f JavaScript"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\" id=\"miguel-grinberg\"><em>Miguel Grinberg<\/em><\/h3>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\u042d\u0442\u043e \u0434\u0432\u0430\u0434\u0446\u0430\u0442\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0438\u0438 \u041c\u0435\u0433\u0430-\u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430 Flask, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0435\u0435\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u044b\u0448\u0438 \u043d\u0430 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041f\u043e\u0434 \u0441\u043f\u043e\u0439\u043b\u0435\u0440\u043e\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u0441\u0435\u0440\u0438\u0438 2018 \u0433\u043e\u0434\u0430.<br><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 1: \u0415\u0441\u043b\u0438 \u0432\u044b \u0438\u0449\u0435\u0442\u0435 \u0441\u0442\u0430\u0440\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u0443\u0440\u0441\u0430, \u044d\u0442\u043e&nbsp;<a href=\"https:\/\/blog.miguelgrinberg.com\/post\/the-flask-mega-tutorial-part-i-hello-world-legacy\" target=\"_blank\" rel=\"noopener\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 2: \u0415\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0412\u044b \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u0438 \u0431\u044b \u0432\u044b\u0441\u0442\u0443\u043f\u0438\u0442\u044c \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043c\u043e\u0435\u0439(\u041c\u0438\u0433\u0435\u043b\u044f) \u0440\u0430\u0431\u043e\u0442\u044b, \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0438\u043c\u0435\u0435\u0442\u0435 \u0442\u0435\u0440\u043f\u0435\u043d\u0438\u044f \u0434\u043e\u0436\u0438\u0434\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0435\u0434\u0435\u043b\u044e, \u044f (\u041c\u0438\u0433\u0435\u043b\u044c \u0413\u0440\u0438\u043d\u0431\u0435\u0440\u0433)\u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043f\u043e\u043b\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430(\u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c \u044f\u0437\u044b\u043a\u0435) \u0432 \u0432\u0438\u0434\u0435 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043d\u0438\u0433\u0438 \u0438\u043b\u0438 \u0432\u0438\u0434\u0435\u043e. \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435&nbsp;<a href=\"http:\/\/learn.miguelgrinberg.com\/\" target=\"_blank\" rel=\"noopener\">learn.miguelgrinberg.com<\/a>.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u043e \u0431\u044b JavaScript \u0445\u043e\u0442\u044f \u0431\u044b \u043d\u0435\u043c\u043d\u043e\u0433\u043e. \u042f \u0443\u0432\u0435\u0440\u0435\u043d, \u0432\u0430\u043c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0447\u0442\u043e JavaScript \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u044f\u0437\u044b\u043a\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0432 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0412&nbsp;<a href=\"https:\/\/habrahabr.ru\/post\/350626\/\" target=\"_blank\" rel=\"noopener\">\u0433\u043b\u0430\u0432\u0435 14<\/a>&nbsp;\u0432\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u0435\u043d\u044c\u043a\u043e\u0433\u043e JavaScript \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 flask, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\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 \u044f\u0437\u044b\u043a\u043e\u0432\u044b\u0435 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044b \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432 \u0431\u043b\u043e\u0433\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u0435 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0443\u0433\u043b\u0443\u0431\u0438\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0443 \u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0430\u043c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0439 \u0442\u0440\u044e\u043a \u0434\u043b\u044f JavaScript, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u043e\u043b\u0435\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0438 \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041e\u0431\u0449\u0430\u044f \u0447\u0435\u0440\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c, \u2014 \u044d\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043a\u0440\u0430\u0442\u043a\u043e\u0439 \u0441\u0432\u043e\u0434\u043a\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u044b\u0448\u0438 \u043d\u0430 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043e\u0431\u0440\u0430\u0449\u0430\u043b\u0438 \u043d\u0430 \u044d\u0442\u043e \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0439\u0434\u0438\u0442\u0435 \u0432 Twitter, Facebook, LinkedIn \u0438\u043b\u0438 \u043b\u044e\u0431\u0443\u044e \u0434\u0440\u0443\u0433\u0443\u044e \u043a\u0440\u0443\u043f\u043d\u0443\u044e \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0435\u0442\u044c, \u0438 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e \u043d\u0430 \u043f\u0430\u0440\u0443 \u0441\u0435\u043a\u0443\u043d\u0434, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e. \u042d\u0442\u0430 \u0433\u043b\u0430\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u0432\u044f\u0449\u0435\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f Microblog, \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0435 \u043d\u0438\u0436\u0435:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/xk\/sj\/hg\/xksjhgohxs-ez9rwhhnoqkqp7oa.png\" alt=\"\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>\u0421\u0441\u044b\u043b\u043a\u0438 GitHub \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u044b:<\/em>&nbsp;<a href=\"https:\/\/github.com\/miguelgrinberg\/microblog\/tree\/v0.20\" target=\"_blank\" rel=\"noopener\">Browse<\/a>,&nbsp;<a href=\"https:\/\/github.com\/miguelgrinberg\/microblog\/archive\/v0.20.zip\" target=\"_blank\" rel=\"noopener\">Zip<\/a>,&nbsp;<a href=\"https:\/\/github.com\/miguelgrinberg\/microblog\/compare\/v0.19...v0.20\" target=\"_blank\" rel=\"noopener\">Diff<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"podderzhka-na-storone-servera\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u0443\u0433\u043b\u0443\u0431\u0438\u043c\u0441\u044f \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c, \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u044d\u0442\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043e\u043a\u043e\u043d. \u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043e \u043d\u043e\u0432\u044b\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0412\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>app\/main\/routes.py<\/em>: \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>@bp.route('\/user\/&lt;username&gt;\/popup')\n@login_required\ndef user_popup(username):\n    user = User.query.filter_by(username=username).first_or_404()\n    return render_template('user_popup.html', user=user)<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u042d\u0442\u043e\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u0435\u043d \u043a URL-\u0430\u0434\u0440\u0435\u0441\u0443&nbsp;<em>\/user\/<code>&lt;username&gt;<\/code>\/popup<\/em>&nbsp;\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0441 \u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u043a\u043e\u0440\u043e\u0447\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>app\/templates\/user_popup.html<\/em>: \u0428\u0430\u0431\u043b\u043e\u043d \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;table class=\"table\"&gt;\n    &lt;tr&gt;\n        &lt;td width=\"64\" style=\"border: 0px;\"&gt;&lt;img src=\"{{ user.avatar(64) }}\"&gt;&lt;\/td&gt;\n        &lt;td style=\"border: 0px;\"&gt;\n            &lt;p&gt;\n                &lt;a href=\"{{ url_for('main.user', username=user.username) }}\"&gt;\n                    {{ user.username }}\n                &lt;\/a&gt;\n            &lt;\/p&gt;\n            &lt;small&gt;\n                {% if user.about_me %}&lt;p&gt;{{ user.about_me }}&lt;\/p&gt;{% endif %}\n                {% if user.last_seen %}\n                &lt;p&gt;{{ _('Last seen on') }}: \n                   {{ moment(user.last_seen).format('lll') }}&lt;\/p&gt;\n                {% endif %}\n                &lt;p&gt;{{ _('%(count)d followers', count=user.followers.count()) }},\n                   {{ _('%(count)d following', count=user.followed.count()) }}&lt;\/p&gt;\n                {% if user != current_user %}\n                    {% if not current_user.is_following(user) %}\n                    &lt;a href=\"{{ url_for('main.follow', username=user.username) }}\"&gt;\n                        {{ _('Follow') }}\n                    &lt;\/a&gt;\n                    {% else %}\n                    &lt;a href=\"{{ url_for('main.unfollow', username=user.username) }}\"&gt;\n                        {{ _('Unfollow') }}\n                    &lt;\/a&gt;\n                    {% endif %}\n                {% endif %}\n            &lt;\/small&gt;\n        &lt;\/td&gt;\n    &lt;\/tr&gt;\n&lt;\/table&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u041a\u043e\u0434 JavaScript, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043d\u0430\u043f\u0438\u0448\u0443 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0445, \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u043e\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0430\u0432\u0435\u0434\u0451\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u043d\u0430 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0412 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u0435\u0440\u043d\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 HTML \u0434\u043b\u044f \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0443\u044e \u0447\u0430\u0441\u0442\u044c. \u041a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442 \u043c\u044b\u0448\u044c, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u0434\u0430\u043b\u0435\u043d\u043e. \u0417\u0432\u0443\u0447\u0438\u0442 \u043f\u0440\u043e\u0441\u0442\u043e, \u043d\u0435 \u0442\u0430\u043a \u043b\u0438?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0415\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043f\u0440\u043e\u0444\u0438\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c&nbsp;<em>\/popup<\/em>&nbsp;\u043a URL-\u0430\u0434\u0440\u0435\u0441\u0443 \u0432 \u0430\u0434\u0440\u0435\u0441\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"vvedenie-v-bootstrap-popover-component\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432 Bootstrap Popover Component<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0412&nbsp;<a href=\"https:\/\/habrahabr.ru\/post\/349060\/\" target=\"_blank\" rel=\"noopener\">\u0433\u043b\u0430\u0432\u0435 11<\/a>&nbsp;\u044f \u043f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u043b \u0432\u0430\u0441 \u0441 Bootstrap framework \u043a\u0430\u043a \u0443\u0434\u043e\u0431\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u0430\u0441\u0438\u0432\u043e \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u0414\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u044d\u0442\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. Bootstrap \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0442\u0435 \u0441\u043e \u043c\u043d\u043e\u0433\u0438\u043c\u0438 \u043e\u0431\u0449\u0438\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430, \u0432\u0441\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u043c\u0435\u044e\u0442 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Bootstrap \u043d\u0430&nbsp;<em><a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/getbootstrap.com<\/a><\/em>. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f&nbsp;<a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/javascript\/#popovers\" target=\"_blank\" rel=\"noopener\">Popover<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0438\u0441\u0430\u043d \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a\u0430\u043a &#8220;\u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0430\u043a\u043b\u0430\u0434\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438&#8221;. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 bootstrap \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 HTML, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0441\u044b\u043b\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f CSS Bootstrap, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u0442\u0438\u043b\u044c \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0442\u0430\u043a\u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0442 JavaScript. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u2014 \u044d\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 HTML \u0432 \u043d\u0443\u0436\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432, \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 JavaScript, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0438\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u0442 \u0435\u0435. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 popover \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0427\u0430\u0441\u0442\u044c HTML \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f popover \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0430, \u0432\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u0435 popover. \u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0435 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0438 \u0431\u043b\u043e\u0433\u0430. \u0412 sub-\u0448\u0430\u0431\u043b\u043e\u043d\u0435&nbsp;<em>app\/templates\/_post.html<\/em>&nbsp;\u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        &lt;a href=\"{{ url_for('main.user', username=post.author.username) }}\"&gt;\n            {{ post.author.username }}\n        &lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 popover \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c JavaScript-\u0444\u0443\u043d\u043a\u0446\u0438\u044e popover() \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0438, \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0439 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0438 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430. \u0412\u044b\u0437\u043e\u0432 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u043c \u043e\u043a\u043d\u0435, \u043a\u0430\u043a\u043e\u0439 \u043c\u0435\u0442\u043e\u0434 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0434\u043b\u044f \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u0438\u0441\u0447\u0435\u0437\u043d\u043e\u0432\u0435\u043d\u0438\u044f (\u0449\u0435\u043b\u0447\u043e\u043a, \u0437\u0430\u0432\u0438\u0441\u0430\u043d\u0438\u0435 \u043d\u0430\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0438 \u0442.\u0434. ), \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 HTML, \u0438 \u0435\u0449\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432, \u0447\u0435\u043c \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u043f\u043e\u0442\u043e\u043c\u0443, \u043f\u043e\u0445\u043e\u0436\u0435, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0442\u0430\u043a, \u043a\u0430\u043a \u043c\u043d\u0435 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e. \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0440\u0435\u0448\u0438\u0442\u044c \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432 \u0431\u043b\u043e\u0433\u0435. \u041c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0430\u0439\u0442\u0438 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u0438\u0437 JavaScript \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0447\u0442\u043e\u0431\u044b \u044f \u043c\u043e\u0433 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043a\u0430\u043a \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043e\u043a\u043d\u0430.<\/li><li>\u041f\u0440\u0438\u043c\u0435\u0440\u044b popover \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Bootstrap \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 popover \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430&nbsp;<code>data-content<\/code>, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 HTML, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u043a\u043e\u0433\u0434\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 hover \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u0432\u0441\u0435, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f Bootstrap, \u044d\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e. \u042d\u0442\u043e \u0436\u0443\u0442\u043a\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u043c\u0435\u043d\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u044f \u0445\u043e\u0447\u0443 \u0441\u043e\u0437\u0434\u0430\u0442\u044c Ajax-\u0432\u044b\u0437\u043e\u0432 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0433\u0434\u0430 \u043e\u0442\u0432\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f.<\/li><li>\u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u0440\u0435\u0436\u0438\u043c\u0430&#8221; hover&#8221; \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u044b\u043c \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0432\u044b \u0443\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u0432 \u0446\u0435\u043b\u0435\u0432\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435. \u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u0435 \u043c\u044b\u0448\u044c, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442. \u042d\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u043d\u0435 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0439 \u043f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442: \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0445\u043e\u0447\u0435\u0442 \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u0432 \u0441\u0430\u043c\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0438\u0441\u0447\u0435\u0437\u043d\u0435\u0442. \u041c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043a\u0430\u043a \u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0443 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043d\u0435\u0433\u043e \u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0449\u0435\u043b\u043a\u043d\u0443\u0442\u044c \u0442\u0430\u043c \u0441\u0441\u044b\u043b\u043a\u0443.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0440\u0435\u0434\u043a\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u043d\u0430 \u0431\u0430\u0437\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u044e\u0442\u0441\u044f. \u0412\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u043f\u0440\u043e\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 DOM \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432\u0435\u0441\u0442\u0438 \u0441\u0435\u0431\u044f \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"vypolnenie-funkcii-pri-zagruzke-stranicy\">\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u041f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u0434 JavaScript \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c, \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043a\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u043c\u0435\u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0442\u0435, \u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 popover \u0438\u0437 Bootstrap.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 JavaScript jQuery \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 Bootstrap, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0435\u044e. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 jQuery \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043e\u0431\u0435\u0440\u043d\u0443\u0432 \u0435\u0435 \u0432&nbsp;<code>$(...)<\/code>. \u041f\u043e\u0436\u0430\u043b\u0443\u0439, \u044d\u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d&nbsp;<em>app\/templates\/base.html<\/em>, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u043e\u0441\u044c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>app\/templates\/base.html<\/em>: \u0417\u0430\u043f\u0443\u0441\u043a \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>...\n&lt;script&gt;\n    \/\/ ...\n\n    $(function() {\n        \/\/ write start up code here\n    });\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e start up \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;script&gt;<\/code>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e&nbsp;<code>translate()<\/code>&nbsp;\u0432&nbsp;<a href=\"https:\/\/habrahabr.ru\/post\/350626\/\" target=\"_blank\" rel=\"noopener\">\u0433\u043b\u0430\u0432\u0435 14<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"poisk-dom-elementov-s-pomoschyu-selektorov\">\u041f\u043e\u0438\u0441\u043a DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u041c\u043e\u044f \u043f\u0435\u0440\u0432\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 \u2014 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e JavaScript, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u0438 \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0430, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0430\u043d\u0438\u044f \u0438 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u043d\u0438\u044f \u043e\u043a\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0438\u0437 \u043d\u0438\u0445. \u0421\u0435\u0439\u0447\u0430\u0441 \u044f \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0443\u0441\u044c \u043d\u0430 \u043f\u043e\u0438\u0441\u043a\u0435 \u0441\u0441\u044b\u043b\u043e\u043a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0415\u0441\u043b\u0438 \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0438\u0437&nbsp;<a href=\"https:\/\/habrahabr.ru\/post\/350626\/\" target=\"_blank\" rel=\"noopener\">\u0433\u043b\u0430\u0432\u0435 14<\/a>, HTML-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0437\u0430\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u044b \u0432 \u0436\u0438\u0432\u044b\u0445 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430\u0445, \u0438\u043c\u0435\u043b\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u0437\u0430\u043f\u0438\u0441\u0438 \u0441 ID=123 \u0431\u044b\u043b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u0430\u0442\u0440\u0438\u0431\u0443\u0442&nbsp;<code>id=\"post123\"<\/code>. \u0417\u0430\u0442\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e jQuery \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435&nbsp;<code>$('#post123')<\/code>&nbsp;\u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u043e \u0432 JavaScript \u0434\u043b\u044f \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 DOM. \u0424\u0443\u043d\u043a\u0446\u0438\u044f&nbsp;<code>$()<\/code>&nbsp;\u0447\u0440\u0435\u0437\u0432\u044b\u0447\u0430\u0439\u043d\u043e \u043c\u043e\u0449\u043d\u0430 \u0438 \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 DOM, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430&nbsp;<a href=\"https:\/\/api.jquery.com\/category\/selectors\/\" target=\"_blank\" rel=\"noopener\">CSS Selectors<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u0434\u043b\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430, \u0431\u044b\u043b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u043e\u0434\u0438\u043d \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u043b \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430&nbsp;<code>id<\/code>. \u0414\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u2014 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430&nbsp;<code>class<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044f \u043c\u043e\u0433 \u0431\u044b \u043f\u043e\u043c\u0435\u0442\u0438\u0442\u044c \u0432\u0441\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438&nbsp;<code>class=\"user_popup\"<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0441\u044b\u043b\u043e\u043a \u0438\u0437 JavaScript \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e&nbsp;<code>$('.user_popup')<\/code>&nbsp;(\u0432 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u0445 CSS \u043f\u0440\u0435\u0444\u0438\u043a\u0441&nbsp;<code>#<\/code>&nbsp;\u0438\u0449\u0435\u0442 \u043f\u043e ID, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a&nbsp;<code>.<\/code>&nbsp;\u043f\u043e\u0438\u0441\u043a \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432 \u043f\u043e \u043a\u043b\u0430\u0441\u0441\u0430\u043c). \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u043e\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u043c\u0435\u044e\u0449\u0438\u0445 \u043a\u043b\u0430\u0441\u0441.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"popovers-i-dom\">Popovers \u0438 DOM<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u041f\u043e\u0438\u0433\u0440\u0430\u0432 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 popover \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Bootstrap \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044f DOM \u0432 \u043e\u0442\u043b\u0430\u0434\u0447\u0438\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b, \u0447\u0442\u043e Bootstrap \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 popover \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 DOM. \u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0432\u044b\u0448\u0435, \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f hover, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u00ab\u043c\u044b\u0448\u044c\u00bb, \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u043a\u0438 \u043e\u0442 \u0441\u0441\u044b\u043b\u043a\u0438&nbsp;<code>&lt;a&gt;<\/code>&nbsp;\u0438 \u0432 \u0441\u0430\u043c\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0422\u0440\u044e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043c\u043e\u0433\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f hover, \u0447\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c popover, \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c popover \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0438 \u0442\u043e\u0433\u0434\u0430 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0435 hover \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f. \u041f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u044f \u043e\u043f\u0446\u0438\u0438 popover \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u044f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043e\u043f\u0446\u0438\u0438&nbsp;<code>container<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 popover \u0438\u0437 hover \u0431\u0443\u0434\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0438\u043b\u0438 \u043e\u0431\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432&nbsp;<code>&lt;div&gt;<\/code>&nbsp;\u0438\u043b\u0438&nbsp;<code>&lt;span&gt;<\/code>, \u043d\u043e \u0432 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0446\u0435\u043b\u044c\u044e \u0434\u043b\u044f popover \u0431\u0443\u0434\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;a&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 popover&nbsp;<code>&lt;a&gt;<\/code>&nbsp;\u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e popover \u0437\u0430\u0442\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f&nbsp;<code>&lt;a&gt;<\/code>. \u041a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a\u0438\u043c:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;a href=\"...\" class=\"user_popup\"&gt;\n        username\n        &lt;div&gt; ... popover elements here ... &lt;\/div&gt;\n    &lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f popover \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&nbsp;<code>&lt;a&gt;<\/code>, \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0440\u044e\u043a. \u042f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;a&gt;<\/code>&nbsp;\u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430&nbsp;<code>&lt;span&gt;<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 hover \u0438 popover \u0441&nbsp;<code>&lt;span&gt;<\/code>. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0430\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0430\u044f:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;span class=\"user_popup\"&gt;\n        &lt;a href=\"...\"&gt;\n            username\n        &lt;\/a&gt;\n        &lt;div&gt; ... popover elements here ... &lt;\/div&gt;\n    &lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b&nbsp;<code>&lt;div&gt;<\/code>\u0438&nbsp;<code>&lt;span&gt;<\/code>&nbsp;\u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0432\u0430\u043c \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c DOM. \u042d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;div&gt;<\/code>&nbsp;\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f&nbsp;<em>\u0431\u043b\u043e\u0447\u043d\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c<\/em>, \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u043d\u0430 \u0430\u0431\u0437\u0430\u0446 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0435 HTML, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;span&gt;<\/code>&nbsp;\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f&nbsp;<em>\u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0440\u0430\u0432\u043d\u0438\u043c \u0441\u043e \u0441\u043b\u043e\u0432\u043e\u043c. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f \u044f \u0440\u0435\u0448\u0438\u043b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;span&gt;<\/code>, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;a&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u044e, \u0442\u0430\u043a\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u043e\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0434\u043e \u0440\u0435\u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0439 \u043f\u043e\u0434\u0448\u0430\u0431\u043b\u043e\u043d&nbsp;<em>app\/templates\/_post.html<\/em>, \u0447\u0442\u043e\u0431\u044b \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;span&gt;<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>...\n            {% set user_link %}\n                &lt;span class=\"user_popup\"&gt;\n                    &lt;a href=\"url_for('main.user', username=post.author.username)\"&gt;\n                        {{ post.author.username }}\n                    &lt;\/a&gt;\n                &lt;\/span&gt;\n            {% endset %}\n...<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0433\u0434\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b popover HTML, \u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u043d\u043e\u0432\u043e\u0441\u0442\u044c\u044e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043c\u043d\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u044c\u0441\u044f \u043e\u0431 \u044d\u0442\u043e\u043c. \u041a\u043e\u0433\u0434\u0430 \u044f \u043f\u043e\u043b\u0443\u0447\u0430\u044e \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438&nbsp;<code>popover()<\/code>&nbsp;\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445&nbsp;<code>&lt;span&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043b, \u0441\u0440\u0435\u0434\u0430 Bootstrap \u0431\u0443\u0434\u0435\u0442 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 popup.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sobytiya-hover-navedeniya\">\u0421\u043e\u0431\u044b\u0442\u0438\u044f Hover (\u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b \u0432\u044b\u0448\u0435, \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c popover \u0438\u0437 Bootstrap, \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0433\u0438\u0431\u043a\u043e \u0434\u043b\u044f \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u0438\u044f \u043c\u043e\u0438\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u0435\u0439, \u043d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043e\u043f\u0446\u0438\u0438&nbsp;<code>trigger<\/code>, \u00abhover (\u0437\u0430\u0432\u0438\u0441\u0430\u043d\u0438\u0435)\u00bb \u2014 \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0434\u043d\u043e \u0438\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439. \u041c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 \u043f\u0440\u0438\u0432\u043b\u0435\u043a \u0440\u0435\u0436\u0438\u043c \u00abmanual\u00bb, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c popover \u043c\u043e\u0436\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c\u0441\u044f \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u0438\u0435\u043c \u0432\u044b\u0437\u043e\u0432\u0430 JavaScript. \u042d\u0442\u043e\u0442 \u0440\u0435\u0436\u0438\u043c \u0434\u0430\u0441\u0442 \u043c\u043d\u0435 \u0441\u0432\u043e\u0431\u043e\u0434\u0443 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043b\u043e\u0433\u0438\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0430\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0438 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 hover, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0430\u043a, \u043a\u0430\u043a \u043e\u043d\u0438 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u044b.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0439 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0433 \u2014 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u00abhover\u00bb \u043a\u043e \u0432\u0441\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f jQuery, \u0441\u043e\u0431\u044b\u0442\u0438\u0435 hover \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u043a \u043b\u044e\u0431\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 HTML, \u0432\u044b\u0437\u0432\u0430\u0432&nbsp;<code>element.hover (handlerIn, handlerOut)<\/code>. \u0415\u0441\u043b\u0438 \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0431\u043e\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, jQuery \u0443\u0434\u043e\u0431\u043d\u043e \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a\u043e \u0432\u0441\u0435\u043c \u0438\u0437 \u043d\u0438\u0445. \u0414\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u2014 \u044d\u0442\u043e \u0434\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u0432 \u0438 \u0438\u0437 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>app\/templates\/base.html<\/em>: Hover event.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>$(function() {\n    $('.user_popup').hover(\n        function(event) {\n            \/\/ mouse in event handler\n            var elem = event.currentTarget;\n        },\n        function(event) {\n            \/\/ mouse out event handler\n            var elem = event.currentTarget;\n        }\n    )\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442&nbsp;<code>event<\/code>&nbsp;\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c event, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u044e \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0446\u0435\u043b\u044c\u044e \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f&nbsp;<code>event.currentTarget<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 hover \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u044b\u0448\u044c \u0432\u043e\u0439\u0434\u0435\u0442 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u043b\u0438\u044f\u044e\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430, \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0441\u043b\u0435 \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0435\u0440\u0438\u043e\u0434\u0430 \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b\u0448\u044c \u0437\u0430\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435, \u0442\u0430\u043a \u0447\u0442\u043e, \u043a\u043e\u0433\u0434\u0430 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u043d\u0435\u043d\u0430\u0434\u043e\u043b\u0433\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442 \u043d\u0430\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c, \u043d\u043e \u043d\u0435 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u043c \u043d\u0435\u0442 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043c\u0438\u0433\u0430\u044e\u0449\u0438\u0445 \u043e\u043a\u043e\u043d. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438, \u044d\u0442\u043e \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0432\u0435\u0449\u044c, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0430\u043c. \u041d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u043d\u0430\u0434\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u043a\u0443\u043d\u0434\u043d\u044b\u0439 \u0422\u0430\u0439\u043c\u0435\u0440 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 &#8220;mouse in&#8221;:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>app\/templates\/base.html<\/em>: \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>$(function() {\n    var timer = null;\n    $('.user_popup').hover(\n        function(event) {\n            \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f mouse in\n            var elem = event.currentTarget;\n            timer = setTimeout(function() {\n                timer = null;\n                \/\/ \u043b\u043e\u0433\u0438\u043a\u0430 Popup \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0437\u0434\u0435\u0441\u044c\n            }, 1000);\n        },\n        function(event) {\n            \/\/\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f mouse out\n            var elem = event.currentTarget;\n            if (timer) {\n                clearTimeout(timer);\n                timer = null;\n            }\n        }\n    )\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0424\u0443\u043d\u043a\u0446\u0438\u044f&nbsp;<code>setTimeout()<\/code>&nbsp;\u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u0432 \u0441\u0440\u0435\u0434\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041e\u043d\u0430 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0432\u0430 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430: \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0438 \u0432\u0440\u0435\u043c\u044f \u0432 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u0430\u0445. \u042d\u0444\u0444\u0435\u043a\u0442&nbsp;<code>setTimeout()<\/code>&nbsp;\u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u043a\u0430 \u043f\u0443\u0441\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0447\u0435\u0440\u0435\u0437 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f hover. \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f\u043c \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 JavaScript \u044d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u0442\u0430\u043a\u0438\u043c \u043a\u0430\u043a&nbsp;<code>elem<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u042f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e \u043e\u0431\u044a\u0435\u043a\u0442 timer \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439&nbsp;<code>timer<\/code>, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u0432\u043d\u0435 \u0432\u044b\u0437\u043e\u0432\u0430&nbsp;<code>hover()<\/code>, \u0447\u0442\u043e\u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 timer \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 &#8220;mouse out&#8221;. \u041f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u043d\u0435 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0435\u0449\u0435 \u0440\u0430\u0437, \u0447\u0442\u043e\u0431\u044b \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u0435 \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u0432 \u043e\u0434\u043d\u0443 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043d\u0435\u0439, \u043d\u043e \u0441\u043a\u0430\u0436\u0435\u043c, \u0437\u0430 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0434\u043e \u0435\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u043d\u0435 \u0445\u043e\u0447\u0443, \u0447\u0442\u043e\u0431\u044b \u0422\u0430\u0439\u043c\u0435\u0440 \u0434\u043e\u0441\u0447\u0438\u0442\u0430\u043b \u0441\u0432\u043e\u044e \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u043b \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439 mouse out \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0435\u0441\u0442\u044c \u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 timer, \u0438 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c, \u0442\u043e \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u0442 \u0435\u0433\u043e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"zapros-ajax\">\u0417\u0430\u043f\u0440\u043e\u0441 AJAX<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0417\u0430\u043f\u0440\u043e\u0441\u044b Ajax \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u043e\u0439 \u0442\u0435\u043c\u043e\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b \u043e\u0431 \u044d\u0442\u043e\u043c \u0432&nbsp;<a href=\"https:\/\/habrahabr.ru\/post\/350626\/\" target=\"_blank\" rel=\"noopener\">\u0433\u043b\u0430\u0432\u0435 14<\/a>, \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u0436\u0438\u0432\u043e\u0433\u043e \u044f\u0437\u044b\u043a\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430. \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 jQuery, \u0444\u0443\u043d\u043a\u0446\u0438\u044f&nbsp;<code>$.ajax()<\/code>&nbsp;\u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0417\u0430\u043f\u0440\u043e\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c URL&nbsp;<em>\/user\/<code>&lt;username&gt;<\/code>\/popup<\/em>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u044d\u0442\u043e\u0439 \u0433\u043b\u0430\u0432\u044b. \u041e\u0442\u0432\u0435\u0442 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041c\u043e\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0432\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435&nbsp;<code>username<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 URL. \u0424\u0443\u043d\u043a\u0446\u0438\u044f mouse in event handler \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u043e\u0439, \u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0441\u0441\u044b\u043b\u043e\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0437 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f&nbsp;<code>elem<\/code>&nbsp;\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0437 \u0441\u043e\u0431\u044b\u0442\u0438\u044f hover, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c&nbsp;<code>&lt;span&gt;<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0435\u0440\u0442\u044b\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;a&gt;<\/code>. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0432\u043b\u0435\u0447\u044c \u0438\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u044f \u043c\u043e\u0433\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0442\u044c\u0441\u044f \u043f\u043e DOM, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441&nbsp;<code>&lt;span&gt;<\/code>, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044f \u043a \u043f\u0435\u0440\u0432\u043e\u043c\u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c&nbsp;<code>&lt;a&gt;<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u044f \u0438\u0437 \u043d\u0435\u0433\u043e \u0442\u0435\u043a\u0441\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043c\u043e\u0435\u043c URL. \u0421 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u043e\u0431\u0445\u043e\u0434\u0430 DOM jQuery \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0441\u043b\u043e\u0436\u043d\u043e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>elem.first().text().trim()<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0424\u0443\u043d\u043a\u0446\u0438\u044f&nbsp;<code>first()<\/code>, \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u043d\u0430\u044f \u043a \u0443\u0437\u043b\u0443 DOM, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0435\u0433\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u0424\u0443\u043d\u043a\u0446\u0438\u044f&nbsp;<code>text()<\/code>&nbsp;\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u043e\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0443\u0437\u043b\u0430. \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043e\u0431\u0440\u0435\u0437\u043a\u0443 \u0442\u0435\u043a\u0441\u0442\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438&nbsp;<code>&lt;a&gt;<\/code>&nbsp;\u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u0442\u0435\u043a\u0441\u0442 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u0438&nbsp;<code>&lt;\/a&gt;<\/code>&nbsp;\u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u0444\u0443\u043d\u043a\u0446\u0438\u044f&nbsp;<code>text()<\/code>&nbsp;\u0432\u0435\u0440\u043d\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043a\u0440\u0443\u0436\u0430\u044e\u0442 \u0442\u0435\u043a\u0441\u0442. \u0427\u0442\u043e\u0431\u044b \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043a\u0441\u0442, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e JavaScript&nbsp;<code>trim()<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0418 \u044d\u0442\u043e \u0432\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043d\u0435 \u043d\u0443\u0436\u043d\u0430, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u0434\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>app\/templates\/base.html<\/em>: XHR \u0437\u0430\u043f\u0440\u043e\u0441.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>$(function() {\n    var timer = null;\n    var xhr = null;\n    $('.user_popup').hover(\n        function(event) {\n            \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f mouse in\n            var elem = $(event.currentTarget);\n            timer = setTimeout(function() {\n                timer = null;\n                xhr = $.ajax(\n                    '\/user\/' + elem.first().text().trim() + '\/popup').done(\n                        function(data) {\n                            xhr = null\n                            \/\/  \u0437\u0434\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e\n                        }\n                    );\n            }, 1000);\n        },\n        function(event) {\n            \/\/ \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f mouse out\n            var elem = $(event.currentTarget);\n            if (timer) {\n                clearTimeout(timer);\n                timer = null;\n            }\n            else if (xhr) {\n                xhr.abort();\n                xhr = null;\n            }\n            else {\n                \/\/  \u0437\u0434\u0435\u0441\u044c \u0440\u0430\u0437\u0440\u0443\u0448\u0430\u0435\u043c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e\n            }\n        }\n    )\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0417\u0434\u0435\u0441\u044c \u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b \u043d\u043e\u0432\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0435\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438,&nbsp;<code>xhr<\/code>. \u042d\u0442\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e \u0438\u0437 \u0432\u044b\u0437\u043e\u0432\u0430&nbsp;<code>$.ajax()<\/code>. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 URL \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 JavaScript \u044f \u043d\u0435 \u043c\u043e\u0433\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c&nbsp;<code>url_for()<\/code>&nbsp;\u0438\u0437 Flask, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0434\u043e\u043b\u0436\u0435\u043d \u044f\u0432\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0447\u0430\u0441\u0442\u0438 URL.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0412\u044b\u0437\u043e\u0432&nbsp;<code>$.ajax()<\/code>&nbsp;\u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 promise (\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u0441\u0442\u0432\u043e), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c JavaScript, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u043c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u0443\u044e \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044e. \u042f \u043c\u043e\u0433\u0443 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u0432&nbsp;<code>.done (function)<\/code>, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043e\u0442\u0432\u0435\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u043d\u0430\u0437\u0432\u0430\u043b&nbsp;<code>data<\/code>&nbsp;\u0438 \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0435\u0433\u043e \u0432 \u043a\u043e\u0434\u0435 \u0432\u044b\u0448\u0435. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 HTML-\u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u043f\u043e\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0432 popover.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041d\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043c\u044b \u0434\u043e\u0431\u0435\u0440\u0435\u043c\u0441\u044f \u0434\u043e popover, \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0434\u0435\u0442\u0430\u043b\u044c, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0430\u044f \u0441 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0443\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0438 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f. \u041d\u0430\u043f\u043e\u043c\u043d\u0438\u043c, \u0447\u0442\u043e \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 &#8220;mouse out&#8221;, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0430\u0439\u043c\u0430\u0443\u0442 \u0432 \u043e\u0434\u043d\u0443 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u043b \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c \u043c\u044b\u0448\u0438 \u0438\u0437&nbsp;<code>&lt;span&gt;<\/code>. \u0422\u0430 \u0436\u0435 \u0438\u0434\u0435\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0430 \u043a \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u043c\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432\u0442\u043e\u0440\u043e\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u0435, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0435\u0440\u0432\u0430\u0442\u044c \u043c\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430&nbsp;<code>xhr<\/code>, \u0435\u0441\u043b\u0438 \u043e\u043d \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sozdanie-i-razrushenie-popover\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438 \u0420\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0435 Popover<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u041d\u0430\u0441\u0442\u0430\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041c\u043e\u0433\u0443 \u0441\u043e\u0437\u0434\u0430\u0442\u044c popover \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043b\u0438\u0448\u044c&nbsp;<code>data<\/code>-\u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0418\u0437 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 callback Ajax \u043c\u043d\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043d\u044b\u0439:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>app\/templates\/base.html<\/em>: \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>                            function(data) {\n                                xhr = null;\n                                elem.popover({\n                                    trigger: 'manual',\n                                    html: true,\n                                    animation: false,\n                                    container: elem,\n                                    content: data\n                                }).popover('show');\n                                flask_moment_render_all();\n                            }<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e, \u0444\u0443\u043d\u043a\u0446\u0438\u044f&nbsp;<code>popover()<\/code>&nbsp;\u0438\u0437 Bootstrap \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u0432\u0441\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0434\u043b\u044f \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u0434\u043b\u044f popover \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430. \u042f \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043b \u044d\u0442\u043e\u0442 popover \u0441 &#8220;\u0440\u0443\u0447\u043d\u044b\u043c&#8221; \u0440\u0435\u0436\u0438\u043c\u043e\u043c \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0430, HTML-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c, \u0431\u0435\u0437 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0437\u0430\u0442\u0443\u0445\u0430\u043d\u0438\u044f (\u0442\u0430\u043a \u0447\u0442\u043e \u043e\u043d \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438 \u0438\u0441\u0447\u0435\u0437\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435), \u0438 \u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043a\u0430\u043a \u0441\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442&nbsp;<code>&lt;span&gt;<\/code>, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043d\u0430 popover \u043f\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044e. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u044f \u043f\u0435\u0440\u0435\u0434\u0430\u044e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442&nbsp;<code>data<\/code>&nbsp;\u0432 \u043e\u0431\u0440\u0430\u0442\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 Ajax \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430&nbsp;<code>content<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0412\u043e\u0437\u0432\u0440\u0430\u0442 \u0432\u044b\u0437\u043e\u0432\u0430&nbsp;<code>popover()<\/code>&nbsp;\u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 popover, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e \u0441\u0442\u0440\u0430\u043d\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u0438\u043c\u0435\u043b \u0434\u0440\u0443\u0433\u043e\u0439 \u043c\u0435\u0442\u043e\u0434, \u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439&nbsp;<code>popover()<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u044b\u0437\u043e\u0432&nbsp;<code>popover('show')<\/code>, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0421\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0434\u0430\u0442\u0443 &#8220;last seen&#8221; (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0433\u043e \u043f\u043e\u0441\u0435\u0449\u0435\u043d\u0438\u044f), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d Flask-Moment, \u043a\u0430\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432&nbsp;<a href=\"https:\/\/habrahabr.ru\/post\/349604\/\" target=\"_blank\" rel=\"noopener\">\u0433\u043b\u0430\u0432\u0435 12<\/a>. \u041a\u0430\u043a \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432&nbsp;<a href=\"https:\/\/github.com\/miguelgrinberg\/Flask-Moment#ajax-support\" target=\"_blank\" rel=\"noopener\">\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438<\/a>&nbsp;\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 Flask-Moment \u0447\u0435\u0440\u0435\u0437 Ajax, \u0444\u0443\u043d\u043a\u0446\u0438\u044f&nbsp;<code>flask_moment_render_all()<\/code>&nbsp;\u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u0434\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e \u043e\u043a\u043d\u0430 \u043f\u0440\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f mouse out. \u0423 \u044d\u0442\u043e\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0430 \u0434\u043b\u044f \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u043d\u0438\u044f \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 popover, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u043f\u0440\u0435\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c, \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u044e\u0449\u0438\u043c \u043a\u0443\u0440\u0441\u043e\u0440 \u043c\u044b\u0448\u0438 \u0438\u0437 \u0446\u0435\u043b\u0435\u0432\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0415\u0441\u043b\u0438 \u043d\u0438 \u043e\u0434\u043d\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u0439 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c\u043e, \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u0438 \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u043e\u043a\u0438\u0434\u0430\u0435\u0442 \u0446\u0435\u043b\u0435\u0432\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b\u0437\u043e\u0432&nbsp;<code>popover('destroy')<\/code>&nbsp;\u043a \u0446\u0435\u043b\u0435\u0432\u043e\u043c\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442 \u043d\u0430\u0434\u043b\u0435\u0436\u0430\u0449\u0435\u0435 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0438 \u043e\u0447\u0438\u0441\u0442\u043a\u0443.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><em>app\/templates\/base.html<\/em>: \u0420\u0430\u0437\u0440\u0443\u0448\u0435\u043d\u0438\u0435 popover.<\/p><\/blockquote>\n\n\n\n<pre class=\"wp-block-code\"><code>            function(event) {\n                \/\/ mouse out event handler\n                var elem = $(event.currentTarget);\n                if (timer) {\n                    clearTimeout(timer);\n                    timer = null;\n                }\n                else if (xhr) {\n                    xhr.abort();\n                    xhr = null;\n                }\n                else {\n                    elem.popover('destroy');\n                }\n            }<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Miguel Grinberg \u042d\u0442\u043e \u0434\u0432\u0430\u0434\u0446\u0430\u0442\u044b\u0439 \u0432\u044b\u043f\u0443\u0441\u043a \u0441\u0435\u0440\u0438\u0438 \u041c\u0435\u0433\u0430-\u0443\u0447\u0435\u0431\u043d\u0438\u043a\u0430 Flask, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0441\u044c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0435\u0435 \u043e\u043a\u043d\u043e, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0449\u0435\u0435\u0441\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044f \u043c\u044b\u0448\u0438 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[94],"tags":[],"class_list":["post-2415","page","type-page","status-publish","hentry","category-flask"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/pages\/2415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/comments?post=2415"}],"version-history":[{"count":0,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/pages\/2415\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/media?parent=2415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/categories?post=2415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bearloga.space\/uk\/wp-json\/wp\/v2\/tags?post=2415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}