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

実行結果

設置サンプル

参照：Easy Display Switch with CSS and jQuery

▼ボタンをクリックすると、リスト要素のスタイルを切り替えます。

Switch Thumb

設置サンプルのソース

<!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">
         $(function () {
            $("a.switch_thumb").toggle(
               function(){
                  $(this).addClass("swap"); 
                  $("ul.display").fadeOut("fast", function() {
                     $(this).fadeIn("fast").addClass("thumb_view"); 
                  });
               },
               function(){
                  $(this).removeClass("swap");
                  $("ul.display").fadeOut("fast", function() {
                     $(this).fadeIn("fast").removeClass("thumb_view");
                  });
               }
            ); 
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         .container {
            width:810px;
            margin:0; padding:10px;
            overflow:hidden;
            background-color:#000;
         }
         h2 a {
            font-size:13px;
            font-weight:bold;
         }
         ul.display {
            float:left;
            width:808px;
            margin:0; padding:0;
            list-style:none;
            border-top:1px solid #333;
            border-right:1px solid #333;
            background:#222;
         }
         ul.display li {
            float:left;
            width:806px;
            margin:0; padding:10px 0;
            border-top:1px solid #111;
            border-right:1px solid #111;
            border-bottom:1px solid #333;
            border-left:1px solid #333;
         }
         ul.display li a {
            color:#e7ff61;
            text-decoration:none;
         }
         ul.display li .content_block {
            padding:0 10px;
         }
         ul.display li .content_block h2 {
            margin:0; padding:5px;
            font-weight:normal;
         }
         ul.display li .content_block p {
            margin:0; padding:5px 5px 5px 260px;
            color:#fff;
         }
         ul.display li .content_block a img{
            margin:0 15px 0 0; padding:5px;
            border:2px solid #ccc;
            background:#fff;
            float:left;
         }
         ul.thumb_view li{
            width:265px;
         }
         ul.thumb_view li h2 {
            display:inline;
         }
         ul.thumb_view li p{
            display:none;
         }
         ul.thumb_view li .content_block a img {
            margin:0 0 10px;
         }
         a.switch_thumb {
            width:122px; height:26px;
            line-height:26px;
            margin:0 0 10px 0; padding:0;
            display:block;
            background:url("/content/img/ajax/switch.gif") no-repeat;
            outline:none;
            text-indent:-9999px;
         }
         a:hover.switch_thumb {
            filter:alpha(opacity=75);
            opacity:.75;
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
         }
         a.swap { background-position:left bottom; }
      </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>設置サンプル</h1>
         <p>参照：<a href='http://www.sohtanaka.com/web-design/examples/display-switch/'>Easy Display Switch with CSS and jQuery</a></p>
         <p>▼ボタンをクリックすると、リスト要素のスタイルを切り替えます。</p>
<!-- CODE -->
         <div class="container">
            <a href="#" class="switch_thumb">Switch Thumb</a>
            <ul class="display">
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" alt="" /></a>
                     <h2><a href="#">アボカド シーザーサラダ</a></h2>
                     <p>よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p>
                     <p>@アボガドダイニング Platinum Lounge</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="" /></a>
                     <h2><a href="#">アボカド刺</a></h2>
                     <p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ</p>
                     <p>@アボガドダイニング Platinum Lounge</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" alt="" /></a>
                     <h2><a href="#">ハニートースト</a></h2>
                     <p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました！</p>
                     <p>@アボガドダイニング Platinum Lounge</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" alt="" /></a>
                     <h2><a href="#">ベーコンとアボカドのピザ</a></h2>
                     <p>めちゃくちゃおいしかったアボカドのピザ！ピザ生地はクリスピータイプでさくさく！</p>
                     <p>@アボガドダイニング Platinum Lounge</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_m.jpg" alt="" /></a>
                     <h2><a href="#">アボカドディップ</a></h2>
                     <p>アボカドディップはとってもクリーミー！ポテトじゃなくてもなんにでも合いそう♪</p>
                     <p>@アボガドダイニング Platinum Lounge</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_m.jpg" alt="" /></a>
                     <h2><a href="#">白レバー串みそ焼き</a></h2>
                     <p>またまたリピしちゃいました、白レバー！今回は3人で行ったので3本。お刺身でもいけるくらい新鮮で美味しいレバーなので、レアめな感じの焼き加減に、濃厚な味噌ソースがたっぷり！コレは絶品です！</p>
                     <p>@高庵TOKYO</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" alt="" /></a>
                     <h2><a href="#">ササミ焼わさびマヨネーズ</a></h2>
                     <p>ジューシーなササミに、ちょっぴりわさびのきいたマヨネーズがたっぷりのってまっす！和とイタリアンの融合って感じｗ彩りもきれいですよね♪</p>
                     <p>@高庵TOKYO</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" alt="" /></a>
                     <h2><a href="#">白子の昆布焼き</a></h2>
                     <p>昆布の上に白子をのせて、かるーく火を通ったところで、お醤油をちょびっとたらしていただききました。白子って生でポン酢で食べることが多いけど、焼いてもトロットしてて美味しいんですねー！</p>
                     <p>@高庵TOKYO</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" alt="" /></a>
                     <h2><a href="#">屋台風羽根つき焼きラーメン</a></h2>
                     <p>焼きラーメンってなんだろー？？と思って頼んでみました。普通の焼きそばと違って、麺がやわらかめでソースが下にたまるくらいかかっていました！呑んでると、濃い目の味付けがほしくなるんですよね。そんなときにぴったりの〆メニューです！</p>
                     <p>@高庵TOKYO</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" alt="" /></a>
                     <h2><a href="#">白子の雲丹のせ炙り</a></h2>
                     <p>白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ！口に入れるとじゅわーっとうまみが広がります。あー幸せ！</p>
                     <p>@高庵TOKYO</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="" /></a>
                     <h2><a href="#">自家製さつま揚げ二種</a></h2>
                     <p>黒いのはしいたけじゃありませんｗさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます！</p>
                     <p>@高庵TOKYO</p>
                  </div>
               </li>
               <li>
                  <div class="content_block">
                     <a href="#"><img src="http://farm4.static.flickr.com/3203/3105515562_b203eee85a_m.jpg" alt="" /></a>
                     <h2><a href="#">白レバー串みそ焼き</a></h2>
                     <p>白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうｗフォアグラステーキより美味しいかも！？</p>
                     <p>@高庵TOKYO</p>
                  </div>
               </li>
            </ul>
         </div><!-- .dcontainer -->
<!-- / CODE -->
      </div>
   </body>
</html>