How do I achieve the GMail-like tabbed/decked interface with jQuery?
I'm trying to create an in开发者_JS百科terface that's like the right-hand side of what's shown below with jQuery -- tabbed/decked messages with header(subject) and footer.
Has anyone done something similar with jQuery or can suggest a direction to approach the problem? I've searched on the Web for a while but haven't found a solution that's close enough. I ran across the "30 jQuery tabs tutorial" but didn't find what I am looking for either.
Thanks in advance for your help. Let me know if I can provide more details on what I'm looking for.
Basic ugly idea:
<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
$('.thread .head').click(function() {
$(this).next().slideToggle("fast");
return false;
}).next().hide();
});
</script
<meta charset=utf-8 />
<title>basic Idea</title>
<style>
.thread { width: 300px; border: 1px soildl; }
.thread h2{ background-color: #CCC; margin: 0; border: 1px solid #FFC;}
.thread div{ background-color:#FDF; border: 1px solid #000;}
</style>
</head>
<body>
<div class="thread">
<h2 class="head">The information here</h2>
<div>
blah blah blah blah
</div>
<h2 class="head">come other information here</h2>
<div>
blah blah blah blah Goo Goo Goo
</div>
<h2 class="head">hee hee hee</h2>
<div>
ho ho ho ho ho
</div>
</div>
</body>
</html>
JSBIN
You are looking to create an accordion.
I highly recommend jQuery Tools - http://flowplayer.org/tools/demos/tabs/accordion.html
加载中,请稍侯......
精彩评论