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

実行結果

設置サンプル

参照:Creating a “Filterable” Portfolio with jQuery

▼カテゴリをクリックすると、選択したカテゴリに関連付けられた画像のみを表示します。

設置サンプルのソース

<!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/framework.js"></script>
      <!-- CSS -->
      <style type="text/css">
         /*****Basic Layout*****/
         div#container { margin:20px auto; overflow:hidden; background:#ccc; }
         ul#filter { float:left; list-style:none; margin:10px 20px; padding:0; list-style:none;}
         ul#filter li { border-right:1px solid #fff; float:left; margin-right:10px; padding-right:10px; }
         ul#filter li:last-child { border-right:none; margin-right:0; padding-right:0; }
         ul#filter a { color:#fff; text-decoration:none; }
         ul#filter li.current a, ul#filter a:hover { text-decoration:underline; }
         ul#filter li.current a { color:#333; font-weight:bold; }
         ul#portfolio { float:left; list-style:none; margin-left:0; width:100%; }
         ul#portfolio li { border:1px solid #dedede; float:left; margin:5px;   width:252px; }
         ul#portfolio a { display:block; padding:5px; background:#fff; }
         ul#portfolio a:hover { text-decoration:none; }
         ul#portfolio img { border:1px solid #dedede; display:block; }
         /* for IE6 */
         *html ul#portfolio li { width:240px; }
      </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://nettuts.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/'>Creating a “Filterable” Portfolio with jQuery</a></p>
         <p>▼カテゴリをクリックすると、選択したカテゴリに関連付けられた画像のみを表示します。</p>
<!-- CODE -->
         <div id="container">
            <ul id="filter">
               <li class="current"><a href="#">All</a></li>
               <li><a href="#">Platinum Lounge</a></li>
               <li><a href="#">Japanese Food</a></li>
               <li><a href="#">Food</a></li>
               <li><a href="#">Sweet</a></li>
               <li><a href="#">nabe</a></li>
            </ul>
            <ul id="portfolio">
               <li class="food platinum-lounge"><a href="#"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" alt="" width="240" height="180" />アボガドシーザーサラダ</a></li>
               <li class="food platinum-lounge"><a href="#"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="" width="240" height="180" />アボガド刺</a></li>
               <li class="food platinum-lounge"><a href="#"><img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" alt="" width="240" height="180" />ハニートースト</a></li>
               <li class="food platinum-lounge"><a href="#"><img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" alt="" width="240" height="180" />ベーコンとアボガドのピザ</a></li>
               <li class="food platinum-lounge"><a href="#"><img src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_m.jpg" alt="" width="240" height="180" />アボガドディップ</a></li>
               <li class="food japanese-food"><a href="#"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" alt="" width="240" height="180" />白子の昆布焼き</a></li>
               <li class="food japanese-food"><a href="#"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" alt="" width="240" height="180" />ササミ焼わさびマヨネーズ</a></li>
               <li class="food japanese-food"><a href="#"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_m.jpg" alt="" width="240" height="180" />白レバー串みそ焼き</a></li>
               <li class="food japanese-food"><a href="#"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" alt="" width="240" height="180" />屋台風羽根つき焼きラーメン</a></li>
               <li class="food japanese-food"><a href="#"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" alt="" width="240" height="180" />白子の雲丹のせ炙り</a></li>
               <li class="food japanese-food"><a href="#"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="" width="240" height="180" />自家製さつま揚げ二種</a></li>
               <li class="sweet cake"><a href="#"><img src="http://farm4.static.flickr.com/3045/3053382294_07b552d467_m.jpg" alt="" width="240" height="180" />バースデーケーキ</a></li>
               <li class="sweet doughnuts"><a href="#"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" alt="" width="240" height="180" />クリスピー・クリーム・ドーナツ</a></li>
               <li class="sweet cake"><a href="#"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="" width="240" height="180" />くまさんケーキ</a></li>
               <li class="sweet cake"><a href="#"><img src="http://farm4.static.flickr.com/3025/2971768652_b9b3b7ddda_m.jpg" alt="" width="240" height="180" />Giottoのケーキ</a></li>
               <li class="food nabe"><a href="#"><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_m.jpg" alt="" width="240" height="180" />雑草家の特選牛の内臓地獄鍋</a></li>
               <li class="food nabe"><a href="#"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" width="240" height="180" />鳥小屋のモツ鍋</a></li>
               <li class="food nabe"><a href="#"><img src="http://farm4.static.flickr.com/3154/3105515796_20cb322441_m.jpg" alt="" width="240" height="180" />スアータイのタイスキ</a></li>
               <li class="food nabe"><a href="#"><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_m.jpg" alt="" width="240" height="180" />赤から亭の赤から鍋20辛</a></li>
            </ul>
         </div>
<!-- / CODE -->
      </div>
   </body>
</html>