{"id":349002,"date":"2023-06-19T09:02:37","date_gmt":"2023-06-19T09:02:37","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=349002"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2023-06-19T09:02:37","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=349002","title":{"rendered":"JIRA \u0438 JavaScript: \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figure>\n

\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0431\u0430\u0437\u0435 JavaScript \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0435\u0435 \u0432 \u044d\u043a\u0440\u0430\u043d \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 JIRA.<\/p>\n

\u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u0447\u0435\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043f\u043e\u043b\u044f JIRA. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u044f. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.\u00a0\u00a0<\/p>\n

\u041f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f:<\/strong><\/p>\n

\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0442\u0438\u043f\u0430 «\u0437\u0430\u0434\u0430\u0447\u0430» \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 «\u0441\u0435\u0442\u0435\u0432\u0430\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430».\u00a0\u00a0<\/p>\n

\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d JsIncluder<\/a> \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b VK. \u0415\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 — \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 JS \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 JIRA, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 front-end.<\/p>\n

\u041f\u043b\u0430\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h2>\n

1. \u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c HTML \u0438 CSS-\u043a\u043e\u0434 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043a\u0435\u043b\u0435\u0442\u0430 \u0444\u043e\u0440\u043c\u044b (\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c, \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0432\u0430\u043c \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435).\u00a0\u00a0<\/p>\n

<\/figure>\n

2. \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043a\u043e\u0434 \u0432 JavaScript, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n

3. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0432 JIRA \u043f\u043e\u043b\u0435 \u00ab\u0417\u0430\u043f\u0440\u043e\u0441 \u0441\u0435\u0442\u0435\u0432\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u00bb \u0442\u0438\u043f\u0430 textarea \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430 wiki<\/u><\/a>. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0430\u0448\u0435\u0439 \u0444\u043e\u0440\u043c\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b:\u00a0\u00a0<\/p>\n

<\/figure>\n

4. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n

<\/figure>\n
<\/figure>\n

\u041a\u043d\u043e\u043f\u043a\u0430 «\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c» \u043d\u0430 \u0444\u043e\u0440\u043c\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439. \u041f\u043e\u043b\u044f, \u043d\u0435 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0438\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e, \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c:<\/p>\n

<\/figure>\n

\u0415\u0441\u043b\u0438 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0435\u0437 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f, \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435:<\/p>\n

<\/figure>\n

\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u00a0<\/h3>\n

HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0444\u043e\u0440\u043c\u044b.<\/p>\n

\u041a\u043b\u0430\u0441\u0441 «required» \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432 JavaScript. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0443\u043a\u0430\u0437\u0430\u043d, \u0442\u043e \u043f\u043e\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u0438\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u043e\u043f\u0446\u0438\u044f. <\/p>\n

\u0410\u0442\u0440\u0438\u0431\u0443\u0442 «type» \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 JIRA:<\/p>\n

<div class=\"access-container\">     <form>         <h2>\u0417\u0430\u043f\u0440\u043e\u0441 \u0441\u0435\u0442\u0435\u0432\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 <span id=\"removerule\" class=\"aui-icon aui-icon-small aui-iconfont-delete\" title=\"\u0423\u0434\u0430\u043b\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e\">remove rule<\/span> <\/h2>         <hr>         <div class=\"row\">             <h4 class=\"title-left\">\u041a\u0442\u043e \u0432\u043b\u0430\u0434\u0435\u043b\u0435\u0446 \u0441\u0435\u0440\u0432\u0438\u0441\u0430<\/h4>             <div class=\"input-group\">                 <input class=\"required\" id=\"access-input-fio\" type=\"text\" placeholder=\"\u0424\u0418\u041e\/\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u0430\" fieldName=\"\u0412\u043b\u0430\u0434\u0435\u043b\u0435\u0446 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\"\/>             <\/div>         <\/div>         <div class=\"row\">             <h4 class=\"title-left\">\u0414\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f<\/h4>             <div class=\"input-group\">                 <input class=\"required\" id=\"access-input-description\" type=\"text\" placeholder=\"\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0438 \u0441 \u0447\u0435\u043c \u043e\u043d \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442\" fieldName=\"\u0414\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\"\/>             <\/div>         <\/div>         <div class=\"row\">             <div class=\"input-group\">                     <input id=\"terms-subs\" type=\"checkbox\" fieldName=\"\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u043f\u043e\u0434\u0441\u0435\u0442\u0438\"\/>                 <label for=\"terms-subs\">\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u043f\u043e\u0434\u0441\u0435\u0442\u0438<\/label>                  <\/div>             <div class=\"col-half\">                 <div class=\"input-group\" id=\"input-subs\">                     <input class=\"required\" id=\"access-input-subnet\" type=\"text\" placeholder=\"\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u0435\u0442\u044c\" fieldName=\"\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u0435\u0442\u044c\"\/>                 <\/div>             <\/div>         <\/div>         <div class=\"row\">             <div class=\"col-half\">                 <div class=\"input-group\" id=\"input-hubs\">                     <input class=\"required\" id=\"access-input-hosts\" type=\"number\" label=\"input-hubs\" placeholder=\"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0445\u043e\u0441\u0442\u043e\u0432\" fieldName=\"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0445\u043e\u0441\u0442\u043e\u0432\"\/>                 <\/div>             <\/div>         <\/div>         <div class=\"row\">                     <div class=\"input-group\">                 <input id=\"terms-internet\" type=\"checkbox\" fieldName=\"\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\"\/>                 <label for=\"terms-internet\">\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442<\/label>             <\/div>         <\/div>         <div class=\"row\">                 <div class=\"input-group\" id=\"internet-select-div-access\">                     <select class=\"required\" id=\"internet-select-access\" type=\"select\" fieldName=\"\u0418\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\">                         <option selected value=\"None\">None<\/option>                         <option value=\"1000\">\u041f\u043e\u043b\u043d\u044b\u0439<\/option>                         <option value=\"1001\">\u041a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0430\u0434\u0440\u0435\u0441\u0430\u043c<\/option>                     <\/select>                 <\/div>             <div class=\"col-half\">                 <div class=\"input-group\" id=\"internet-input-sites\">                     <input class=\"required\" id=\"access-input-addresses\" type=\"text2\" label=\"input-internet-sites\" placeholder=\"\u0421\u043f\u0438\u0441\u043e\u043a \u0430\u0434\u0440\u0435\u0441\u043e\u0432 (\u0441\u0430\u0439\u0442\u043e\u0432)\" fieldName=\"\u0414\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043a \u0430\u0434\u0440\u0435\u0441\u0430\u043c\"\/>                 <\/div>             <\/div>         <\/div>         <div class=\"row\">             <div class=\"input-group\" id=\"internet-timelimit-access\">                 <input id=\"terms-internet-access\" type=\"checkbox\" fieldName=\"\u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\"\/>                 <label for=\"terms-internet-access\">\u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f<\/label>             <\/div>             <div class=\"col-half\">                 <div class=\"input-group\" id=\"internet-timelimitdata-access\">                     <p style=\"font-size: 11px; color: gray\">\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430<\/p>                     <input class=\"required\" id=\"access-input-datetime\" type=\"datetime-local\" placeholder=\"\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430\" fieldName=\"\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430\"\/>                 <\/div>             <\/div>         <\/div>          <div class=\"row\">             <h4>IP \u0410\u0434\u0440\u0435\u0441\/\u0430 \u0438\u043b\u0438 \u043f\u043e\u0434\u0441\u0435\u0442\u0438 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f<\/h4>             <p style=\"font-size: 11px; color: gray\">IP \u0410\u0434\u0440\u0435\u0441\u0430\/ URL \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/p>             <div class=\"col-half\">                 <div class=\"input-group\">                     <input class=\"required\" id=\"access-input-source\" type=\"text2\" label=\"input-url-sites-input\" placeholder=\"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\" fieldName=\"IP \u0410\u0434\u0440\u0435\u0441\/\u0430 \u0438\u043b\u0438 \u043f\u043e\u0434\u0441\u0435\u0442\u0438 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\"\/>                 <\/div>             <\/div>             <div class=\"col-half\">                 <div class=\"input-group\">                     <input class=\"required\" id=\"access-input-destiny\" type=\"text2\" label=\"input-url-sites\" placeholder=\"\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\" fieldName=\"IP \u0410\u0434\u0440\u0435\u0441\/\u0430 \u0438\u043b\u0438 \u043f\u043e\u0434\u0441\u0435\u0442\u0438 \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\"\/>                                   <\/div>             <\/div>                    <\/div>                 <div class=\"row\">             <h4>\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b<\/h4>             <div class=\"input-group\">                 <select class=\"required\" id=\"access-input-nettype\" type=\"select\" fieldName=\"\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\">                     <option selected value=\"None\">None<\/option>                     <option>TCP<\/option>                     <option>UDP<\/option>                     <option>TCP+UDP<\/option>                     <option>\u041d\u0435 \u0437\u043d\u0430\u044e<\/option>                                     <\/select>             <\/div>         <\/div>             <div class=\"row\">             <div class=\"col-half\">                 <h4>\u041f\u043e\u0440\u0442\/\u044b \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435<\/h4>                 <div class=\"input-group\">                     <input class=\"required\" id=\"access-input-ports\" type=\"text2\" label=\"input-internet-ports-output\" fieldName=\"\u041f\u043e\u0440\u0442\/\u044b \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\"\/>                 <\/div>             <\/div>         <\/div>                      <div class=\"row\">             <div class=\"input-group\">                 <input id=\"terms-port-access\" type=\"checkbox\" fieldName=\"\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0443 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043d\u0430 \u0445\u043e\u0441\u0442\/\u044b \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e IP\"\/>                 <label for=\"terms-port-access\">\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0443 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043d\u0430 \u0445\u043e\u0441\u0442\/\u044b \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e IP<\/label>             <\/div>              <div class=\"col-half\" id=\"div-internet-ports-input\">                 <h4>\u041f\u043e\u0440\u0442\/\u044b \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442<\/h4>                 <div class=\"input-group\">                     <input class=\"required\" id=\"access-input-inetports\" type=\"text2\" label=\"input-internet-ports-input\" fieldName=\"\u041f\u043e\u0440\u0442\/\u044b \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\"\/>                 <\/div>             <\/div>                    <\/div>               <div class=\"row\">             <h4>\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 (\u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e)<\/h4>             <div class=\"input-group\">                 <textarea id=\"input-comment\" name=\"input-comment\" rows=\"5\" fieldName=\"\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\"><\/textarea>               <\/div>            <\/div>                                  <button type=\"button\" id=\"network_signupbtn_id\" class=\"access_buttons\">\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c<\/button>     <\/form> <\/div><\/code><\/pre>\n
CSS \u0444\u043e\u0440\u043c\u044b:<\/p>\n
<style type=\"text\/css\">     *,     *:before,     *:after {         box-sizing: border-box;     }        .access-container body {         padding: 1em;         font-family: \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;         font-size: 13px;         color: #b9b9b9;         background-color: #e3e3e3;     }     .access-container h4 {         color: #033dea;     }     .access-container input[type=\"datetime-local\"],     .access-container input[type=\"text\"],     .access-container textarea,     .access-container input[type=\"number\"],     .access-container input[type=\"radio\"] + label,     .access-container input[type=\"checkbox\"] + label:before,     .access-container select option,     .access-container select {         height: 35px;         width: 100%;         padding: 0 15px;         line-height: 15px;         background-color: #f9f9f9;         border: 1px solid #e5e5e5;         border-radius: 3px;         -webkit-transition: 0.35s ease-in-out;         -moz-transition: 0.35s ease-in-out;         -o-transition: 0.35s ease-in-out;         transition: 0.35s ease-in-out;         transition: all 0.35s ease-in-out;     }     .access-container input:focus {         outline: 0;         border-color: #01209a;     }     .access-container input:focus + .input-icon i {         color: #033dea;     }     .access-container input:focus + .input-icon:after {         border-right-color: #033dea;     }     .access-container input[type=\"radio\"] {         display: none;     }     .access-container input[type=\"radio\"] + label,     .access-container select {         display: inline-block;         width: 50%;         text-align: center;         float: left;         border-radius: 0;     }     .access-container input[type=\"radio\"] + label:first-of-type {         border-top-left-radius: 3px;         border-bottom-left-radius: 3px;     }     .access-container input[type=\"radio\"] + label:last-of-type {         border-top-right-radius: 3px;         border-bottom-right-radius: 3px;     }     .access-container input[type=\"radio\"] + label i {         padding-right: 0.4em;     }     .access-container input[type=\"radio\"]:checked + label,     .access-container input:checked + label:before,     .access-container select:focus,     .access-container select:active {         background-color: #033dea;         color: #fff;         border-color: #01209a;     }     .access-container input[type=\"checkbox\"] {         display: none;     }     .access-container input[type=\"checkbox\"] + label {         position: relative;         display: block;         padding-left: 1.6em;     }     .access-container input[type=\"checkbox\"] + label:before {         position: absolute;         top: 0.2em;         left: 0;         display: block;         width: 1em;         height: 1em;         padding: 0;         content: \"\";     }     .access-container input[type=\"checkbox\"] + label:after {         position: absolute;         top: 0.45em;         left: 0.2em;         font-size: 0.8em;         color: #fff;         opacity: 0;         font-family: FontAwesome;         content: \" \";     }     .access-container input:checked + label:after {         opacity: 1;     }     .access-container select {         height: 35px;         line-height: 13px;     }     .access-container select:first-of-type {         border-top-left-radius: 3px;         border-bottom-left-radius: 3px;     }     .access-container select:last-of-type {         border-top-right-radius: 3px;         border-bottom-right-radius: 3px;     }     .access-container select:focus,     .access-container select:active {         outline: 0;     }     .access-container select option {         background-color: #033dea;         color: #fff;     }     .access-container .input-group {         margin-bottom: 1em;         zoom: 1;     }     .access-container .input-group:before,     .access-container .input-group:after {         content: \"\";         display: table;     }     .access-container .input-group:after {         clear: both;     }     .access-container .input-group-icon {         position: relative;     }     .access-container .input-group-icon input {         padding-left: 4.4em;     }     .access-container .input-group-icon .input-icon {         position: absolute;         top: 0;         left: 0;         width: 3.4em;         height: 15px;         line-height: 15px;         text-align: center;         pointer-events: none;     }     .access-container .input-group-icon .input-icon:after {         position: absolute;         top: 0.6em;         bottom: 0.6em;         left: 3.4em;         display: block;         border-right: 1px solid #e5e5e5;         content: \"\";         -webkit-transition: 0.35s ease-in-out;         -moz-transition: 0.35s ease-in-out;         -o-transition: 0.35s ease-in-out;         transition: 0.35s ease-in-out;         transition: all 0.35s ease-in-out;     }     .access-container .input-group-icon .input-icon i {         -webkit-transition: 0.35s ease-in-out;         -moz-transition: 0.35s ease-in-out;         -o-transition: 0.35s ease-in-out;         transition: 0.35s ease-in-out;         transition: all 0.35s ease-in-out;     }     .access-container {         max-width: 85%;         padding: 1em 3em 2em 3em;         margin: 0em auto;         background-color: #fff;         border-radius: 4.2px;         box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2);     }     .access-container .row {         zoom: 1;     }     .access-container .row:before,     .access-container .row:after {         content: \"\";         display: table;     }     .access-container .row:after {         clear: both;     }     .access-container .col-half {         padding-right: 10px;         float: left;         width: 50%;     }     .access-container .col-half:last-of-type {         padding-right: 0;     }     .access-container .col-third {         padding-right: 10px;         float: left;         width: 33.33333333%;     }     .access-container .col-third:last-of-type {         padding-right: 0;     }     .access-container #span-required{         color:red !important;     }             .title-right {         float: right;     }        .title-left {         display: inline;     }             .side-layout {         display: flex;         justify-content: space-between;     }         .access_buttons {         background-color: #4CAF50;         color: white;         padding: 14px 20px;         margin: 8px 0;         border: none;         cursor: pointer;         width: 100%;         opacity: 0.9;     }     .directors_buttons:hover {         opacity:1;     }         .error {       position: relative;       animation: shake .1s linear;       animation-iteration-count: 3;       border: 1px solid red;       outline: none;     }     @media only screen and (max-width: 540px) {         .col-half {             width: 100%;             padding-right: 0;         }     } <\/code><\/pre>\n
\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439\u0441\u044f HTML \u0438 CSS \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e «htmlText» \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u043d\u0430\u0448\u0435\u043c JavaScript-\u0441\u043a\u0440\u0438\u043f\u0442\u0435.<\/p>\n
\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043f\u043e\u043b\u0435 (\u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 «\u0417\u0430\u043f\u0440\u043e\u0441 \u0441\u0435\u0442\u0435\u0432\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430» \u0441 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u043c «customfield_12505»), \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u043c \u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u0431\u043b\u0438\u0446\u0443, \u043e\u043d\u043e \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0432 JIRA, \u0438 \u0441\u043a\u0440\u043e\u0435\u043c \u0435\u0433\u043e \u0441 \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n
var $postFunction = $(\"#customfield_12505\"); $postFunction.closest('.field-group').hide();<\/code><\/pre>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u043e\u0440\u043c\u044b \u0438 \u0437\u0430\u043f\u0438\u0448\u0435\u043c \u0432 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e startHTML:<\/p>\n
<div class=\"field-group\"> <div id=\"rules\">     <a class=\"aui-button\" id=\"createRule\" title=\"\u0417\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\"><span class=\"aui-icon aui-icon-small aui-iconfont-add\"><\/span> <b>\u0417\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f<\/b><\/a> <\/div> <\/div> <\/code><\/pre>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 «startHTML» \u0438 «htmlText» \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u043d\u043e \u0441\u043a\u0440\u043e\u0435\u043c \u0444\u043e\u0440\u043c\u0443 \u0434\u043e \u0435\u0435 \u0432\u044b\u0437\u043e\u0432\u0430:<\/p>\n
$postFunction.closest('.field-group').before(startHTML); $postFunction.closest('.field-group').before(htmlText); AJS.$('.access-container').hide();<\/code><\/pre>\n
\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443 «\u0421\u043e\u0437\u0434\u0430\u0442\u044c», \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0430 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u0444\u043e\u0440\u043c\u0435. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043d\u043e\u043f\u043a\u0443-\u043a\u043e\u043f\u0438\u044e «\u0421\u043e\u0437\u0434\u0430\u0442\u044c» \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0435\u0435 \u0437\u0430\u043c\u0435\u043d\u0443. \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u044b\u0437\u043e\u0432 \u0430\u043b\u0435\u0440\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c AUI JIRA:<\/p>\n
$('#create-issue-submit').before('<input class=\"aui-button aui-button-primary\" id=\"create-issue-submit-fake\" type=\"submit\" value=\"Create\">'); $('#create-issue-submit-fake').hide();  AJS.$('#create-issue-submit-fake').on('click', function () {     JIRA.Messages.showErrorMsg('\u041d\u0435\u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u0430 \u0444\u043e\u0440\u043c\u0430 \u0441\u0435\u0442\u0435\u0432\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430'); })  AJS.$('a#createRule').on('click', function () {     AJS.$('.access-container').show();     if ($('#access-input-fio').attr(\"disabled\") != \"disabled\"){         $('#create-issue-submit').hide();         $('#create-issue-submit-fake').show();     }     $('#rules').hide(); })  AJS.$('span#removerule').on('click', function () {     removeRule(); })  function removeRule() {     AJS.$('.access-container').hide();     $('#rules').show();     $('#create-issue-submit').show();     $('#create-issue-submit-fake').hide(); } <\/code><\/pre>\n
\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439:<\/p>\n
<\/figure>\n
$('#input-hubs').hide(); $('#access-input-hosts').removeClass( \"required\" ); $('#internet-select-div-access').hide(); $('#internet-select-access').removeClass( \"required\" ); $('#internet-timelimit-access').hide(); $('#access-input-addresses').removeClass( \"required\" ); $('#internet-timelimitdata-access').hide(); $('#access-input-inetports').removeClass( \"required\" ); $('#internet-input-sites').hide(); $('#access-input-departments').removeClass( \"required\" ); $('#div-internet-ports-input').hide(); $('#access-input-datetime').removeClass( \"required\" ); $('#div-approve-departmnets').hide();   \/\/--------------------------LISTENERS------------------------------------  $('#terms-subs').change(function() {     if(this.checked) {         $('#input-hubs').show();         $('#access-input-hosts').addClass( \"required\" );         $('#access-input-subnet').removeClass( \"required\" );         $('#access-input-subnet').val(null).trigger('change');         $('#input-subs').hide();     } else {         $('#input-hubs').hide();         $('#access-input-hosts').removeClass( \"required\" );         $('#access-input-hosts').val(null).trigger('change');         $('#access-input-subnet').addClass( \"required\" );         $('#input-subs').show();     } });  $('#terms-internet').change(function() {     if(this.checked) {         $('#internet-select-div-access').show();         $('#internet-timelimit-access').show();         $('#internet-timelimitdata-access').show();         $('#internet-select-access').addClass( \"required\" );         $('#access-input-datetime').addClass( \"required\" );         $('#internet-input-sites').hide();         $('#terms-internet-access').prop('checked');     } else {         $('#internet-select-div-access').hide();         $('#internet-timelimit-access').hide();         $('#internet-timelimitdata-access').hide();         $('#internet-select-access').removeClass( \"required\" );         $('#internet-select-access').val(\"\");         $('#access-input-datetime').removeClass( \"required\" );         $('#access-input-datetime').val(null).trigger('change');         $('#internet-input-sites').hide();         $('#terms-internet-access').prop( \"checked\", false );      } });  $('#internet-select-access').change(function() {     if ($('#internet-select-access').val() == \"1001\"){         $('#internet-input-sites').show();         $('#access-input-addresses').addClass( \"required\" );     }     if ($('#internet-select-access').val() == \"1000\"){         $('#internet-input-sites').hide();         $('#access-input-addresses').removeClass( \"required\" );         $('#access-input-addresses').val(null).trigger('change');     } });  $('#terms-internet-access').change(function() {     if(this.checked) {         $('#internet-timelimitdata-access').hide();         $('#access-input-datetime').removeClass( \"required\" );         $('#access-input-datetime').val(null).trigger('change');     } else {         $('#internet-timelimitdata-access').show();         $('#access-input-datetime').addClass( \"required\" );     } });  $('#terms-port-access').change(function() {     if(this.checked) {         $('#div-internet-ports-input').show();         $('#access-input-inetports').addClass( \"required\" );     } else {         $('#div-internet-ports-input').hide();         $('#access-input-inetports').removeClass( \"required\" );         $('#access-input-inetports').val(null).trigger('change');     } });  $('#terms-company-access').change(function() {     if(this.checked) {         $('#div-approve-departmnets').show();         $('#access-input-departments').addClass( \"required\" );     } else {         $('#div-approve-departmnets').hide();         $('#access-input-departments').removeClass( \"required\" );         $('#access-input-departments').val(null).trigger('change');     } }); <\/code><\/pre>\n
\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c \u043f\u043e\u043b\u0435 \u0442\u0438\u043f\u0430 «auiSelect2», \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u0414\u0430\u043d\u043d\u044b\u0435 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432 \u0432\u0438\u0434\u0435 \u043c\u0443\u043b\u044c\u0442\u0438\u0441\u043f\u0438\u0441\u043a\u0430, \u043d\u043e \u0432\u0432\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0442\u0435\u043a\u0441\u0442. \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0434\u043b\u044f \u0440\u0443\u0447\u043d\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430 \u0441\u043f\u0438\u0441\u043a\u0430 IP-\u0430\u0434\u0440\u0435\u0441\u043e\u0432<\/p>\n
<\/figure>\n
<\/figure>\n
\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f auiSelect2 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043f\u043e\u043b\u0435\u0439, \u0432 \u043d\u0430\u0448\u0435\u0439 \u0444\u043e\u0440\u043c\u0435 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u0441 id = input-internet-sites:<\/p>\n
   function getOptions() {         var options = []         var id = \"-1\"         var value = \"\u041d\u0430\u0447\u043d\u0438\u0442\u0435 \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c\"         options.push({id: id, text: value})         return options     }      var options =  getOptions();     AJS.$(\"input[label=input-internet-sites]\").auiSelect2({         multiple: true,         tokenSeparators: [\",\", \" \", \"\\n\", \"\\t\"],         initSelection: function(element, callback) {             var data = [];             $(element.val().split(\",\")).each(function() {                 var selectedOptionId = this                 var existOption = options.find(function(i) {return i.id == selectedOptionId})                 if (existOption != undefined) {                     data.push({                         id: existOption.id,                         text: existOption.text                     });                 } else {                     data.push({                         id: this,                         text: this                     });                 }             });             callback(data);         },          data: options,         createSearchChoice: function(term) {             var lastResults = [];             var text = term + (lastResults.some(function(r) {                 return r.text == term             }) ? \"\" : \"\");             return {                 id: \"C-\" + term,                 text: text             };         },         dropdownAutoWidth: true, dropdownCss: {width: 'auto'}     }); <\/code><\/pre>\n
\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f:<\/p>\n
function CheckRequired(e) {     var $form = $('.access-container');     if ($form.find('.required').filter(function () {         return this.value === '' || this.value === \"None\" || this.value === '-1'     }).length > 0) {         $form.find('.required').filter(function () {             if (this.value === '' || this.value === \"None\" || this.value === '-1'){                 setTooltip(this, \"\u041f\u043e\u043b\u0435 \u043d\u0435 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e\");             } else {                 $(this).css({\"border\": \"0px\"});             }         });          return false;     }     return true; } function setTooltip(field, text) {     if ($(field).attr(\"type\") == \"text2\"){         $(field).parent().children(\":first\").addClass('error');         $(field).parent().children(\":first\").css({\"border\": \"1px solid red\"});         setTimeout(function() {             $(field).parent().children(\":first\").removeClass('error');         }, 500);     } else {         $(field).addClass('error');         $(field).css({\"border\": \"1px solid red\"});         setTimeout(function () {             $(field).removeClass('error');         }, 500);     } } <\/code><\/pre>\n
\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439 \u0444\u043e\u0440\u043c\u044b \u0432 \u043f\u043e\u043b\u0435 JIRA \u0434\u043b\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0437\u0430\u043f\u0440\u043e\u0441\u0435:<\/p>\n
var ids = [\"access-input-fio\",\"access-input-description\",\"terms-subs\",    \"access-input-subnet\",\"access-input-hosts\",\"terms-internet\", \"internet-select-access\",\"access-input-addresses\", \"terms-internet-access\",\"access-input-datetime\",\"access-input-source\",    \"access-input-destiny\",\"access-input-nettype\",\"access-input-ports\", \"terms-port-access\",\"access-input-inetports\",\"terms-company-access\", \"access-input-departments\",\"terms-vpn-access\", \"input-comment\"];  function setValue(ids) {     $.each(ids, function( index, value ) {         var $field = $('#' + value);         var type = $field.attr(\"type\");         $field.attr(\"disabled\", \"disabled\");         $field.css({\"background-color\" : \"#e5e5e5\"})         var nameField = $field.attr(\"fieldName\");         var valueField = \"\";         if (type == \"checkbox\"){             if ($field.is(\":checked\")){                 valueField = \"\u0414\u0430\"             }         } else if (type == \"text\"){             valueField = $field.val()         } else if (type == \"datetime-local\"){             valueField = $field.val().replace(\"T\", \" \")         } else if (type == \"select\"){             valueField = $field.find('option:selected').text();         } else if (type == \"text2\"){             valueField = $field.val().replaceAll(\"C-\", \"\")         } else {             valueField = $field.val()         }          if (valueField) {             var valField = \"||\" + nameField + \"||\" + valueField + \"||\\n\"             var setVal = $postFunction.val() + valField             $postFunction.val(setVal).trigger('change')         }     }) } <\/code><\/pre>\n
\u041a\u043d\u043e\u043f\u043a\u0430 «\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c» \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u0435\u0439, \u0438 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0443\u0441\u043f\u0435\u0445\u0430 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u0437\u0430\u043f\u0440\u043e\u0441:\u00a0<\/p>\n
<\/figure>\n
$('#network_signupbtn_id').bind(\"click\", function (e) {     if (CheckRequired(e)) {         setValue(ids);         JIRA.Messages.showSuccessMsg('\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0430');         $('#network_signupbtn_id').hide();         $('#create-issue-submit').show();         $('#create-issue-submit-fake').hide();     } else {         e.preventDefault();         e.stopPropagation();     } }); <\/code><\/pre>\n
\u041d\u0430 \u044d\u0442\u043e\u043c \u043d\u0430\u0448\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u0437\u0430\u0432\u0435\u0440\u0448\u0430\u0435\u0442\u0441\u044f. \u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430 \u0432 \u043e\u0434\u0438\u043d JavaScript-\u0441\u043a\u0440\u0438\u043f\u0442 \u0438 \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043f\u043b\u0430\u0433\u0438\u043d JsIncluder \u043d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 «General» \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 «Code». <\/p>\n
\u041d\u0430 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 «Binding» \u0432\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0432\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0442\u0438\u043f \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434. \u0417\u0430\u0442\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u0444\u043b\u0430\u0436\u043e\u043a «\u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f» \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0441\u043a\u0440\u0438\u043f\u0442.<\/p>\n
<\/figure>\n
\u00a0<\/h3>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n
  <\/div>\n
  
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/companies\/gazprommedia\/articles\/739818\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
<\/figure>\n
\u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u0431\u0430\u0437\u0435 JavaScript \u0438 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0435\u0435 \u0432 \u044d\u043a\u0440\u0430\u043d \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 JIRA.<\/p>\n
\u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c, \u0447\u0435\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u043f\u043e\u043b\u044f JIRA. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u0435\u0439, \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0432\u0432\u043e\u0434\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u0438\u043b\u0438 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u044f. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438.\u00a0\u00a0<\/p>\n
\u041f\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f:<\/strong><\/p>\n
\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0442\u0438\u043f\u0430 «\u0437\u0430\u0434\u0430\u0447\u0430» \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 «\u0441\u0435\u0442\u0435\u0432\u0430\u044f \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430».\u00a0\u00a0<\/p>\n
\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0437\u0430\u0434\u0443\u043c\u0430\u043d\u043d\u043e\u0433\u043e \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d JsIncluder<\/a> \u043e\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u044b VK. \u0415\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430 — \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 JS \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043a \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0443 JIRA, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 front-end.<\/p>\n
\u041f\u043b\u0430\u043d \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438<\/h2>\n
1. \u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c HTML \u0438 CSS-\u043a\u043e\u0434 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043a\u0435\u043b\u0435\u0442\u0430 \u0444\u043e\u0440\u043c\u044b (\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u044c, \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0432\u0448\u0438\u0439\u0441\u044f \u0432\u0430\u043c \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435).\u00a0\u00a0<\/p>\n
<\/figure>\n
2. \u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u043a\u043e\u0434 \u0432 JavaScript, \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n
3. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u0432 JIRA \u043f\u043e\u043b\u0435 \u00ab\u0417\u0430\u043f\u0440\u043e\u0441 \u0441\u0435\u0442\u0435\u0432\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430\u00bb \u0442\u0438\u043f\u0430 textarea \u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430 wiki<\/u><\/a>. \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0430\u0448\u0435\u0439 \u0444\u043e\u0440\u043c\u044b \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e \u043f\u043e\u043b\u0435 \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b:\u00a0\u00a0<\/p>\n
<\/figure>\n
4. \u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u043e\u0440\u043c\u044b \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430:<\/p>\n
<\/figure>\n
<\/figure>\n
\u041a\u043d\u043e\u043f\u043a\u0430 «\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c» \u043d\u0430 \u0444\u043e\u0440\u043c\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0432\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u0435\u0439. \u041f\u043e\u043b\u044f, \u043d\u0435 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0438\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e, \u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u044b \u043a\u0440\u0430\u0441\u043d\u044b\u043c \u0446\u0432\u0435\u0442\u043e\u043c:<\/p>\n
<\/figure>\n
\u0415\u0441\u043b\u0438 \u043f\u043e\u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0431\u0435\u0437 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043d\u0438\u044f, \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435:<\/p>\n
<\/figure>\n
\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f\u00a0<\/h3>\n
HTML-\u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0444\u043e\u0440\u043c\u044b.<\/p>\n
\u041a\u043b\u0430\u0441\u0441 «required» \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432 JavaScript. \u0415\u0441\u043b\u0438 \u044d\u0442\u043e\u0442 \u043a\u043b\u0430\u0441\u0441 \u0443\u043a\u0430\u0437\u0430\u043d, \u0442\u043e \u043f\u043e\u043b\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u043e \u0438\u043b\u0438 \u0432\u044b\u0431\u0440\u0430\u043d\u0430 \u043e\u043f\u0446\u0438\u044f. <\/p>\n
\u0410\u0442\u0440\u0438\u0431\u0443\u0442 «type» \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u0434\u043b\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0438 \u0438\u0445 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0432 JIRA:<\/p>\n
<div class=\"access-container\">     <form>         <h2>\u0417\u0430\u043f\u0440\u043e\u0441 \u0441\u0435\u0442\u0435\u0432\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 <span id=\"removerule\" class=\"aui-icon aui-icon-small aui-iconfont-delete\" title=\"\u0423\u0434\u0430\u043b\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e\">remove rule<\/span> <\/h2>         <hr>         <div class=\"row\">             <h4 class=\"title-left\">\u041a\u0442\u043e \u0432\u043b\u0430\u0434\u0435\u043b\u0435\u0446 \u0441\u0435\u0440\u0432\u0438\u0441\u0430<\/h4>             <div class=\"input-group\">                 <input class=\"required\" id=\"access-input-fio\" type=\"text\" placeholder=\"\u0424\u0418\u041e\/\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u0430\" fieldName=\"\u0412\u043b\u0430\u0434\u0435\u043b\u0435\u0446 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\"\/>             <\/div>         <\/div>         <div class=\"row\">             <h4 class=\"title-left\">\u0414\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f<\/h4>             <div class=\"input-group\">                 <input class=\"required\" id=\"access-input-description\" type=\"text\" placeholder=\"\u041a\u0440\u0430\u0442\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0438 \u0441 \u0447\u0435\u043c \u043e\u043d \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442\" fieldName=\"\u0414\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\"\/>             <\/div>         <\/div>         <div class=\"row\">             <div class=\"input-group\">                     <input id=\"terms-subs\" type=\"checkbox\" fieldName=\"\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u043f\u043e\u0434\u0441\u0435\u0442\u0438\"\/>                 <label for=\"terms-subs\">\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u043e\u0439 \u043f\u043e\u0434\u0441\u0435\u0442\u0438<\/label>                  <\/div>             <div class=\"col-half\">                 <div class=\"input-group\" id=\"input-subs\">                     <input class=\"required\" id=\"access-input-subnet\" type=\"text\" placeholder=\"\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u0435\u0442\u044c\" fieldName=\"\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u0435\u0442\u044c\"\/>                 <\/div>             <\/div>         <\/div>         <div class=\"row\">             <div class=\"col-half\">                 <div class=\"input-group\" id=\"input-hubs\">                     <input class=\"required\" id=\"access-input-hosts\" type=\"number\" label=\"input-hubs\" placeholder=\"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0445\u043e\u0441\u0442\u043e\u0432\" fieldName=\"\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0445\u043e\u0441\u0442\u043e\u0432\"\/>                 <\/div>             <\/div>         <\/div>         <div class=\"row\">                     <div class=\"input-group\">                 <input id=\"terms-internet\" type=\"checkbox\" fieldName=\"\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\"\/>                 <label for=\"terms-internet\">\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442<\/label>             <\/div>         <\/div>         <div class=\"row\">                 <div class=\"input-group\" id=\"internet-select-div-access\">                     <select class=\"required\" id=\"internet-select-access\" type=\"select\" fieldName=\"\u0418\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\">                         <option selected value=\"None\">None<\/option>                         <option value=\"1000\">\u041f\u043e\u043b\u043d\u044b\u0439<\/option>                         <option value=\"1001\">\u041a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u043c \u0430\u0434\u0440\u0435\u0441\u0430\u043c<\/option>                     <\/select>                 <\/div>             <div class=\"col-half\">                 <div class=\"input-group\" id=\"internet-input-sites\">                     <input class=\"required\" id=\"access-input-addresses\" type=\"text2\" label=\"input-internet-sites\" placeholder=\"\u0421\u043f\u0438\u0441\u043e\u043a \u0430\u0434\u0440\u0435\u0441\u043e\u0432 (\u0441\u0430\u0439\u0442\u043e\u0432)\" fieldName=\"\u0414\u043e\u0441\u0442\u0443\u043f \u0432 \u0441\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043a \u0430\u0434\u0440\u0435\u0441\u0430\u043c\"\/>                 <\/div>             <\/div>         <\/div>         <div class=\"row\">             <div class=\"input-group\" id=\"internet-timelimit-access\">                 <input id=\"terms-internet-access\" type=\"checkbox\" fieldName=\"\u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\"\/>                 <label for=\"terms-internet-access\">\u041f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f<\/label>             <\/div>             <div class=\"col-half\">                 <div class=\"input-group\" id=\"internet-timelimitdata-access\">                     <p style=\"font-size: 11px; color: gray\">\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430<\/p>                     <input class=\"required\" id=\"access-input-datetime\" type=\"datetime-local\" placeholder=\"\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430\" fieldName=\"\u0414\u0430\u0442\u0430 \u0438 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430\"\/>                 <\/div>             <\/div>         <\/div>          <div class=\"row\">             <h4>IP \u0410\u0434\u0440\u0435\u0441\/\u0430 \u0438\u043b\u0438 \u043f\u043e\u0434\u0441\u0435\u0442\u0438 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f<\/h4>             <p style=\"font-size: 11px; color: gray\">IP \u0410\u0434\u0440\u0435\u0441\u0430\/ URL \u0440\u0435\u0441\u0443\u0440\u0441\u044b<\/p>             <div class=\"col-half\">                 <div class=\"input-group\">                     <input class=\"required\" id=\"access-input-source\" type=\"text2\" label=\"input-url-sites-input\" placeholder=\"\u0418\u0441\u0442\u043e\u0447\u043d\u0438\u043a\" fieldName=\"IP \u0410\u0434\u0440\u0435\u0441\/\u0430 \u0438\u043b\u0438 \u043f\u043e\u0434\u0441\u0435\u0442\u0438 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\"\/>                 <\/div>             <\/div>             <div class=\"col-half\">                 <div class=\"input-group\">                     <input class=\"required\" id=\"access-input-destiny\" type=\"text2\" label=\"input-url-sites\" placeholder=\"\u041d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\" fieldName=\"IP \u0410\u0434\u0440\u0435\u0441\/\u0430 \u0438\u043b\u0438 \u043f\u043e\u0434\u0441\u0435\u0442\u0438 \u043a \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\"\/>                                   <\/div>             <\/div>                    <\/div>                 <div class=\"row\">             <h4>\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b<\/h4>             <div class=\"input-group\">                 <select class=\"required\" id=\"access-input-nettype\" type=\"select\" fieldName=\"\u041f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\">                     <option selected value=\"None\">None<\/option>                     <option>TCP<\/option>                     <option>UDP<\/option>                     <option>TCP+UDP<\/option>                     <option>\u041d\u0435 \u0437\u043d\u0430\u044e<\/option>                                     <\/select>             <\/div>         <\/div>             <div class=\"row\">             <div class=\"col-half\">                 <h4>\u041f\u043e\u0440\u0442\/\u044b \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435<\/h4>                 <div class=\"input-group\">                     <input class=\"required\" id=\"access-input-ports\" type=\"text2\" label=\"input-internet-ports-output\" fieldName=\"\u041f\u043e\u0440\u0442\/\u044b \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\"\/>                 <\/div>             <\/div>         <\/div>                      <div class=\"row\">             <div class=\"input-group\">                 <input id=\"terms-port-access\" type=\"checkbox\" fieldName=\"\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0443 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043d\u0430 \u0445\u043e\u0441\u0442\/\u044b \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e IP\"\/>                 <label for=\"terms-port-access\">\u0422\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0435\u0441\u0443\u0440\u0441\u0443 \u0438\u0437 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u043d\u0430 \u0445\u043e\u0441\u0442\/\u044b \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e IP<\/label>             <\/div>              <div class=\"col-half\" id=\"div-internet-ports-input\">                 <h4>\u041f\u043e\u0440\u0442\/\u044b \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442<\/h4>                 <div class=\"input-group\">                     <input class=\"required\" id=\"access-input-inetports\" type=\"text2\" label=\"input-internet-ports-input\" fieldName=\"\u041f\u043e\u0440\u0442\/\u044b \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0435 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\"\/>                 <\/div>             <\/div>                    <\/div>               <div class=\"row\">             <h4>\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 (\u043d\u0435\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e)<\/h4>             <div class=\"input-group\">                 <textarea id=\"input-comment\" name=\"input-comment\" rows=\"5\" fieldName=\"\u041a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439\"><\/textarea>               <\/div>            <\/div>                                  <button type=\"button\" id=\"network_signupbtn_id\" class=\"access_buttons\">\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c<\/button>     <\/form> <\/div><\/code><\/pre>\n
CSS \u0444\u043e\u0440\u043c\u044b:<\/p>\n
<style type=\"text\/css\">     *,     *:before,     *:after {         box-sizing: border-box;     }        .access-container body {         padding: 1em;         font-family: \"Open Sans\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;         font-size: 13px;         color: #b9b9b9;         background-color: #e3e3e3;     }     .access-container h4 {         color: #033dea;     }     .access-container input[type=\"datetime-local\"],     .access-container input[type=\"text\"],     .access-container textarea,     .access-container input[type=\"number\"],     .access-container input[type=\"radio\"] + label,     .access-container input[type=\"checkbox\"] + label:before,     .access-container select option,     .access-container select {         height: 35px;         width: 100%;         padding: 0 15px;         line-height: 15px;         background-color: #f9f9f9;         border: 1px solid #e5e5e5;         border-radius: 3px;         -webkit-transition: 0.35s ease-in-out;         -moz-transition: 0.35s ease-in-out;         -o-transition: 0.35s ease-in-out;         transition: 0.35s ease-in-out;         transition: all 0.35s ease-in-out;     }     .access-container input:focus {         outline: 0;         border-color: #01209a;     }     .access-container input:focus + .input-icon i {         color: #033dea;     }     .access-container input:focus + .input-icon:after {         border-right-color: #033dea;     }     .access-container input[type=\"radio\"] { <\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-349002","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/349002","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=349002"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/349002\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=349002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=349002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=349002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}