実行結果
コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット
リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツ
設置サンプルのソース
<!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>Create A Tabbed Interface Using jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- 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/jquery-ui-personalized-1.5.2.packed.js"></script>
<script type="text/javascript">
$(function(){
$('#tabvanilla > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
$('#featuredvid > ul').tabs();
});
</script>
<!-- CSS -->
<style type="text/css">
/* 例1 */
.widget {
width:310px;
margin:20px 20px 15px 20px; padding:10px;
background:#f3f1eb;
border:1px solid #dedbd1;
}
.widget a {
color:#222;
text-decoration:none;
}
.widget a:hover {
color:#009;
text-decoration:underline;
}
.tabnav ul {
margin:0; padding:0;
list-style:none;
}
.tabnav li {
margin:0; padding:0;
list-style:none;
display:inline;
list-style:none;
}
.tabnav li a {
text-decoration:none;
color:#222;
font-weight:bold;
padding:4px 6px;
outline:none;
}
.tabnav li a:hover,
.tabnav li a:active,
.tabnav li.ui-tabs-selected a {
background:#dedbd1;
color:#222;
text-decoration:none;
}
.tabdiv {
margin-top:2px; padding:5px;
background:#fff;
border:1px solid #dedbd1;
}
.tabdiv p {
margin:10px; padding:0;
}
.tabdiv li {
list-style-image:url(/content/img/icon/color/star.gif);
margin-left:20px;
}
#post.tabdiv li {
list-style-image:url(/content/img/icon/color/arrow_next.gif);
}
.ui-tabs-hide {
display:none;
}
/* 例2 */
#featuredvid {
width:340px;
margin:0; padding:0;
text-align:center;
}
#featuredvid .fvid {
margin:10px;
}
#featuredvid .ui-tabs-nav {
margin:10px; padding:0;
}
#featuredvid .ui-tabs-nav li {
list-style:none;
margin:5px 0 0 0; padding:5px;
border:1px solid #dedbd1;
background:#fff;
text-transform:uppercase;
text-align: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 & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1><a href='http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/'>Create A Tabbed Interface Using jQuery</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>コンテンツ量に応じてコンテンツの高さが可変なタブ切替ウィジェット</h2>
<div id="tabvanilla" class="widget">
<ul class="tabnav">
<li><a href="#post">Post</a></li>
<li><a href="#bookmark">Bookmark</a></li>
<li><a href="#email">E-mail</a></li>
</ul>
<div id="post" class="tabdiv">
<ul>
<li><a href="#">MySpace</a></li>
<li><a href="#">Friendster</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Orkut</a></li>
<li><a href="#">Bebo</a></li>
<li><a href="#">Tagged</a></li>
<li><a href="#">Blogger</a></li>
<li><a href="#">Hi5</a></li>
<li><a href="#">Live Spaces</a></li>
<li><a href="#">Piczo</a></li>
<li><a href="#">Freewebs</a></li>
<li><a href="#">LiveJournal</a></li>
<li><a href="#">BlackPlanet</a></li>
<li><a href="#">myYearbook</a></li>
<li><a href="#">More</a></li>
</ul>
</div><!--/post-->
<div id="bookmark" class="tabdiv">
<ul>
<li><a href="#">Google Bookmarks</a></li>
<li><a href="#">del.icio.us</a></li>
<li><a href="#">Digg</a></li>
<li><a href="#">Furl</a></li>
<li><a href="#">Facebook Share</a></li>
<li><a href="#">StumbleUpon</a></li>
<li><a href="#">Yahoo MyWeb</a></li>
<li><a href="#">Newsvine</a></li>
<li><a href="#">Reddit</a></li>
<li><a href="#">Technorati</a></li>
<li><a href="#">LiveBookmarks</a></li>
<li><a href="#">Yahoo Bookmarks</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Current TV</a></li>
<li><a href="#">Ask</a></li>
</ul>
</div><!--bookmark-->
<div id="email" class="tabdiv">
<p>important contacts:<select><option>Hotmail</option><option>Gmail</option><option>Yahoo!メール</option><option>AOL</option><option>手動</option></select></p>
<p>E-mail:<input type="text" /></p>
<p>Password:<input type="password" /></p>
<p><input type="checkbox" value="1" checked="checked" /> Remember contacts</p>
<p><input type="button" value="インポート" /></p>
</div><!--/email-->
</div><!--/widget-->
<h2>リンクをクリックすると動画の埋め込まれたコンテンツを切り替えるタブ切替コンテンツ</h2>
<div id="featuredvid" class="widget">
<div class="fvid" id="vid-1">
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/qjNP8LErRn0&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qjNP8LErRn0&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
</div>
<div class="fvid" id="vid-2">
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/YXRH50fvHWA&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/YXRH50fvHWA&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
</div>
<div class="fvid" id="vid-3">
<object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/rfqNXADl3kU&hl=ja&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rfqNXADl3kU&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
</div>
<ul class="vidselector">
<li><a href="#vid-1"><span>Hamster Vacuum!</span></a></li>
<li><a href="#vid-2"><span>My hamster can not manage to stop spinning in his wheel</span></a></li>
<li><a href="#vid-3"><span>THE LEGEND of Hamster on a piano and pop corn! 5 MILLION VIEWS! THANKYOU ALL!</span></a></li>
</ul>
</div><!--/featuredvid-->
<!-- / CODE -->
</div>
</body>
</html>