Как мне получить GMail-подобный интерфейс с вкладками / деки с jQuery? - PullRequest
Новая
       0

Как мне получить GMail-подобный интерфейс с вкладками / деки с jQuery?

0 голосов
/ 01 сентября 2011

Я пытаюсь создать интерфейс, похожий на правую часть того, что показано ниже, с помощью jQuery - сообщения с вкладками / деки с заголовком (темой) и нижним колонтитулом.enter image description here

Кто-нибудь делал что-то подобное с jQuery или может предложить направление для решения проблемы?Я искал в Интернете некоторое время, но не нашел решения, которое достаточно близко.Я наткнулся на « 30 jQuery tabs tutorial », но тоже не нашел того, что искал.

Заранее спасибо за вашу помощь.Дайте мне знать, если я смогу предоставить более подробную информацию о том, что я ищу.

Ответы [ 2 ]

1 голос
/ 01 сентября 2011

Вы хотите создать аккордеон.

Я настоятельно рекомендую jQuery Tools - http://flowplayer.org/tools/demos/tabs/accordion.html

1 голос
/ 01 сентября 2011

Основная безобразная идея: 

<!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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...