JavaScript/jQuery Ui.Tabの使い方 の変更点

*jQuery Ui.Tabの使い方 [#cdddd18d]

#contents

**ダウンロード [#f3211a3a]
http://stilbuero.de/jquery/tabs/


[[サンブルソース表示>http://ma21.ath.cx/jquery.tabs/uitab.php]]

**サンプルソース [#r57664e1]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html lang="ja">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
         <meta http-equiv="Content-Style-Type" content="text/css">
         <meta http-equiv="Content-Script-Type" content="text/javascript">
 
         <title>Tabs - jQuery plugin for accessible, unobtrusive tabs</title>
 
         <script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
         <script src="jquery.history_remote.pack.js" type="text/javascript"></script>
         <script src="jquery.tabs.pack.js" type="text/javascript"></script>
         <script type="text/javascript">
             $(function() {
                 $('#container').tabs({fxSlide: true, fxFade: true, fxSpeed: 'fast' });
                 $('#container-9').tabs({remote: true, fxSlide: true, fxFade: true, fxSpeed: 'fast' });
             });
         </script>
 
         <link rel="stylesheet" href="jquery.tabs.css" type="text/css" media="print, projection, screen">
         <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
         <!--[if lte IE 7]>
         <link rel="stylesheet" href="jquery.tabs-ie.css" type="text/css" media="projection, screen">
         <![endif]-->
         <style type="text/css" media="screen, projection">
 
             /* Not required for Tabs, just to make this demo look better... */
 
             body {
                 font-size: 16px; /* @ EOMB */
             }
             * html body {
                 font-size: 100%; /* @ IE */
             }
             body * {
                 font-size: 87.5%;
                 font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
             }
             body * * {
                 font-size: 100%;
             }
             h1 {
                 margin: 1em 0 1.5em;
                 font-size: 18px;
             }
             h2 {
                 margin: 2em 0 1.5em;
                 font-size: 16px;
             }
             p {
                 margin: 0;
             }
             pre, pre+p, p+p {
                 margin: 1em 0 0;
             }
             code {
                 font-family: "Courier New", Courier, monospace;
             }
         </style>
     </head>
     <body>
         <h2>Simple Tabs</h2>
 
         <div id="container">
             <ul>
                 <li><a href="#fragment-1"><span>One</span></a></li>
                 <li><a href="#fragment-2"><span>Two</span></a></li>
                 <li><a href="#fragment-3"><span>Three</span></a></li>
             </ul>
             <div id="fragment-1">
                 <p>First tab is active by default:</p>
                 <pre><code>$(&#039;#container&#039;).tabs({fxSlide: true, fxFade: true, fxSpeed: 'fast'});</code></pre>
             </div>
             <div id="fragment-2">
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
             </div>
             <div id="fragment-3">
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
             </div>
         </div>
 
         <div id="container-9">
             <ul>
                 <li><a href="ahah_1.html"><span>One</span></a></li>
                 <li><a href="ahah_2.html"><span>Two</span></a></li>
                 <li><a href="ahah_3.html"><span>Three</span></a></li>
             </ul>
         </div>
 
     </body>
 </html>

**注意 [#l94f9c1c]
&color(Red){※Ajaxを使用する場合、参照先ファイルで日本を使用する時はutf-8にしないと文字化けしてしまう。};