→   Чекбоксы в айфоновском стиле

чекбоксы в стиле iphone

Поставить к себе на сайт такие чекбоксы очень просто, потому что, всё уже реализовали за нас и остаётся только всё правильно подключить.

Во-первых подключаем в разделе <head>: jquery.js, плагин для чекбоксов iphone-style-checkboxes.js и css-файл в котором будут описаны правила для будущих chekbox'ов

  1. <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
  2. <script src="iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script>
  3. <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />

Далее активируем подключенный плагин:

  1.  <script type="text/javascript" charset="utf-8">
  2.     $(document).ready(function() {
  3.      $(':checkbox').iphoneStyle();
  4.     });
  5.  </script>

После того как подключили скрипты и один описанный выше CSS-файл, можно уже увидеть результаты:

Пример html-разметки

  1.  <h3>Chekbox — uncheck</h3>
  2.  <input type="checkbox" />
  3.  <h3>Chekbox — check</h3>
  4.  <input type="checkbox" checked="checked" />

Ну и собственно всё, смотрим:

Пример Откроется
в новом окне

или скачиваем:

Скачать одним zipr'ом
31,4 kb

 

айфон | jQuery