{"id":234279,"date":"2014-08-25T11:42:06","date_gmt":"2014-08-25T07:42:06","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=234279"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=234279","title":{"rendered":"<span class=\"post_title\">\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0441\u0442\u0435\u0439 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0441\u0442\u0435\u0439 \u043e\u0442 \u0432\u0435\u0431 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 *<\/span>"},"content":{"rendered":"<div class=\"content html_format\">     \t* \u041d\u0430\u0434\u0435\u044e\u0441\u044c, <a href=\"http:\/\/habrahabr.ru\/users\/ilusha_sergeevich\/\" class=\"user_link\">ilusha_sergeevich<\/a> \u043d\u0435 \u043e\u0431\u0432\u0438\u043d\u0438\u0442 \u043c\u0435\u043d\u044f \u0432 \u043f\u043b\u0430\u0433\u0438\u0430\u0442\u0435 \ud83d\ude42<br \/>  \u0415\u0441\u043b\u0438 \u0447\u0442\u043e, \u043f\u043e\u0441\u0442 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u044e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/3e1d41ccb812c23ee13ce9e6912a1b5422621b02\/687474703a2f2f692e696d6775722e636f6d2f615450645850682e706e67\" alt=\"image\"\/><br \/>  (\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043a <b>donut.js<\/b>)<\/p>\n<ul>\n<li><a href=\"#donut\">donut.js \u2014 \u043c\u0438\u043a\u0440\u043e-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0440\u0438\u0441\u0443\u044e\u0449\u0430\u044f \u0431\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u044b\u0435 (donut chart) \u0438 \u043a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/a><\/li>\n<li><a href=\"#balalaika\">\u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0430<\/a><\/li>\n<li><a href=\"#procrastinate\">\u0424\u0443\u043d\u043a\u0446\u0438\u044f procrastinate<\/a><\/li>\n<li><a href=\"#evil\">\u041f\u0440\u043e\u0442\u0438\u0432\u043d\u044b\u0439 \u0437\u043b\u043e\u0432\u0440\u0435\u0434<\/a><\/li>\n<li><a href=\"#mousedown\">\u0421\u043e\u0432\u0435\u0442: mousedown \u0432\u043c\u0435\u0441\u0442\u043e click<\/a><\/li>\n<li><a href=\"#no-cdn\">\u0421\u043e\u0432\u0435\u0442: \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 CDN<\/a><\/li>\n<li><a href=\"#suitup\">\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 SuitUp \u0438 \u0447\u0438\u0441\u0442\u043a\u0430 WYSIWYG \u043e\u0442 \u043c\u0443\u0441\u043e\u0440\u0430<\/a><\/li>\n<li><a href=\"#addeventlistener\">\u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b \u0434\u043b\u044f addEventListener<\/a><\/li>\n<li><a href=\"#typo\">\u0420\u0435\u043f\u043e\u0440\u0442 \u043e\u0431 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u0445 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435<\/a><\/li>\n<li><a href=\"#vanillatree\">vanillatree \u2014 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u0430 jstree<\/a><\/li>\n<li><a href=\"#poll\">\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u043e\u0441\u043e\u0432<\/a><\/li>\n<\/ul>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u0417\u0430 \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c. \u041d\u043e \u043d\u0438 \u043e\u0434\u043d\u0430 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043e\u043a \u043d\u0435 \u0442\u044f\u043d\u0435\u0442 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0441\u0435 \u043c\u0435\u043b\u043e\u0447\u0438, \u0447\u0442\u043e \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b, \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435: \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043e\u043f\u0435\u043d-\u0441\u043e\u0440\u0446 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043f\u0430\u0440\u0430 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438 \u043d\u0430\u0445\u043e\u0434\u043e\u043a. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c, \u043f\u043e\u0434 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/WTFPL\">WTFPL<\/a> (\u043a\u0440\u043e\u043c\u0435 \u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0438). \u0421 \u0440\u0430\u0434\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u043c\u0443 \u043f\u0443\u043b\u043b \u0440\u0435\u043a\u0432\u0435\u0441\u0442\u044b \u0441 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0431\u0430\u0433\u043e\u0432 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 README.<\/p>\n<p>  <a name=\"donut\"><\/a>  <\/p>\n<h4><a href=\"#donut\">donut.js \u2014 \u043c\u0438\u043a\u0440\u043e-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0440\u0438\u0441\u0443\u044e\u0449\u0430\u044f \u0431\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u044b\u0435 (donut) \u0438 \u043a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/a><\/h4>\n<p>  \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0431\u0443\u0431\u043b\u0438\u043a\u043e\u0432 \u043d\u0430 \u043a\u0430\u0440\u0442\u0435 \u043c\u0438\u0440\u0430, \u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0430 \u0435\u0449\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0418\u04158, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043d\u0435 \u0443\u043c\u0435\u0442 SVG, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0439 VML. \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u0433\u043e\u043b\u043e\u0432\u0443, \u044d\u0442\u043e Raphael. \u041f\u043e\u0440\u044b\u0432\u0448\u0438\u0441\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u044f \u043d\u0430\u0448\u0435\u043b <a href=\"http:\/\/matthewodette.com\/graphael-donut-charts\/\">\u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/a>. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0430\u0432\u0442\u043e\u0440 \u043f\u0440\u043e\u044f\u0432\u0438\u043b \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0445\u0430\u043a\u043e\u043c: \u043d\u0430 \u043a\u0440\u0443\u0433\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 (pie chart) \u043e\u043d \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u0431\u0435\u043b\u044b\u0439 \u043a\u0440\u0443\u0433. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u043e\u0434\u043e\u0448\u043b\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0434\u044b\u0440\u043a\u0430 \u0431\u0443\u0431\u043b\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439. \u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Raphael \u0442\u0430\u043a\u0438\u0445 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0447\u0435\u0440\u0435\u0441\u0447\u0443\u0440 \u0442\u0440\u0443\u0434\u043e\u0451\u043c\u043a\u0438\u043c. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043c\u043d\u0435 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435 \u043f\u043e\u0434\u043e\u0448\u043b\u0438. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0441\u0442\u044b\u043b\u044c, \u0432\u0437\u044f\u0432 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u0440\u043e\u043a <a href=\"https:\/\/github.com\/githiro\/drawDoughnutChart\">\u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a>. \u0410\u0440\u043a\u0438 \u0434\u043b\u044f VML \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ee395455(v=vs.85).aspx\">arc<\/a>.  <\/p>\n<pre><code class=\"javascript\">var myDonutDiv = donut(options); <\/code><\/pre>\n<p>  <a name=\"habracut\"><\/a><br \/>  \u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>donut<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <code>div<\/code> \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>donut<\/code>, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0431\u0443\u0431\u043b\u0438\u043a \u0432 \u0432\u0438\u0434\u0435 SVG \u0438\u043b\u0438 VML. \u0421\u043f\u0438\u0441\u043e\u043a \u043e\u043f\u0446\u0438\u0439:   <\/p>\n<ul>\n<li><code>el<\/code> (Node) \u2014 \u043a\u0443\u0434\u0430 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0443\u0431\u043b\u0438\u043a (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)<\/li>\n<li><code>data<\/code> (Array) \u2014 \u043c\u0430\u0441\u0441\u0438\u0432 \u0434\u0430\u043d\u043d\u044b\u0445 (\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0432\u0438\u0434\u0430 <code>{value: 42, name: 'some name'}<\/code>)<\/li>\n<li><code>size<\/code> (Number) \u2014 \u0434\u0438\u0430\u043c\u0435\u0442\u0440 \u0431\u0443\u043b\u0438\u043a\u0430 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 100)<\/li>\n<li><code>weight<\/code> (Number) \u2014 \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u043b\u0438\u043d\u0438\u0438 (\u0434\u0438\u0430\u043c\u0435\u0442\u0440 \u0431\u0443\u0431\u043b\u0438\u043a\u0430 \u043c\u0438\u043d\u0443\u0441 \u0434\u0438\u0430\u043c\u0435\u0442\u0440 \u0434\u044b\u0440\u043a\u0438) (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 20)<\/li>\n<li><code>colors<\/code> (Array) \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u0446\u0432\u0435\u0442\u043e\u0432 (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430: <code>['#555']<\/code>). \u0415\u0441\u043b\u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445, \u0446\u0432\u0435\u0442\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0442\u0441\u044f.<\/li>\n<\/ul>\n<p>  \u041f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code class=\"javascript\">var myDonut = donut({   el: document.getElementById( 'container' ),   size: 150,   weight: 30,   data: [{     value: 1,     name: 'A'   },{     value: 2,     name: 'B',     customData: 'Yeah' \/\/ \u043e\u0431 \u044d\u0442\u043e\u043c \u043d\u0438\u0436\u0435   },{     value: 3,     name: 'C'   },{     value: 4,     name: 'D'   }],   colors: [ '#80a8cc', '#da3b3e', '#ffa921', 'red' ] }); <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0442\u043e\u043b\u0449\u0438\u043d\u0430 \u0430\u0440\u043a\u0438 \u0440\u0430\u0432\u043d\u0430 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0435 \u0434\u0438\u0430\u043c\u0435\u0442\u0440\u0430 \u0431\u0443\u0431\u043b\u0438\u043a\u0430, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043a\u0440\u0443\u0433\u043e\u0432\u0430\u044f \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430:<br \/>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/fbc30bb1a7f4ad6a42626b1e35cea0699dbcc6c1\/687474703a2f2f692e696d6775722e636f6d2f537a42524c56532e706e67\" alt=\"image\"\/><\/p>\n<p>  \u0423 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 donut \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430: <br \/>  <code>setColor(arc, color) <\/code> \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0446\u0432\u0435\u0442\u0430 \u0434\u043b\u044f \u0430\u0440\u043a\u0438<br \/>  <code>data(arc[, data]) <\/code> \u2014 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0430\u0440\u043a\u0438<\/p>\n<p>  \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <code>arc<\/code> \u2014 DOM \u0443\u0437\u0435\u043b (<code>path<\/code> \u0434\u043b\u044f SVG \u0438 <code>arc<\/code> \u0434\u043b\u044f VML), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c, \u043e\u0431\u0440\u0430\u0442\u0438\u0432\u0448\u0438\u0441\u044c \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443 \u0441 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u043c <code>[data-name=&quot;\u0438\u043c\u044f&quot;]<\/code>, \u0433\u0434\u0435 <code>\u0438\u043c\u044f<\/code> \u2014 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 name \u0438\u0437 \u0434\u0430\u043d\u043d\u044b\u0445.   <\/p>\n<pre><code class=\"javascript\">B_Arc = document.getElementById( 'container' ).querySelector( '[data-name=&quot;B&quot;]' ) donut.data(B_Arc).customData; \/\/ \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435, \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 donut.setColor(B_Arc, '#8dc700'); \/\/ \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0446\u0432\u0435\u0442\u0430 <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u043a\u0441\u0442, \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0443\u0437\u0435\u043b \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0432 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u0431\u043b\u043e\u043a:  <\/p>\n<pre><code class=\"javascript\">text = myDonut.appendChild( document.createElement('span') ); text.className = 'donut-text'; text.innerHTML = '3'; <\/code><\/pre>\n<pre><code class=\"css\">.donut-text {   position: absolute;   left: 0;   line-height: 150px; \/\/ \u0434\u0438\u0430\u043c\u0435\u0442\u0440 \u0431\u0443\u0431\u043b\u0438\u043a\u0430   width: 150px;  \/\/ \u0434\u0438\u0430\u043c\u0435\u0442\u0440 \u0431\u0443\u0431\u043b\u0438\u043a\u0430   text-align: center;   font-size: 70px; } <\/code><\/pre>\n<p>  \u041f\u043e\u0437\u0438\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c \u0432 CSS \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e style.<\/p>\n<p>  \u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0432\u043e\u0441\u044c\u043c\u043e\u043c \u043e\u0441\u043b\u0435. \u0412 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u043e\u0441\u043b\u0430\u0445 \u043d\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b\u043e\u0441\u044c, \u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0442 \u043f\u0440\u0438\u0447\u0438\u043d \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c, \u0447\u0442\u043e \u0432 \u043d\u0438\u0445 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0421\u043a\u0440\u0438\u043f\u0442 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u0423\u0434\u043e\u0431\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432\u0441\u0442\u0430\u0432\u043a\u0438 \u0442\u0435\u043a\u0441\u0442\u0430, \u0442\u0443\u043b\u0442\u0438\u043f\u043e\u0432 \u0438 \u043f\u0440. \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u0437\u0430 \u0432\u0430\u043c\u0438.<\/p>\n<p>  <a href=\"http:\/\/jsbin.com\/fuxesa\/3\">\u0416\u0438\u0432\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><br \/>  <a href=\"https:\/\/github.com\/finom\/donut.js\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a><\/p>\n<p>  <a name=\"balalaika\"><\/a>  <\/p>\n<h4><a href=\"#balalaika\">\u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0430<\/a><\/h4>\n<p>  \u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0430 \u2014 \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u0430\u044f jQuery-\u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f DOM \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0443\u0436\u0430\u0442\u0430\u044f \u0434\u043e \u043f\u0440\u0435\u0434\u0435\u043b\u0430, \u0438\u043c\u0435\u044e\u0449\u0430\u044f \u043c\u0430\u043b\u044b\u0439, \u043d\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 \u0434\u043b\u044f vanilla.js-\u043f\u0430\u0441\u0430\u043d\u043e\u0432 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u0432. \u0412 \u0435\u0451 \u043e\u0441\u043d\u043e\u0432\u0443 \u0432\u043b\u043e\u0436\u0435\u043d\u0430 \u0438\u0434\u0435\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u00ab\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e ID\u00bb \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c jQuery. \u041a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0435\u0451 \u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f jQuery, \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443:  <\/p>\n<pre><code class=\"html\">&lt;script&gt; $=\u043a\u043e\u0434_\u0431\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0438 &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;script&gt; $=(function(n,e,k,h,p,m,l,b,d,g,f,c){c=function(a,b){return new c.i(a,b)};c.i=function(a,d){k.push.apply(this,a?a.nodeType||a==n?[a]:&quot;&quot;+a===a?\/&lt;\/.test(a)?((b=e.createElement(d||&quot;div&quot;)).innerHTML=a,b.children):(d&&c(d)[0]||e).querySelectorAll(a):\/f\/.test(typeof a)?\/c\/.test(e.readyState)?a():c(e).on(&quot;DOMContentLoaded&quot;,a):a:k)};c.i[f=&quot;prototype&quot;]=(c.extend=function(a){g=arguments;for(b=1;b&lt;g.length;b++)if(f=g[b])for(d in f)a[d]=f[d];return a})(c.fn=c[f]=k,{on:function(a,d){a=a.split(h);this.map(function(c){(h[b= a[0]+(c.b$=c.b$||++p)]=h[b]||[]).push([d,a[1]]);c[&quot;add&quot;+m](a[0],d)});return this},off:function(a,c){a=a.split(h);f=&quot;remove&quot;+m;this.map(function(e){if(b=(g=h[a[0]+e.b$])&&g.length)for(;d=g[--b];)c&&c!=d[0]||a[1]&&a[1]!=d[1]||(e[f](a[0],d[0]),g.splice(b,1));else!a[1]&&e[f](a[0],c)});return this},is:function(a){b=this[0];d=!!b&&(b.matches||b[&quot;webkit&quot;+l]||b[&quot;moz&quot;+l]||b[&quot;ms&quot;+l]);return!!d&&d.call(b,a)}});return c})(window,document,[],\/\\.(.+)\/,0,&quot;EventListener&quot;,&quot;MatchesSelector&quot;); &lt;\/script&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  (\u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0432\u0441\u0442\u0430\u0432\u043a\u0443 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0441\u0447\u0435\u0442\u0447\u0438\u043a\u0430, \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043c\u0430\u0441\u0441\u0438\u0432\u043d\u0435\u0435)<\/p>\n<p>  \u041a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043e\u0431\u044b\u0447\u043d\u044b\u0439 GET \u0437\u0430\u043f\u0440\u043e\u0441 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0438 \u043d\u0435\u043c\u0430\u043b\u043e\u0433\u043e \u0442\u0440\u0430\u0444\u0438\u043a\u0430. \u0418\u043d\u043b\u0430\u0439\u043d\u043e\u0432\u0430\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0435 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0434\u043e \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0418\u043b\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430:  <\/p>\n<pre><code class=\"javascript\">(function($) {   \/\/... })(\u043a\u043e\u0434_\u0431\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0438) <\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">function($) {     \/\/ your code starts here     $(function() {         $('.my-selector').on('click', function() {             alert('I need my balalaika');         });     });   \/\/ your code ends here })((function(n,e,k,h,p,m,l,b,d,g,f,c){c=function(a,b){return new c.i(a,b)};c.i=function(a,d){k.push.apply(this,a?a.nodeType||a==n?[a]:&quot;&quot;+a===a?\/&lt;\/.test(a)?((b=e.createElement(d||&quot;div&quot;)).innerHTML=a,b.children):(d&&c(d)[0]||e).querySelectorAll(a):\/f\/.test(typeof a)?\/c\/.test(e.readyState)?a():c(e).on(&quot;DOMContentLoaded&quot;,a):a:k)};c.i[f=&quot;prototype&quot;]=(c.extend=function(a){g=arguments;for(b=1;b&lt;g.length;b++)if(f=g[b])for(d in f)a[d]=f[d];return a})(c.fn=c[f]=k,{on:function(a,d){a=a.split(h);this.map(function(c){(h[b= a[0]+(c.b$=c.b$||++p)]=h[b]||[]).push([d,a[1]]);c[&quot;add&quot;+m](a[0],d)});return this},off:function(a,c){a=a.split(h);f=&quot;remove&quot;+m;this.map(function(e){if(b=(g=h[a[0]+e.b$])&&g.length)for(;d=g[--b];)c&&c!=d[0]||a[1]&&a[1]!=d[1]||(e[f](a[0],d[0]),g.splice(b,1));else!a[1]&&e[f](a[0],c)});return this},is:function(a){b=this[0];d=!!b&&(b.matches||b[&quot;webkit&quot;+l]||b[&quot;moz&quot;+l]||b[&quot;ms&quot;+l]);return!!d&&d.call(b,a)}});return c})(window,document,[],\/\\.(.+)\/,0,&quot;EventListener&quot;,&quot;MatchesSelector&quot;)); <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0430 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u043e\u0442 \u043c\u0430\u0441\u0441\u0438\u0432\u0430, \u0432 \u0440\u0430\u0441\u043f\u043e\u0440\u044f\u0436\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432:  <\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/concat\">concat<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/join\">join<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/pop\">pop<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/push\">push<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reverse\">reverse<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/shift\">shift<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/slice\">slice<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/sort\">sort<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/splice\">splice<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/toString\">toString<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/unshift\">unshift<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/every\">every<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\">filter<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/forEach\">forEach<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/indexOf\">indexOf<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/lastIndexOf\">lastIndexOf<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\">map<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/some\">some<\/a><\/li>\n<\/ul>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, \u0443 \u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0438 \u0435\u0441\u0442\u044c jQuery-\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b <code>on<\/code>, <code>off<\/code>, <code>is<\/code>, <code>extend<\/code> \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430:  <\/p>\n<pre><code class=\"javascript\">$('.my-selector').on('click.namespace', function() {     alert('I need my balalaika'); });   $('.my-selector').off('click.namespace');  $('.my-selector').on('click', function(evt) {     if($(evt.target).is('.another-selector')) {         alert('I need my balalaika');     } });  var myObject = {a:1}; $.extend(myObject,{     b: 2 });  $(function() {     \/\/ Do something with DOM }); <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u043e\u0439, \u043d\u0430 \u043f\u0435\u0440\u0432\u044b\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u0441\u043a\u0443\u0434\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0435. \u0410 \u0438\u0437-\u0437\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0442\u044b \u043a\u043e\u0434\u0430 \u0438 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u0431\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0430 \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0438\u0433\u0440\u044b\u0432\u0430\u0435\u0442 \u0443 \u043c\u0430\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h5>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432<\/h5>\n<p>  \u041f\u0430\u0440\u0441\u0438\u043d\u0433:  <\/p>\n<pre><code class=\"javascript\">var elements = $('&lt;div&gt;&lt;span class=&quot;yeah&quot;&gt;&lt;\/span&gt;&lt;\/div&gt;'); <\/code><\/pre>\n<p>  \u041f\u043e\u0438\u0441\u043a \u043e\u0434\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0434\u0440\u0443\u0433\u043e\u043c:  <\/p>\n<pre><code class=\"javascript\">var myElement = $('.my-selector', node); <\/code><\/pre>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0441\u0442\u0438\u043b\u044f:  <\/p>\n<pre><code class=\"javascript\">$('.my-selector').forEach(function(el) {     $.extend( el.style, {         width: '30px',         backgroundColor: 'red'     }); }); <\/code><\/pre>\n<p>  \u0414\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f:  <\/p>\n<pre><code class=\"javascript\">$('.my-selector').on('click', function(evt) {     var node = evt.target;     while(node !== this) {         if($(node).is('.delegated-selector')) {             \/\/ Handle it!             break;         }         node = node.parentNode;     } }); <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d:  <\/p>\n<pre><code class=\"javascript\">$.fn.addClass = function( className ) {     this.forEach( function( item ) {         var classList = item.classList;         classList.add.apply( classList, className.split( \/\\s\/ ) );     });     return this; }; <\/code><\/pre>\n<p>  \u042f \u043d\u0435 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 jQuery, \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u043c\u0438\u043a\u0440\u043e-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0441\u043e \u0441\u043c\u0435\u0448\u043d\u044b\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c. \u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 <a href=\"http:\/\/finom.github.io\/matreshka\/\">\u041c\u0430\u0442\u0440\u0435\u0448\u043a\u0430<\/a> (<a href=\"http:\/\/habrahabr.ru\/search\/?q=%5Bmatreshka.js%5D&amp;target_type=posts\">\u0441\u0442\u0430\u0442\u044c\u0438 \u043e \u041c\u0430\u0442\u0440\u0435\u0448\u043a\u0435<\/a>)<\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438, \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 \u0418\u04159.<br \/>  <a href=\"https:\/\/github.com\/finom\/balalaika\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a><\/p>\n<p>  <a name=\"procrastinate\"><\/a>  <\/p>\n<h4><a href=\"#procrastinate\">\u0424\u0443\u043d\u043a\u0446\u0438\u044f <code>procrastinate<\/code><\/a><\/h4>\n<p>  \u041f\u043e\u0437\u0432\u043e\u043b\u044c\u0442\u0435 \u043c\u043d\u0435 \u043b\u0435\u043d\u0438\u0432\u043e \u043f\u0440\u043e\u0446\u0438\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <a href=\"http:\/\/habrahabr.ru\/post\/231333\/\">\u0441\u0430\u043c\u043e\u0433\u043e \u0441\u0435\u0431\u044f<\/a>.  <\/p>\n<blockquote><p>\u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0435\u0431\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e (\u0432\u0437\u044f\u0442\u0430 \u0438\u0437 \u043c\u043e\u0435\u0439 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438). \u0423 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u043e\u0440\u043c\u0430 \u0441 \u043d\u0435\u043a\u0438\u043c\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u043c\u0438 \u043f\u043e\u043b\u044f\u043c\u0438: \u0447\u0435\u043a\u0431\u043e\u0441\u0430\u043c\u0438 \u0438 \u043f\u0440. \u041a\u043e\u0433\u0434\u0430 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0444\u043e\u0440\u043c\u044b, \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0442\u0440\u0451\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432. \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432 \u2014 \u0434\u0435\u043b\u043e \u0442\u044f\u0436\u0435\u043b\u043e\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430 \u0438 \u043d\u0430 \u0441\u043b\u0430\u0431\u043e\u043c \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b (<a href=\"http:\/\/www.highcharts.com\/\">Highcharts<\/a> \u043e\u043d \u0442\u0430\u043a\u043e\u0439). \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0441\u043a\u0443\u0447\u043d\u043e \u0438 \u043e\u043d \u0440\u0435\u0448\u0438\u043b \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u043a\u043b\u0438\u043a\u043d\u0443\u0442\u044c \u043d\u0430 \u0447\u0435\u043a\u0431\u043e\u043a\u0441. \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0437\u043e\u0439\u0434\u0435\u0442? \u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043a\u0443\u0447\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0432\u0435\u0440\u043d\u0435\u0442\u0441\u044f \u043a\u0443\u0447\u0430 \u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u0430\u043a \u0436\u0435 \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u0443\u044e\u0442 \u0433\u0440\u0430\u0444\u0438\u043a. \u0427\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u0432 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435? \u041e\u0442\u043c\u0435\u043d\u044f\u044e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440. \u0421\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442\u0441\u044f: \u0437\u0430\u0447\u0435\u043c \u0431\u044b\u043b\u043e \u044d\u0442\u043e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043f\u043e\u0441\u044b\u043b\u0430\u0442\u044c, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f, \u043f\u043e\u043a\u0430 \u0442\u043e\u0442 \u0443\u0433\u043e\u043c\u043e\u043d\u0438\u0442\u0441\u044f? \ud83d\ude42<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u0435\u043b\u043e\u0441\u0438\u043f\u0435\u0434), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0435\u0451 \u043c\u043e\u0434\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0430\u0436\u0434\u044b \u0437\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u043a \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u041f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code class=\"javascript\">var doSomethingHeavy = function( i ) { \tconsole.log( 'Ok', i ); };  var procrastinateSomethingHeavy = procrastinate( doSomethingHeavy );  for( var i = 0; i &lt; 100; i++ ) { \tprocrastinateSomethingHeavy( i ); }  \/\/ &gt;&gt; Ok 100 <\/code><\/pre>\n<p>  \u041a\u043e\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0438  <\/p>\n<pre><code class=\"javascript\">var procrastinate = function ( f, d, thisArg ) { \tvar timeout; \tif( typeof d !== 'number' ) { \t\tthisArg = d; \t\td = 0; \t} \treturn function() { \t\tvar args = arguments, \t\t\t_this = this; \t\tclearTimeout( timeout ); \t\ttimeout = setTimeout( function() { \t\t\tf.apply( thisArg || _this, args ); \t\t}, d || 0 ); \t}; }; <\/code><\/pre>\n<p>  \u041c\u0435\u0442\u043e\u0434, \u043a\u0440\u043e\u043c\u0435 \u00ab\u043f\u0440\u043e\u043a\u0440\u0430\u0441\u0442\u0438\u043d\u0438\u0440\u0443\u044e\u0449\u0435\u0439\u00bb \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443, \u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432. \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0442\u043e, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u0438\u043b\u043b\u0438\u0441\u0438\u043a\u0443\u043d\u0434 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u043e\u0436\u0435\u043d \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0440\u0438 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0435\u0451 \u0432\u044b\u0437\u043e\u0432\u0430.<\/p>\n<p>  \u0410 \u0432\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043b\u0443\u0447\u0430\u044f, \u043a\u043e\u0433\u0434\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 (\u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f).  <\/p>\n<pre><code class=\"javascript\">var procrastinateSomethingHeavy = MK.procrastinate( function() { \tconsole.log( 'Ok' ); }, 1000 );  setInterval( function() { \tprocrastinateSomethingHeavy(); }, 500 ); \/\/ \u0438\u043d\u0442\u0435\u0440\u0432\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 <\/code><\/pre>\n<\/blockquote>\n<p>  <a href=\"https:\/\/gist.github.com\/finom\/027225b4a2768de7be6d\">\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 gist<\/a><\/p>\n<h4>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 <code>indeterminate<\/code><\/h4>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/getpro\/habr\/post_images\/7f8\/569\/391\/7f8569391b7fbaceb5cc26fff89542dc.png\" alt=\"image\"\/><br \/>  \u0410 \u0437\u043d\u0430\u043b\u0438 \u043b\u0438 \u0432\u044b \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0438\u043c\u0435\u0435\u0442 \u00ab\u0441\u0440\u0435\u0434\u043d\u0435\u0435\u00bb \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435? \u042f \u043d\u0435 \u0437\u043d\u0430\u043b. \u0422\u0430\u043a\u0438 \u0434\u0430, \u0438\u043c\u0435\u0435\u0442! \u041e\u043d\u043e \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript:  <\/p>\n<pre><code class=\"javascript\">checkbox.indeterminate = true; <\/code><\/pre>\n<p>  \u0410 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u043a \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0443 \u0438\u0437 CSS \u0441 \u0442\u0430\u043a\u0438\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441 :indeterminate.<\/p>\n<p>  <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:indeterminate\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0435<\/a><br \/>  <a href=\"http:\/\/css-tricks.com\/indeterminate-checkboxes\/\">\u0421\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c<\/a> (\u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043d\u0435 \u0437\u043d\u0430\u0435\u0442\u0435 \u044f\u0437\u044b\u043a\u0430, \u043a\u043e\u0434 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u0441\u0430\u043c \u0437\u0430 \u0441\u0435\u0431\u044f)<\/p>\n<p>  <a name=\"evil\"><\/a>  <\/p>\n<h4><a href=\"#evil\">\u041f\u0440\u043e\u0442\u0438\u0432\u043d\u044b\u0439 \u0437\u043b\u043e\u0432\u0440\u0435\u0434<\/a><\/h4>\n<p>  \u0412 \u043f\u043e\u0438\u0441\u043a\u0430\u0445 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u043f\u0443\u0441\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0448\u043e\u0443 This is \u0425\u043e\u0440\u043e\u0448\u043e \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u0432\u044b\u0434\u0430\u044e\u0449\u0435\u043c \u0441\u0435\u0431\u044f \u0437\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 (\u0438\u043b\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c, \u043d\u043e \u0432\u0437\u043b\u043e\u043c\u0430\u043d\u043d\u043e\u043c), \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u00ab\u041c\u0412\u0414 \u0423\u043a\u0440\u0430\u0438\u043d\u044b\u00bb, \u0433\u0434\u0435 \u043c\u0435\u043d\u044f \u043e\u0431\u0432\u0438\u043d\u0438\u043b\u0438 \u0432 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435 \u043f\u043e\u0440\u043d\u043e \u0441 \u043c\u0430\u043b\u043e\u043b\u0435\u0442\u043a\u0430\u043c\u0438 \u0438 \u043f\u0440\u043e\u0447\u0438\u043c \u0433\u0430\u0434\u043e\u0441\u0442\u044f\u043c. \u041d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u043e\u0441\u044c \u043d\u0435\u0437\u0430\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0435\u0441\u044f \u043e\u043a\u043d\u043e \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u043f\u043b\u0430\u0442\u0438\u0442\u044c \u0448\u0442\u0440\u0430\u0444, \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0432 \u0421\u041c\u0421 \u043d\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0439 \u043d\u043e\u043c\u0435\u0440. \u042f \u0438 \u0442\u0430\u043a \u0438 \u0442\u0430\u043a \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c\u2026 \u0412 \u0438\u0442\u043e\u0433\u0435, \u044f \u043e\u0442\u043a\u043e\u044e\u0447\u0438\u043b \u0441\u0435\u0442\u044c \u043d\u0430 \u043d\u043e\u0443\u0442\u0435 \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b \u0425\u0440\u043e\u043c, \u0447\u0442\u043e\u0431 \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0445\u0435\u0448. \u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043c\u043d\u0435 \u0441\u0442\u0430\u043b\u043e \u043b\u044e\u0431\u043e\u043f\u044b\u0442\u043d\u043e, \u043a\u0430\u043a \u0441\u043a\u0440\u0438\u043f\u0442\u0443 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0442\u0440\u0435\u043f\u0430\u0442\u044c \u043d\u0435\u0440\u0432\u044b \u043e\u043f\u044b\u0442\u043d\u043e\u043c\u0443 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443, \u0438 \u044f \u043e\u0442\u043a\u0440\u044b\u043b \u044d\u0442\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f links (\u0435\u0441\u043b\u0438 \u0447\u0442\u043e, \u044d\u0442\u043e \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440).<\/p>\n<p>  \u041a\u043e\u0434 \u0437\u043b\u043e\u0432\u0440\u0435\u0434\u0430 \u0431\u044b\u043b \u0442\u0430\u043a\u043e\u0432:  <\/p>\n<pre><code class=\"javascript\">onbeforeunload=function(){ \tlocation.reload(); \treturn &quot;\u0412\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0431\u0443\u0432 \u0437\u0430\u0431\u043b\u043e\u043a\u043e\u0432\u0430\u043d\u0438\u0439 \u0437 \u043c\u0456\u0440\u043a\u0443\u0432\u0430\u043d\u044c \u0431\u0435\u0437\u043f\u0435\u043a\u0438.\u0412\u0441\u044f \u0456\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0457 \u043d\u0430 \u0432\u0430\u0448\u043e\u043c\u0443 \u043a\u043e\u043c\u043f'\u044e\u0442\u0435\u0440\u0456 \u0437\u0430\u0430\u0440\u0435\u0448\u0442\u043e\u0432\u0430\u043d\u0430. \u0423\u0441\u0456  \u0432\u0430\u0448\u0456 \u0444\u0430\u0439\u043b\u0438 \u0437\u0430\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d\u0456.  \u041f\u0440\u043e\u0442\u044f\u0433\u043e\u043c 12 \u0433\u043e\u0434\u0438\u043d \u043a\u0440\u0438\u043c\u0456\u043d\u0430\u043b\u044c\u043d\u0443 \u0441\u043f\u0440\u0430\u0432\u0443 \u0431\u0443\u0434\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043e \u0434\u043e \u0441\u0443\u0434\u0443. \u041e\u0434\u043d\u0430\u043a, \u0443 \u0412\u0430\u0441 \u0449\u0435 \u0454 12 \u0433\u043e\u0434\u0438\u043d, \u0449\u043e\u0431 \u0437\u0430\u043f\u043b\u0430\u0442\u0438\u0442\u0438 \u0448\u0442\u0440\u0430\u0444, - \u0442\u0430\u043a\u0438\u043c \u0447\u0438\u043d\u043e\u043c, \u0412\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u0443\u043d\u0438\u043a\u043d\u0443\u0442\u0438 \u043f\u0440\u0435\u0434'\u044f\u0432\u043b\u0435\u043d\u043d\u044f \u043a\u0440\u0438\u043c\u0456\u043d\u0430\u043b\u044c\u043d\u043e\u0457 \u0441\u043f\u0440\u0430\u0432\u0438.&quot; };  onload=function(){ \tlocation.reload(); } <\/code><\/pre>\n<p>  \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f, \u0438 \u0437\u0434\u0435\u0441\u044c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a <code>onbeforeunload<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a \u0436\u0435 \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0432\u044b\u0437\u044b\u0432\u0430\u044f \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0435 \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u0433\u043b\u0443\u043f\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430. <\/p>\n<p>  \u041a\u0430\u043a \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u0437\u043b\u043e\u0432\u0440\u0435\u0434 \u0443 \u0441\u0435\u0431\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435? \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 <b>\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e<\/b> HTML \u0444\u0430\u0439\u043b \u0441\u043e \u0441\u043b\u0443\u0434\u0443\u044e\u0449\u0438\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u044b\u043c:  <\/p>\n<pre><code class=\"html\">&lt;html&gt;   &lt;head&gt;     &lt;title&gt;&lt;\/title&gt; \t&lt;meta charset=&quot;utf-8&quot;&gt;      &lt;style&gt;&lt;\/style&gt;   &lt;\/head&gt;   &lt;body&gt; \t&lt;script&gt; \t\tonbeforeunload=function(){ \t\t\tlocation.reload(); \t\t\treturn &quot;\u0422\u0435\u043a\u0441\u0442 \u0437\u043b\u043e\u0432\u0440\u0435\u0434\u0430&quot; \t\t};    \t\tonload=function(){ \t\t\tlocation.reload(); \t\t} \t&lt;\/script&gt;   &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  \u041e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432 \u0425\u0440\u043e\u043c\u0435 (\u0432 \u0424\u0430\u0439\u0435\u0440\u0444\u043e\u043a\u0441\u0435 \u0437\u043b\u043e\u0432\u0440\u0435\u0434 \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0437\u043b\u043e\u0432\u0440\u0435\u0434\u043d\u044b\u0439) \u0438 \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0439\u0442\u0435\u0441\u044c. \u041a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e\u0435\u0441\u0442, \u0443\u0434\u0430\u043b\u0438\u0442\u0435 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b.<\/p>\n<p>  <a name=\"mousedown\"><\/a>  <\/p>\n<h4><a href=\"#mousedown\">\u0421\u043e\u0432\u0435\u0442: <code>mousedown<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>click<\/code><\/a><\/h4>\n<p>  \u0425\u043e\u0442\u0438\u0442\u0435 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430? \u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>click<\/code> \u043d\u0430 <code>mousedown<\/code>, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e (\u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u0434\u0440\u0430\u0433-\u043d-\u0434\u0440\u043e\u043f\u043e\u0432 \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0434\u0432\u043e\u0439\u043d\u043e\u0433\u043e \u0449\u0435\u043b\u0447\u043a\u0430). \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438 \u0432 \u0434\u0435\u0441\u044f\u0442\u044b\u0435 \u0438\u043b\u0438 \u0441\u043e\u0442\u044b\u0435 \u0434\u043e\u043b\u0438 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043f\u0443\u0441\u0442\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0443 \u043c\u044b\u0448\u0438. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0448\u0443\u0441\u0442\u0440\u0435\u0435, \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e (\u0438\u0441\u043a\u043b\u044e\u0447\u0430\u044f \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440).<\/p>\n<p>  <a href=\"http:\/\/jsbin.com\/wifowi\/1\/edit\">\u041d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0434\u0435\u043c\u043a\u0430.<\/a><\/p>\n<p>  <a name=\"no-cdn\"><\/a>  <\/p>\n<h4><a href=\"#no-cdn\">\u0421\u043e\u0432\u0435\u0442: \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 CDN<\/a><\/h4>\n<p>  \u0417\u0430\u043f\u0440\u043e\u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u2014 \u044d\u0442\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0439 HTTP \u0437\u0430\u043f\u0440\u043e\u0441. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441 \u043e\u043f\u044b\u0442\u043e\u043c \u044d\u0442\u043e \u0437\u043d\u0430\u044e\u0442 \u0438 \u043a\u043b\u0430\u0434\u0443\u0442 \u0432\u0435\u0441\u044c JS \u043a\u043e\u0434 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Grunt, r.js \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u043d\u0430 \u043b\u0438\u0448\u043d\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445 \u0438, \u0447\u0430\u0441\u0442\u043e, \u0442\u0440\u0430\u0444\u0438\u043a, \u0442\u0430\u043a \u043a\u0430\u043a GET \u0434\u0430\u0436\u0435 \u0441 \u043e\u0442\u0432\u0435\u0442\u043e\u043c 304 \u0432\u0435\u0441\u0438\u0442 \u043d\u0435\u043c\u0430\u043b\u043e. \u041a\u0440\u043e\u043c\u0435 \u044d\u0442\u043e\u0433\u043e, CDN \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0442\u044c. \u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u044b \u0447\u0430\u0441\u0442\u043e \u0440\u0435\u0448\u0430\u044e\u0442 \u044d\u0442\u043e failback-\u043e\u043c, \u043d\u043e \u044d\u0442\u043e \u043f\u043b\u043e\u0445\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0435 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0439\u043c\u0435\u0442, \u0447\u0442\u043e \u0441\u0435\u0440\u0432\u0435\u0440 \u043b\u0435\u0436\u0438\u0442, \u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043f\u0440\u0438\u0439\u0434\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0449\u0435\u0439\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u0439 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0434\u0440\u0430\u0433\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u0441\u0435\u043a\u0443\u043d\u0434.<\/p>\n<p>  <a name=\"suitup\"><\/a>  <\/p>\n<h4><a href=\"#suitup\">\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 SuitUp \u0438 \u0447\u0438\u0441\u0442\u043a\u0430 WYSIWYG \u043e\u0442 \u043c\u0443\u0441\u043e\u0440\u0430<\/a><\/h4>\n<p>  \u0415\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440, \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0439 \u043c\u043d\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0434\u0435\u043b\u0430\u043d \u0432 \u0432\u0438\u0434\u0435 jQuery \u043f\u043b\u0430\u0433\u0438\u043d\u0430, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f <a href=\"http:\/\/habrahabr.ru\/post\/161715\/\">SuitUp<\/a>. \u0421\u0430\u043c\u044b\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043c\u0438\u043d\u0443\u0441\u043e\u043c \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u044f\u0432\u043b\u0435\u0442\u0441\u044f \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0447\u0438\u0441\u0442\u043a\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0433\u043e HTML \u043e\u0442 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0437 \u0412\u0440\u043e\u0434\u0430: \u043e\u0442 \u0441\u0442\u0438\u043b\u0435\u0439, \u0441\u043f\u0430\u043d\u043e\u0432, \u0441\u043b\u0443\u0436\u0435\u0431\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0438 \u043f\u0440\u043e\u0447\u0435\u0439 \u0435\u0440\u0443\u043d\u0434\u044b.<\/p>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e (\u0442\u043e\u0436\u0435 jQuery \u043f\u043b\u0430\u0433\u0438\u043d, \u043d\u043e \u0441 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u044b\u043c \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435\u043c), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u043e\u0432 DOM, \u0431\u0435\u0437 \u0440\u0435\u0433\u0443\u043b\u044f\u0440\u043e\u043a, \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u043e \u0447\u0438\u0441\u0442\u0438\u0442 \u043b\u044e\u0431\u043e\u0439 <code>contenteditable<\/code> \u0431\u043b\u043e\u043a \u043e\u0442 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432, \u043e\u0442 \u0442\u0435\u0433\u043e\u0432 <code>XML, SCRIPT, STYLE, LINK, META<\/code>, \u043e\u0442 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>style<\/code> \u0438 <code>align<\/code>. \u00ab\u0427\u0438\u0441\u0442\u0435\u043b\u044c\u0449\u0438\u043a\u00bb \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0435\u0434\u0435\u043b\u044e \u043d\u0430\u0437\u0430\u0434, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0431\u0430\u0433\u0438 \u0438 \u043d\u0435\u0443\u0447\u0442\u0435\u043d\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0433\u0440\u044f\u0437\u043d\u043e\u0433\u043e HTML.<\/p>\n<pre><code class=\"javascript\">jQuery( editor ).on( 'paste', function( evt ) { \tsetTimeout( function() { \t\tjQuery( this ).mswordFilter(); \t}.bind( this ) ); }); <\/code><\/pre>\n<p>  <a href=\"https:\/\/gist.github.com\/finom\/aec091bae973016750ad\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 Gist<\/a><\/p>\n<p>  <a name=\"addeventlistener\"><\/a>  <\/p>\n<h4><a href=\"#addeventlistener\">\u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b \u0434\u043b\u044f <code>addEventListener<\/code><\/a><\/h4>\n<p>  \u0412\u043e\u0441\u044c\u043c\u043e\u0439 \u043e\u0441\u0451\u043b, \u043a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>addEventListener<\/code>, \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0431\u043e\u0433\u043e\u0443\u0433\u043e\u0434\u043d\u044b\u0439 <code>attachEvent<\/code>. \u0414\u043b\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u043f\u0440\u043e\u0447\u0438\u0435 \u043d\u0430\u0432\u043e\u0440\u043e\u0442\u044b, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u0441\u0432\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e\u043b\u0438\u0444\u0438\u043b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 \u041c\u0430\u0442\u0440\u0435\u0448\u043a\u0435.<\/p>\n<p>  <a href=\"https:\/\/gist.github.com\/finom\/f54533914ddff9b70a5f\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 AMD \u0432\u0435\u0440\u0441\u0438\u044e<\/a><br \/>  <a href=\"https:\/\/gist.github.com\/finom\/3ecfcea07d95f5dd7f8a\">\u0421\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e<\/a><\/p>\n<p>  <a name=\"typo\"><\/a>  <\/p>\n<h4><a href=\"#typo\">\u0420\u0435\u043f\u043e\u0440\u0442 \u043e\u0431 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u0445 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435<\/a><\/h4>\n<p>  \u0415\u0441\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u0439 \u043e\u0431 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u0445 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u0430\u044f <a href=\"http:\/\/orphus.ru\/\">Orphus<\/a>. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u043d\u0430\u0439\u0434\u044f \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0443 \u0438\u043b\u0438 \u043d\u0435\u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043d\u0430\u0436\u0430\u0442\u044c Ctrl+Enter. \u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043e\u043a\u043d\u043e, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044e\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0432\u0432\u0435\u0441\u0442\u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043a \u043e\u0448\u0438\u0431\u043a\u0435, \u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u0437\u0430\u0442\u0435\u043c, \u043b\u043e\u0433\u0438\u043d\u044f\u0441\u044c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u041e\u0440\u0444\u0443\u0441\u0430 \u0432\u0438\u0434\u0438\u0442 \u0432\u0441\u0435 \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u044f \u0438, \u0435\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442, \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0438. \u041c\u043d\u0435 \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u043e\u043f\u043e\u0432\u0435\u0449\u0430\u043b\u043a\u0443 \u0434\u043b\u044f \u043e\u043f\u0435\u0447\u0430\u0442\u043e\u043a \u0434\u043b\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u041c\u0430\u0442\u0440\u0435\u0448\u043a\u0438. \u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u044f \u0432\u0437\u044f\u043b \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0445\u0430\u043a \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0433\u0443\u0433\u043b\u043e\u0444\u043e\u0440\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u043f\u043e\u0434\u043d\u044f\u0442\u0438\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  \u041a\u0430\u043a \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c?<br \/>  1. \u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0413\u0443\u0433\u043b-\u0444\u043e\u0440\u043c\u0443 \u0441 \u0442\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u044f\u043c\u0438: \u0442\u0435\u043a\u0441\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. <a href=\"https:\/\/docs.google.com\/forms\/d\/1sQhv81wN65__7H4quwhDbecvtUxzAGZ-lMmlwF9MKcc\/viewform\">\u041f\u0440\u0438\u043c\u0435\u0440<\/a>.<br \/>  2. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0435\u0431 \u0438\u043d\u0441\u043f\u0435\u043a\u0442\u043e\u0440, \u0438\u0441\u0441\u043b\u0435\u0434\u0443\u0439\u0442\u0435 \u0444\u043e\u0440\u043c\u0443. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 \u0444\u043e\u0440\u043c\u044b action \u0438 \u0438\u043c\u0435\u043d\u0430 \u0438\u043d\u043f\u0443\u0442\u043e\u0432 (\u0430\u0442\u0440\u0438\u0431\u0443\u0442 name)<br \/>  3. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0441\u043a\u0440\u0438\u043f\u0442 \u043f\u0435\u0440\u0435\u0434 <code>&lt;\/body&gt;<\/code><br \/>  4. \u0417\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044e:  <\/p>\n<pre><code class=\"javascript\">typo({     formURL: FORM_ACTION_URL,     selectionName: NAME_OF_SELECTION_INPUT,     commentName: NAME_OF_COMMENT_INPUT,     pageName: NAME_OF_URL_INPUT }); <\/code><\/pre>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code class=\"javascript\">typo({     formURL: 'https:\/\/docs.google.com\/forms\/d\/1sQhv81wN65__7H4quwhDbecvtUxzAGZ-lMmlwF9MKcc\/formResponse',     selectionName: 'entry.1972481987',     commentName: 'entry.1777335671',     pageName: 'entry.339184258' }); <\/code><\/pre>\n<p>  <a href=\"https:\/\/github.com\/finom\/typo.js\">\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a><br \/>  <a href=\"http:\/\/jsbin.com\/mucanu\/3\/\">\u0416\u0438\u0432\u0430\u044f \u0434\u0435\u043c\u043a\u0430<\/a><br \/>  \u00ab\u041e\u043f\u0435\u0447\u0430\u0442\u043a\u0438\u00bb \u0438\u0437 \u0434\u0435\u043c\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0432 <a href=\"https:\/\/docs.google.com\/spreadsheets\/d\/1gCPLpH4OLEYW_gM4w2HYeNCxqZHl6wI8eHgzWZIoilc\/edit#gid=1932660387\">\u044d\u0442\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435<\/a>.<\/p>\n<p>  \u0412 \u0438\u0434\u0435\u0430\u043b\u0435, \u0441\u043a\u0440\u0438\u043f\u0442\u0443 \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0436\u0438\u0434\u0430\u0442\u044c\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u0438 DOM \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u043e\u043a\u043e\u0448\u043a\u043e (\u0443 \u0441\u0430\u043c\u043e\u0433\u043e \u0440\u0443\u043a\u0438 \u043d\u0435 \u0434\u043e\u0445\u043e\u0434\u044f\u0442). \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u043a\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u0442, \u0431\u0440\u043e\u0441\u0430\u0439\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0443, \u0441 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435\u043c \u0444\u043e\u0440\u043a\u043d\u0443 \ud83d\ude42<br \/>  \u0421\u043a\u0440\u0438\u043f\u0442 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<p>  <a name=\"vanillatree\"><\/a>  <\/p>\n<h4><a href=\"#vanillatree\">vanillatree \u2014 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u0430 jstree<\/a><\/h4>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/f4ea896774f38de62a63c00eac86a5dbf609c6a0\/687474703a2f2f692e696d6775722e636f6d2f54506c703167612e706e67\" alt=\"image\"\/><br \/>  <a href=\"http:\/\/www.jstree.com\/\">jstree<\/a> \u2014 jQuery \u043f\u043b\u0430\u0433\u0438\u043d, \u0441\u043e\u0437\u0434\u0430\u044e\u0449\u0438\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u0432. \u041c\u0435\u043d\u044f \u044d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u043d\u0435 \u0443\u0441\u0442\u0440\u043e\u0438\u043b \u0441\u043b\u043e\u0436\u043d\u044b\u043c, \u0433\u0440\u043e\u043c\u043e\u0437\u0434\u043a\u0438\u043c API. vanillatree \u2014 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u0430 jstree, \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u0412 \u0441\u043f\u0438\u0441\u043e\u043a \u0444\u0438\u0447 \u0432\u0445\u043e\u0434\u0438\u0442: \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0432\u0435\u0442\u043a\u0438, \u0432\u044b\u0431\u043e\u0440 \u0432\u0435\u0442\u043a\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0438\u043b\u0438 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u0434\u0435\u0440\u0435\u0432\u0430 \u043f\u043e\u0434 \u0432\u0435\u0442\u043a\u043e\u0439 \u043f\u043e \u043a\u043b\u0438\u043a\u0443 (\u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434\u044b), \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0432\u0435\u0442\u043a\u0438, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0442\u043a\u0438 \u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/p>\n<h5>\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/h5>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 JS \u0438 CSS \u0444\u0430\u0439\u043b \u0438, \u043a\u043e\u0433\u0434\u0430 DOM \u0434\u0435\u0440\u0435\u0432\u043e \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0442\u043e\u0432\u043e, \u0441\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0438\u043d\u0441\u0442\u0430\u043d\u0441 <code>VanillaTree<\/code>  <\/p>\n<pre><code class=\"javascript\">var tree = new VanillaTree(treeElement, options); <\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0432\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u043b\u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0432\u0442\u043e\u0440\u044b\u043c \u2014 \u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u043f\u0446\u0438\u0438:<br \/>  <code>placeholder<\/code> (String) \u2014 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0434\u0435\u043e\u0435\u0432\u043e \u043f\u0443\u0441\u0442\u043e\u0435<br \/>  <code>contextmenu<\/code> (Array) \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0445 \u0437\u0430 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043d\u043e\u0435 \u043c\u0435\u043d\u044e (<code>{label: \u043c\u0435\u0442\u043a\u0430, action: \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435}<\/code>)<\/p>\n<pre><code class=\"javascript\">var tree = new VanillaTree('.my-selector', {   placeholder: 'None of leafs is added yet',   contextmenu: [{     label: 'Label 1',     action: function(id) {       \/\/ someAction     }   },{     label: 'Label 2',     action: function(id) {       \/\/ someAction     }   }] }); <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438, \u0432 \u0434\u0435\u0440\u0435\u0432\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u0438\u0441\u0442\u044c\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c <code>add<\/code>.  <\/p>\n<pre><code class=\"javascript\">tree.add({   label: 'Label A', \/\/ \u0442\u0435\u043a\u0441\u0442 \u0432\u0435\u0442\u043a\u0438   id: 'a', \/\/ ID \u0432\u0435\u0442\u043a\u0438, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d, \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u043d\u0434\u043e\u043c\u043d\u044b\u043c   parent: 'b', \/\/ ID \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)   opened: true, \/\/ \u043e\u0442\u043a\u0440\u044b\u0442\u0430 \u043b\u0438 \u0432\u0435\u0442\u043a\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e)   selected: true \/\/ \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u043b\u0438 \u0432\u0435\u0442\u043a\u0430 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e) }); <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u0435\u0442\u043e\u0434\u043e\u0432:  <\/p>\n<ul>\n<li><code>add(options)<\/code> \u2014 \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0435\u0442\u043a\u0443<\/li>\n<li><code>move(id, parentId)<\/code> \u2014 \u041f\u0435\u0440\u0435\u043c\u0435\u0449\u0430\u0435\u0442 \u0432\u0435\u0442\u043a\u0443 \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e<\/li>\n<li><code>remove(id)<\/code> \u2014 \u0423\u0434\u0430\u043b\u044f\u0435\u0442 \u0432\u0435\u0442\u043a\u0443 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c id<\/li>\n<li><code>open(id)<\/code> \u2014 \u0420\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0442\u043a\u0443<\/li>\n<li><code>close(id)<\/code> \u2014 \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0442\u043a\u0443<\/li>\n<li><code>toggle(id)<\/code> \u2014 \u0417\u0430\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0438\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0442\u043a\u0443 \u0432 \u0437\u0432\u0430\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/li>\n<li><code>select(id)<\/code> \u2014 \u0412\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0432\u0435\u0442\u043a\u0443 \u0441 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c id<\/li>\n<\/ul>\n<p>  VanillaTree \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f  <\/p>\n<ul>\n<li><code>vtree-add<\/code> \u2014 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0442\u043a\u0438<\/li>\n<li><code>vtree-move<\/code> \u2014 \u043f\u0435\u0440\u0435\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0432\u0435\u0442\u043a\u0438<\/li>\n<li><code>vtree-remove<\/code> \u2014 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0432\u0435\u0442\u043a\u0438<\/li>\n<li><code>vtree-open<\/code> \u2014 \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 \u0432\u0435\u0442\u043a\u0438<\/li>\n<li><code>vtree-close<\/code> \u2014 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0435 \u0432\u0435\u0442\u043a\u0438<\/li>\n<li><code>vtree-select<\/code> \u2014 \u0432\u044b\u0431\u043e\u0440 \u0432\u0435\u0442\u043a\u0438<\/li>\n<\/ul>\n<p>  \u00ab\u0412\u0430\u043d\u0438\u043b\u044c\u043d\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e\u00bb \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043c\u0435\u0442\u043e\u0434 <code>dispatchEvent<\/code> \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 <code>CustomEvent<\/code>, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. ID \u0432\u0435\u0442\u043a\u0438, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 <code>evt.detail<\/code>. \u0412\u0441\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435, \u0442. \u0435. \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043b\u0443\u0448\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0432\u0435\u0442\u043a\u0438 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435, \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f,\u2026 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435, \u0434\u043e document.  <\/p>\n<pre><code class=\"javascript\">treeElement.addEventListener('vtree-open', function(evt) {   info.innerHTML = evt.detail.id + ' is opened'; });  treeElement.addEventListener('vtree-close', function(evt) {   info.innerHTML = evt.detail.id + ' is closed'; });  treeElement.addEventListener('vtree-select', function(evt) {   info.innerHTML = evt.detail.id + ' is selected'; });  \/\/... <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e vanillatree \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u00ab\u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438\u00bb. \u0412\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/github.com\/finom\/vanillatree\/blob\/master\/vanillatree.js#L197\">197 \u0441\u0442\u0440\u043e\u043a\u0443<\/a>.<\/p>\n<p>  \u0421\u043a\u0440\u0438\u043f\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0418\u041510 (\u043d\u0430\u043a\u0430\u043d\u0443\u043d\u0435 \u044f \u0437\u0430\u043c\u0435\u043d\u0438\u043b <code>dataset<\/code> \u043d\u0430 <code>getAttribute<\/code>\/<code>setAttribute<\/code>, a <code>CustomEvent<\/code> \u043d\u0430 <code>initEvent<\/code>). \u0414\u043b\u044f \u0418\u04159 \u043d\u0443\u0436\u0435\u043d \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element.classList\"><code>classList<\/code><\/a>.<\/p>\n<p>  <a href=\"http:\/\/jsbin.com\/puquviroxaki\/3\/\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0436\u0438\u0432\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440<\/a><br \/>  <a href=\"https:\/\/github.com\/finom\/vanillatree\">\u0421\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439<\/a><\/p>\n<p>  \u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u0430!<\/p>\n<p>  <a name=\"poll\"><\/a>    \t\t\t\t<\/p>\n<div class=\"polling\">\n<form action=\"\/json\/polling\/\" class=\"poll\" method=\"post\">\n<div class=\"poll_title\">\u041a\u0430\u043a\u043e\u0439 \u043c\u0438\u043d\u0438-\u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c (\u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u0438\u0447)?<\/div>\n<p>  \t\t<input type=\"hidden\" name=\"post_id\" value=\"234279\"\/> \t\t<input type=\"hidden\" name=\"polling_question_id\" value=\"11985\"\/>  \t\t<\/p>\n<table class=\"answer\">\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"checkbox\" id=\"vv59827\" \t\t\t\t\t\tclass=\"checkbox js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59827\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59827\">donut.js<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"checkbox\" id=\"vv59829\" \t\t\t\t\t\tclass=\"checkbox js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59829\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59829\">typo.js<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"checkbox\" id=\"vv59831\" \t\t\t\t\t\tclass=\"checkbox js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59831\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59831\">balalaika<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"checkbox\" id=\"vv59833\" \t\t\t\t\t\tclass=\"checkbox js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59833\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59833\">vanillatree<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"checkbox\" id=\"vv59861\" \t\t\t\t\t\tclass=\"checkbox js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59861\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59861\">\u041e\u0447\u0438\u0441\u0442\u043a\u0430 WYSIWYG \u043e\u0442 \u043c\u0443\u0441\u043e\u0440\u0430<\/label> \t\t\t\t<\/td>\n<\/tr>\n<\/table>\n<p class=\"for_users_only_msg\">\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a href=\"https:\/\/habrahabr.ru\/auth\/login\/\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/p>\n<p class=\"total\">\u041d\u0438\u043a\u0442\u043e \u0435\u0449\u0451 \u043d\u0435 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b. \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u043d\u0435\u0442.<\/p>\n<\/p><\/form>\n<form action=\"\/json\/polling\/\" class=\"poll\" method=\"post\">\n<div class=\"poll_title\">\u041a\u0430\u043a \u0432\u044b \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u0441\u044c \u043a vanilla.js?<\/div>\n<p>  \t\t<input type=\"hidden\" name=\"post_id\" value=\"234279\"\/> \t\t<input type=\"hidden\" name=\"polling_question_id\" value=\"11987\"\/>  \t\t<\/p>\n<table class=\"answer\">\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv59835\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59835\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59835\">\u042f \u0435\u0451 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv59837\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59837\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59837\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e, \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0441\u044c \u043a \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv59839\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59839\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59839\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0440\u0435\u0434\u043a\u043e, \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv59841\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59841\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59841\">\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432\u043e\u043e\u0431\u0449\u0435, \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0440\u0443\u043b\u044f\u0442<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv59843\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59843\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59843\">\u041d\u0435 \u0443\u043c\u0435\u044e, \u0437\u043d\u0430\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv59845\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59845\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59845\">\u041d\u0435 \u0437\u043d\u0430\u044e, \u0447\u0442\u043e \u044d\u0442\u043e<\/label> \t\t\t\t<\/td>\n<\/tr>\n<tr>\n<td class=\"input\"> \t\t\t\t\t<input type=\"radio\" id=\"vv59847\" \t\t\t\t\t\tclass=\"radio js-field-data\" \t\t\t\t\t\tname=\"variant[]\" \t\t\t\t\t\tvalue=\"59847\" \/> \t\t\t\t<\/td>\n<td class=\"label\"> \t\t\t\t\t<label for=\"vv59847\">\u0417\u0430\u0447\u0435\u043c \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043e\u0442\u0432\u0435\u0442\u0430?<\/label> \t\t\t\t<\/td>\n<\/tr>\n<\/table>\n<p class=\"for_users_only_msg\">\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a href=\"https:\/\/habrahabr.ru\/auth\/login\/\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/p>\n<p class=\"total\">\u041d\u0438\u043a\u0442\u043e \u0435\u0449\u0451 \u043d\u0435 \u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b. \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u043d\u0435\u0442.<\/p>\n<\/p><\/form>\n<\/p><\/div>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/234279\/\"> http:\/\/habrahabr.ru\/post\/234279\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">     \t* \u041d\u0430\u0434\u0435\u044e\u0441\u044c, <a href=\"http:\/\/habrahabr.ru\/users\/ilusha_sergeevich\/\" class=\"user_link\">ilusha_sergeevich<\/a> \u043d\u0435 \u043e\u0431\u0432\u0438\u043d\u0438\u0442 \u043c\u0435\u043d\u044f \u0432 \u043f\u043b\u0430\u0433\u0438\u0430\u0442\u0435 \ud83d\ude42<br \/>  \u0415\u0441\u043b\u0438 \u0447\u0442\u043e, \u043f\u043e\u0441\u0442 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u0443\u044e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/3e1d41ccb812c23ee13ce9e6912a1b5422621b02\/687474703a2f2f692e696d6775722e636f6d2f615450645850682e706e67\" alt=\"image\"\/><br \/>  (\u0418\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u043a <b>donut.js<\/b>)<\/p>\n<ul>\n<li><a href=\"#donut\">donut.js \u2014 \u043c\u0438\u043a\u0440\u043e-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0440\u0438\u0441\u0443\u044e\u0449\u0430\u044f \u0431\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u044b\u0435 (donut chart) \u0438 \u043a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/a><\/li>\n<li><a href=\"#balalaika\">\u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0430<\/a><\/li>\n<li><a href=\"#procrastinate\">\u0424\u0443\u043d\u043a\u0446\u0438\u044f procrastinate<\/a><\/li>\n<li><a href=\"#evil\">\u041f\u0440\u043e\u0442\u0438\u0432\u043d\u044b\u0439 \u0437\u043b\u043e\u0432\u0440\u0435\u0434<\/a><\/li>\n<li><a href=\"#mousedown\">\u0421\u043e\u0432\u0435\u0442: mousedown \u0432\u043c\u0435\u0441\u0442\u043e click<\/a><\/li>\n<li><a href=\"#no-cdn\">\u0421\u043e\u0432\u0435\u0442: \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 CDN<\/a><\/li>\n<li><a href=\"#suitup\">\u0420\u0435\u0434\u0430\u043a\u0442\u043e\u0440 SuitUp \u0438 \u0447\u0438\u0441\u0442\u043a\u0430 WYSIWYG \u043e\u0442 \u043c\u0443\u0441\u043e\u0440\u0430<\/a><\/li>\n<li><a href=\"#addeventlistener\">\u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b \u0434\u043b\u044f addEventListener<\/a><\/li>\n<li><a href=\"#typo\">\u0420\u0435\u043f\u043e\u0440\u0442 \u043e\u0431 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u0445 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435<\/a><\/li>\n<li><a href=\"#vanillatree\">vanillatree \u2014 \u0432\u0430\u043d\u0438\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u043c\u0435\u043d\u0430 jstree<\/a><\/li>\n<li><a href=\"#poll\">\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u043e\u0441\u043e\u0432<\/a><\/li>\n<\/ul>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u0417\u0430 \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e\u043c. \u041d\u043e \u043d\u0438 \u043e\u0434\u043d\u0430 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043d\u0430\u0440\u0430\u0431\u043e\u0442\u043e\u043a \u043d\u0435 \u0442\u044f\u043d\u0435\u0442 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0441\u0435 \u043c\u0435\u043b\u043e\u0447\u0438, \u0447\u0442\u043e \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u043b, \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435: \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u043e\u043f\u0435\u043d-\u0441\u043e\u0440\u0446 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u043f\u0430\u0440\u0430 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438 \u043d\u0430\u0445\u043e\u0434\u043e\u043a. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0432 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u0430\u043a \u0435\u0441\u0442\u044c, \u043f\u043e\u0434 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0435\u0439 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/WTFPL\">WTFPL<\/a> (\u043a\u0440\u043e\u043c\u0435 \u0411\u0430\u043b\u0430\u043b\u0430\u0439\u043a\u0438). \u0421 \u0440\u0430\u0434\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0438\u043c\u0443 \u043f\u0443\u043b\u043b \u0440\u0435\u043a\u0432\u0435\u0441\u0442\u044b \u0441 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u0431\u0430\u0433\u043e\u0432 \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 README.<\/p>\n<p>  <a name=\"donut\"><\/a>  <\/p>\n<h4><a href=\"#donut\">donut.js \u2014 \u043c\u0438\u043a\u0440\u043e-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0440\u0438\u0441\u0443\u044e\u0449\u0430\u044f \u0431\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u044b\u0435 (donut) \u0438 \u043a\u0440\u0443\u0433\u043e\u0432\u044b\u0435 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b<\/a><\/h4>\n<p>  \u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0434\u0430\u0447\u0430 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0431\u0443\u0431\u043b\u0438\u043a\u043e\u0432 \u043d\u0430 \u043a\u0430\u0440\u0442\u0435 \u043c\u0438\u0440\u0430, \u0438 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c, \u0430 \u0435\u0449\u0435 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0418\u04158, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u043a\u0430\u043a \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u043d\u0435 \u0443\u043c\u0435\u0442 SVG, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0435\u0437\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0439 VML. \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0432 \u0433\u043e\u043b\u043e\u0432\u0443, \u044d\u0442\u043e Raphael. \u041f\u043e\u0440\u044b\u0432\u0448\u0438\u0441\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u044f \u043d\u0430\u0448\u0435\u043b <a href=\"http:\/\/matthewodette.com\/graphael-donut-charts\/\">\u044d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/a>. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0430\u0432\u0442\u043e\u0440 \u043f\u0440\u043e\u044f\u0432\u0438\u043b \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u044b\u043c \u0445\u0430\u043a\u043e\u043c: \u043d\u0430 \u043a\u0440\u0443\u0433\u043e\u0432\u043e\u0439 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435 (pie chart) \u043e\u043d \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u0431\u0435\u043b\u044b\u0439 \u043a\u0440\u0443\u0433. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0435 \u043f\u043e\u0434\u043e\u0448\u043b\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0434\u044b\u0440\u043a\u0430 \u0431\u0443\u0431\u043b\u0438\u043a\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0439. \u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Raphael \u0442\u0430\u043a\u0438\u0445 \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c \u043c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0447\u0435\u0440\u0435\u0441\u0447\u0443\u0440 \u0442\u0440\u0443\u0434\u043e\u0451\u043c\u043a\u0438\u043c. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043d\u0430 \u043f\u0440\u043e\u0441\u0442\u043e\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043c\u043d\u0435 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435 \u043f\u043e\u0434\u043e\u0448\u043b\u0438. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u043a\u043e\u0441\u0442\u044b\u043b\u044c, \u0432\u0437\u044f\u0432 \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443 \u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u0440\u043e\u043a <a href=\"https:\/\/github.com\/githiro\/drawDoughnutChart\">\u044d\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/a>. \u0410\u0440\u043a\u0438 \u0434\u043b\u044f VML \u0432\u0435\u0440\u0441\u0438\u0438 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ee395455(v=vs.85).aspx\">arc<\/a>.  <\/p>\n<pre><code class=\"javascript\">var myDonutDiv = donut(options); <\/code><\/pre>\n<p>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-234279","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/234279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=234279"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/234279\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=234279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=234279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=234279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}