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

実行結果

Control.Tabs | 設置サンプル

要素のタブ切替

くまさんケーキ

くまさんケーキ

むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw
クリスピー・クリーム・ドーナツ

クリスピー・クリーム・ドーナツ

新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ(Krispy Kreme Doughnuts)」。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!

要素のタブ切替(ページ送り付き)

雑草家@特選牛の内臓地獄鍋

雑草家@特選牛の内臓地獄鍋

外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるwハツとかいろんな種類のホルモンが楽しめます♪

モツ鍋@鳥小屋

モツ鍋@鳥小屋

キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわw

トマト入り塩モツ鍋@汁べえ

トマト入り塩モツ鍋@汁べえ

下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました!モツ鍋にトマト!?ってはじめは思ったけど、すごいトマトがいい味出してるんです!!最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品♪

赤から鍋20辛@赤から亭

赤から鍋20辛@赤から亭

渋谷の赤から亭で「20辛」に友達とふたりで挑戦!どろっどろしてて、辛かった(; ;)でもおいしかった(*・ω・*)v 完食アドバイス!まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずw

« »

要素のタブ切替(サムネイル画像マウスオーバーで原寸大画像を表示)

設置サンプルのソース

<!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>Control.Tabs | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects,controls,dragdrop,slider"></script>
      <script type="text/javascript" src="/content/lib/livepipe-ui/livepipe.js"></script>
      <script type="text/javascript" src="/content/lib/livepipe-ui/tabs.js"></script>
      <script type="text/javascript">
         document.observe('dom:loaded',function(){
            //要素のタブ切替
               new Control.Tabs('tabs_example_one');

            //要素のタブ切替(ページ送り付き)
            var tabs_example_two = new Control.Tabs('tabs_example_two',{
               afterChange: function(new_container){
                  $A($('tabs_example_two_select').options).each(function(option,i){
                     if(option.value == new_container.id){
                        $('tabs_example_two_select').options.selectedIndex = i;
                        throw $break;
                     }
                  });
               }
            });
            $('tabs_example_two_select').observe('change',function(){
               tabs_example_two.setActiveTab($('tabs_example_two_select').value);
            });
            $('tabs_example_two_first').observe('click',function(event){
               this.first();
               Event.stop(event);
            }.bindAsEventListener(tabs_example_two));
            $('tabs_example_two_previous').observe('click',function(event){
               this.previous();
               Event.stop(event);
            }.bindAsEventListener(tabs_example_two));
            $('tabs_example_two_next').observe('click',function(event){
               this.next();
               Event.stop(event);
            }.bindAsEventListener(tabs_example_two));
            $('tabs_example_two_last').observe('click',function(event){
               this.last();
               Event.stop(event);
            }.bindAsEventListener(tabs_example_two));
            
            //example 3
            new Control.Tabs('tabs_example_three',{
               hover: true
            });
         });
      </script>
      <style type="text/css">
         /* Subsection Tabs
         --------------------*/
         ul.subsection_tabs { list-style:none; width:600px; margin:0; padding:0; clear:both; border-bottom:1px solid #000; clear:both; overflow:hidden; }
         ul.subsection_tabs li.tab {  height:1px; display:inline; }
         ul.subsection_tabs li.tab a { float:left; font-weight:bold; text-decoration:none; text-align:center; display:block; padding:0; background-color:#666; color:#fff; padding:5px 10px; margin-right:7px; height:1.5em; line-height:1.5em; }
         ul.subsection_tabs li.tab a:hover { color:#ff6699; }
         ul.subsection_tabs li.tab a.active { background-color:#000; }
         ul.subsection_tabs li.source_code { float:right; }
         /* example 1 */
         .onebox { background:#000; color:#fff; height:200px; width:600px; }
         .onebox div { padding:10px; }
         .onebox h2 { margin:10px; }
         /* example 2 */
         .twobox { background:#000; color:#fff; height:200px; width:600px; position:relative; }
         .twobox h2 { margin:0 0 10px 0; }
         .twobox a { display:block; width:240px; height:180px; position:absolute; top:10px; left:10px; }
         .twobox div { margin:0; padding:0; width:330px; height:180px; position:absolute; top:10px; right:10px; }
         .tabnavi { margin:10px 0; text-align:center; width:600px; }
         /* example 3 */
         .tabbed_images { list-style:none; margin:0; padding:0; clear:both; overflow:hidden; }
         .tabbed_images li { list-style:none; float:left; margin:0; padding:0; }
         .tabbed_images li a { border:1px solid #ccc; display:block; float:left; margin:0 5px 0 0; width:105px; height:80px; }
         .tabbed_images li a.active, .tabbed_images li a:hover { border:1px solid #000; }
         .tabbed_images li a img { border:none; padding:2px; margin:0; margin-bottom:-5px; }
         #image_1, #image_2, #image_3, #image_4, #image_5 { margin-top:10px; padding:2px; border:1px solid #ccc; display:block; clear:left; }
      </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" style="margin-bottom:200px;">
         <h1><a href='http://livepipe.net/control/tabs'>Control.Tabs</a> | 設置サンプル</h1>

<!-- example 1 -->
         <h2>要素のタブ切替</h2>
         <ul id="tabs_example_one" class="subsection_tabs">
            <li class="tab"><a href="#one">Cake</a></li>
            <li class="tab"><a href="#two">Doughnuts</a></li>
         </ul>
         <div id="one" class="onebox"><div><a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" width="240" height="180" alt="くまさんケーキ" align="left" style="margin-right:10px;" /></a><h2>くまさんケーキ</h2>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写!どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかw</div></div>
         <div id="two" class="onebox"><div><a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" width="240" height="180" alt="クリスピー・クリーム・ドーナツ"  align="left" style="margin-right:10px;" /></a><h2>クリスピー・クリーム・ドーナツ</h2>新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ(Krispy Kreme Doughnuts)」。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!</div></div>
<!-- example 1 //-->

<!-- example 2 -->
         <h2>要素のタブ切替(ページ送り付き)</h2>
         <ul id="tabs_example_two" class="subsection_tabs">
            <li class="tab"><a href="#a">雑草家</a></li>
            <li class="tab"><a href="#b">鳥小屋</a></li>
            <li class="tab"><a href="#c">汁べえ</a></li>
            <li class="tab"><a href="#d">赤から亭</a></li>
         </ul>
         <div id="a" class="twobox">
            <a href="http://www.flickr.com/photos/22559849@N06/3053111822/" title="雑草家@特選牛の内臓地獄鍋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_m.jpg" width="240" height="180" alt="雑草家@特選牛の内臓地獄鍋" /></a>
            <div>
               <h2>雑草家@特選牛の内臓地獄鍋</h2>
               <p>外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるwハツとかいろんな種類のホルモンが楽しめます♪</p>
            </div>
         </div>
         <div id="b" class="twobox">
            <a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" width="240" height="180" alt="モツ鍋@鳥小屋" /></a>
            <div>
               <h2>モツ鍋@鳥小屋</h2>
               <p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわw</p>
            </div>
         </div>
         <div id="c" class="twobox">
            <a href="http://www.flickr.com/photos/22559849@N06/3025639598/" title="トマト入り塩モツ鍋@汁べえ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97_m.jpg" width="240" height="180" alt="トマト入り塩モツ鍋@汁べえ" /></a>
            <div>
               <h2>トマト入り塩モツ鍋@汁べえ</h2>
               <p>下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました!モツ鍋にトマト!?ってはじめは思ったけど、すごいトマトがいい味出してるんです!!最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品♪</p>
            </div>
         </div>
         <div id="d" class="twobox">
            <a href="http://www.flickr.com/photos/22559849@N06/2335201198/" title="赤から鍋20辛@赤から亭 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_m.jpg" width="240" height="180" alt="赤から鍋20辛@赤から亭" /></a>
            <div>
               <h2>赤から鍋20辛@赤から亭</h2>
               <p>渋谷の赤から亭で「20辛」に友達とふたりで挑戦!どろっどろしてて、辛かった(; ;)でもおいしかった(*・ω・*)v 完食アドバイス!まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずw</p>
            </div>
         </div>
         <div class="tabnavi">
            <a href="" id="tabs_example_two_first" style="margin-right:10px;">&laquo;</a>
            <a href="" id="tabs_example_two_previous" style="margin-right:10px;">&larr;</a>
            <select id="tabs_example_two_select" style="margin-right:10px;">
               <option value="a">雑草家@特選牛の内臓地獄鍋4</option>
               <option value="b">モツ鍋@鳥小屋</option>
               <option value="c">塩モツ鍋@汁べえ </option>
               <option value="d">赤から鍋20辛@赤から亭</option>
            </select>
            <a href="" id="tabs_example_two_next" style="margin-right:10px;">&rarr;</a>
            <a href="" id="tabs_example_two_last">&raquo;</a>
         </div>
<!-- example 2 //-->

<!-- example 3 -->
         <h2>要素のタブ切替(サムネイル画像マウスオーバーで原寸大画像を表示)</h2>
         <ul class="tabbed_images" id="tabs_example_three">
            <li><a href="#image_1"><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_t.jpg" /></a></li>
            <li><a href="#image_2"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_t.jpg" /></a></li>
            <li><a href="#image_3"><img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97_t.jpg" /></a></li>
            <li><a href="#image_4"><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_t.jpg" /></a></li>
         </ul>
         <img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66.jpg" id="image_1" />
         <img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" id="image_2" />
         <img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97.jpg" id="image_3" />
         <img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf.jpg" id="image_4" />
<!-- example 3 //-->
         </div>
   </body>
</html>