実行結果
参照：DropKick
連動プルダウン（動的に生成） ※これはJSを無効にすると動きません。
白 - 選択肢を変更した時に、選択している値とラベルをアラート表示
黒 - テーマ変更
設置サンプルのソース
<!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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<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>