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

実行結果

toggleElements | 設置サンプル

アボカド刺@アボガドダイニング Platinum Lounge 麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ

アボガド刺

アボカド刺@アボガドダイニング Platinum Lounge 麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ

  • 項目1
  • 項目2
    • 項目2-1
    • 項目2-2
    • 項目2-3
Lorem Ipsum

アボカド刺@アボガドダイニング Platinum Lounge 麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ

設置サンプルのソース

<!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>toggleElements | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" media="all" />
      <!-- 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/toggleelements/jquery.toggleElements.js"></script>
       <script type="text/javascript">
          $(function(){
            $('div#exp1').toggleElements( );
            $('ul#exp2').toggleElements( );
            $('img#exp3').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } );
            $('ul#exp4').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } );
            $('div#exp5').toggleElements( { fxAnimation:'show', fxSpeed:'slow', className:'toggler2' } );
            $('ul#exp6').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } );
            $('div#exp7').toggleElements( { fxAnimation:'fade', fxSpeed:1000, className:'toggler' } );
            $('ul#exp8').toggleElements( { fxAnimation:'show', fxSpeed:'fast', className:'none' } );
            $('fieldset#exp9').toggleElements( { fxAnimation:'show', fxSpeed:1000, className:'toggler', onClick:doOnClick, onHide:doOnHide, onShow:doOnShow } );
            $('div#exp10').toggleElements( );
         });
         function doOnClick() {
            alert('callback: onClick');
         }
         function doOnHide() {
            alert('callback: onHide');
         }
         function doOnShow() {
            alert('callback: onShow');
         }
      </script>
         <!-- CSS -->
      <link rel="stylesheet" type="text/css" href="/content/lib/jquery/toggleelements/toggleElements.css" />
      <link rel="stylesheet" type="text/css" href="/content/lib/jquery/toggleelements/toggleElements2.css" />
      <style type="text/css">
         #wrap { width:578px; }
         #exp1 img,
         #exp5 img,
         #exp10 img { float:left; margin-right:30px; margin-bottom:10px; }
         #exp2,
         #exp4,
         #exp6 { padding:5px 10px 5px 30px; }
      </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://jquery.andreaseberhard.de/toggleElements/'>toggleElements</a> | 設置サンプル</h1>
<!-- CODE -->

<div id="exp1" title="例1：画像＋テキストがあるdiv要素の表示切替">
   <p class="cf">
      <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
      麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ
   </p>
</div>

<ul id="exp2" title="例2：リスト要素の表示切替">
   <li>項目1</li>
   <li>項目2</li>
   <li>項目3</li>
</ul>

<img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="アボガド刺" id="exp3" title="例3：異なるクラスのある画像" />

<ul id="exp4" title="例4：異なるクラスのあるリスト要素の表示切替">
   <li>項目1</li>
   <li>項目2</li>
   <li>項目3</li>
</ul>

<div id="exp5" title="例5：異なるクラスと入れ子のリスト要素の表示切替">
   <p class="cf">
      <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
      麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ
   </p>
   <ul id="exp6" title="例6：リスト要素">
      <li>項目1</li>
      <li>項目2</li>
      <li>項目3</li>
   </ul>
   <div id="exp7" title="例7：入れ子のリスト要素">
      <ul>
         <li>項目1</li>
         <li>項目2
            <ul id="exp8" title="例8：リスト要素">
               <li>項目2-1</li>
               <li>項目2-2</li>
               <li>項目2-3</li>
            </ul>
         </li>
      </ul>
   </div>
</div>

<fieldset id="exp9" title="例9：コールバック付きのfieldset要素の表示切替">
   <legend>Lorem Ipsum</legend>
   <p><label for="foo"><input id="foo" name="foo" /></label><input type="submit" value="submit" /></p>
</fieldset>

<div id="exp10" class="opened" title="例10：'opened'クラスを追加">
   <p class="cf">
      <a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_t.jpg" width="100" height="75" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a>
      麻布十番にあるアボガド料理専門店「アボガドダイニング Platinum Lounge」で食べた「アボカド刺」。アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたｗ
   </p>
</div>

<!-- / CODE -->
      </div>
   </body>
</html>