7/17授業(メモ)

web/授業 
<!DOCTYPE html>
<html lang="ja">
	<head>
  <meta charset="utf-8">
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
		<script type="text/javascript">
			$(function(){

				// Tabs
				$('#tabs').tabs();

				//hover states on the static widgets
				$('#dialog_link, ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); },
					function() { $(this).removeClass('ui-state-hover'); }
				);

			});
		</script>
		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
			#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
			#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
			ul#icons {margin: 0; padding: 0;}
			ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
			ul#icons span.ui-icon {float: left; margin: 0 4px;}
		</style>
	</head>
	<body>
  
		<!-- Tabs -->
		<h2 class="demoHeaders">Tabs</h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">1</a></li>
				<li><a href="#tabs-2">2</a></li>
				<li><a href="#tabs-3">3</a></li>
        <li><a href="#tabs-4">4</a></li>
        <li><a href="#tabs-5">5</a></li>
			</ul>
			<div id="tabs-1">あいうえお</div>
			<div id="tabs-2">かきくけこ</div>
			<div id="tabs-3">さしすせそ</div>
<div id="tabs-4">たちつてと</div>
<div id="tabs-5">なにぬねの</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery Tools tab</title>
<link rel="stylesheet" href="css/standalone.css">
<link rel="stylesheet" href="css/tabs.css" media="screen">
<link rel="stylesheet" href="css/tabs-panes.css" media="screen">
<script src="js/jquery.tools.min.js"></script>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<div id="tab">

<ul class="tabs">
	<li><a href="#">第一章</a></li>
	<li><a href="#">第二章</a></li>
	<li><a href="#">第三章</a></li>
  <li><a href="#">第四章</a></li>
</ul>
<div class="panes">
	<div><img src="images/01.gif" width="80" height="100">ジョジョの奇妙な冒険</div>
	<div><img src="images/02.jpg" width="80" height="100">ストーンオーシャン</div>
	<div><img src="images/03.jpg" width="80" height="100">スティールボールラン</div>
  <div><img src="images/04.jpg" width="80" height="100">ジョジョリオン</div>
  
</div>
  
</div>
<script>
$(function() {
    $("ul.tabs").tabs("div.panes > div");
});
</script>
</script>
</body>
</html>

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>バットマン悪役シリーズ</title>
<style>
#tabBox {
	width: 500px;
	margin: 0px;
}
ul#tabBox-nav {
	list-style-type: none;
	width: 460px;
	float: left;
	margin: 0;
	background: url(images/pixel.gif) bottom left repeat-x;
}
ul#tabBox-nav li {
	margin-right: 2px;
	float: left;
}
ul#tabBox-nav a {
	float: left;
	display: block;
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-bottom: 0;
	color: #666;
	background: #eee;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}
ul#tabBox-nav a:hover {
	background: #fff;
}
ul#tabBox-nav a.active {
	background: #fff;
	padding-bottom: 5px;
	cursor: default;
	color: #00BF08;
}
.tab {
	width: 478px;
	clear: left;
	border: 1px solid #ccc;
	border-top: none;
	padding: 10px;
}
.gr {
	color: #00BF08;
	font-weight: bold;
}
</style>
<script src="js/yetii-min.js"></script>
</head>
<body>
<h2>ゴッサムシティの友人たち</h2>
<div id="tabBox">
<ul id="tabBox-nav">
<li><a href="#sampletab1">tab01</a></li>
<li><a href="#sampletab2">tab02</a></li>
<li><a href="#sampletab3">tab03</a></li>
<li><a href="#sampletab4">tab04</a></li>
</ul>
<div class="tab" id="sampletab1">
<p><span class="gr">バッドマン</span><br><img src="images/batman.jpg" width=100 height="150">に切り替わりました。</p>
</div>
<div class="tab" id="sampletab2">
<p><span class="gr">ロビン</span><br><img src="images/robin.jpg" width=100 height="150">に切り替わりました。</p>
</div>
<div class="tab" id="sampletab3">
<p><span class="gr">ベイン</span><br><img src="images/bein.jpg" width=100 height="150">に切り替わりました。</p>
</div>
<div class="tab" id="sampletab4">
<p><span class="gr">ジョーカー</span><br><img src="images/joaker.jpg" width=150 height="150">に切り替わりました。</p>
</div>
</div>
<script type="text/javascript">
  var tabber1 = new Yetii({
  id: 'tabBox'
  });
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タブパネル</title>
<link href="style.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function(){
	$("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide()
	$("ul.tab li a").click(function(){
		$("ul.tab li a").removeClass("selected");
		$(this).addClass("selected");
		$("ul.panel li").hide();
		$($(this).attr("href")).show();
		return false;
	});
});
</script>
</head>
<body>
<h2>ブラウザの種類</h2>
<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">google-chrome</a></li>
<li><a href="#tab2">firefox</a></li>
<li><a href="#tab3">safari</a></li>
<li><a href="#tab4">IE</a></li>
<li><a href="#tab5">others</a></li>
</ul>
<ul class="panel">
<li id="tab1">google提供のブラウザ</li>
<li id="tab2">狐マークのブラウザ</li>
<li id="tab3">apple提供のブラウザ</li>
<li id="tab4">世界でもっとも使いにくいブラウザ</li>
<li id="tab5">ほかにもたくさん</li>
</ul>
</div>
</body>
</html>