今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  3. テーブルにチェックボックス機能を付加「jTableCheckbox」
  4. 画像に拡大・縮小ボタンを「Zoomer」

チェックボックスをさまざまなスタイルにカスタマイズ「alt-checkbox」

スポンサーリンク

チェックボックスをさまざまなスタイルにカスタマイズするプラグイン「alt-checkbox」を紹介します。

jQueryプラグイン「alt-checkbox」

このプラグインを使えば、デフォルトの小さくてチェックしにくいチェックボックスを大きくすることができます。

また、用意されているスタイル(css)からチェックボックスルのアイコンをカスタマイズすることができます。

スポンサーリンク

それではデモページのチェックボックスをご覧ください。

「alt-checkbox」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="alt-checkbox のデモでーす。">
<title>alt-checkbox - jQueryプラグイン</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.alt-checkbox.js"></script>
<link rel="stylesheet" href="jquery.alt-checkbox.icon-font.css">
<link rel="stylesheet" href="jquery.alt-checkbox.css">
</head>
<body>
<h1>alt-checkbox のデモです。</h1>
<span style="font-size: 10em">
<input type="checkbox" id="demo">
<label for="demo">チェックボックス</label>
</span>

<script>
  jQuery("#demo").altCheckbox({
    iconClass: "fontawesome-remove"
  });
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)