{"id":176053,"date":"2013-04-09T22:56:11","date_gmt":"2013-04-09T18:56:11","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=176053"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=176053","title":{"rendered":"<span class=\"post_title\">ASP.NET MVC \u0423\u0440\u043e\u043a 7. Bootstrap, jQuery, Ajax<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t<b>\u0426\u0435\u043b\u044c \u0443\u0440\u043e\u043a\u0430<\/b>: \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 html, js \u0438 css \u0444\u0430\u0439\u043b\u0430\u043c\u0438. Bootstrap \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 css. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 js-\u0444\u0430\u0439\u043b\u043e\u0432. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 jQuery, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0434\u0440. addClass, removeClass, attr, data, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 dom-\u043e\u0431\u044a\u0435\u043a\u0442\u0430, ajax.<\/p>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446 \u043c\u044b \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0436\u0435 \u0432 \u043c\u0435\u043d\u044c\u0448\u0435\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 asp.net mvc, \u043d\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0432\u0430\u0436\u043d\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/p>\n<p>  <a name=\"habracut\"><\/a>  <\/p>\n<h5>Twitter Bootstrap \u0438 css <\/h5>\n<p>  Twitter Bootstrap \u2013 \u044d\u0442\u043e css-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a. \u0422.\u0435. \u043d\u0430\u0431\u043e\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0431\u043b\u043e\u043a\u043e\u0432, \u043a\u043d\u043e\u043f\u043e\u043a, \u043c\u0435\u0442\u043e\u043a, \u0444\u043e\u0440\u043c \u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u041d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u043e\u0440\u043a\u0435. <\/p>\n<p>  \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0442\u0443\u0442:<br \/>  <a href=\"http:\/\/twitter.github.com\/bootstrap\/\">http:\/\/twitter.github.com\/bootstrap\/<\/a><br \/>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c bootstrap:  <\/p>\n<pre><code class=\"bash\">Install-Package Twitter.Bootstrap <\/code><\/pre>\n<p>  \u0423\u0434\u0430\u043b\u0438\u043c Jquery.UI:  <\/p>\n<pre><code class=\"bash\">Uninstall-Package Jquery.UI.Combined <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 BundleConfig bootstap \u0438 \u0443\u0431\u0435\u0440\u0435\u043c \u043e\u0442\u0442\u0443\u0434\u0430 jquery.UI (App_Start\/BundleConfig.cs):  <\/p>\n<pre><code class=\"cs\">public class BundleConfig     {         public static void RegisterBundles(BundleCollection bundles)         {             bundles.Add(new ScriptBundle(&quot;~\/bundles\/jquery&quot;).Include(                         &quot;~\/Scripts\/jquery-1.*&quot;));                           bundles.Add(new ScriptBundle(&quot;~\/bundles\/modernizr&quot;).Include(                         &quot;~\/Scripts\/modernizr-*&quot;));              bundles.Add(new ScriptBundle(&quot;~\/bundles\/bootstrap&quot;).Include(                         &quot;~\/Scripts\/bootstrap*&quot;));              bundles.Add(new StyleBundle(&quot;~\/Content\/css&quot;)                     .Include(&quot;~\/Content\/site.css&quot;)  \/* \u043d\u0435 \u043f\u0435\u0440\u0435\u043f\u0443\u0442\u0430\u0439\u0442\u0435 \u043f\u043e\u0440\u044f\u0434\u043e\u043a *\/                     .Include(&quot;~\/Content\/bootstrap*&quot;));         }     } <\/code><\/pre>\n<p>  \u0412\u0430\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c \u043f\u0440\u043e \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u0430 \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<ul>\n<li>\u041d\u0430\u0438\u043c\u0435\u043d\u0435\u0435 \u043d\u0438\u0437\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/li>\n<li>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0441\u0442\u0438\u043b\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/li>\n<li>\u041d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u043c\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/li>\n<li>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 css-\u0441\u0442\u0438\u043b\u0438 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0444\u0430\u0439\u043b\u0430\u0445, \u0442\u0443\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432\u0430\u0436\u043d\u0435\u0435 (\u043f\u0440\u0438 \u043f\u0440\u043e\u0447\u0438\u0445 \u0440\u0430\u0432\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445), \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435. \u042d\u0442\u043e \u0436\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0438 \u043a \u0432\u0437\u0430\u0438\u043c\u043d\u043e\u043c\u0443 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043f\u0440\u0430\u0432\u0438\u043b \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430.<\/li>\n<li>\u0414\u0430\u043b\u0435\u0435 \u043f\u043e \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432:<br \/> \n<ul>\n<li>\u0422\u0435\u0433\u0438 \u0438\u043c\u0435\u044e\u0442 \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442: <code>h1, div, p<\/code><\/li>\n<li>\u041a\u043b\u0430\u0441\u0441\u044b \u0438 \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u044b. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440:<code> .item { }, :hover { } <\/code><\/li>\n<li>\u0410\u0442\u0442\u0440\u0438\u0431\u0443\u0442\u044b [attr=\u201dvalue\u201d]. \u041f\u0440\u0438\u043c\u0435\u0440: <code>[type=\u201dcheckbox\u201d] {}<\/code><\/li>\n<li>\u0418\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 ID \u2013 \u043d\u0430\u0438\u0432\u044b\u0441\u0448\u0438\u0439 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442. \u0422\u0438\u043f\u0430<code> #main { }<\/code><\/li>\n<\/ul>\n<p>  <\/li>\n<li>\u0415\u0449\u0435 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f \u043f\u0440\u044f\u043c\u043e \u0432 style \u0442\u0435\u0433\u0435:<br \/> \n<pre><code class=\"html\">&lt;div style=\u201dwidth : 203px\u201d&gt;&lt;\/div&gt;  <\/code><\/pre>\n<p>  <\/li>\n<li>\u0418 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u044c \u0441 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u043b\u043e\u0432\u043e\u043c !important.<\/li>\n<\/ul>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0432 \u0437\u0430\u0434\u0430\u043d\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438\u0434\u0435\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u043e\u0432, \u043a\u043b\u0430\u0441\u0441\u043e\u0432 (\u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u043e\u0432), \u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>!important<\/code> \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f, \u0440\u0430\u0432\u043d\u043e \u043a\u0430\u043a \u0438 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0432 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0435 style \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ID.<br \/>  \u0414\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c css-\u0444\u0430\u0439\u043b Site.css. \u0422\u0430\u043a \u043a\u0430\u043a \u0432 bootstrap \u0443\u0436\u0435 \u0437\u0430\u0434\u0430\u043d\u044b \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c, \u0443\u0434\u0430\u043b\u0438\u043c \u044d\u0442\u043e\u0442 \u0431\u043b\u043e\u043a \u0438 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0444\u0430\u0439\u043b (\/Content\/Site.css):  <\/p>\n<pre><code class=\"css\">\/* Styles for validation helpers -----------------------------------------------------------*\/ .field-validation-error {     color: #f00; }  .field-validation-valid {     display: none; }  .input-validation-error {     border: 1px solid #f00;     background-color: #fee; }  .validation-summary-errors {     font-weight: bold;     color: #f00; }  .validation-summary-valid {     display: none; } <\/code><\/pre>\n<p>  \u042d\u0442\u043e css \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u043c\u0435\u0442\u043e\u0434\u0430\u0445 <code>Html.ValidationMessage()<\/code>, <code>Html.ValidationSummary()<\/code>.<br \/>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0442\u0438\u043b\u044c:  <\/p>\n<ul>\n<li>\u0417\u0430\u043f\u0440\u0435\u0449\u0435\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0447\u0435\u0440\u0435\u0437 id, \u0442\u0438\u043f\u0430 <code>#Main<\/code>. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0445\u043e\u0442\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0439 \u0430\u0442\u0440\u0438\u0431\u0443\u0442, \u043d\u043e \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0445 DOM \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ID \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u043e \u0432\u0441\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. <\/li>\n<li>\u041a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u043e\u0444\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0442\u0438\u043f SmallCaps: some-class-name, \u0432\u0441\u0435 \u0441 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u0439 \u0431\u0443\u043a\u0432\u044b, \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u201c-\u201d. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0442\u0430\u043a, \u043a\u0430\u043a \u044d\u0442\u043e \u0432 \u0441\u0430\u043c\u043e\u043c CSS \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. <\/li>\n<li>\u041a\u043b\u0430\u0441\u0441\u044b, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0432 js-\u043a\u043e\u0434\u0435) \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0442\u0438\u043f lowerCamelCase: someClassName. \u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u043a\u0430\u043a \u0438 \u0441\u043e\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u0432 js \u0438\u043b\u0438 \u0432 jquery.<\/li>\n<li>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b id \u0437\u0430\u0434\u0430\u044e\u0442\u0441\u044f \u0442\u0438\u043f\u043e\u043c UpperCamelCase: <code>id=\u201dSomeButton\u201d<\/code>.<\/li>\n<li>\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u043e\u0431\u0449\u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>.list, .item, .button, .text, .user, .image, .container, .wrapper<\/code> \u043d\u0430 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0443\u0440\u043e\u0432\u043d\u0435.<\/li>\n<li>\u041d\u0435 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0439\u0442\u0435 \u0441\u043b\u043e\u0432\u0430. \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0442\u0438\u043f\u0430: <code>.main-container-left-part-wrapper-list.<\/code><\/li>\n<li>\u0417\u0430\u0434\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0435\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e, \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0432 \u043e\u0431\u0449\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0442\u0438\u043f\u0430:<code> .error {color : red }, .left { float : left }.<\/code> <\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u0430\u0441\u043a\u0430\u0434\u043d\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u043e\u0442 \u043e\u0431\u0449\u0435\u0433\u043e \u043a \u0447\u0430\u0441\u0442\u043d\u043e\u043c\u0443:\n<pre><code class=\"css\">.list { }      .list .item     {     } &lt;li&gt;\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u0433\u043b\u0443\u0431\u0438\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u044f     .list &gt; .item      {     } <\/code><\/pre>\n<p>  <\/li>\n<li>\u0438 \u0434\u043b\u044f \u0442\u0435\u0433\u043e\u0432 \u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u043c:<br \/> \n<pre><code class=\"css\">.item.odd { } <\/code><\/pre>\n<p>  \u0434\u043b\u044f  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;item odd&quot;&gt;&lt;\/div&gt; <\/code><\/pre>\n<\/li>\n<li>\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<br \/> \n<pre><code class=\"css\">\/* \u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u0430      - \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0448\u0440\u0438\u0444\u0442     - \u043c\u0435\u0436\u0434\u0443\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0435 \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435     - \u0440\u0430\u0437\u043c\u0435\u0440 \u0448\u0440\u0438\u0444\u0442\u0430     - \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 \u0442\u0435\u043a\u0441\u0442\u0430     - h1, h2, h3 ...     - a      - p *\/  \/* \u0412\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b:     - .error     - .field-validation-error \u0438 \u0434\u0440.     - .show-me { border : 1px solid red; }     - .hidden {display : none; }     - .relative { position : relative; }     *\/  \/* \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438     - .popup-window      - .popup-window .close      - .popup-window .wrapper     - .popup-window .header      - .error-message     - .info-message     *\/  \/* \u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0441\u0430\u0439\u0442\u0430     - header     - .logo     - .user-login     - nav.main-menu     - .main-content     - footer *\/  \/*\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 *\/  \/* \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0445\u043e\u0434\u0430 *\/  \/* \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0448\u0438\u0431\u043a\u0438 *\/  \/* \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\u2026 *\/ <\/code><\/pre>\n<p>  <\/li>\n<\/ul>\n<h5>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 html-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/h5>\n<p>  \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0441\u0442\u0438\u043b\u0438 \u0438 js \u0444\u0430\u0439\u043b\u044b \u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c\u0443 layout \u0444\u0430\u0439\u043b\u0443 (\/Areas\/Default\/Views\/Shared\/_Layout.cshtml):  <\/p>\n<pre><code class=\"html\">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;meta charset=&quot;utf-8&quot; \/&gt;     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot; \/&gt;     &lt;title&gt;@ViewBag.Title&lt;\/title&gt;     @Styles.Render(&quot;~\/Content\/css&quot;)     @RenderSection(&quot;styles&quot;, required: false)     @Scripts.Render(&quot;~\/bundles\/modernizr&quot;) &lt;\/head&gt; &lt;body&gt; &lt;div class=&quot;navbar navbar-fixed-top&quot;&gt;         &lt;div class=&quot;navbar-inner&quot;&gt;             &lt;div class=&quot;container&quot;&gt;                 &lt;ul class=&quot;nav nav-pills pull-right&quot;&gt;                     @Html.Action(&quot;UserLogin&quot;, &quot;Home&quot;)                 &lt;\/ul&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;      @RenderBody()     @Scripts.Render(&quot;~\/bundles\/jquery&quot;)     @Scripts.Render(&quot;~\/bundles\/bootstrap&quot;)     @RenderSection(&quot;scripts&quot;, required: false) &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  \u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442:  <\/p>\n<ol>\n<li>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c request \u0438 \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \/Default\/Home\/Index. <\/li>\n<li>\u0423 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\/\u043c\u0435\u0442\u043e\u0434\u0430 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 View \u2013 \/Home\/Index.cshtml<\/li>\n<\/ol>\n<p>  \u0412 \u043d\u0430\u0447\u0430\u043b\u0435 \u0444\u0430\u0439\u043b\u0430 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0432 Layout:  <\/p>\n<pre><code class=\"html\">@{     ViewBag.Title = &quot;LessonProject&quot;;     Layout = &quot;~\/Areas\/Default\/Views\/Shared\/_Layout.cshtml&quot;; } <\/code><\/pre>\n<p>  \u0423\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 layout \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>@RenderBody()<\/code>. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/072\/655\/b11\/072655b1163de9eb90791d6fc3899a19.jpg\"\/><\/p>\n<p>  \u0412\u0438\u0434\u043d\u043e, \u0447\u0442\u043e body \u0437\u0430\u0435\u0445\u0430\u043b \u043f\u043e\u0434 \u043f\u0430\u043d\u0435\u043b\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438. \u0412 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c body (\/Content\/Site.css):   <\/p>\n<pre><code class=\"css\">body {     padding-top : 40px !important; } <\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/713\/8f6\/e29\/7138f6e2945ff76202eec3d889776907.jpg\"\/><\/p>\n<p>  \u0413\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435.<\/p>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u044b bootstap \u0440\u0430\u043d\u0435\u0435, \u0442\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0443 \u043d\u0430\u0441 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0435\u043f\u0435\u0440\u044c \u0442\u0430\u043a:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/b61\/508\/288\/b61508288490f8aee9120db277467ac9.jpg\"\/><\/p>\n<p>  \u041f\u043e\u043f\u0440\u0430\u0432\u0438\u043c \u0432\u044b\u0431\u043e\u0440 \u0434\u0430\u0442\u044b \u0440\u043e\u0436\u0434\u0435\u043d\u0438\u044f, \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043b\u0430\u0441\u0441\u044b \u0432 <a href=\"http:\/\/habrahabr.ru\/users\/html\/\" class=\"user_link\">Html<\/a>.DropDownList() (\/Areas\/Default\/Views\/User\/Register.cshtml):<\/p>\n<pre><code class=\"html\">\u2026 &lt;div class=&quot;controls&quot;&gt;                 @Html.DropDownList(&quot;BirthdateDay&quot;, Model.BirthdateDaySelectList, new { @class = &quot;select-day&quot; })                 @Html.DropDownList(&quot;BirthdateMonth&quot;, Model.BirthdateMonthSelectList, new { @class = &quot;select-month&quot; })                 @Html.DropDownList(&quot;BirthdateYear&quot;, Model.BirthdateYearSelectList, new { @class = &quot;select-year&quot; })             &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043c\u044b \u0435\u0449\u0435 \u0433\u0434\u0435-\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043f\u043e \u0432\u044b\u0431\u043e\u0440\u0443 \u0434\u0430\u0442\u044b (\u0445\u043e\u0442\u044f \u043d\u0435 \u0444\u0430\u043a\u0442), \u0442\u043e \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043e\u0431\u0449\u0435\u0435, \u0447\u0435\u043c \u0447\u0430\u0441\u0442\u043d\u043e\u0435 (\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u043a \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438) (\/Content\/Site.css):<\/p>\n<pre><code class=\"css\">.select-day {     width : 50px; } .select-month {     width : 90px; } .select-year {     width : 70px; } <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c:<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/52c\/b94\/5a1\/52cb945a148637c9b1272a7424edc4b4.jpg\"\/><\/p>\n<p>  \u0423\u0438\u0438\u0438!<\/p>\n<h5>\u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 js \u0444\u0430\u0439\u043b\u043e\u0432<\/h5>\n<p>  \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e js \u0444\u0430\u0439\u043b\u043e\u0432. \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <b>jquery<\/b> \u043a\u0430\u043a \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043f\u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u044c\u044e \u043a\u043e\u0434\u0430. \u041e\u0434\u0438\u043d \u043d\u0430\u0448 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 js \u0444\u0430\u0439\u043b (\u043d\u0430\u0437\u043e\u0432\u0435\u043c \u0435\u0433\u043e \/Scripts\/common.js) \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430. \u0412 \u043d\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0442\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 js-\u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c 2 \u043f\u0430\u043f\u043a\u0438 \u00abadmin\u00bb \u0438 \u00abdefault\u00bb \u0432 \/Scripts.<\/p>\n<p>  \u0412\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043c\u0435\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0432 SmallCase \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u0438 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u044c\u0441\u044f \u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c). \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440: user-register.js \u2013 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0432 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 User\/Register.cshtml:<\/p>\n<pre><code class=\"html\">@section scripts {        @Scripts.Render(&quot;\/Scripts\/default\/user-register.js&quot;) } <\/code><\/pre>\n<p>  \u042d\u0442\u0430 \u0441\u0435\u043a\u0446\u0438\u044f \u0432\u044b\u0432\u0435\u0434\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0433\u0434\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u0432 _Layout.cshtml (\/Areas\/Default\/Views\/Shared\/_Layout.cshtml):  <\/p>\n<pre><code class=\"html\">\u2026    @Scripts.Render(&quot;~\/bundles\/bootstrap&quot;)    @Scripts.Render(&quot;~\/bundles\/common&quot;)    @RenderSection(&quot;scripts&quot;, required: false) &lt;\/body&gt; <\/code><\/pre>\n<p>  \u0412 \/App_Start\/BundleConfig.cs \u0442\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435:   <\/p>\n<pre><code class=\"cs\"> bundles.Add(new ScriptBundle(&quot;~\/bundles\/common&quot;).Include(                         &quot;~\/Scripts\/common.js&quot;)); <\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 js \u043a\u043b\u0430\u0441\u0441\u044b, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432, \u0431\u0443\u0434\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443:  <\/p>\n<pre><code class=\"javascript\">function FunctionName() {     _this = this;      this.init = function () {         \/* \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0439 \u0438\u043b\u0438 \u0438\u043d\u044b\u0445 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 *\/         $(&quot;button&quot;).click(function () {             var id = $(this).attr(&quot;id&quot;);             _this.saySomething(id);         });     }      \/* \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b*\/     this.saySomething = function (id) {         alert(&quot;\u041f\u044b\u0449\u044c-\u043f\u044b\u0449\u044c! : &quot; + id);     }      \/* \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b *\/     function saySomething (id) {         alert(&quot;\u041f\u044b\u0449\u044c-\u043f\u044b\u0449\u044c! \u041d\u043e \u0442\u0441\u0441\u0441!: &quot; + id);     }   }  var functionName = null; $().ready(function () {     functionName = new FunctionName();     functionName.init(); }); <\/code><\/pre>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435:  <\/p>\n<ol>\n<li><code>function FunctionName<\/code> \u0438\u043c\u0435\u0435\u0442 \u0438\u043c\u044f \u0432 \u0441\u0442\u0438\u043b\u0435 UpperCamelCase \u043f\u043e \u0438\u043c\u0435\u043d\u0438 \u0444\u0430\u0439\u043b\u0430, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f (<code>Common<\/code> \u0438 <code>UserRegister<\/code> \u0432 \u0444\u0430\u0439\u043b\u0430\u0445 common.js \u0438 user-register.js \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e) <\/li>\n<li><code>_this = this;<\/code> \u0421\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0434\u0430\u043d\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0438 delegate-\u0444\u0443\u043d\u043a\u0446\u0438\u0439<\/li>\n<li><code>this.init()<\/code> \u2013 \u0432\u043d\u0435\u0448\u043d\u044f\u044f (public) \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u0433\u0434\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/li>\n<li><code>var functionName = null<\/code> \u2013 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432.<\/li>\n<li><code>$().ready()<\/code> \u2013 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0430 DOM-\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430. JQuery \u0444\u0443\u043d\u043a\u0446\u0438\u044f. <\/li>\n<li><code>functionName = new FunctionName();<\/code> \u2014 \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043b\u0430\u0441\u0441\u0430.<\/li>\n<li><code>functionName.init();<\/code> \u2014 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e.<\/li>\n<\/ol>\n<h5>\u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0440\u0435\u0441\u0443\u0440\u0441\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432<\/h5>\n<p>  \u0422\u0430\u043a \u043a\u0430\u043a \u0440\u0435\u0441\u0443\u0440\u0441\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0441\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u0432\u044b\u0440\u0430\u0441\u0442\u0430\u044e\u0442, \u0438 \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u0438\u0434\u0435\u0442 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0433\u0440\u0430\u0435\u0442 \u043d\u0435 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u044e\u044e \u0440\u043e\u043b\u044c, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0432\u0435\u0449\u0430\u043c:  <\/p>\n<ul>\n<li>\u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u043d\u044b\u043c \u0444\u0430\u0439\u043b\u0430\u043c<\/li>\n<li>\u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432. <\/li>\n<\/ul>\n<p>  \u0423\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430-\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:<br \/>  ?  <\/p>\n<ol>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430. \u041d\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0445\u043e\u043b\u0441\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f \u0441\u0440\u0430\u0437\u0443. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0432 css \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442 \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u0438 \u0448\u0438\u0440\u0438\u043d\u0443\\\u0432\u044b\u0441\u043e\u0442\u0443 \u0447\u0430\u0441\u0442\u0438 \u044d\u0442\u043e\u0433\u043e \u0445\u043e\u043b\u0441\u0442\u0430.<br \/>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0438\u0441\u0443\u043d\u043e\u043a: <br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/a1c\/6bd\/27b\/a1c6bd27bdc7c9fb05f172ab886c14bb.png\"\/>\n<p>  \u0418 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 html:  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;label label-new sprite&quot;&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  \u0418 css:  <\/p>\n<pre><code class=\"css\">.sprite {     background: url(&quot;\/Media\/images\/sprite.png&quot;);     overflow: hidden;     text-indent: -9999px; } .box .label     \t{           position: absolute;           width: 29px;           right: -29px;           top: 35px;     \t}      \t.box .label-new     \t{           background-position: 0 -15px;           height: 119px; } <\/code><\/pre>\n<p>  <\/li>\n<li>2. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 (\u0438\u043a\u043e\u043d\u043e\u043a) \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 css c \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0435\u0433\u043e \u0432 base64.<br \/>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044f\u0442 \u0432 base64, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043d\u0430 <a href=\"http:\/\/webcodertools.com\/imagetobase64converter\">http:\/\/webcodertools.com\/imagetobase64converter<\/a><br \/>  \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u0432 css \u043f\u043e \u0442\u0438\u043f\u0443:<br \/> \n<pre><code class=\"css\">background-image: url(data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAWCAYAAAABxvaqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw\/eHBhY2tldCBiZWdpbj0i77u\/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDhENzk1MDI1QkREMTFFMkE2QUNDMTBGODg2MjVENjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDhENzk1MDM1QkREMTFFMkE2QUNDMTBGODg2MjVENjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEOEQ3OTUwMDVCREQxMUUyQTZBQ0MxMEY4ODYyNUQ2MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEOEQ3OTUwMTVCREQxMUUyQTZBQ0MxMEY4ODYyNUQ2MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI\/PlBqi0kAAAAwSURBVHjaYmBgYGBnghFccIIbRPCiEvwggg8LixfOBbN44AaACU4gZvgJIv4DBBgARTIDD2TeBRAAAAAASUVORK5CYII=); <\/code><\/pre>\n<p>  <\/li>\n<\/ol>\n<p>  \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043d\u044b\u0445 \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u043c. <\/p>\n<p>  \u0414\u043b\u044f css \u0438 js \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0444\u0430\u0439\u043b\u0430, \u0442.\u0435. \u0443\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u0435\u043b\u044b \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0430\u0442\u043a\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0424\u0430\u0439\u043b \u0438\u043b\u0438 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u043a\u0430\u043a \u0434\u043b\u044f jquery \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438\u043b\u0438 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. <\/p>\n<p>  \u0414\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 Web.config \u0444\u0430\u0439\u043b\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 compilation:  <\/p>\n<pre><code class=\"xml\">&lt;compilation debug=&quot;false&quot; targetFramework=&quot;4.5&quot; \/&gt; <\/code><\/pre>\n<p>  \u0418\u043b\u0438 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \/App_Start\/BundleConfig.cs:<\/p>\n<pre><code class=\"cs\">BundleTable.EnableOptimizations = true; <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0440\u0438\u043c:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/077\/e7c\/820\/077e7c820ade1cd084c026288d93be80.jpg\"\/><\/p>\n<p>  \u0414\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 527 \u041a\u0411<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/894\/e36\/b15\/894e36b15ed7847acaaf2f9d7236fb5f.jpg\"\/><\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 251 \u041a\u0411<\/p>\n<p>  \u0422.\u0435. \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u0432 2 \u0440\u0430\u0437\u0430. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u0430 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043c\u0435\u043d\u044c\u0448\u0435, \u0442\u0430\u043a \u0438 \u0431\u043e\u043b\u044c\u0448\u0435, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043c\u044b \u0433\u0440\u0443\u0437\u0438\u043c. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0440\u0438 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0439 \u0440\u0430\u0431\u043e\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043d\u043e\u0432\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432. <\/p>\n<p>  \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 jQuery<br \/>  \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e jquery \u0443\u0436\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d, \u043d\u043e \u0435\u0441\u043b\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0441\u044f, \u0430 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0442\u043e, \u0442\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0433\u043e:<br \/>  Install-Package JQuery<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435, \u043c\u044b \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u0443\u0431\u0440\u0430\u043b\u0438 JQueryUI (<a href=\"http:\/\/jqueryui.com\/\">http:\/\/jqueryui.com\/<\/a>), \u0442\u0430\u043a \u043a\u0430\u043a \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 datepicker, modal \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 bootstrap. \u041d\u043e \u0432 JQueryUI \u0435\u0441\u0442\u044c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u043d\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0442.\u0435. Draggable, Droppable, Resizable, Selectable \u0438 Sortable. \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0438\u0445 \u0432\u044b\u0431\u043e\u0440\u043e\u0447\u043d\u043e:  <\/p>\n<ol>\n<li>\u0422\u0430\u043a \u043a\u0430\u043a \u0434\u043b\u044f Install-Package JQuery.UI.Interactions \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430 \u0432\u0435\u0440\u0441\u0438\u044f jquery &lt; 1.6, \u0442\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/li>\n<li>\u0412\u044b\u0431\u0435\u0440\u0435\u043c custom \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0441 \u0441\u0430\u0439\u0442\u0430 <a href=\"http:\/\/jqueryui.com\/download\/\">jqueryui.com\/download\/<\/a><\/li>\n<li>\u0412\u044b\u0431\u0438\u0440\u0430\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0421ore \u0438 Interactions<\/li>\n<li>\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c <\/li>\n<li>\u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c css-\u0444\u0430\u0439\u043b\u044b \u0432 \/Content\/css<\/li>\n<li>\u041f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u043c js-\u0444\u0430\u0439\u043b\u044b \u0432 \/Scripts (jquery-1.9.1-min.js \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u0438\u0442\u044c \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438)<\/li>\n<li>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432 BundleConfig <br \/> \n<pre><code class=\"cs\">\tbundles.Add(new ScriptBundle(&quot;~\/bundles\/jqueryui&quot;) \t.Include(&quot;~\/Scripts\/jquery-ui-1.*&quot;)); \tbundles.Add(new StyleBundle(&quot;~\/Content\/css\/jqueryui&quot;) .Include(&quot;~\/Content\/jquery-ui-1*&quot;)); <\/code><\/pre>\n<p>  <\/li>\n<li>\u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445.<\/li>\n<li>\u0413\u043e\u0442\u043e\u0432\u043e!<\/li>\n<\/ol>\n<h5>Firebug (Firefox) \u0438 Developer Tool (Chrome)<\/h5>\n<p>  \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0432 Firefox \u0435\u0441\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Firebug, \u0430 \u0432 Chrome \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c Developer Tool. \u042f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u043f\u0440\u0438\u043c\u0435\u0440 \u0441 Developer Tool. \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043d\u0430\u0436\u0430\u0442\u0438\u044e \u043a\u043b\u0430\u0432\u0438\u0448 \u2013<code>Shift-Ctrl-I<\/code>.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0438\u0437\u0443\u0447\u0438\u043c \u0435\u0433\u043e:  <\/p>\n<ul>\n<li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Elements.<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/e08\/2fe\/ba3\/e082feba3a7e75107cf9f7a151115ba0.jpg\"\/><br \/>  \u0417\u0434\u0435\u0441\u044c, \u0432 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442 DOM-\u0434\u0435\u0440\u0435\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u0412 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u2014 \u0441\u0442\u0438\u043b\u0438. \u0421\u0442\u0438\u043b\u0438, \u043a\u0430\u043a \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0445\u043e\u0434\u0443, \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439.\n<\/li>\n<li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Resources <br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/3e5\/eee\/2d9\/3e5eee2d91463b614f32a53f1facfee4.jpg\"\/><br \/>  \u0412 \u043b\u0435\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b, \u0430 \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043d\u0438\u0445\n<\/li>\n<li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Network<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/590\/f88\/7a4\/590f887a42048be144566a085d2fc444.jpg\"\/><br \/>  \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438 \u0442\u0430\u0439\u043c\u0438\u043d\u0433 \u044d\u0442\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u041e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u0430\u043c\u0438 document, css, js \u0444\u0430\u0439\u043b\u044b, \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432. <br \/>  \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c HTTP-\u0437\u0430\u043f\u0440\u043e\u0441, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/f7a\/5f1\/084\/f7a5f1084549aeee10404c85914f751f.jpg\"\/>\n<\/li>\n<li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Sources <br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/6f3\/c79\/3e2\/6f3c793e2936aeac582304cc501a5e59.jpg\"\/><br \/>  \u041e\u0434\u043d\u0430 \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0432\u043a\u043b\u0430\u0434\u043e\u043a. \u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c js-\u0444\u0430\u0439\u043b\u044b, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u0442\u043e\u0447\u043a\u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0430, \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043e\u0442\u043b\u0430\u0434\u043a\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0413\u043e\u0440\u044f\u0447\u0438\u0435 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 F9, F10, F11 \u043a\u0430\u043a \u0432 VisualStudio \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438.\n<\/li>\n<li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Timeline<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/292\/bf9\/c99\/292bf9c99b148665e9bf178192e406e1.jpg\"\/><br \/>  \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u042f \u0435\u0435 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b.\n<\/li>\n<li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Profiles<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/2f3\/0a4\/681\/2f30a468192074a5df6bced922bc5b6e.jpg\"\/><br \/>  \u0414\u043b\u044f \u043f\u0440\u043e\u0444\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442.\u0435. \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u043d\u0435\u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u0448\u0438\u0431\u043e\u043a. \u0422\u0430\u043a\u0436\u0435, \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b.\n<\/li>\n<li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Audits<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/3f4\/2cd\/2c0\/3f42cd2c02181248b3cee509a85b3c26.jpg\"\/><br \/>  \u041d\u0430 \u044d\u0442\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e. \u0422.\u0435. \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0443\u0442 \u043a \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0441\u0436\u0430\u0442\u0438\u044f, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043b\u0438\u0448\u043d\u0438\u0445 \u0441\u0442\u0440\u043e\u043a css.\n<\/li>\n<li>\u0412\u043a\u043b\u0430\u0434\u043a\u0430 Console<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/7f7\/f71\/dee\/7f7f71deecc0d8733f29088f94af7eb5.jpg\"\/><br \/>  \u041e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0438 \u043e\u043a\u043d\u043e \u0432\u044b\u0432\u043e\u0434\u0430 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0414\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u043b\u043e\u0433\u0430 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 console.log(\u201cmessage\u201d).\n<p>  <i>\u041e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u044d\u0442\u0443 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0432 IE, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0441\u043e\u043b\u044c \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0442\u0430, \u0442\u043e \u0432\u044b\u0434\u0430\u0435\u0442 \u043e\u0448\u0438\u0431\u043a\u0443. <\/i>  <\/li>\n<\/ul>\n<h5>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b \u0438 \u043e\u0431\u0445\u043e\u0434<\/h5>\n<p>  JQuery \u2013 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043d\u0430\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0439 \u043a\u043e\u0434 \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b. \u041a \u0442\u043e\u043c\u0443 \u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043b\u043e\u0433\u0438\u0447\u043d\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439. <\/p>\n<p>  \u0412 \u043e\u0441\u043d\u043e\u0432\u0435 \u0432\u0441\u0435\u0433\u043e \u043b\u0435\u0436\u0438\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0445\u0441\u044f \u0432 DOM (document object model) \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0430\u0434 \u043d\u0438\u043c\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a: \u043d\u0430\u0437\u043d\u0430\u0447\u0438\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043c\u0435\u0441\u0442\u043e\u043f\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 html, \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u043f\u0438\u0448\u0435\u0442\u0441\u044f \u043a\u0430\u043a:<\/p>\n<p>  <code>$([\u201c\u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430\u201d][, \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430]) <\/code><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430 \u043d\u0435 \u0437\u0430\u0434\u0430\u043d\u0430, \u0442\u043e \u0438\u0449\u0435\u0442\u0441\u044f \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0443: $(document). \u042d\u0442\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u0443\u0437\u0435\u043b \u0432\u0441\u0435\u0433\u043e DOM.<br \/>  \u0415\u0441\u043b\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u044b\u0431\u043e\u0440\u0430 \u0437\u0430\u0434\u0430\u043d\u0430, \u0442\u043e \u0438\u0449\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u044d\u0442\u043e\u0433\u043e \u0443\u0437\u043b\u0430.<br \/>  \u041f\u0440\u0430\u0432\u0438\u043b\u043e \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430\u043c \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f css \u0441\u0432\u043e\u0439\u0441\u0442\u0432:  <\/p>\n<ul>\n<li><code>$(\u201cdiv\u201d) <\/code>\u2013 \u0432\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 div-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432<\/li>\n<li><code>$(\u201c.class\u201d)<\/code> \u2013 \u0432\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c class<\/li>\n<li><code>$(\u201c.class .class1\u201d)<\/code> \u2013 \u0432\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c class1 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445\u0441\u044f \u0432 \u043a\u043b\u0430\u0441\u0441\u0435 class<\/li>\n<li><code>$(\u201c.class.class1\u201d)<\/code> \u2013 \u0432\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 \u0438\u043c\u0435\u044e\u0449\u0438\u043c\u0441\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u043c class1 \u0438 class <\/li>\n<li><code>$(\u201c#Id1\u201d)<\/code> \u2013 \u0432\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 (\u043e\u0434\u043d\u043e\u0433\u043e) \u0441 id =Id1<\/li>\n<li><code>$(\u201c[type=\u2019password\u2019]\u201d)<\/code> \u2013 \u0432\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c type=\u2019password\u2019<\/li>\n<li><code>$(\u201cdiv\u201d, $(\u201c#MainPopup\u201d))<\/code> \u2013 \u0432\u044b\u0431\u043e\u0440 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 div \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0438\u0445\u0441\u044f \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u0441 id=MainPopup<\/li>\n<li><code>$(\u201cinput[type=\u2019checkbox\u2019]:checked\u201d)<\/code> \u2013 \u0432\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0432\u043e\u0434\u0430 \u0442\u0438\u043f\u0430 checkbox, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u044b \u0433\u0430\u043b\u043e\u0447\u043a\u043e\u0439.<\/li>\n<\/ul>\n<p>  \u0414\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0430\u0439\u0434\u0435\u043d \u0438\u043b\u0438 \u043d\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e length:  <\/p>\n<pre><code class=\"javascript\">if($(&quot;#Id1&quot;).length == 0)          {             alert(&quot;\u042d\u043b\u0435\u043c\u0435\u043d\u0442 \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d&quot;)         } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043f\u0440\u043e\u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0432\u0432\u0435\u0440\u0445 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 .closest(), .parent() \u0438\u043b\u0438 .parents():  <\/p>\n<ul>\n<li><code>parent()<\/code>\u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f (\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0433\u043e)<\/li>\n<li><code>parents(selector)<\/code> \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u0441\u0435\u0445 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 (\u0435\u0441\u043b\u0438 \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e body \u0438 html)<\/li>\n<li><code>closest(selector)<\/code> \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u043e\u0442\u0432\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443, \u043f\u0440\u0438\u0447\u0435\u043c \u0441\u0430\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0438\u043c \u0436\u0435.<\/li>\n<\/ul>\n<p>  \u2003  <\/p>\n<h5>\u0421\u043e\u0431\u044b\u0442\u0438\u044f<\/h5>\n<p>  \u0414\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043c\u044b \u043d\u0430\u0437\u043d\u0430\u0447\u0430\u0435\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:  <\/p>\n<pre><code class=\"javascript\">$(&quot;.button&quot;).click(function () { alert(&quot;Button clicked&quot;);        }); <\/code><\/pre>\n<p>  \u041a\u0430\u043a\u0438\u0435 \u0435\u0441\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u044f:  <\/p>\n<ul>\n<li>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<br \/> \n<ul>\n<li><b>.error()<\/b> \u2013 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/li>\n<li><b>.resize()<\/b> \u2013 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u0434\u0430\u043d\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0431\u044b\u043b\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e. <\/li>\n<li><b>.scroll()<\/b> \u2013 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u00ab\u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043b\u0438\u00bb (\u0442\u0443\u0442 \u043d\u0430\u0434\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433, \u0442.\u0435. \u0435\u0441\u043b\u0438 \u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0441\u0442\u0438\u043b\u044c \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d overflow:scroll \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043b\u0438).<\/li>\n<\/ul>\n<p>  <\/li>\n<li>\u0417\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<br \/> \n<ul>\n<li><b>.load()<\/b> \u2013 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 (\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438) src \u0443 \u0442\u0435\u0433\u0430 img.<\/li>\n<li><b>.ready()<\/b> \u2013 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 DOM \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041c\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043f\u0440\u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u043e\u0432.<\/li>\n<li><b>.uload() <\/b>\u2013 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0445\u043e\u0447\u0435\u0442 \u0437\u0430\u043a\u0440\u044b\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. <\/li>\n<\/ul>\n<p>  <\/li>\n<li>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u0444\u043e\u0440\u043c\u044b<br \/> \n<ul>\n<li><b>.blur()<\/b> \u2013 \u043f\u0440\u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u0444\u043e\u043a\u0443\u0441\u0430 \u0443 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430<\/li>\n<li><b>.change()<\/b> \u2013 \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0432\u044b\u0431\u043e\u0440\u0430 \u0443 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u0438\u043b\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430<\/li>\n<li><b>.focus()<\/b> \u2013 \u043f\u0440\u0438 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0435\u043d\u0438\u0438 \u0444\u043e\u043a\u0443\u0441\u0430 \u0443 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430<\/li>\n<li><b>.select()<\/b> \u2013 \u043f\u0440\u0438 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u043b\u0438 \u0447\u0430\u0441\u0442\u0438 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<\/li>\n<li><b>.submit()<\/b> \u2013 \u043f\u0440\u0438 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u0438 \u0444\u043e\u0440\u043c\u044b \u0432\u0432\u043e\u0434\u0430<\/li>\n<\/ul>\n<p>  <\/li>\n<li>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b<br \/> \n<ul>\n<li><b>.focusin()<\/b> \u2013 \u043f\u0440\u0438 \u043f\u0440\u0438\u043e\u0431\u0440\u0435\u0442\u0435\u043d\u0438\u0438 \u0444\u043e\u043a\u0443\u0441\u0430 (\u0430\u043d\u0430\u043b\u043e\u0433 focus)<\/li>\n<li><b>.focusout()<\/b> \u2013 \u043f\u0440\u0438 \u043f\u043e\u0442\u0435\u0440\u0435 \u0444\u043e\u043a\u0443\u0441\u0430 (\u0430\u043d\u0430\u043b\u043e\u0433 blur)<\/li>\n<li><b>.keydown()<\/b> \u2013 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0438 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u043a\u0430 \u043a\u043b\u0430\u0432\u0438\u0448\u0430 \u043d\u0430\u0436\u0430\u0442\u0430<\/li>\n<li><b>.keypress()<\/b> \u2013 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0438<\/li>\n<li><b>.keyup()<\/b> \u2013 \u043f\u0440\u0438 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043d\u0438\u0438 \u043a\u043b\u0430\u0432\u0438\u0448\u0438<\/li>\n<\/ul>\n<p>  <\/li>\n<li>\u0421\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b\u0448\u0438<br \/> \n<ul>\n<li><b>.click()<\/b> \u2013 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043b\u0435\u0432\u043e\u0439 \u043a\u043d\u043e\u043f\u043a\u0438 \u043c\u044b\u0448\u0438 \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435<\/li>\n<li><b>.dblclick()<\/b> \u2013 \u043f\u0440\u0438 \u0434\u0432\u043e\u0439\u043d\u043e\u043c \u043a\u043b\u0438\u043a\u0435 \u043c\u044b\u0448\u0438<\/li>\n<li><b>.hover()<\/b> \u2013 \u043f\u0440\u0438 \u043d\u0430\u0432\u0435\u0434\u0435\u043d\u0438\u0438 \u043c\u044b\u0448\u0438<\/li>\n<li><b>.mousedown(), .mouseup(), .mouseenter(), .mouseleave(), .mousemove(), .mouseout(), .mouseover()<\/b> \u2013 \u0432\u0441\u0435 \u044d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u044b\u0448\u0438 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/li>\n<\/ul>\n<p>  <\/li>\n<\/ul>\n<p>  \u041d\u0430\u0434\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u043d\u043e\u0432\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0445\u043e\u0442\u044f \u0438 \u043f\u043e\u0434\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u0434 \u0432\u044b\u0431\u043e\u0440 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u043b\u0441\u044f \u0440\u0430\u043d\u0435\u0435. \u041d\u043e \u0435\u0441\u043b\u0438 \u043c\u044b, \u043f\u043e \u0432\u0442\u043e\u0440\u043e\u043c\u0443 \u0440\u0430\u0437\u0443 \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c, \u0442\u043e \u043d\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445, \u0433\u0434\u0435 \u0443\u0436\u0435 \u0431\u044b\u043b\u0430 \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u044d\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0434\u0432\u0430\u0436\u0434\u044b. <br \/>  \u2003<br \/>  \u0414\u043b\u044f \u0437\u0430\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e\u0439 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e:<\/p>\n<pre><code class=\"javascript\">$(document).on(&quot;click&quot;, &quot;.button&quot;, function () { alert(&quot;Button clicked&quot;); }); <\/code><\/pre>\n<h5>\u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/h5>\n<p>  \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438:  <\/p>\n<ul>\n<li><b>.val(value)<\/b> \u2013 \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 value, \u0434\u043b\u044f \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 select\\option \u2013 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <\/li>\n<li><b>.val() <\/b>\u2013 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 value, \u0438\u043b\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430<\/li>\n<li><b>.attr(\u201cattr\u201d)<\/b> \u2013 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 attr<\/li>\n<li><b>.attr(\u201cattr\u201d, \u201cvalue\u201d)<\/b> \u2013 \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 value \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 attr <\/li>\n<li><b>.data(\u201cid\u201d)<\/b> \u2013 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 data-id<\/li>\n<li><b>.data(\u201cid\u201d, \u201c20\u201d)<\/b> \u2013 \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 20 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 data-id<\/li>\n<li><b>.css(\u201cwidth\u201d, \u201c120px\u201d)<\/b> \u2013 \u0437\u0430\u0434\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u044f width:120px<\/li>\n<li><b>.css(\u201cwidth\u201d) <\/b>\u2013 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 width <\/li>\n<li><b>.addClass()\/.removeClass()\/.toggleClass()<\/b> \u2013 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c\/\u0443\u0434\u0430\u043b\u0438\u0442\u044c\/\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u043a\u043b\u0430\u0441\u0441 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430<\/li>\n<\/ul>\n<h5>\u041e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438<\/h5>\n<p>  \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438:  <\/p>\n<ul>\n<li><b>.show()\\.hide() <\/b>\u2013 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\\\u0441\u043a\u0440\u044b\u0442\u044c<\/li>\n<li><b>.html(htmltext)<\/b> \u2013 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0445 innerHtml \u0437\u0430\u0434\u0430\u0442\u044c html \u0442\u0435\u043a\u0441\u0442 <\/li>\n<li><b>.text(text)<\/b> \u2013 \u0432 \u0442\u0435\u043a\u0441\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0437\u0430\u0434\u0430\u0442\u044c text<\/li>\n<li><b>.empty()<\/b> \u2013 \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430<\/li>\n<li><b>.remove()<\/b> \u2013 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430<\/li>\n<li><b>.append()<\/b> \u2013 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c html-\u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043f\u043e\u0441\u043b\u0435 \u0432\u0441\u0435\u0445 \u0441\u0432\u043e\u0438\u0445 \u043b\u0438\u0441\u0442\u044c\u0435\u0432<\/li>\n<li><b>.prepend()<\/b> \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c html-\u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430 \u043f\u0435\u0440\u0435\u0434 \u0432\u0441\u0435\u043c\u0438 \u0441\u0432\u043e\u0438\u043c\u0438 \u043b\u0438\u0441\u0442\u044c\u044f\u043c\u0438<\/li>\n<li><b>.after()\/.before()<\/b> \u2013 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c html-\u0442\u0435\u043a\u0441\u0442 \u0438\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0441\u043b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\/\u043f\u0435\u0440\u0435\u0434 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c<\/li>\n<li><b>.appendTo()\/.prependTo()<\/b> \u2013 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u043d\u0435\u0446\/\u043d\u0430\u0447\u0430\u043b\u043e \u043b\u0438\u0441\u0442\u044c\u0435\u0432 \u0437\u0430\u0434\u0430\u043d\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430<\/li>\n<\/ul>\n<h5>Ajax <\/h5>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u0443\u044e \u0438 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e (\u0432 99% \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u044f \u043e\u0431\u0445\u043e\u0434\u0438\u043b\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u044e).  <\/p>\n<pre><code class=\"javascript\">$.ajax({      type: &quot;GET&quot;,             url: &quot;\/ajaxUrl&quot;,             data: { id: id },             beforeSend: function () {                 \/* \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0434 *\/             },             success: function (data) {                 \/* \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 *\/             },             error: function () {                 \/* \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0443 *\/             }         }); <\/code><\/pre>\n<p>  \u0415\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043d\u043e \u043a \u043d\u0438\u043c \u043f\u0440\u0438\u0431\u0435\u0433\u0430\u0442\u044c \u0441\u0442\u043e\u0438\u0442 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445.<br \/>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b:  <\/p>\n<ul>\n<li><b>type.<\/b> GET \u0438\u043b\u0438 POST \u0437\u0430\u043f\u0440\u043e\u0441.<\/li>\n<li><b>url.<\/b> \u0415\u0441\u043b\u0438 \u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u0434\u0430\u0442\u044c, \u0438\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0442\u043e ajax-\u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/li>\n<li><b>data.<\/b> \u0412 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 json \u0438\u043b\u0438 get \u2014 \u043f\u043e\u0434\u043e\u0431\u043d\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u0442\u0438\u043f\u0430 \u00abid=1&#038;value=2\u00bb. \u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0444\u043e\u0440\u043c\u044b:<br \/> \n<pre><code class=\"javascript\">data: $(&quot;form&quot;).serialize() <\/code><\/pre>\n<p>  <i>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043d\u0430\u0434\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0435 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u043e\u0432 \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <br \/>  <code>traditional : true<\/code><\/i><br \/>  <b>beforeSend.<\/b> \u0421\u043e\u0431\u044b\u0442\u0438\u0435, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0449\u0435\u0441\u044f \u043f\u0435\u0440\u0435\u0434 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u044b.<br \/>  <b>success.<\/b> \u0421\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0451 \u0445\u043e\u0440\u043e\u0448\u043e \u0438 \u0432 data \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<br \/>  <b>error.<\/b> \u0421\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442, \u0435\u0441\u043b\u0438 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0431\u044b\u043b \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u0442 200 OK.  <\/li>\n<\/ul>\n<h5>Ajax-login \u0444\u043e\u0440\u043c\u0430.<\/h5>\n<p>  \u041a\u0443\u0447\u0430 \u0442\u0435\u043e\u0440\u0438\u0438, \u043f\u043e\u0440\u0430 \u0431\u044b \u0438 \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c. \u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0432\u0442\u043e\u0440\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u0432\u0445\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u043e\u043c\u0443 \u0432\u0445\u043e\u0434\u0443 \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041f\u0440\u0438 \u043a\u043b\u0438\u043a\u0435 \u043d\u0430 \u00ab\u0412\u0445\u043e\u0434\u00bb \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0412\u0445\u043e\u0434\u0430, \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0435\u0435 \u0432\u044b\u0441\u043a\u0430\u043a\u0438\u0432\u0430\u0435\u0442 \u043f\u043e\u043f\u0430\u043f\u043e\u043a\u043e\u0448\u043a\u043e \u0441 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u0432\u0432\u0435\u0441\u0442\u0438 \u043b\u043e\u0433\u0438\u043d \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441. \u041f\u0440\u0438 \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u043e\u043c \u0432\u0432\u043e\u0434\u0435, \u0444\u043e\u0440\u043c\u0430 \u0432\u044b\u0434\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435. \u041e\u0431\u044b\u0447\u043d\u0443\u044e \u0444\u043e\u0440\u043c\u0443 \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \/Login \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c, \u043e\u043d\u0430 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f. <br \/>  \u041f\u043e\u043f\u0430\u043f \u0444\u043e\u0440\u043c\u044b \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0430\u0441\u0442\u043e, \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440\u043e\u0439 \u2013 \u0432\u044b\u0437\u0432\u0430\u0442\u044c Popup \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 \u0442\u0430\u043a\u043e\u043c\u0443-\u0442\u043e. \u0422\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043f\u0430\u043f \u2013 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0434\u0438\u043d, \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0432 _Layout.cshtml (\/Areas\/Default\/Views\/Shared\/_Layout.cshtml):  <\/p>\n<pre><code class=\"html\">  &lt;div id=&quot;PopupWrapper&quot;&gt;&lt;\/div&gt; <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 common.js (\/Scripts\/common.js):  <\/p>\n<pre><code class=\"javascript\">this.showPopup = function (url, callback)     {         $.ajax({             type: &quot;GET&quot;,             url: url,             success: function (data)             {                 $(&quot;.modal-backdrop&quot;).remove();                 var popupWrapper = $(&quot;#PopupWrapper&quot;);                 popupWrapper.empty();                 popupWrapper.html(data);                 var popup = $(&quot;.modal&quot;, popupWrapper);                 $(&quot;.modal&quot;, popupWrapper).modal();                 callback(popup);             }         });     } <\/code><\/pre>\n<p>  , \u0433\u0434\u0435 .modal() \u2013 \u044d\u0442\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0438\u0437 bootstrap.js.<br \/>  \u2003<br \/>  \u0422\u0430\u043a \u043a\u0430\u043a \u0412\u0445\u043e\u0434 \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0442\u043e \u0441\u043b\u0435\u0434\u0443\u0449\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0442\u043e\u0436\u0435 \u0432 common.js:   <\/p>\n<pre><code class=\"javascript\">  this.init = function () {         $(&quot;#LoginPopup&quot;).click(function () {             _this.showPopup(&quot;\/Login\/Ajax&quot;, function (modal)             {             });         });     } <\/code><\/pre>\n<p>  \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a (\/Areas\/Default\/Controller\/LoginController.cs):  <\/p>\n<pre><code class=\"cs\">[HttpGet]         public ActionResult Ajax()         {             return View(new LoginView());         }          [HttpPost]         public ActionResult Ajax(LoginView loginView)         {             if (ModelState.IsValid)             {                 var user = Auth.Login(loginView.Email, loginView.Password, loginView.IsPersistent);                 if (user != null)                 {                     return RedirectToAction(&quot;Index&quot;, &quot;Home&quot;);                 }                 ModelState[&quot;Password&quot;].Errors.Add(&quot;\u041f\u0430\u0440\u043e\u043b\u0438 \u043d\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442&quot;);             }             return View(loginView);         } <\/code><\/pre>\n<p>  \u041e\u043d \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Index, \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0440\u0443\u0433\u043e\u0439 View \u2013 \u00abAjax\u00bb, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0433\u043e (\/Areas\/Default\/Views\/Login\/Ajax.cshtml):<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/2ce\/9b9\/26a\/2ce9b926a9d91a85780e355233ad495b.jpg\"\/><\/p>\n<pre><code class=\"html\">@model LessonProject.Models.ViewModels.LoginView  &lt;div class=&quot;modal hide fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-hidden=&quot;true&quot;&gt;     &lt;div class=&quot;modal-header&quot;&gt;         &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;\u00d7&lt;\/button&gt;         &lt;h3 id=&quot;myModalLabel&quot;&gt;Login&lt;\/h3&gt;     &lt;\/div&gt;     &lt;div class=&quot;modal-body&quot;&gt;         @using (Html.BeginForm(&quot;Ajax&quot;, &quot;Login&quot;, FormMethod.Post, new { @class = &quot;form-horizontal&quot;, id = &quot;LoginForm&quot; }))         {             &lt;fieldset&gt;                 &lt;legend&gt;\u0412\u0445\u043e\u0434&lt;\/legend&gt;                 &lt;div class=&quot;control-group&quot;&gt;                     &lt;label class=&quot;control-label&quot; for=&quot;Email&quot;&gt;                         Email&lt;\/label&gt;                     &lt;div class=&quot;controls&quot;&gt;                         @Html.TextBox(&quot;Email&quot;, Model.Email, new { @class = &quot;input-xlarge&quot; })                         &lt;p class=&quot;help-block&quot;&gt;\u0412\u0432\u0435\u0434\u0438\u0442\u0435 Email&lt;\/p&gt;                         @Html.ValidationMessage(&quot;Email&quot;)                     &lt;\/div&gt;                  &lt;\/div&gt;                 &lt;div class=&quot;control-group&quot;&gt;                     &lt;label class=&quot;control-label&quot; for=&quot;Password&quot;&gt;                         \u041f\u0430\u0440\u043e\u043b\u044c&lt;\/label&gt;                     &lt;div class=&quot;controls&quot;&gt;                         @Html.Password(&quot;Password&quot;, Model.Password, new { @class = &quot;input-xlarge&quot; })                         @Html.ValidationMessage(&quot;Password&quot;)                     &lt;\/div&gt;                 &lt;\/div&gt;             &lt;\/fieldset&gt;         }     &lt;\/div&gt;     &lt;div class=&quot;modal-footer&quot;&gt;         &lt;button class=&quot;btn&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Close&lt;\/button&gt;         &lt;button class=&quot;btn btn-primary&quot; id=&quot;LoginButton&quot;&gt;Login&lt;\/button&gt;     &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 id \u0444\u043e\u0440\u043c\u044b LoginForm \u0438 id \u043a\u043d\u043e\u043f\u043a\u0438 LoginButton<\/p>\n<p>  \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u0432\u044b\u0437\u043e\u0432 \u0432 UserLogin.cshtml (\/Areas\/Default\/Views\/Home\/UserLogin.cshtml):  <\/p>\n<pre><code class=\"html\">  &lt;li&gt;&lt;span class=&quot;btn btn-link&quot; id=&quot;LoginPopup&quot;&gt;\u0412\u0445\u043e\u0434&lt;\/span&gt;&lt;\/li&gt; <\/code><\/pre>\n<p>  \u0412 common.js \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 LoginButton, \u043f\u0440\u0438 \u0432\u044b\u0437\u043e\u0432\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043d\u0430 $(\u201c#LoginButton\u201d).click(\u2026) (\/Scripts\/common.js):  <\/p>\n<pre><code class=\"javascript\">this.init = function () {         $(&quot;#LoginPopup&quot;).click(function () {             _this.showPopup(&quot;\/Login\/Ajax&quot;, initLoginPopup);         });     } \u2026    function initLoginPopup(modal) {         $(&quot;#LoginButton&quot;).click(function () {             $.ajax({                 type: &quot;POST&quot;,                 url: &quot;\/Login\/Ajax&quot;,                 data : $(&quot;#LoginForm&quot;).serialize(),                 success: function (data) {                     showModalData(data);                     initLoginPopup(modal);                 }             });         });     }      function showModalData(data, callback) {         $(&quot;.modal-backdrop&quot;).remove();         var popupWrapper = $(&quot;#PopupWrapper&quot;);         popupWrapper.empty();         popupWrapper.html(data);         var popup = $(&quot;.modal&quot;, popupWrapper);         $(&quot;.modal&quot;, popupWrapper).modal();         if (callback != undefined) {             callback(popup);         }     } <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 <code>initLoginPopup<\/code>. \u0418 \u0442\u0443\u0442 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u043b\u0435\u043c\u043c\u0430. \u0422\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438 \u0443\u0434\u0430\u0447\u043d\u043e\u043c \u0432\u0445\u043e\u0434\u0435 \u043d\u0430\u043c \u043d\u0435 \u043d\u0430\u0434\u043e \u0447\u0442\u043e\u0431\u044b \u0432 PopupWrapper \u0433\u0440\u0443\u0437\u0438\u043b\u0430\u0441\u044c \u043d\u043e\u0432\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 (\u0438\u043b\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u043e\u0448\u0438\u0431\u043a\u043e\u0439), \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u043b\u0430\u0441\u044c. <br \/>  \u2003<br \/>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0445\u0438\u0442\u0440\u043e\u0441\u0442\u044c. \u0412 \/Areas\/Default\/Views\/Shared\/ \u0434\u043e\u0431\u0430\u0432\u0438\u043c _Ok.cshtml, \u0441\u0443\u0442\u044c \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:  <\/p>\n<pre><code class=\"html\">&lt;script&gt;     window.location.reload(); &lt;\/script&gt; <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0443\u0434\u0430\u0447\u043d\u043e\u043c \u0432\u0445\u043e\u0434\u0435 \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u044d\u0442\u043e\u0442 View. \u041f\u0440\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0432 \u0434\u0435\u0440\u0435\u0432\u043e DOM \u0432 \u0441\u0442\u0440\u043e\u043a\u0435   <\/p>\n<pre><code class=\"javascript\">popupWrapper.html(data); <\/code><\/pre>\n<p>  \u0441\u043a\u0440\u0438\u043f\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f \u0438 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432. \u0418\u0437\u043c\u0435\u043d\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 (\/Areas\/Default\/Controllers\/LoginController.cs):  <\/p>\n<pre><code class=\"cs\">var user = Auth.Login(loginView.Email, loginView.Password, loginView.IsPersistent); if (user != null) {     return View(&quot;_Ok&quot;); } <\/code><\/pre>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442! <\/p>\n<h5>\u0418\u0442\u043e\u0433<\/h5>\n<p>  \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043b\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0432\u0435\u0440\u0441\u0442\u043a\u0438 \u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043d\u043e \u044d\u0442\u043e \u043b\u0438\u0448\u044c \u043c\u0430\u043b\u0430\u044f \u0442\u043e\u043b\u0438\u043a\u0430 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0432\u0435\u0440\u0441\u0442\u043a\u0435, \u0441\u0442\u0438\u043b\u044f\u0445 \u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0432 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.<br \/>  \u041c\u044b \u043d\u0430\u0443\u0447\u0438\u043b\u0438\u0441\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u043b\u0430\u0434\u0447\u0438\u043a\u043e\u043c \u0432 Chrome \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c ajax \u0437\u0430\u043f\u0440\u043e\u0441. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u044d\u0442\u043e\u0442 \u0432\u043e\u043f\u0440\u043e\u0441 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c.<br \/>  \u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:<br \/>  <a href=\"http:\/\/jquery.com\">http:\/\/jquery.com<\/a><br \/>  <a href=\"http:\/\/habrahabr.ru\/post\/161895\/\">http:\/\/habrahabr.ru\/post\/161895\/<\/a><br \/>  <a href=\"http:\/\/habrahabr.ru\/post\/154687\/\">http:\/\/habrahabr.ru\/post\/154687\/<\/a><br \/>  <a href=\"http:\/\/twitter.github.com\/bootstrap\/\">http:\/\/twitter.github.com\/bootstrap\/<\/a><br \/>  <a href=\"http:\/\/habrahabr.ru\/post\/160177\/\">http:\/\/habrahabr.ru\/post\/160177\/<\/a><\/p>\n<p>  \u0412\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"https:\/\/bitbucket.org\/chernikov\/lessons\">https:\/\/bitbucket.org\/chernikov\/lessons<\/a>    \t \t\t   \t<\/p>\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\/176053\/\"> http:\/\/habrahabr.ru\/post\/176053\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t<b>\u0426\u0435\u043b\u044c \u0443\u0440\u043e\u043a\u0430<\/b>: \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 html, js \u0438 css \u0444\u0430\u0439\u043b\u0430\u043c\u0438. Bootstrap \u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 css. \u0421\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 js-\u0444\u0430\u0439\u043b\u043e\u0432. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 jQuery, \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b, \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438 \u0434\u0440. addClass, removeClass, attr, data, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 dom-\u043e\u0431\u044a\u0435\u043a\u0442\u0430, ajax.<\/p>\n<p>  \u041d\u0430\u043a\u043e\u043d\u0435\u0446 \u043c\u044b \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0430\u0435\u043c \u043a \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0436\u0435 \u0432 \u043c\u0435\u043d\u044c\u0448\u0435\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u0430 \u0441 asp.net mvc, \u043d\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0432\u0430\u0436\u043d\u0430 \u0434\u043b\u044f \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438.<\/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-176053","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/176053","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=176053"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/176053\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=176053"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=176053"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=176053"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}