実行結果
設置サンプルのソース
<!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>
<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">
<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>