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">
         
         
         <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にしないと文字化けしてしまう。};

タイムスタンプを変更しない

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

#contents

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

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

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

テキスト整形のルールを表示する

ナビゲーション

検索

ツールボックス

最新の40件

JavaScript/jQuery Ui.Tabの使い方の編集

ナビゲーション

検索

ツールボックス

最新の40件

JavaScript/jQuery Ui.Tabの使い方 の編集

JavaScript/jQuery Ui.Tabの使い方の編集