1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Module 1</title> 8 <link media="all" rel="stylesheet" href="assets/css/module.css"> 9 <link media="all" rel="stylesheet" href="assets/css/style.css"> 10</head> 11<body id="body-module" class="body-module"> 12 <div class="container"> 13 <div class="module-links"> 14 <a href="#tabs">tabs</a> 15 <a href="#tabs-to-accordion">tabs-to-accordion</a> 16 <a href="#tab-to-accordion-vert">tab-to-accordion-vert</a> 17 <a href="#tab-to-select">tab-to-select</a> 18 <a href="#accordion">accordion</a> 19 <a href="#viewportchecker-animate">viewportchecker-animate</a> 20 <a href="#slider-run">slider-run</a> 21 <a href="#js-custom-forms">js-custom-forms</a> 22 <a href="#jcf-select2">jc-select2</a> 23 <a href="#smooth-scroll">smooth-scroll</a> 24 <a href="#countdown">countdown</a> 25 <a href="#sticky-box">sticky-box</a> 26 <a href="#browser-detect">browser-detect</a> 27 <a href="#scriptToggleClassParents">scriptToggleClassParents</a> 28 <a href="#jquery-validate-form">jquery-validate-form</a> 29 <a href="#arrow-up-wrapper">arrow-up</a> 30 <a href="#magnific-popup">magnific-popup</a> 31 <a href="#jquery-rating-stars">jquery-rating-stars</a> 32 <a href="#table-responsive">table-responsive</a> 33 <a href="#fancybox">fancybox</a> 34 <a href="#datepicker">datepicker</a> 35 <a href="#tooltip">tooltip</a> 36 <a href="#Touch-Device-Detect">Touch-Device-Detect</a> 37 <a href="#add-class-for-focus">add-class-for-focus</a> 38 <a href="#lazy-load-img">lazy-load-img</a> 39 <a href="#input-mask">input-mask</a> 40 </div> 41 </div> 42<!-- module tabs start --> 43<div id="tabs" class="container module-block"> 44 <h2>Folder ./module/tabs</h2> 45 <h2>FADE ÑабÑ</h2> 46 <div class="fade-tabset"> 47 <ul class="tabset"> 48 <li><a href="#first-2" class="btn btn-default">First</a></li> 49 <li><a href="#second-2" class="btn btn-default">Second</a></li> 50 <li><a href="#third-2" class="btn btn-default">Third</a></li> 51 </ul> 52 <div class="tab-content"> 53 <div id="first-2" class="tab"> 54 <h2>First</h2> 55 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p> 56 </div> 57 <div id="second-2" class="tab active"> 58 <h2>Second</h2> 59 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p> 60 </div> 61 <div id="third-2" class="tab"> 62 <h2>Third</h2> 63 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!</p> 64 </div> 65 </div> 66 </div> 67 <h2>SLIDE ÑабÑ</h2> 68 <div class="slide-tabset"> 69 <ul class="tabset"> 70 <li><a href="#first-1" class="btn btn-default active">First</a></li> 71 <li><a href="#second-1" class="btn btn-default">Second</a></li> 72 <li><a href="#third-1" class="btn btn-default">Third</a></li> 73 </ul> 74 <div class="tab-content"> 75 <div id="first-1" class="tab active"> 76 <h2>First</h2> 77 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p> 78 </div> 79 <div id="second-1" class="tab"> 80 <h2>Second</h2> 81 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p> 82 </div> 83 <div id="third-1" class="tab"> 84 <h2>Third</h2> 85 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!</p> 86 </div> 87 </div> 88 </div> 89 <h2>Ð¢Ð°Ð±Ñ Ð±ÐµÐ· ÑÑÑекÑа</h2> 90 <div class="no-effect-tabset"> 91 <ul class="tabset"> 92 <li><a href="#first-3" class="btn btn-default active">First</a></li> 93 <li><a href="#second-3" class="btn btn-default">Second</a></li> 94 <li><a href="#third-3" class="btn btn-default">Third</a></li> 95 </ul> 96 <div class="tab-content"> 97 <div id="first-3" class="tab active"> 98 <h2>First</h2> 99 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p> 100 </div> 101 <div id="second-3" class="tab"> 102 <h2>Second</h2> 103 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p> 104 </div> 105 <div id="third-3" class="tab"> 106 <h2>Third</h2> 107 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!</p> 108 </div> 109 </div> 110 </div> 111 <h2>CUSTOM EFFECT ÑабÑ</h2> 112 <div class="custom-tabset"> 113 <ul class="tabset"> 114 <li><a href="#first-4" class="btn btn-default active">First</a></li> 115 <li><a href="#second-4" class="btn btn-default">Second</a></li> 116 <li><a href="#third-4" class="btn btn-default">Third</a></li> 117 </ul> 118 <div class="tab-content"> 119 <div id="first-4" class="tab active"> 120 <h2>First</h2> 121 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p> 122 </div> 123 <div id="second-4" class="tab"> 124 <h2>Second</h2> 125 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos unde, harum totam consequuntur repellendus non et itaque expedita ullam error eum dignissimos commodi distinctio nihil ab a cum corporis nulla!</p> 126 </div> 127 <div id="third-4" class="tab"> 128 <h2>Third</h2> 129 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rem aut recusandae voluptatem, temporibus error magnam distinctio, vitae, esse, debitis et omnis dolore ratione. Sit numquam enim officia delectus odit!</p> 130 </div> 131 </div> 132 </div> 133</div> 134<!-- module tabs --> 135<!-- module tabs-to-accordion start --> 136<div id="tabs-to-accordion" class="container module-block"> 137 <h2>Folder ./module/tabs-to-accordion</h2> 138 <div class="tab-to-accordion"> 139 <ul class="tabset-list"> 140 <li><a href="#tab1">Tab 1</a></li> 141 <li><a href="#tab2">Tab 2</a></li> 142 <li><a href="#tab3">Tab 3</a></li> 143 <li class="active"><a href="#tab4">Tab 4</a></li> 144 </ul> 145 <div class="tab-container"> 146 <div id="tab1"> 147 <h2>Tab 1 Lorem ipsum dolor sit amet</h2> 148 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!</p> 149 </div> 150 <div id="tab2"> 151 <h2>Tab 2 Lorem ipsum dolor sit amet</h2> 152 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!</p> 153 </div> 154 <div id="tab3"> 155 <h2>Tab 3 Lorem ipsum dolor sit amet</h2> 156 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!</p> 157 </div> 158 <div id="tab4"> 159 <h2>Tab 4 Lorem ipsum dolor sit amet</h2> 160 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod labore sapiente sit facilis nemo incidunt adipisci tenetur aliquam iusto eum! Expedita vel sit, laudantium eos error veritatis unde vero. Eveniet!</p> 161 </div> 162 </div> 163 </div> 164</div> 165<!-- module accordion end --> 166<!-- module tab-to-select start --> 167<div id="tab-to-select" class="container module-block"> 168 <h2>Folder ./module/tab-to-select</h2> 169 <div class="tab-container"> 170 <div class="tabset-select"> 171 <span class="tabset-toggle"></span> 172 <ul class="tabset-tab"> 173 <li class="active"> 174 <a href="#tab1-0">Home</a> 175 </li> 176 <li> 177 <a href="#tab2-0">Products</a> 178 </li> 179 <li> 180 <a href="#tab3-0">About</a> 181 </li> 182 </ul> 183 </div> 184 <div class="tab-content"> 185 <div id="tab1-0"><h2>Home tab</h2> 186 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellat incidunt ratione eum ducimus sit voluptatibus reprehenderit atque? Consequuntur incidunt iste totam rerum magni illum velit molestiae sed maxime aliquam?</p> 187 </div> 188 <div id="tab2-0"><h2>Products tab</h2> 189 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellat incidunt ratione eum ducimus sit voluptatibus reprehenderit atque? Consequuntur incidunt iste totam rerum magni illum velit molestiae sed maxime aliquam?</p> 190 </div> 191 <div id="tab3-0"><h2>About tab</h2> 192 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa repellat incidunt ratione eum ducimus sit voluptatibus reprehenderit atque? Consequuntur incidunt iste totam rerum magni illum velit molestiae sed maxime aliquam?</p> 193 </div> 194 </div> 195 </div> 196</div> 197<!-- module tab-to-select --> 198<!-- module tabs-to-accordion start --> 199<div id="tab-to-accordion-vert" class="container module-block"> 200 <h2>Folder ./module/tab-to-accordion-vert</h2> 201 <div id="tab-acc"> 202 <ul class="resp-tabs-list tab-acc"> 203 <li>Cucumber</li> 204 <li>Ashwagandha</li> 205 <li>Comfrey root</li> 206 <li>Elderflower</li> 207 </ul> 208 <div class="resp-tabs-container tab-acc"> 209 <div> 210 <p>1Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.</p> 211 </div> 212 <div> 213 <p>2Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.</p> 214 </div> 215 <div> 216 <p>3Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.</p> 217 </div> 218 <div> 219 <p>4Has skincare benefits including vitamin C and caffeic acid, which both fight to reduce inflamed or irritated skin, and hydration thanks to its high water content. The peel itself contains silica, which firms up sagging skin. People with the most sensitive skin types can use cucumber to their advantage.</p> 220 </div> 221 </div> 222 </div> 223</div> 224<!-- module tabs-to-accordion end --> 225<!-- module accordion start --> 226<div id="accordion" class="container module-block"> 227 <h2>Folder ./module/accordion</h2> 228 <div class="description-block"> 229 <pre> jQuery('ul.accordion').slideAccordion({ 230 activeClass:'open', // клаÑÑ "active" оÑкÑÑÑого ÑоÑÑоÑÐ½Ð¸Ñ 231 opener:'>a.opener', // ÑелекÑÐ¾Ñ ÑÑÑлки-opener 232 slider:'>div.slide', // ÑелекÑÐ¾Ñ Ð´Ñопа аккоÑдиона 233 collapsible:false, // ÑазÑеÑаÑÑ ÑвоÑаÑиваÑÑ Ð°ÐºÑивнÑй ÑÐ»ÐµÐ¼ÐµÐ½Ñ Ð°ÐºÐºÐ¾Ñдиона 234 animSpeed: 300, // ÑкоÑоÑÑÑ Ð°Ð½Ð¸Ð¼Ð°Ñии аккоÑдиона 235 scrollToActiveItem: { // пÑокÑÑÑка к акÑÐ¸Ð²Ð½Ð¾Ð¼Ñ ÑлеменÑÑ Ð°ÐºÐºÐ¾Ñдиона 236 enable: true, 237 breakpoint: 1920, // max-width 238 animSpeed: 600, 239 extraOffset: null 240 } 241 });</pre> 242 </div> 243 <div class="live-example"> 244 <h3>ÐбÑÑнÑй аккоÑдион</h3>
245 <ul class="accordion simple-accordion"> 246 <li class="active"> 247 <a href="#" class="opener">opener 1</a> 248 <div class="slide"> 249 <p>Slide content 1<br /> Lorem ipsum</p> 250 </div> 251 </li> 252 <li> 253 <a href="#" class="opener">opener 2</a> 254 <div class="slide"> 255 <p>Slide content 2</p> 256 </div> 257 </li> 258 <li> 259 <a href="#" class="opener">opener 3</a> 260 <div class="slide"> 261 <p>Slide content 3 Lorem ipsum<br /> dolor sit amet</p> 262 </div> 263 </li> 264 </ul> 265 </div> 266 <div class="live-example"> 267 <h3>ÐногоÑÑовневÑй аккоÑдион</h3> 268 <ul class="accordion multilevel-accordion"> 269 <li> 270 <a href="#" class="opener">opener 1</a> 271 <div class="slide"> 272 <ul class="accordion-sub"> 273 <li> 274 <a class="opener" href="#">Sub Item 1</a> 275 <div class="slide"> 276 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.</p> 277 </div> 278 </li> 279 <li> 280 <a class="opener" href="#">Sub Item 2</a> 281 <div class="slide"> 282 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.</p> 283 </div> 284 </li> 285 <li> 286 <a class="opener" href="#">Sub Item 3</a> 287 <div class="slide"> 288 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui neque, tempor in, fermentum vel, rutrum aliquam, mi.</p> 289 </div> 290 </li> 291 </ul> 292 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.</p> 293 </div> 294 </li> 295 <li> 296 <a href="#" class="opener">opener 2</a> 297 <div class="slide"> 298 <p>Slide content 2</p> 299 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.</p> 300 </div> 301 </li> 302 <li> 303 <a href="#" class="opener selected">opener 3</a> 304 <div class="slide"> 305 <p>Slide content 3</p> 306 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus officiis obcaecati voluptatum enim minima ullam vitae quo corporis tenetur officia, quas nesciunt blanditiis velit cumque iste recusandae quam! Cupiditate, neque.</p> 307 </div> 308 </li> 309 </ul> 310 </div> 311</div> 312<!-- module tabs-to-accordion end --> 313<!-- module viewportchecker-animate start --> 314<div id="viewportchecker-animate" class="container module-block"> 315 <h2>Folder ./module/viewportchecker-animate</h2> 316 <h2 class="a-up">just example animate - add class "a-up" to you block</h2> 317</div> 318<!-- module viewportchecker-animate end --> 319<!-- module slider-run start --> 320<div id="slider-run" class="container module-block"> 321 <h2>Folder ./module/slider-run</h2> 322 <div class="ticker-left" style="margin-bottom: 30px"> 323 <div class="ticker-item"><img src="assets/img/img.png" /></div> 324 <div class="ticker-item"><img src="assets/img/img.png" /></div> 325 <div class="ticker-item"><img src="assets/img/img.png" /></div> 326 <div class="ticker-item"><img src="assets/img/img.png" /></div> 327 <div class="ticker-item"><img src="assets/img/img.png" /></div> 328 <div class="ticker-item"><img src="assets/img/img.png" /></div> 329 <div class="ticker-item"><img src="assets/img/img.png" /></div> 330 </div> 331 <div class="ticker-right"> 332 <div class="ticker-item"><img src="assets/img/img.png" /></div> 333 <div class="ticker-item"><img src="assets/img/img.png" /></div> 334 <div class="ticker-item"><img src="assets/img/img.png" /></div> 335 <div class="ticker-item"><img src="assets/img/img.png" /></div> 336 <div class="ticker-item"><img src="assets/img/img.png" /></div> 337 <div class="ticker-item"><img src="assets/img/img.png" /></div> 338 <div class="ticker-item"><img src="assets/img/img.png" /></div> 339 </div> 340</div> 341<!-- module slider-run --> 342<!-- module js-custom-formsn start --> 343<div id="js-custom-forms" class="container module-block"> 344 <h2>Folder ./module/js-custom-forms</h2> 345 <div class="description-block">ÐÐ»Ñ Ð¾ÑÐ¼ÐµÐ½Ñ Ð´ÐµÐ¹ÑÑÐ²Ð¸Ñ Ð¿Ð»Ð°Ð³Ð¸Ð½Ð° на каком либо ÑлеменÑе добавиÑÑ ÐºÐ»Ð°ÑÑ "jcf-ignore" на ÑÑÐ¾Ñ ÑлеменÑ</div> 346 <div class="jcf">
347 <section class="intro"> 348 <h1>JavaScript Custom Forms</h1> 349 <p>This library allows crossbrowser form elements customization using CSS.</p> 350 <p>Supported elements are following: <strong>select, checkbox, radio, file input</strong> (and more coming)</p> 351 </section> 352 <section class="demo-number"> 353 <h2>Number inputs</h2> 354 <input type="number" min="-3" max="20" step="2"> 355 <input type="number" value="2"> 356 <input type="number" step="7" value="5" min="-20" max="45"> 357 <input type="number" disabled value="7"> 358 </section> 359 <section class="demo-selects" style="padding: 20px 0"> 360 <h2>Select</h2> 361 <p>Select module provides an ability to customize not only select area but also its dropdown. Multiple selects, keyboard navigation and custom scrollbars are supported in the option list.</p> 362 <div> 363 <div> 364 <select> 365 <option value="v1">Native dropdown</option> 366 <option value="v2">Option 1</option> 367 <option value="v3">Option 2</option> 368 <option value="v4">Option 3</option> 369 <option value="v5">Option 4</option> 370 <option value="v6">Option 5</option> 371 </select> 372 </div> 373 <div> 374 <select multiple placeholder="Multiple select" data-jcf="{"multipleCompactStyle": true}"> 375 <option value="v2">Option 1</option> 376 <option value="v3">Option 2</option> 377 <option value="v4">Option 3</option> 378 <option value="v5">Option 4</option> 379 <option value="v6">Option 5</option> 380 </select> 381 </div> 382 <div> 383 <select> 384 <option class="circle red" value="v2">Option 1</option> 385 <option class="circle grenn" value="v3">Option 2</option> 386 <option value="v4">Option 3</option> 387 <option value="v5">Option 4</option> 388 <option value="v6">Option 5</option> 389 </select> 390 </div> 391 <div> 392 <select disabled="disabled"> 393 <option value="v4">Option 1</option> 394 <option value="v5" selected>Disabled select</option> 395 </select> 396 </div> 397 </div> 398 <div> 399 <div> 400 <select size="6"> 401 <optgroup label="Test group1"> 402 <option value="v1">Option 1</option> 403 <option value="v2">Option 2</option> 404 <option value="v3" selected>Option 3</option> 405 </optgroup> 406 <option value="v4">Option 4</option> 407 <option value="v5">Option 5</option> 408 <optgroup label="Test group2"> 409 <option value="v6">Option 6</option> 410 <option value="v7" disabled>Option 7 (disabled)</option> 411 <option value="v8">Option 8</option> 412 <option value="v9">Option 9</option> 413 </optgroup> 414 <option value="v10">Option 10</option> 415 <option value="v11">Option 11</option> 416 </select> 417 <select class="multitest" size="7" multiple> 418 <optgroup label="Multiple select test"> 419 <option>Option 1</option> 420 <option>Option 2</option> 421 <option>Option 3</option> 422 <option>Option 4</option> 423 <option>Option 5</option> 424 </optgroup> 425 <optgroup label="Test group3"> 426 <option>Option 6</option> 427 <option selected>Option 7</option> 428 <option selected>Option 8</option> 429 <option>Option 9</option> 430 </optgroup> 431 <option>Option 10</option> 432 <option>Option 11</option> 433 <option>Option 12</option> 434 <option>Option 13</option> 435 <option>Option 14</option> 436 <option>Option 15</option> 437 <option>Option 16</option> 438 <option>Option 17</option> 439 <option>Option 18</option> 440 <option>Option 19</option> 441 <option>Option 20</option> 442 <option>Option 21</option> 443 <option>Option 22</option> 444 <option>Option 23</option> 445 </select> 446 </div> 447 </div> 448 </section> 449 <section class="demo-checkboxes"> 450 <h2>Checkboxes and radios</h2> 451 <p>Focused and pressed states are also handled.</p> 452 <div> 453 <div> 454 <input type="checkbox" id="chk1" /> 455 <label title="Unchecked state" for="chk1">Unchecked</label> 456 </div> 457 <div> 458 <input type="checkbox" checked="checked" id="chk2" /> 459 <label title="Checked state" for="chk2">Checked</label> 460 </div> 461 <div> 462 <input type="checkbox" disabled="disabled" id="chk3" /> 463 <label title="Checked state" for="chk3">Disabled</label> 464 </div> 465 <div> 466 <input type="checkbox" disabled="disabled" checked="checked" id="chk4" /> 467 <label title="Checked state" for="chk4">Disabled checked</label> 468 </div> 469 </div> 470 <div> 471 <div> 472 <input type="radio" name="rtest" id="rad1" /> 473 <label for="rad1" title="Unchecked state">Unchecked</label> 474 </div> 475 <div> 476 <input type="radio" name="rtest" checked="checked" id="rad2" data-jcf='{"wrapNative": true}' /> 477 <label for="rad2" title="Checked state">Checked</label> 478 </div> 479 <div> 480 <input type="radio" name="rtest" disabled="disabled" checked="checked" id="rad3" /> 481 <label for="rad3" title="Disabled state">Disabled</label> 482 </div> 483 </div> 484 </section> 485 <section class="demo-file"> 486 <h2>File input</h2> 487 <p>Simple file input customization. Custom browse button text, focus/pressed state, selected file extension class.</p> 488 <div> 489 <label>Normal:</label> 490 <input type="file"> 491 </div> 492 <div> 493 <label>Disabled:</label> 494 <input type="file" disabled> 495 </div> 496 </section> 497 </div> 498</div> 499<!-- module js-custom-forms end --> 500<!-- module jcf-select2 start --> 501<div id="jcf-select2" class="container module-block"> 502 <h2>Folder ./module/jcf-select2</h2> 503 <div class="description-block">More info see - <a href="https://github.com/select2/select2">https://github.com/select2/select2</a></div> 504 <div class="js-select2-wrapper"> 505 <select class="js-example-basic"> 506 <option value="AL">Option for 1</option> 507 <option value="WY">Option 2</option> 508 <option value="v-1">Option 3</option> 509 <option value="v-2">Option 4</option> 510 <option value="v-3">Option 5</option> 511 <option value="v-4">Option 6</option> 512 <option value="v-5">Option 7</option> 513 <option value="v-6">Option 8</option> 514 <option value="v-7">Option 9</option> 515 <option value="v-8">Option 10</option> 516 </select> 517 </div> 518</div> 519<!-- module jcf-select2 --> 520<!-- module smooth-scroll start --> 521<div id="smooth-scroll" class="container module-block"> 522 <h2>Folder ./module/smooth-scroll</h2> 523 <div class="description-block">ÐÐ»Ñ Ð¿Ð»Ð°Ð²Ð½Ð¾Ð³Ð¾ пеÑемеÑÐµÐ½Ð¸Ñ Ð¿Ð¾ ÑкоÑнÑм ÑÑÑлкам</div> 524 <div class="just-example-block" style="text-align: center;margin: 10px 0;font-size: 25px;"><a class="scroll-link" href="#body-module">LINK UP TO BODY</a></div> 525 <div class="just-example-block" style="text-align: center;margin: 10px 0;font-size: 25px;"><a class="scroll-link" href="#body-module" data-scrollTime="10000" data-scrollBottom="1000">LINK UP TO BODY WITH DATA OPTIONS</a></div> 526</div> 527<!-- module smooth-scroll end --> 528<!-- module countdown start --> 529<div id="countdown" class="container module-block"> 530 <h2>Folder ./module/countdown</h2> 531 <div id="timer" class="timer"></div> 532 <br> 533 <div id="timer1" class="timer"></div> 534</div> 535<!-- module countdown end --> 536<!-- module sticky-box start --> 537<div id="sticky-box" class="container module-block"> 538 <h2>Folder ./module/sticky-box</h2> 539 <div id="example-sticky-block" style="background: tomato; padding: 20px;">example-sticky-block</div> 540 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis dolore nesciunt perferendis optio ut reprehenderit animi doloremque nisi fugiat debitis, facilis ab praesentium commodi quam, incidunt iusto! Dolores, voluptate excepturi explicabo incidunt asperiores molestias iusto perferendis molestiae deserunt commodi consequuntur quidem, enim aliquid praesentium debitis dignissimos quibusdam, nulla corporis ullam blanditiis dolorum est quaerat aperiam ab id. Eveniet velit vitae odio perferendis porro, obcaecati veritatis! Autem dicta, beatae deleniti a placeat perferendis ab veniam? Maxime et aperiam, nam sed totam fugiat labore illum, dolor neque adipisci aspernatur magni ipsam eum beatae aliquid sunt fuga consequatur nemo alias delectus optio dignissimos ab! Earum ex laborum accusamus beatae ipsa iste et perspiciatis molestiae, blanditiis sint illo voluptas voluptate culpa autem id quaerat impedit voluptatibus laudantium cupiditate optio cum odit totam! Dignissimos suscipit expedita odit, placeat sit possimus. Voluptates quia accusantium quod quae aspernatur aliquid. Vero magnam similique, nulla labore, obcaecati dolorem, quas eum error sed alias assumenda dolor necessitatibus provident ullam! Incidunt ut laboriosam est quisquam deserunt eaque tenetur nisi aliquid repudiandae! Facere a perferendis officiis ut sunt saepe, deleniti totam ipsum quaerat animi, in nesciunt maxime blanditiis temporibus. Modi cum commodi obcaecati accusamus. Illo odit reiciendis sapiente culpa iure ad explicabo alias architecto facere, mollitia quia neque eius cum et nulla sit voluptas modi error atque nemo, placeat cumque itaque dolorum minima delectus! Mollitia, doloribus, aliquid at velit voluptatem harum, optio impedit repellendus unde tempore voluptatum ad sunt, vitae amet. Veritatis, blanditiis! Eveniet delectus soluta neque, quod debitis sapiente numquam sequi.</p> 541</div> 542<!-- module sticky-box end --> 543<!-- module tabs-to-accordion start --> 544<div id="browser-detect" class="container module-block"> 545 <h2>Folder ./module/browser-detect</h2> 546 <div class="description-block">СкÑÐ¸Ð¿Ñ Ð¾Ð¿ÑÐµÐ´ÐµÐ»ÐµÐ½Ð¸Ñ Ð±ÑаÑзеÑа, движка и OS, ÑÑабаÑÑÐ²Ð°ÐµÑ Ð¿Ñи подклÑÑении пÑопиÑÑÐ²Ð°ÐµÑ Ð½Ð°Ð·Ð²Ð°Ð½Ð¸Ðµ в Ñег html</div> 547 548</div> 549<!-- module tabs-to-accordion end --> 550<!-- module scriptToggleClassParents start --> 551<div id="scriptToggleClassParents" class="container module-block"> 552 <h2>Folder ./module/scriptToggleClassParents</h2> 553 <div class="description-block">СкÑÑÑие показ блока по дÑÑÐ³Ð¾Ð¼Ñ Ð±Ð»Ð¾ÐºÑ, Ñ Ð¿ÑивÑзкой к ÑодиÑÐµÐ»Ñ + Ð´Ð¾Ð±Ð°Ð²Ð»ÐµÐ½Ð¸Ñ ÐºÐ»Ð°ÑÑа ÑодиÑелÑ</div> 554 <div class="toggle-block-wrapper"> 555 <div class="toggle-block"> 556 <h2>Toggle block - click me</h2> 557 </div> 558 <div class="toggle-block-hide" style="display: none;"> 559 <h2>Toggle block</h2> 560 </div> 561 </div> 562</div> 563<!-- module scriptToggleClassParents --> 564<!-- module jquery-validate-form start --> 565<div id="jquery-validate-form" class="container module-block"> 566 <h2>Folder ./module/jquery-validate-form</h2> 567 <div class="description-block">ÐалидаÑÐ¸Ñ ÑоÑÐ¼Ñ + оÑпÑавка ajax</div> 568 <form class="sub-form ajax-form-sent" method="post" action="../../module/jquery-validate-form/email-sender.php"> 569 <fieldset> 570 <p> <input class="am-send-me" type="text" placeholder="Your name" name="name" minlength="4" data-rule-maxlength="16" data-rule-required="true"> </p> 571 <p> <input class="am-send-me" type="email" placeholder="Your email" data-rule-email="true" data-rule-required="true"> </p> 572 <p> <textarea class="am-send-me" placeholder="Your message" minlength="10" name="text" data-rule-required="true"></textarea> </p> 573 <p><input type="submit" value="Submit"></p> 574 <div class="success-response">Email sent successfully</div> 575 <div class="error-response">Something went wrong, please try again later</div> 576 </fieldset> 577 </form> 578</div> 579<!-- module jquery-validate-form --> 580<!-- module arrow-up start --> 581<div id="arrow-up-wrapper" class="container module-block"> 582 <h2>Folder ./module/arrow-up</h2> 583 <div class="description-block">Ðнопка ввеÑÑ Ñ Ð½ÐµÐ±Ð¾Ð»ÑÑой анимаÑией поÑÐ²Ð»ÐµÐ½Ð¸Ñ Ð¸ÑÑÐµÐ·Ð°Ð½Ð¸Ñ Ð²Ð²ÐµÑÑ Ñ</div> 584 <a class="arrow-up" id="arrow-up" href="#">â</a> 585</div> 586<!-- module arrow-up --> 587<!-- module magnific-popup start --> 588<div id="magnific-popup" class="container module-block"> 589 <h2>Folder ./module/magnific-popup</h2> 590 <!-- popup__link start -->
590<a href="#request" class="popup-show" style="display: block; width: 100px; margin: 30px auto; font-size: 25px; color: red;">Popup</a> 591 <!-- popup__link end --> 592 <!-- popup__content start --> 593 <div id="request" class="modal mfp-hide"> 594 <div class="modal__header"> 595 <h4 class="modal__title">Ðаголовок</h4><button class="modal__close mfp-close">Ã</button></div> 596 <div class="modal__body"> 597 <p>ТекÑÑ</p> 598 </div> 599 <div class="modal__footer"><button class="modal__btn popup-close">ÐакÑÑÑÑ</button></div> 600 </div> 601 <!-- popup__content end --> 602</div> 603<!-- module magnific-popup --> 604<!-- module jquery-rating-stars start --> 605<div id="jquery-rating-stars" class="container module-block"> 606 <h2>Folder ./module/jquery-rating-stars</h2> 607 <div class="description-block">РейÑинг Ñ Ð²Ð¾Ð·Ð¼Ð¾Ð¶Ð½Ð¾ÑÑÑÑ Ð²ÑбоÑа - более подÑобно http://biznesguide.ru/coding/156.html</div> 608 <div id="rating_1"> 609 <input type="hidden" name="vote-id" value="1"> 610 </div> 611</div> 612<!-- module jquery-rating-stars --> 613<!-- module table-responsive start --> 614<div id="table-responsive" class="container module-block"> 615 <h2>Folder ./module/table-responsive</h2> 616 <table class="table-responsive"> 617 <thead> 618 <tr> 619 <th>First Name</th> 620 <th>Last Name</th> 621 <th>Job data-label</th> 622 <th>Favorite Color</th> 623 <th>Wars or Trek?</th> 624 <th>What is Lorem Ipsum?</th> 625 <th>Date of Birth</th> 626 </tr> 627 </thead> 628 <tbody> 629 <tr> 630 <td data-label="First Name"><span>James</span></td> 631 <td data-label="Last Name"><span>Matman</span></td> 632 <td data-label="Job data-label"><span>Chief Sandwich Eater Chief Sandwich Eater</span></td> 633 <td data-label="Favorite Color"><span>Lettuce Green</span></td> 634 <td data-label="Wars or Trek?"><span>Trek</span></td> 635 <td data-label="What is Lorem Ipsum?"><span>Digby Green</span></td> 636 <td data-label="Date of Birth"><span>January 13, 1979</span></td> 637 </tr> 638 <tr> 639 <td data-label="First Name"><span>The</span></td> 640 <td data-label="Last Name"><span>Tick</span></td> 641 <td data-label="Job data-label"><span>Crimefighter Sorta</span></td> 642 <td data-label="Favorite Color"><span>Blue</span></td> 643 <td data-label="Wars or Trek?"><span>Wars</span></td> 644 <td data-label="What is Lorem Ipsum?"><span>John Smith</span></td> 645 <td data-label="Date of Birth"><span>July 19, 1968</span></td> 646 </tr> 647 </tbody> 648 </table> 649</div> 650<!-- module table-responsive --> 651<!-- module fancybox start --> 652<div id="fancybox" class="container module-block"> 653 <h2>Folder ./module/fancybox</h2> 654 <a class="single_image" href="assets/img/img.png"><img src="assets/img/img.png" alt=""/></a> 655</div> 656<!-- module fancybox --> 657<!-- module datepicker start --> 658<div id="datepicker" class="container module-block"> 659 <h2>Folder ./module/datepicker</h2> 660 <input class="datepicker" type="text" placeholder="Date" readonly> 661</div> 662<!-- module datepicker --> 663<!-- module tooltip start --> 664<div id="tooltip" class="container module-block"> 665 <h2>Folder ./module/tooltip</h2> 666 <div class="live-example"> 667 <h2>ÐÑÐ¸Ð¼ÐµÑ ÑабоÑÑ Tooltip Ð´Ð»Ñ Ð¸Ð½Ð»Ð°Ð¹Ð½Ð¾Ð²ÑÑ ÑÑÑлок (наведиÑе на ÑÑÑлки в ÑекÑÑе)</h2> 668 <p>Proin tincidunt, <a title="tooltip text 1...tooltip text 1...tooltip text 1...tooltip text 1...tooltip text 1...tooltip text 1...tooltip text 1..." href="#">orci eu consectetur interdum</a>, enim tellus imperdiet odio, <a title="tooltip text 2..." href="#">id porttitor enim pede sit amet erat</a>..</p> 669 <div class="live-example"> 670 <h2>ÐÑÐ¸Ð¼ÐµÑ ÑабоÑÑ Tooltip Ñ ÑазлиÑнÑми ÑпоÑобами позиÑиониÑованиÑ</h2> 671 <ul class="tooltip-demo-list"> 672 <li><a title="Tooltip at top-left position..." rel="top-left" href="#">↖ TopLeft</a></li> 673 <li><a title="Tooltip at top-center position..." rel="top-center" href="#">TopCenter ↑</a></li> 674 <li><a title="Tooltip at top-right position..." rel="top-right" href="#">TopRight ↗</a></li> 675 <li><a title="CenterLeft" rel="center-left" href="#">← CenterLeft</a></li> 676 <li> 677 <!-- CenterCenter? --> 678 </li> 679 <li><a title="CenterRight" rel="center-right" href="#">CenterRight →</a></li> 680 <li><a title="BottomLeft" rel="bottom-left" href="#">↙ BottomLeft</a></li> 681 <li><a title="BottomCenter" rel="bottom-center" href="#">BottomCenter ↓</a></li> 682 <li><a title="BottomRight" rel="bottom-right" href="#">BottomRight ↘</a></li> 683 </ul> 684 </div> 685 <div class="live-example"> 686 <h2>ÐÑÐ¸Ð¼ÐµÑ ÑабоÑÑ Tooltip Ñ ÐºÐ°ÑÑомной ÑÑÑÑкÑÑÑой</h2> 687 <div class="custom-example"> 688 <button title="test custom tooltip content...">Test Button</button> 689 </div> 690 </div> 691 </div> 692</div> 693<!-- module tooltip --> 694<!-- module Touch-Device-Detect start --> 695<div id="Touch-Device-Detect" class="container module-block"> 696 <h2>Folder ./module/Touch-Device-Detect</h2> 697 <div class="message-touch"></div> 698</div> 699<!-- module Touch-Device-Detect --> 700<!-- module add-class-for-focus start --> 701<div id="add-class-for-focus" class="container module-block"> 702 <h2>Folder ./module/add-class-for-focus</h2> 703 <form> 704 <h1>Add class parents for focus input example:</h1> 705 <div class="focus-block-ex"> 706 <input type="text" style="background: #ccc;"> 707 </div> 708 <div class="focus-block-ex"> 709 <input type="text" style="background: #ccc;"> 710 </div> 711 </form> 712</div> 713<!-- module add-class-for-focus --> 714<!-- module input-mask start --> 715<div id="input-mask" class="container module-block"> 716 <h2>Folder ./module/input-mask</h2> 717 <form> 718 <input class="number" placeholder="xxxx xxxx xxxx xxxx" maxlength="19" im-insert="true">
719 <input class="phone" type="tel" placeholder="(xxx) xxx-xx-xx" maxlength="15" im-insert="true"> 720 <button>Send</button> 721 </form> 722</div> 723<!-- module input-mask --> 724<!-- loading JS Start -->
725<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
vendor: 2 bytes, line 725
725
726<script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
vendor: 2 bytes, line 726
726
727<script> 728 window.jQuery || document.write('
728<script src="js/jquery-3.2.1.min.js" defer><\/script>') 729</script>
vendor: 2 bytes, line 729
729
730<script src="assets/js/module.js" defer></script>
730 731<!-- loading JS End --> 732<!--<Deject>--> 733<!--Removing zone start --> 734<link rel="stylesheet" href="assets/css/development.css"> 735<div class="dev-scripts-block"> 736 <div class="responsive-breakpoint"> 737 <div class="responsive-breakpoint-checkbox"> 738 <input class="responsive-breakpoint-checkbox__checkbox" type="checkbox" id="responsive-breakpoint-checkbox__checkbox" /> 739 <label class="responsive-breakpoint-checkbox__label" for="responsive-breakpoint-checkbox__checkbox"></label> 740 </div> 741 <!-- <div class="responsive-breakpoint__min">MOBILE FIRST</div> --> 742 <div class="responsive-breakpoint__max">breakpoint</div> 743 <div class="responsive-breakpoint__strictly"></div> 744 <div class="responsive-breakpoint__pixel-ratio"></div> 745 </div> 746 <div class="scroll-up-plugins"> 747 <div class="scroll-up-plugins__button scroll-up-plugins__button--25"></div> 748 <div class="scroll-up-plugins__button scroll-up-plugins__button--50"></div> 749 <div class="scroll-up-plugins__button scroll-up-plugins__button--75"></div> 750 </div> 751 <div class="widget_wrap"><div class="widget_list"></div></div> 752</div> 753<div class="button-all-off"> 754 <div class="button-all-off button-all-off--aava"> 755 <input id="button-all-off" type="checkbox" checked="checked"> 756 <label for="button-all-off" data-on-text="On" data-off-text="Off"></label> 757 </div> 758</div>
759<script src="assets/js/development.js"></script>
759 760<!--Removing zone end --> 761<!--</Deject>--> 762</body> 763</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.