【参照】jQuery imageless buttons a la Google
<!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>
<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://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>