jQuery Corners 0.3 | 設置サンプル

PHP & JavaScript Room :: 設置サンプル

実行結果

jQuery Corners 0.3 | 設置サンプル

例1：シンプルな角丸

$(function(){
　　$('.rounded').corners();
});

例2：角の大きさを指定

$(function(){
　　$('.rounded2').corners("30px 10px");
});

例3：要素のクラスでオプションを上書き

class="cn rounded {30px}"

例4：a要素を角丸ボタンに変換

ボタンをクリックすると、アラートが表示されます。

例5：フォームボタンをa要素に変換

　 　 　 　

設置サンプルのソース

<!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 &amp; 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">&#36;(function(){<br>
         　　&#36;('.rounded').corners();<br>
         });</div>

         <h2>例2：角の大きさを指定</h2>
         <div class="cn rounded2">&#36;(function(){<br>
         　　&#36;('.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>