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

実行結果

DD_roundies | 設置サンプル

例1：クリックすると伸縮する角丸ボックス

This approach responds to both random size changes and element.style assignments (try clicking this box to morph it).

The idea is to be somewhat compatible with a Javascript effects library of your choosing.

例2：背景なしの角丸ボックス

Here's a transparent box.

例3：ロールオーバー角丸ボックス

It can handle small elements:

例4：背景画像（GIF）を使用した角丸テーブル

This box has a background GIF image.

例5：背景画像（PNG）を使用した角丸テーブル

This box has a background PNG image ...it works in IE6 without AlphaImageLoader - wacky.

例6：円形ボックス

円形ボックス

設置サンプルのソース

<!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>DD_roundies| 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script src="/content/lib/DD_roundies_0.0.1a-min.js" type="text/javascript"></script>
      <script type="text/javascript">
         DD_roundies.addRule('.box', 10); /* 共通 */
         DD_roundies.addRule('#morph', 10); /* 例1 */
         DD_roundies.addRule('.nav li a', 5); /* 例3 */
         DD_roundies.addRule('#not_quite_a_circle', 65); /* 例6 */
      </script>
      <!-- CSS -->
      <style type="text/css">
         /* 共通 */
         .box { display:block; position:relative; overflow:hidden; zoom:1; margin:10px auto; padding:15px; background:#85bca7; border:4px solid #827452;}
         /* 例1：クリックすると伸縮する角丸ボックス */
         #morph { padding:20px 30px; border:0px solid #333; color:#FFF; background:#000;}
         /* 例2：背景なしの角丸ボックス */
         .no_background { border:5px solid #85bca7; background:none; }
         /* 例3：ロールオーバー角丸ボックス */
         .nav, .nav * { margin:0; padding:0; }
         .nav li { display:inline; }
         .nav li a { position:relative; zoom:1; float:left; *float:none; *display:inline-block; margin:8px 5px 0 0; *margin-right:1px; padding:2px 5px 3px; border:2px solid #fff; background:#827452; color:#fff; text-decoration:none; }
         .nav li a:hover { border-color:#827452; background:#fff; color:#827452; }
         .nav li a * {cursor:pointer}
         /* 例4：背景画像（GIF）を使用した角丸テーブル */
         /* 例5：背景画像（PNG）を使用した角丸テーブル */
         .has_gif { background:transparent url(/content/img/pengin.gif) repeat 0 0 ;}
         .has_png { background:transparent url(/content/img/pattern.jpg) repeat 0 0; }
         .has_gif,
         .has_png { padding:40px; font-size:150%; }
         .has_png { color:#fff; border-color:#85bca7; }
         /* 例6：円形ボックス */
         #not_quite_a_circle { width:100px; height:100px; border:0px solid #000; background:#ff6699; line-height:100px; text-align:center; color:#fff; font-weight:bold; }
      </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://dillerdesign.com/experiment/DD_roundies/'>DD_roundies</a> | 設置サンプル</h1>
<!-- CODE -->
         <h2>例1：クリックすると伸縮する角丸ボックス</h2>
         <div class="box orange" id="morph">
            This approach responds to both random size changes and element.style assignments <b>(try clicking this box to morph it)</b>.<br>
            <br>
            The idea is to be somewhat compatible with a Javascript effects library of your choosing.
         </div>
         <script>
            var d = 0;
            var c = 0;
            var upOrDown = true;
            var setBorder = function() {
               var obj = this;
               var windDown = setInterval(function() {
                  d += upOrDown ? 1 : (-1);
                  if (d >= 0 && d <= 10) {
                     obj.style.borderWidth = d + 'px';
                     c = d%11;
                     if (c == 10) {
                        c = 'A';
                     }
                     c = c.toString();
                     obj.style.marginLeft = d + 'px';
                     obj.style.marginRight = d + 'px';
                     obj.style.backgroundColor = '#' + c + c + c;
                     obj.style.fontSize = (100 + (d*5)) + '%';
                  }
                  else {
                     upOrDown = !upOrDown;
                     clearInterval(windDown);
                  }
               }, 10);
            };
            document.getElementById('morph').onclick = setBorder;
         </script>

         <h2>例2：背景なしの角丸ボックス</h2>
         <div class="box no_background">
            Here's a transparent box.
         </div>

         <h2>例3：ロールオーバー角丸ボックス</h2>
         <div class="box">
            It can handle small elements:
            <ul class="nav oh">
               <li><a href="#">These</a></li>
               <li><a href="#">are</a></li>
               <li><a href="#">anchor</a></li>
               <li><a href="#">elements</a></li>
               <li><a href="#">and</a></li>
               <li><a href="#">get</a></li>
               <li><a href="#">psuedo-classes.</a></li>
            </ul>
         </div>

         <h2>例4：背景画像（GIF）を使用した角丸テーブル</h2>
         <div class="box has_gif">
            This box has a background GIF image.
         </div>

         <h2>例5：背景画像（PNG）を使用した角丸テーブル</h2>
         <div class="box has_png">
            This box has a background PNG image ...it works in IE6 without AlphaImageLoader - wacky.
         </div>

         <h2>例6：円形ボックス</h2>
         <div class="box" id="not_quite_a_circle">
            <span>円形ボックス</span>
         </div>
<!-- CODE / -->
      </div>
   </body>
</html>