You've seen it coming!
Buy now and get nothing for free!
Well, at least no free beer. Perhaps a bear,
if you can afford it.
your bear, you have to admit it!
No, we aren't selling bears.
get two for three beer.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
Period.
You've seen it coming!
Buy now and get nothing for free!
Well, at least no free beer. Perhaps a bear,
if you can afford it.
your bear, you have to admit it!
No, we aren't selling bears.
get two for three beer.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
And now, for something completely different.
Period.
<!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>設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.dimensions-1.2.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.1.1.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.accordion.js"></script>
<script type="text/javascript">
$(function(){
/* example1 */
$('#list1a').accordion();
$('#list1b').accordion({
autoheight: false
});
/* マウスオーバーで開閉 */
$('#navigation').accordion({
active: false,
header: '.head',
navigation: true,
event: 'mouseover',
fillSpace: true,
animated: 'easeslide'
});
$('#navigation a').click(function(){
return false;
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* example1 */
.basic {
width: 260px;
font-family: verdana;
border: 1px solid black;
}
.basic div {
background-color: #eee;
}
.basic p {
margin-bottom : 10px;
border: none;
text-decoration: none;
font-weight: bold;
font-size: 10px;
margin: 0px;
padding: 10px;
}
.basic a {
cursor:pointer;
display:block;
padding:5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: black;
background-color: #00a0c6;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #999;
background-image: url(/content/img/ajax/AccordionTab0.gif);
}
.basic a:hover {
background-color: white;
background-image: url(/content/img/ajax/AccordionTab2.gif);
}
.basic a.selected {
color: black;
background-color: #80cfe2;
}
/* example2 */
#navigation {
border:1px solid #5263ab;
margin:0px;
padding:0px;
text-indent:0px;
background-color:#e2e2e2;
width:200px;
}
#navigation a.head {
cursor:pointer;
border:1px solid #cccccc;
background:#5263ab url(/content/img/ajax/collapsed.gif) no-repeat scroll 3px 4px;
color:#ffffff;
display:block;
font-weight:bold;
margin:0px;
padding:5px;
text-indent:14px;
text-decoration: none;
}
#navigation a.head:hover {
color:#ffff99;
}
#navigation a.selected {
background-image: url(/content/img/ajax/expanded.gif);
}
#navigation a.current {
background-color:#ffff99;
}
#navigation ul {
border-width:0px;
margin:0px;
padding:0px;
text-indent:0px;
}
#navigation li {
list-style:none outside none; display:inline;
}
#navigation li li a {
padding:2px;
color:#000000;
display:block;
text-indent:10px;
text-decoration: none;
}
#navigation li li a:hover {
background-color:#ffff99;
color:#ff0000;
}
</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>設置サンプル</h1>
<p>【参照】<a href='http://bassistance.de/jquery-plugins/jquery-plugin-accordion/'>jQuery plugin: Accordion</a></p>
<!-- CODE -->
<h2>例1：基本（クリックでパネル展開）</h2>
<div class="basic" style="float:left;" id="list1a">
<a>There is one obvious advantage:</a>
<div>
<p>
You've seen it coming!<br/>
Buy now and get nothing for free!<br/>
Well, at least no free beer. Perhaps a bear,<br/>
if you can afford it.
</p>
</div>
<a>Now that you've got...</a>
<div>
<p>
your bear, you have to admit it!<br/>
No, we aren't selling bears.
</p>
</div>
<a>Rent one bear, ...</a>
<div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div><!-- #list1a -->
<div class="basic" style="float:left; margin-left: 2em;" id="list1b">
<a>There is one obvious advantage:</a>
<div>
<p>
You've seen it coming!<br/>
Buy now and get nothing for free!<br/>
Well, at least no free beer. Perhaps a bear,<br/>
if you can afford it.
</p>
</div>
<a>Now that you've got...</a>
<div>
<p>
your bear, you have to admit it!<br/>
No, we aren't selling bears.
</p>
</div>
<a>Rent one bear, ...</a>
<div>
<p>
get two for three beer.
</p>
<p>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
And now, for something completely different.<br/>
Period.
</p>
</div>
</div><!-- #list1b -->
<br clear="all" />
<h2>例2：マウスオーバーでパネル展開（jquery.dimensions.js v1.2、jquery.easing.js v1.1.1 使用）</h2>
<div style="height:250px;margin-bottom:1em;">
<ul id="navigation">
<li>
<a class="head" href="#">menu 1</a>
<ul>
<li><a href="#">menu 1-1</a></li>
<li><a href="#">menu 1-2</a></li>
<li><a href="#">menu 1-3</a></li>
<li><a href="#">menu 1-4</a></li>
<li><a href="#">menu 1-5</a></li>
<li><a href="#">menu 1-6</a></li>
<li><a href="#">menu 1-7</a></li>
</ul>
</li>
<li>
<a class="head" href="#">menu 2</a>
<ul>
<li><a href="#">menu 2-1</a></li>
<li><a href="#">menu 2-2</a></li>
<li><a href="#">menu 2-3</a></li>
<li><a href="#">menu 2-4</a></li>
<li><a href="#">menu 2-5</a></li>
<li><a href="#">menu 2-6</a></li>
<li><a href="#">menu 2-7</a></li>
</ul>
</li>
<li>
<a class="head" href="#">menu 3</a>
<ul>
<li><a href="#">menu 3-1</a></li>
<li><a href="#">menu 3-2</a></li>
<li><a href="#">menu 3-3</a></li>
</ul>
</li>
</ul>
</div><!-- #navigation -->
<br clear="all" />
<!-- / CODE -->
</div>
</body>
</html>