jQuery pluginフォーム要素のカスタマイズ
- Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements〔ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズ〕
- Custom Select boxes with jquery〔アイコン入りのプルダウンメニュー〕
- File Style〔参照ボタンを指定したボタン画像にする〕
- jCombox: jQuery HTML Select Tag Plugin〔Select要素の拡張プラグイン〕
- jQuery Custom Check Box and Radio Buttons 〔チェックボックとラジオボタンを画像化〕
- jQuery Dropdown Check List〔複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューに〕
- JQuery Geogoer VChecks Plugin〔リスト要素＋チェックボックスを画像化〕
- jQuery imageless buttons a la Google〔Gmail風のイメージレスボタン〕
- Linkselect jQuery Plug-in〔プルダウンメニューのスタイリング（select要素を隠し要素とリスト要素に変換）〕
- DropKick〔プルダウンメニューのスタイリング（select要素をリスト要素に変換）〕
- EASY SELECT BOX〔プルダウンメニューのスタイリング（select要素を画像に変換）〕
Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズ
unknown
Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements
jquery.js、custom-form-elements.js
ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズするjQueryプラグイン。
ラジオボタン、チェックボックスは、OFF・ONそれぞれ通常時とアクティブ時の4つの状態を1枚画像にしたものを、要素上にspan要素として重ね、状態によって表示を切り替えてます。
※チェックボックスをラベル要素でくくる場合は、そのままだとid要素の関連がうまくいかないので注意が必要です。
セレクトメニューは選択時のメニュー画像1枚を背景として敷いています。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css">
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script src="/content/lib/jquery/custom-form-elements.js" ></script>
<!-- CSS -->
<style type="text/css">
.checkbox, .radio {
width:19px; height:25px;
padding:0 5px 0 0;
background:transparent url("/content/img/ajax/checkbox.png") no-repeat 0 0;
display:block;
clear:left;
float:left;
}
.radio {
background:transparent url("/content/img/ajax/radio.png") no-repeat 0 0;
}
.select {
position:absolute;
/* With the padding included, the width is 190 pixels:the actual width of the image. */
width:158px; height:21px;
padding:0 24px 0 8px;
color:#fff;
background:url("/content/img/ajax/select.gif") no-repeat;
overflow:hidden;
}
label {
display:block;
margin:10px 0;
}
#frm p {
width:150px;
float:left;
margin:0 0 10px 0;
}
</style>
</head>
<body>
<!-- CONTENT -->
<p>参照：<a href='http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/'>Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements</a></p>
<p>ラジオボタン、チェックボックス、セレクトメニューの見た目をカスタマイズ</p>
<div id="res">
<!-- CODE -->
<form action="/content/demo/test.php" method="get" id="frm">
<div class="cf">
<p>
<label for="c1"><input type="checkbox" name="c1" value="1" class="styled" checked="checked">選択肢1</label>
<label for="c2"><input type="checkbox" name="c2" value="2" class="styled">選択肢2</label>
<label for="c3"><input type="checkbox" name="c3" value="3" class="styled">選択肢3</label>
</p>
<p>
<label for="r1"><input type="radio" name="r" id="r1" value="yes" class="styled"> はい</label>
<label for="r2"><input type="radio" name="r" id="r2" value="no" class="styled" checked="checked"> いいえ</label>
</p>
<p>
<select name="d" class="styled">
<option value="0">選択してください</option>
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
</select>
</p>
</div>
<p><input type="submit" value="送信"></p>
</form>
<!-- / CODE -->
</div>
<!-- / CONTENT -->
</body>
</html>
Custom Select boxes with jquery
アイコン入りのプルダウンメニュー
2009/3/25
Custom Select boxes with jquery
jquery.js、jquery.customselect.js
アイコン入りのプルダウンメニューを作成するjQueryプラグイン。
jQueryで、select要素とoption要素をdiv要素に変換し、Option要素内にアイコンを表示しています。 メニューをクリックすると、メニューをアニメーションしながら開閉します。 選択すると、通常のプルダウンメニュー同様、選択した項目のテキストがメニュー部分に表示されます。
メニュー部分に表示するテキストはselect要素のtitle属性に指定します。 アイコン画像のURLはoption要素のtitle属性に指定します。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Custom Select boxes with jquery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.customselect.js"></script>
<script type="text/javascript">
$(function(){
$('#customselector').customSelect();
});
</script>
<!-- CSS -->
<style type="text/css">
img { vertical-align:middle; margin-right:3px; }
#iconselect { background:transparent url("/content/img/ajax/select-bg.gif") no-repeat 0 0; width: 250px; height: 25px; padding:4px 0 0 15px; }
.selectitems { width:230px; height:25px; border-bottom: dashed 1px #ddd; padding:2px 0 0 10px; }
.selectitems span { margin:0 0 0 5px; }
#iconselectholder { width: 250px; overflow: auto; display:none; position:absolute; background-color:#fff5ec; }
.hoverclass{ background-color:#fff; cursor:hand; }
.selectedclass{ background-color:#ffff99; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.acewebdesign.com.au/customselect.php'>Custom Select boxes with jquery</a> | 設置サンプル</h1>
<p>▼アイコン入りのプルダウンメニューです。メニュー部分をクリックすると、アニメーションしながら開閉します。</p>
<!-- CODE -->
<select name="select" class="customselect" title="アイコンを選択してください" id="customselector">
<option value="icon1" id="icon1" title="/content/img/icon/color/attention.gif">Attention icon</option>
<option value="icon2" id="icon2" title="/content/img/icon/color/star.gif">Star Icon</option>
<option value="icon3" id="icon3" title="/content/img/icon/color/rss.gif">RSS Icon</option>
</select>
<!-- / CODE -->
</div>
</body>
</html>
File Style
参照ボタンを指定したボタン画像にする
2009/3/26
File Style
jquery.js、jquery.filestyle.js
参照ボタンを指定したボタン画像にするjQueryプラグイン。
参照ボタンとして表示するボタン画像、ボタン画像のサイズ、input要素（type=file）の幅を指定することができます。 CSSでデフォルトの参照ボタンの上に指定したボタン画像を重ねて表示しています。
設置イメージFile Styleの設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>File Style | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.filestyle.js"></script>
<script type="text/javascript">
$(function(){
$("input.file_1").filestyle({
image: "/content/img/ajax/choose-file.gif",
imageheight:22,
imagewidth:80,
width:200
});
});
</script>
<!-- CSS -->
</head>
<body>
<div id="wrap">
<h1><a href='http://www.appelsiini.net/projects/filestyle'>File Style</a> | 設置サンプル</h1>
<p>▼参照ボタンを指定したボタン画像にします。</p>
<!-- CODE -->
<form action="#">
<input type="file" class="file_1" />
</form>
<!-- / CODE -->
</div>
</body>
</html>
jCombox: jQuery HTML Select Tag Plugin
Select要素の拡張プラグイン
2009/4/4
jCombox: jQuery HTML Select Tag Plugin 1.0b
Firefox2/3, IE6/7, Safari3.1(Win) and Opera9.5
Creative Commons Attribution-Share Alike 3.0 Unported License（個人・商用利用可）
［JS］jquery.js、jcombox-1.0b.packed.js、jquery.easing.js（オプション）
［CSS］styles.css
［CSS］styles.css
エフェクト、アクション、スタイルの変更などSelect要素を拡張するjQueryプラグイン。
Select要素は、div要素とa要素に変換されます。 ドロップダウンメニューの幅はselect要素のwidth属性、高さはselect要素のrows属性で指定します。 デフォルト選択は、option要素のselected属性に「selected」を指定します。 ドロップダウンメニューの開閉時にアニメーション効果を付けたり、ドロップダウンメニューの有効化・無効化、アイテムの追加・編集・削除などのアクションも行うことが出来ます。
Select要素独自のthis.option.selectedIndexなどの値の取得はできません。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="/content/lib/jquery/jcombox/jcombox-1.0b.packed.js"></script>
<script src="/content/lib/jquery/jquery.easing.1.3.js"></script>
<script>
$(function(){
/* 基本 */
$('.select').jcombox();
$('.select15').jcombox({ fn: clickMe });
/* エフェクト */
$('.select20').jcombox({ fx: 'slideFade', fxDelay:400 });
$('.select21').jcombox({ fx: 'easing', fxType: 'easeOutBounce', fxDelay: 500 });
/* テーマ */
$('.select30').jcombox({ theme: 'blue' });
$('.select31').jcombox({ theme: 'mytheme', set: true });
$('.select32').jcombox({ theme: 'safari', set: true, fx: 'slide' });
$('.select33').jcombox({ theme: 'opera', set: true, fx: 'easing', fxType: 'easeInExpo', fxDelay: 500 });
});
function clickMe(txt){
alert("クリック！");
}
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jcombox/styles.css" />
<style type="text/css">
h2, h3 { margin-top:20px; }
button { border: 1px solid #a8a8a8; font-weight: bold; padding: 2px 4px; color: #5b5b5b;}
button:hover { background: #cfcfcf; color: #fff;}
</style>
</head>
<body>
<!-- CONTENT -->
<p>参照：<a href='http://jquerylab.com/jcombox/'>jCombox: jQuery HTML Select Tag Plugin 1.0b</a></p>
<div id="res">
<!-- CODE -->
<h2>● 基本</h2>
<h3>デフォルト</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select' name='exp1' width='143'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<h3>デフォルト選択（option@selected）</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select' name='exp2' width='200'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option selected value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
</form>
<h3>ドロップダウンメニューの高さを指定（select@rows）</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select' name='exp3' rows='6' width='200'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
<option value='neptune'>Neptune</option>
</select>
<button type='submit'>submit</button>
</form>
<h3>ドロップダウンメニューのサイズを指定（select@size）</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select' name='exp5' size='5' width='200'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<h3>onchangeイベントに関数を指定（選択時にアラート表示）</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select' name='exp6' onchange='clickMe()' width='200'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<h3>コールバック関数</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select15' name='exp7' size='5' width='200'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<hr />
<h2>● エフェクト</h2>
<h3>スライド・フェード効果</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select20' name='exp8' width='143'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<h3>jquery.easing.js使用</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select21' name='exp9' width='143'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<hr />
<h2>● テーマ</h2>
<h3>blue</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select30' name='exp10' width='200'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<style type="text/css">
/* theme: blue */
.blue { border:1px solid #84d7ff; font-size:18px; font-weight:bold; color:#0080c0; background-color:#d5f1ff; }
.blue .menu { border:1px solid #06aeff; }
.blue-hover { border-color:#06aeff; }
.blue .current { background-color:#0080c0 !important; color:#fff !important; }
</style>
<h3>画像使用</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select31' name='exp11' width='250'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<style type="text/css">
/* theme: mytheme */
.mytheme{ border:1px solid #668d32; color:#333; font-size:13px; background-color:#e9e9e9; background-image:url('/content/lib/jquery/jcombox/round.gif'); }
.mytheme-hover{ border-color:#008040;color:#668d32; background-image:url('/content/lib/jquery/jcombox/round_hover.gif'); }
.mytheme.current{ background-color:#668d32!important; color:#fff!important; }
.mytheme.menu { border:1pxsolid#668d32; }
</style>
<h3>画像使用（Safari風）</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select32' name='exp12' width='200'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<style type="text/css">
/* theme: mytheme */
.safari { border:1px solid #69a6e4; color:#333; font-size:13px; font-weight:bold; background-color:#e9e9e9; background-image:url('/content/lib/jquery/jcombox/safari.gif'); }
.safari-hover { border-color:#69a6e4; color:#2067ae; }
.safari .current { background-color:#69a6e4 !important; color:#fff !important; }
.safari .menu { border:1px solid #808080; }
</style>
<h3>画像使用（Opera風）</h3>
<form action='/content/demo/test.php' method='get' class='cf'>
<select class='select33' name='exp13' width='150'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</form>
<style type="text/css">
/* theme: opera */
.opera { border:1px solid #69a6e4; color:#505050; font-size:13px; font-weight:bold; background-color:#e9e9e9; background-image:url('/content/lib/jquery/jcombox/opera.gif'); }
.opera-hover { border-color:#69a6e4; color:#505050; background-image:url('/content/lib/jquery/jcombox/opera_hover.gif'); }
.opera .current { background-color:#808080 !important; color:#fff !important; }
.opera .menu { border:1px solid #494949; }
</style>
<hr />
<h2>● アクション</h2>
<form action='/content/demo/test.php' method='get' class='cf'>
<p>
<a href='#' id='example40Enable'>有効化</a> | <a href='#' id='example40Disable'>無効化</a> |
<a href='#' id='example40Selected'>選択されている値を取得</a>
</p>
<p>
<a href='#' id='example40Add'>アイテム追加</a> | <a href='#' id='example40Edit'>アイテムを編集</a> |
<a href='#' id='example40Remove'>アイテム削除</a> | <a href='#' id='example40Clear'>アイテムをクリア</a>
</p>
<p>
<select class='select40' name='example40' disabled='disabled'>
<option value=''>Select a Planet</option>
<option value='mercury'>Mercury</option>
<option value='venus'>Venus</option>
<option value='earth'>Earth</option>
<option value='mars'>Mars</option>
<option value='jupiter'>Jupiter</option>
<option value='saturn'>Saturn</option>
</select>
<button type='submit'>submit</button>
</p>
</form>
<script>
$(function(){
$('.select40').jcombox();
$('#example40Disable').click(function(){
$('#example40').jcDisable();
return false;
});
$('#example40Selected').click(function(){
//passing a true value, returns the selected item text
alert( $('#example40').jcSelected(1) + ': ' + $('#example40').jcSelected());
return false;
});
$('#example40Enable').click(function(){
$('#example40').jcEnable();
return false;
});
$('#example40Add').click(function(){
//passing a true value as the third parameter, selects the item
$('#example40').jcAdd('uranus', 'Uranus', true);
return false;
});
$('#example40Remove').click(function(){
$('#example40').jcClear();
return false;
});
$('#example40Edit').click(function(){
$('#example40').jcEdit('pluto', 'Pluto');
return false;
});
$('#example40Clear').click(function(){
//passing a true value to jcClear, just clears the selected item
$('#example40').jcClear(1);
return false;
});
});
</script>
<!-- / CODE -->
</div>
<!-- / CONTENT -->
</body>
</html>
jQuery Custom Check Box and Radio Buttons
チェックボックとラジオボタンを画像化
unknown
jQuery Custom Check Box and Radio Buttons
jquery.js、cust_checkbox_plugin.js
チェックボックスとラジオボタンをCSSと画像でスタイリングするjQueryプラグイン。
チェックボックス、ラジオボタンの状態を表す画像を、チェックあり、チェックなし、チェックあり（無効化）、チェックなし（無効化）の計4枚ずつ用意します。 チェックボックス、ラジオボタンをクリックすると、オン・オフなど状態に応じた画像をCSSで切り替えて表示しています。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Custom Check Box and Radio Buttons | 設置サンプル</title>
<link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/cust_radio_buttons/cust_checkbox_plugin.js"></script>
<script type="text/javascript">
$(function() {
$("input[type='checkbox']").custCheckBox();
$("input[type='radio']").custCheckBox();
});
</script>
<!-- CSS -->
<style type="text/css">
.cust_checkbox { font-size:14px; cursor:pointer; }
.cust_checkbox_on { background:url("/content/lib/jquery/cust_radio_buttons/checkbox_on.png") no-repeat left center; }
.cust_radio_on { background:url("/content/lib/jquery/cust_radio_buttons/radiobox_on.png") no-repeat left center; }
.cust_checkbox_off { background:url("/content/lib/jquery/cust_radio_buttons/checkbox_off.png") no-repeat left center; }
.cust_radio_off { background:url("/content/lib/jquery/cust_radio_buttons/checkbox_off.png") no-repeat left center; }
.cust_checkbox_disabled_on { background:url("/content/lib/jquery/cust_radio_buttons/checkbox_disabled_on.png") no-repeat left center; }
.cust_checkbox_disabled_off { background:url("/content/lib/jquery/cust_radio_buttons/disabled_off.png") no-repeat left center; }
.cust_radio_disabled_on { background:url("/content/lib/jquery/cust_radio_buttons/radiobox_disabled_on.png") no-repeat left center; }
.cust_radio_disabled_off { background:url("/content/lib/jquery/cust_radio_buttons/disabled_off.png") no-repeat left center; }
fieldset { margin:0 0 20px 0; padding:10px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://mypocket-technologies.com/jquery/cust_radio_buttons/'>jQuery Custom Check Box and Radio Buttons</a> | 設置サンプル</h1>
<p>▼チェックボックスとラジオボタンを画像化</p>
<!-- CODE -->
<fieldset>
<legend>チェックボックス</legend>
<label for="c1">ラベル1</label>
<input type="checkbox" value="1" name="checkboxone" id="c1" checked="checked"/>
<label for="c1">ラベル2</label>
<input type="checkbox" value="2" name="checkboxone" id="c2"/>
<label for="c1">ラベル3</label>
<input type="checkbox" value="3" name="checkboxone" id="c3" checked="checked"/>
</fieldset>
<fieldset>
<legend>ラジオボタン</legend>
<label for="r1">ラベル1</label>
<input type="radio" value="1" name="radionone" id="r1"/>
<label for="r2">ラベル2</label>
<input type="radio" value="2" name="radionone" id="r2" checked="checked"/>
<label for="r3">ラベル3</label>
<input type="radio" value="3" name="radionone" id="r3"/>
</fieldset>
<!-- CODE / -->
</div>
</body>
</html>
jQuery Dropdown Check List
複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューに
unknown
Dropdown Check List
［JS］jquery.js、ui.core.js、ui.dropdownchecklist.js
［CSS］ui.dropdownchecklist.css
［画像］dropdown.png、dropdown_hover.png
［CSS］ui.dropdownchecklist.css
［画像］dropdown.png、dropdown_hover.png
複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューにするjQueryプラグイン。
オプションで、コントロールの幅、ドロップダウンの高さ、全選択・全解除などを簡単に指定することができます。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Dropdown Check List | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/jquery-ui-1.7.1.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/ui/ui.dropdownchecklist.js"></script>
<script type="text/javascript">
$(function(){
$("#s1").dropdownchecklist();
$("#s2").dropdownchecklist();
$("#s3").dropdownchecklist({ width: 100 });
$("#s4").dropdownchecklist({ maxDropHeight: 120 });
$("#s5").dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 });
});
</script>
<!-- CSS -->
<style type="text/css">
.ui-dropdownchecklist { height:20px; border:1px solid #ddd; border-right:0; background:#fff url("/content/img/ajax/dropdownchecklist/dropdown.png") no-repeat center right; padding-right:17px; }
.ui-dropdownchecklist-hover, .ui-dropdownchecklist-active { background-image:url("/content/img/ajax/dropdownchecklist/dropdown_hover.png"); border-color:#5794bf; }
.ui-dropdownchecklist-text { line-height:20px; }
.ui-dropdownchecklist-dropcontainer { background-color:#fff; border:1px solid #999; }
.ui-dropdownchecklist-item { }
.ui-dropdownchecklist-item-hover { background-color:#39f; color:#fff; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://plugins.jquery.com/project/dropdownchecklist'>Dropdown Check List</a> | 設置サンプル</h1>
<p>▼複数選択型プルダウンメニューをチェックボックス付きのドロップダウンメニューにします。</p>
<!-- CODE -->
<h2>デフォルト</h2>
<pre>$("#s1").dropdownchecklist();</pre>
<p>
<select id="s1" multiple="multiple">
<option>Low</option>
<option>Medium</option>
<option>High</option>
</select>
</p>
<pre>$("#s2").dropdownchecklist();</pre>
<p>
<select id="s2" multiple="multiple">
<option>Low</option>
<option selected="selected">Medium</option>
<option selected="selected">High</option>
</select>
</p>
<h2>長いテキスト、短いコントロール</h2>
<p>
widthオプションは、コントロールの固定幅を設定します。<br>
ドロップダウンのアイテムのテキストが長い場合は、コントロールは固定幅を保持し、アイテム部分のサイズだけアイテムのテキスト長さに合わせて広がります。
</p>
<pre>$("#s3").dropdownchecklist({ width: 100 });</pre>
<p>
<select id="s3" multiple="multiple">
<option>Pneumonoultramicroscopicsilicovolcanoconiosis</option>
<option>Pseudopseudohypoparathyroidism</option>
<option>Floccinaucinihilipilification</option>
<option>Antidisestablishmentarianism</option>
<option>Honorificabilitudinitatibus</option>
</select>
</p>
<h2>リストの高さを設定</h2>
<p>
maxDropHeightオプションは、ドロップダウンリストの固定幅を設定します。 <br>
指定した高さよりリストが長い場合はスクロールバーが表示されます。
</p>
<pre>$("#s4").dropdownchecklist({ maxDropHeight: 100 });</pre>
<p>
<select id="s4" multiple="multiple">
<option>Aries</option>
<option>Taurus</option>
<option>Gemini</option>
<option>Cancer</option>
<option>Leo Leo</option>
<option>Virgo</option>
<option>Libra</option>
<option>Scorpius</option>
<option>Ophiuchus</option>
<option>Sagittarius</option>
<option>Capricornus</option>
<option>Aquarius</option>
<option>Pisces</option>
</select>
</p>
<h2>全選択／全解除</h2>
<p>
firstItemChecksAllオプションは、リスト中の最初のアイテムに特別な動作を設定することができます。<br>
最初のアイテムを選択すると、すべてのアイテムを選択します。
</p>
<pre>$("#s5").dropdownchecklist({ firstItemChecksAll: true, maxDropHeight: 100 });</pre>
<p>
<select id="s5" multiple="multiple">
<option>(all)</option>
<option>Banana Nut</option>
<option>Black Walnut</option>
<option>Burgundy Cherry</option>
<option>Butter Pecan</option>
<option>Chocolate Chip</option>
<option>Chocolate Fudge Truffle</option>
<option>Chocolate Mint Chip</option>
<option>Chocolate Peanut Butter</option>
<option>Coconut-Pineapple</option>
<option>Coffee</option>
<option>Coffee Caramel</option>
<option>Coffee Chip</option>
<option>Cookie Dough</option>
<option>Cookies 'n Cream</option>
<option>Dutch Chocolate</option>
<option>English Toffee</option>
<option>Fudgee Peanut Butter Cup</option>
<option>Macadamia Nut</option>
<option>Mocha Almond Fudge</option>
<option>Nutty Coconut</option>
<option>Pistachio Nut</option>
<option>Pralines and Cream</option>
<option>Rocky Road</option>
<option>Root Beer Float</option>
<option>Strawberry</option>
<option>Strawberry Cheesecake</option>
<option>Turkish Coffee</option>
<option>Vanilla</option>
</select>
</p>
<!-- / CODE -->
</div>
</body>
</html>
JQuery Geogoer VChecks Plugin
リスト要素＋チェックボックスを画像化
2009/3/25
JQuery Geogoer VChecks Plugin
［JS］jquery.js、jquery.vchecks.js
［CSS］geogoer.vchecks.css
［CSS］geogoer.vchecks.css
リスト要素とチェックボックスを画像とCSSでスタイリングし、グラフィカルにチェックのオン・オフを行うjQueryプラグイン。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery AlphaNumeric | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.vchecks.js"></script>
<script type="text/javascript">
$(function(){
$("#custom_list").vchecks();
});
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/geogoer.vchecks.css" />
</head>
<body>
<div id="wrap">
<h1><a href='http://www.vaziuojam.lt/js/geogoer/jquery_plugins/vchecks/index.html'>JQuery Geogoer VChecks Plugin</a> | 設置サンプル</h1>
<p>▼クリックすると、チェックのオン・オフを切り替えることができます。</p>
<!-- CODE -->
<ul id="custom_list" style="width:300px;">
<li><input name="first" type="checkbox"><span>First checkbox</span></li>
<li><input name="second" type="checkbox" checked><span>Simple checkbox is checked</span></li>
<li><input name="third" type="checkbox"><span>Another simple</span></li>
<li><input name="last" type="checkbox" checked><span>Last checkbox is checked</span></li>
</ul>
<!-- / CODE -->
</div>
</body>
</html>
jQuery imageless buttons a la Google
Gmail風のイメージレスボタン
2010/2/16
jQuery imageless buttons a la GoogleGmail風のイメージレスボタンを実装するjQueryプラグイン。
span要素やリスト要素をボタン、チェックボックス（'role' : 'checkbox'）、プルダウンメニュー（'role' : 'select'）として扱い、ON/OFF状態や選択した値を取得できるようになっています。 ボタンクリック時の処理（action）、要素名（name）、チェックボックスのON/OFF時の値（checkboxValue）、プルダウンの選択肢（defaultValue）の初期値などもプロパティで指定することができます。
ボタンの場合は、単独なのか、複数配置する場合は左端、中央、右端のどこに配置するかによって適用するCSSスタイルが異なります。
そのため、例えば右端に配置するボタンなら'orientation' : 'right'のようにボタンの配置位置を指定します。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.styledButton.js"></script>
<script type="text/javascript">
$(function(){
$("span").css({
'padding' : '5px 20px',
'font-size' : '14px'
});
/* 単独ボタン */
$("span.alone").styledButton({
'orientation' : 'alone',
'action' : function () { alert( 'クリック！' ) },
'display' : 'block'
});
/* 左端のボタン */
$("span.left").styledButton({
'orientation' : 'left'
});
/* 中央のボタン */
$("span.center").styledButton({
'orientation' : 'center',
'action' : { 'on' :function () {
alert( "ボタンON" );
},
'off' : function () {
alert( "ボタンOFF" );
} },
'toggle' : true
});
/* チェックした状態のボタン */
$("span.checked").styledButton({
'orientation' : 'left',
'role' : 'checkbox',
'checked' : true
});
/* 右端のボタン */
$("span.tell1").styledButton({
'orientation' : 'right',
'action' : function () { alert( $("span.checked").val() ) }
});
/* チェックされていない状態のボタン */
$("span.unchecked").styledButton({
'orientation' : 'left',
'role' : 'checkbox',
'checkboxValue' : { 'on' : "custom on!",
'off' : "custom off!" }
});
$("span.tell2").styledButton({
'orientation' : 'right',
'action' : function () { alert( $("span.unchecked").val() ) }
});
/* プルダウンメニュー */
$("span.bla").styledButton({
'orientation' : 'right',
'dropdown' : { 'element' : 'ul' },
'role' : 'select',
'defaultValue' : 'default value',
'name' : 'testSelect',
'clear' : true
});
/* ドロップダウンメニュー */
$("span.dummyDrop").styledButton({
'orientation' : 'alone',
'dropdown' : { 'element' : 'ul' },
'role' : 'select',
'defaultValue' : 'default value',
'name' : 'dummy',
'clear' : true
});
$("span.teller").styledButton({
'action' : function () { alert( $("span.bla").val() ) },
'orientation' : 'left',
'clear' : true
});
});
</script>
<!-- CSS -->
<style type="text/css">
.button {
padding: 3px 10px;
}
.button .border {
border: 1px solid #a0a0a0;
}
.button .border.side.left {
border-right: 1px solid #444 !important;
}
.button .border.side.center {
border-right: 1px solid #444 !important;
border-left: 1px solid #fff !important;
}
.button .border.side.right {
border-left: 1px solid #eee !important;
}
.button .background.main {
background: #eee;
}
.button .background.top {
background: #f3f3f3;
}
.button .background.bottom {
background: #e3e3e3;
}
.button .border.hover {
border-color: #666;
}
.button .border.down {
border-color: #000;
}
.button .background.top.down {
background: #e3e3e3;
}
.button .background.bottom.down {
background: #f3f3f3;
}
.button.active {
color: #000;
}
.button .background.main.active {
background: #aaa;
}
.button .background.top.active {
background: #a1a1a1;
}
.button .background.bottom.active {
background: #b2b2b2;
}
.button .border.active {
border-color: #222;
}
.button .border.side.center.active, .button .border.side.right.active {
}
.button .dropdown {
border-left: 1px solid #ccc !important;
border: 1px solid #a0a0a0;
color: black;
background: #fff;
padding: 4px;
list-style: none;
}
.button .dropdown.active li {
background: #fff;
color: black;
}
.button .dropdown.active li:hover {
background: #eee;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>【参照】<a href='http://swizec.com/code/styledButton/'>jQuery imageless buttons a la Google</a></p>
<!-- CODE -->
<h2>単独ボタン</h2>
<span class="alone">Alone</span>
<h2>複数のボタンを並べて表示</h2>
<span class="left">Left</span><span class="center">Center</span><span class="center">Center</span><span class="center">Center</span>
<h2>チェックボックス（チェック状態取得）</h2>
<span class="checked">checked</span><span class="tell1">tell value</span>
<span class="unchecked">checkbox</span><span class="tell2">tell 2nd value</span>
<br>
<h2>プルダウンメニュー（選択されている値を取得）</h2>
<span class="teller">Select value?</span><span class="bla" onchange="alert( 'onchange fired' )">Select ⇣
<ul>
<li>drop 1</li>
<li>drop 2</li>
</ul>
</span>
<span class="dummyDrop"><strong>dropdown</strong>
<ul>
<li>option 1</li>
<li>option 2</li>
</ul>
</span>
<!-- / CODE -->
</div>
</body>
</html>
Linkselect jQuery Plug-in
プルダウンメニューのスタイリング（select要素を隠し要素とリスト要素に変換）
2010/2/21
Linkselect jQuery Plug-in
select要素を隠し要素とリスト要素に変換することで、スタイルをカスタマイズ可能なプルダウンメニューを実装するjQueryプラグイン。
jQueryでselect要素を隠し要素（input type="hidden"）に置換し、リンクを設置して展開するようにしています。 そのリンクをクリックすると、アイテム部分がリスト要素に変換されて展開表示されます。 コールバック関数を使用すれば、select要素が変更された時、選択された値を取得することができます。
展開された時にselect要素がリスト要素に変換されるため、プルダウンメニューの見た目をCSSでカスタマイズ可能になります。 適用するCSSを変更すれば、他のスタイルに簡単に変更することができます。
プルダウンの開閉、フォーカスの有無、値の取得・設定、有効・無効化などのselect要素の機能はオプションで設定できるようになっています。 また、select要素内の上部にタイトルを表示することができます。 タイトルを付ける場合は、select要素のtitle属性にタイトルとして表示するテキストを指定します。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.linkselect.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.bgiframe.js"></script>
<script type="text/javascript">
$(function(){
$("select.linkselect").linkselect({
change: function(li, value, text){
if( window.console ) console.log(value);
}
});
$("#ex8_ls").linkselect({
change: function (li, value, text){
$('<div>' + value + ' | ' + text + '</div>').appendTo("#change_log");
}
});
$("#ex9_ls").linkselect({
format: function (html, value, label, pos){
if( value == "Service Desk" ) html = '<span style="font-weight: bold; color: #a72947;">' + html + '</span>';
return '<span style="float: right;">' + pos + '</span>' + html;
}
});
// style switcher
$("button.css_switcher").click(function (){
switchCSS(this.title);
// try to minimize screen shifting when clicking an example
self.location.replace('#example10');
});
});
function switchCSS(style){
var bFound = false, bMatch, style = style.toLowerCase();
$("link[title]").each(function (i){
this.disabled = true;
if( this.title.toLowerCase() == style ){
this.disabled = false;
bFound = true;
}
});
if( !bFound ) $("link[title='default']")[0].disabled = false;
}
</script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery.linkselect.css" title="default" />
<link rel="stylesheet" type="text/css" href="/content/lib/jquery/jquery.linkselect.style.select.css" title="select" />
<style type="text/css">
.change_log {
border: 1px solid #999;
padding: 10px;
}
.change_log h4 {
margin: 0 0 5px 0;
border-bottom: 1px solid #ccc;
}
#change_log {
font-size: 1.0em;
font-family: monospace;
}
</style>
</head>
<body>
<div id="wrap">
<h1>設置サンプル</h1>
<p>参照： <a href='http://www.givainc.com/labs/linkselect_jquery_plugin.htm'>Linkselect jQuery Plug-in</a></p>
<!-- CODE -->
<h2>例1：基本</h2>
<select id="ex1_ls" class="linkselect">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<h2>例2：タイトル付き（タイトルをselect要素のtitle属性に指定）</h2>
<select id="ex2_ls" title="カテゴリ選択" class="linkselect">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<h2>例3：値の取得と設定</h2>
<label for="ex4_ls">Category:</label>
<select id="ex4_ls" title="カテゴリ選択" class="linkselect">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<p>
<input type="button" value="Get Value" onclick="alert($('#ex4_ls').linkselect('val'));" />
<input type="button" value="Set Value = Change Manager" onclick="$('#ex4_ls').linkselect('val', 'Change Manager');" />
</p>
<h2>例4：セレクトボックスの有効化と無効化</h2>
<label for="ex5_ls">Category:</label>
<select id="ex5_ls" title="カテゴリ選択" class="linkselect">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<p>
<input type="button" value="Disable" onclick="$('#ex5_ls').linkselect('disable', true);" />
<input type="button" value="Enable" onclick="$('#ex5_ls').linkselect('disable', false);" />
</p>
<h2>例5：展開</h2>
<p>
<input type="button" value="Open" onclick="$('#ex6_ls').linkselect('open');" />
</p>
<label for="ex6_ls">Category:</label>
<select id="ex6_ls" title="カテゴリ選択" class="linkselect">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<h2>例6：フォーカス</h2>
<label for="ex7_ls">Category:</label>
<select id="ex7_ls" title="カテゴリ選択" class="linkselect">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<p>
<input type="button" value="Focus" onclick="$('#ex7_ls').linkselect('focus');" />
<input type="button" value="Blur" onclick="$('#ex7_ls').linkselect('blur');" />
</p>
<h2>コールバック関数使用</h2>
<label for="ex8_ls">Category:</label>
<select id="ex8_ls" title="カテゴリ選択">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<div class="change_log">
<h4>Change Log</h4>
<div id="change_log"></div>
</div>
<h2>カスタムフォーマットを追加</h2>
<label for="ex9_ls">Category:</label>
<select id="ex9_ls" title="カテゴリ選択">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<h2 id="example10">CSSカスタマイズ</h2>
<p>
<button title="default" class="css_switcher">Default CSS</button>
<button title="select" class="css_switcher">"Select" Style CSS</button>
</p>
<label for="ex9_ls">Category:</label>
<select id="ex10_ls" title="カテゴリ選択" class="linkselect">
<option>Help Desk</option>
<option>Customer Service</option>
<option>Knowledge Manager</option>
<option>Change Manager</option>
<option>Service Desk</option>
<option>Asset Manager</option>
<option>Software Manager</option>
</select>
<!-- / CODE -->
</div>
</body>
</html>
DropKick
プルダウンメニューのスタイリング（select要素をリスト要素に変換）
unknown
DropKick
プルダウンメニューの見た目をCSSでカスタマイズできるjQueryプラグイン。
select要素をリスト要素に置換し、CSSでスタイリングしてます。 プルダウンメニューの選択肢を変更した時のイベントを受け取れます。 選択したラベルや値を取得したり、任意のテーマに変更することも可能です。
IE6では、select要素のまま表示されます。また値の取得などはうまく動作しないようです。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" href="/content/lib/jquery/dropkick/dropkick.css" type="text/css">
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/content/lib/jquery/dropkick/jquery.dropkick-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var foods={
"fruits":{
"lemon":"レモン",
"strawberry":"イチゴ",
"watermelon":"スイカ",
"banana":"バナナ",
"orange":"オレンジ",
"apple":"リンゴ"
},
"vegitables":{
"potato":"ジャガイモ",
"carrot":"ニンジン"
}
}
$(function () {
$("<select id='items' name='items'><option value='0' selected='selected' tabindex='3'>▼選択してください</option></select>").appendTo("#item").dropkick();
$('#category').dropkick({
change: function (value, label) {
var s="";
for(var i in foods[value]){
s+="<option value='"+i+"'>"+foods[value][i]+"</option>";
}
$("#item").html("");
$("<select id='items' name='items'><option value='0' selected='selected' tabindex='3'>▼選択してください</option>"+s+"</select>").appendTo("#item").dropkick({
change: function (value, label) {
alert('ラベル: ' + label + '\n値: ' + value);
}
});
}
});
$('#color').dropkick({
change: function (value, label) {
alert('ラベル: ' + label + '\n値: ' + value);
}
});
$('#custom_theme').dropkick({
theme: 'black',
change: function (value, label) {
$(this).dropkick('theme', value);
}
});
$('form').live('submit', function (e) {
var results = $(this).find('.results');
console.log(results);
results.html($(this).serialize());
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
ul,li {
list-style:none;
margin:0; padding:0;
}
.dk_container {
margin-right:20px;
}
/* Two custom themes */
.dk_theme_orange {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C */
}
.dk_theme_orange .dk_options a:hover,
.dk_theme_orange .dk_option_current a {
background-color: #E15A01;
border-bottom-color: #604A42;
color: #fff;
text-shadow: #604A42 0 1px 0;
}
.dk_theme_orange .dk_toggle,
.dk_theme_orange.dk_open .dk_toggle {
background-color: transparent;
}
.dk_theme_orange.dk_focus .dk_toggle{
box-shadow: 0 0 5px #E15A01;
-moz-box-shadow: 0 0 5px #E15A01;
-webkit-box-shadow: 0 0 5px #E15A01;
}
.dk_theme_black {
background: #aebcbf; /* Old browsers */
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #aebcbf 0%,#6e7774 50%,#0a0e0a 51%,#0a0809 100%); /* W3C */
}
.dk_theme_black .dk_toggle,
.dk_theme_black.dk_open .dk_toggle {
background-color: transparent;
background-image: url('/content/lib/jquery/dropkick/images/dk_arrows_white.png');
background-repeat:no-repeat;
background-position:90% center;
color: #fff;
text-shadow: none;
}
.dk_theme_black .dk_options a {
background-color: #333;
color: #fff;
text-shadow: none;
}
.dk_theme_black .dk_options a:hover,
.dk_theme_black .dk_option_current a {
background-color: #E15A01;
color: #fff;
text-shadow: #604A42 0 1px 0;
}
</style>
</head>
<body>
<div id="wrap">
<p>参照：<a href='http://jamielottering.github.com/DropKick/' target='_blank'>DropKick</a></p>
<!-- CODE -->
<h2>連動プルダウン（動的に生成） ※これはJSを無効にすると動きません。</h2>
<form action="#" method="post">
<select name="category" id="category" tabindex="2">
<option value="0">▼選択してください</option>
<option value="fruits">くだもの</option>
<option value="vegitables">やさい</option>
</select>
<span id="item"></span>
<div style="clear: both;"></div>
<p>
<input type="submit" name="submit" value="送信される値を確認" tabindex="6">
<code class="results"></code>
</p>
</form>
<h2>白 - 選択肢を変更した時に、選択している値とラベルをアラート表示</h2>
<form action="#" method="post">
<select name="color" id="color" tabindex="4">
<option value="0">▼選択してください</option>
<option value="#0084c7">Blue</option>
<option value="#E15A01">Orange</option>
<option value="#604A42">Brown</option>
</select>
<div style="clear: both;"></div>
<p>
<input type="submit" name="submit" value="送信される値を確認" tabindex="6">
<code class="results"></code>
</p>
</form>
<h2>黒 - テーマ変更</h2>
<form action="#" method="post">
<select name="custom_theme" id="custom_theme" tabindex="5">
<option value="0">▼テーマ選択</option>
<option value="default">Default Theme</option>
<option value="black" >Dark Gloss</option>
<option value="orange">Light Gloss</option>
</select>
<div style="clear: both;"></div>
<p>
<input type="submit" name="submit" value="送信される値を確認" tabindex="6">
<code class="results"></code>
</p>
</form>
<!-- / CODE -->
</div>
</body>
</html>
EASY SELECT BOX
プルダウンメニューのスタイリング（select要素を画像に変換）
unknown
EASY SELECT BOX
プルダウンメニューの見た目を簡単に変えられるjQueryプラグイン。
select要素をリスト要素に置換し、通常時とロールオーバー時の画像をCSSで切り替え表示しています。 オプションで、メニュー展開時の速度を指定可能です。
※複数選択（multiple）、無効化（disabled）、キーボードアクセスには対応していません。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" href="/content/lib/jquery/dropkick/dropkick.css" type="text/css">
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/content/lib/jquery/easy_select_box-1.0.1/easyselectbox.min.js"></script>
<script type="text/javascript" charset="utf-8">
var foods={
"fruits":{
},
}
$(function () {
$('#vegitables').easySelectBox();
$('#fruits').easySelectBox({speed:100});
$('form').live('submit', function (e) {
var results = $(this).find('.results');
console.log(results);
results.html($(this).serialize());
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* Easy Select Box */
ul, li {
list-style:none;
margin:0; padding:0;
}
.easy-select-box {
position:relative;
display:inline-block;
width:118px;
font-size:11px;
color:#0c2245;
}
.easy-select-box .easy-select-box-disp,
.easy-select-box .easy-select-box-disp:visited{
background: url("/content/lib/jquery/easy_select_box-1.0.1/bg-select-1.png") no-repeat 0 0;
display:block;
color:#0c2245;
padding:0 3px;
height:18px;
line-height:18px;
text-decoration:none;
}
.easy-select-box .easy-select-box-disp:hover{
position:relative;
background-position: 0 -18px;
text-decoration:none;
}
.easy-select-box ul {
position:absolute;
top:100%;
left:0;
border:1px solid #cccccc;
display:none;
z-index:99;
width:116px;
max-height:200px;
overflow:auto;
background:#FFFFFF;
}
.easy-select-box ul li a,
.easy-select-box ul li a:visited{
padding:3px;
background:#FFFFFF;
display:block;
color:#0c2245;
cursor:default;
text-decoration:none;
}
.easy-select-box ul li a:hover{
background:#3399ff;
color:#FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrap">
<p>参照：<a href='http://www.codefleet.com/easy-select-box/' target='_blank'>EASY SELECT BOX</a></p>
<!-- CODE -->
<form id="form1" method="post" action="#">
<p>
<label for="vegitables">やさい：</label>
<select name="vegitables" id="vegitables">
<option value="0">▼選択してください</option>
<option value="potato">ジャガイモ</option>
<option value="carrot">ニンジン</option>
</select>
<label for="fruits">フルーツ：</label>
<select name="fruits" id="fruits">
<option value="0">▼選択してください</option>
<option value="lemon">レモン</option>
<option value="strawberry">イチゴ</option>
<option value="watermelon">スイカ</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
<option value="apple">リンゴ</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="送信される値を確認" tabindex="6">
<code class="results"></code>
</p>
</form>
<!-- / CODE -->
</div>
</body>
</html>
プルダウンの見た目は、通常時とロールオーバー時の画像を差し替えて、画像パス、幅、高さなどをCSSで調整するだけで簡単に変更できます。
設置イメージプルダウン素材：Dropdown and Standard Button Set with All States - 365psd
設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<link rel="stylesheet" href="/content/lib/jquery/dropkick/dropkick.css" type="text/css">
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="/content/lib/jquery/easy_select_box-1.0.1/easyselectbox.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('#vegitables').easySelectBox();
$('#fruits').easySelectBox({speed:100});
$('form').live('submit', function (e) {
var results = $(this).find('.results');
console.log(results);
results.html($(this).serialize());
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* Easy Select Box */
ul, li {
list-style:none;
margin:0; padding:0;
}
.easy-select-box {
position:relative;
width:138px;
font-size:11px;
display:inline-block;
color:#0c2245;
}
.easy-select-box a:hover {
color:#fff;
}
.easy-select-box .easy-select-box-disp,
.easy-select-box .easy-select-box-disp:visited{
background: url("/content/lib/jquery/easy_select_box-1.0.1/bg-select-2.png") no-repeat 0 0;
display:block;
color:#0c2245;
padding:0 8px;
height:27px;
line-height:27px;
text-decoration:none;
}
.easy-select-box .easy-select-box-disp:hover{
position:relative;
background-position: 0 -27px;
text-decoration:none;
}
.easy-select-box ul {
position:absolute;
top:100%;
left:0;
border:1px solid #cccccc;
display:none;
z-index:99;
width:138px;
max-height:138px;
overflow:auto;
background:#FFFFFF;
}
.easy-select-box ul li a,
.easy-select-box ul li a:visited{
padding:3px 8px;
background:#FFFFFF;
display:block;
color:#0c2245;
cursor:default;
text-decoration:none;
}
.easy-select-box ul li a:hover{
background:#3399ff;
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<div id="wrap">
<p>参照：<a href='http://www.codefleet.com/easy-select-box/' target='_blank'>EASY SELECT BOX</a></p>
<p>プルダウン素材：<a href='http://365psd.com/day/259/' target='_blank'>Dropdown and Standard Button Set with All States - 365psd</a></p>
<!-- CODE -->
<form id="form1" method="post" action="#">
<p>
<label for="vegitables">やさい：</label>
<select name="vegitables" id="vegitables">
<option value="0">選択してください</option>
<option value="potato">ジャガイモ</option>
<option value="carrot">ニンジン</option>
</select>
<label for="fruits">フルーツ：</label>
<select name="fruits" id="fruits">
<option value="0">選択してください</option>
<option value="lemon">レモン</option>
<option value="strawberry">イチゴ</option>
<option value="watermelon">スイカ</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
<option value="apple">リンゴ</option>
</select>
</p>
<p>
<input type="submit" name="submit" value="送信される値を確認" tabindex="6">
<code class="results"></code>
</p>
</form>
<!-- / CODE -->
</div>
</body>
</html>