【参照】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>