Чекбоксы в стиле iPhone с помощью jQuery

[Khvosticov Sergey]

Этот короткий урок поможет Вам превратить простые чекбоксы в более привлекательные с помощью jQuery.
Демонстрация (внешка)
Первым делом в шапке документа подключаем фреймворк, стили и дополнительный скрипт:

Код: Выделить всё

<script src="jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
  <script src="iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
  <script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
      $(':checkbox').iphoneStyle();
    });
  </script>

Далее в любом месте документа вставляем, как обычно, чекбоксы. В примере показано 2 варианта (включенный и выключенный):

Код: Выделить всё

<h2>Выключено по умолчанию</h2>
<input type="checkbox" />

<h2>Включено по умолчанию</h2>
<input type="checkbox" checked="checked" />

На обработку формы, в которой будут использованы такие чекбоксы, это никак не влияет. Суть остается та же, меняется только внешний вид.

Есть небольшое отличие от iPhone: в телефоне необходимо перетаскивать слайдер, здесь же необходимо нажимать на необходимый вариант!



Данный урок подготовлен для Вас командой сайта http://ruseller.com
Источник урока: http://www.awardwinningfjords.com


Исходники :