ボタンをクリックすると、アラートが表示されます。
<!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 Corners 0.3 | 設置サンプル</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.corners.js"></script> <script type="text/javascript"> $(function(){ /* 例1:シンプルな角丸 */ $('.rounded').corners(); /* 例2:角の大きさを指定 */ $('.rounded2').corners("30px 10px"); }); </script> <!-- CSS --> <style type="text/css"> .cn { background-color:#acc; padding:5px; } /* 例4、例5 */ .button { outline:none; border:0; text-decoration:none; cursor:pointer; white-space:nowrap; vertical-align:middle; display:-moz-inline-box; display:inline-block; overflow:visible; } .button { color:#000; background-color:#acc; padding:5px 7px; } .button:hover { background-color:#cee; } </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><a href='http://www.atblabs.com/jquery.corners.html'>jQuery Corners 0.3</a> | 設置サンプル</h1> <!-- CODE --> <h2>例1:シンプルな角丸</h2> <div class="cn rounded">$(function(){<br> $('.rounded').corners();<br> });</div> <h2>例2:角の大きさを指定</h2> <div class="cn rounded2">$(function(){<br> $('.rounded2').corners("30px 10px");<br> });</div> <h2>例3:要素のクラスでオプションを上書き</h2> <div class="cn rounded {30px}">class="cn rounded {30px}"</div> <h2>例4:a要素を角丸ボタンに変換</h2> <p><a href="#" onclick="alert('Hello, World!');return false;" class="rounded {transparent} button">ボタン</a>をクリックすると、アラートが表示されます。</p> <h2>例5:フォームボタンをa要素に変換</h2> <form action="#"> <input type="submit" value="送信ボタン" class="button" /> <input type="submit" value="送信ボタン" class="rounded {transparent} button" /> <input type="button" value="ボタン" class="button" onclick="alert('OK!'); return false;" /> <input type="button" value="ボタン" class="rounded {transparent} button" onclick="alert('OK!'); return false;" /> </form> <!-- / CODE --> </div> </body> </html>