VPF::Вопрос про accordion widget - Форум программистов

LuckyCat

Дата 17.4.2010, 13:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

Не получается сделать так, чтобы при открытии следующей вкладки текст Hide менялся на Show.
Помогите дописать нужные строчки smile

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <title></title>    
         <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript">
        $(document).ready(function() {
        
            // choose text for the show/hide link
            var showText="open";
            var hideText="hide";
            
            // append show/hide links to the element directly preceding the element with a class of "toggle"
            $(".toggle").prev().append('<a href="#" class="toggleLink">'+showText+'</a>');
            
            // hide all of the elements with a class of 'toggle'
            $('.toggle').hide();
            
            var is_visible = false;
            
            // capture clicks on the toggle links
            $('a.toggleLink').click(function() {

                $(this).parent().next("div.toggle").slideToggle(300).siblings("div.toggle").slideUp("slow");

                
                is_visible = !is_visible;
                // change the link depending on whether the element is shown or hidden
                $(this).html( (!is_visible) ? showText : hideText);

                // return false so any link destination is not followed
                return false;            
            });
        
        })
        </script>
            
    </head>

    <body>
        
        <h3>Head 1 </h3>
        <div class="toggle">
            Text text text text text text text text text text text text text
        </div>
        
        <h3>Head 2 </h3>
        <div class="toggle">
            Text text text text text text text text text text text text text
        </div>
        
        <h3>Head 3 </h3>
        <div class="toggle">
            Text text text text text text text text text text text text text
        </div>    
        
        <h3>Head 4 </h3>
        <div class="toggle">
            Text text text text text text text text text text text text text        
        </div>                
    </body>
</html>

Sardar

Дата 17.4.2010, 22:12 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 2
Всего: 317

is_visible держит состояние для всех вкладок, видишь здесь проблему в логике?

Если используешь jQuery, почему бы не использовать $("контейнер").accordion() для этого?
Используй событие "change" (.bind("accordionchange", handler)) для смены show/hide текста.

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

LuckyCat

Дата 18.4.2010, 23:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

Спасибо за ответ!
Застопорилось дело... Помогите разобраться, почему ссылки друг на друга накладываются, что где и как надо изменить? smile

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
    h3{
        position: relative;
    }
    .nxtlnk{
        position: absolute; top: 0; right: 0;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  

  <script>
  $(document).ready(function() {
    $("#accordion").accordion({
         header: 'h3.title',
             active:false,
             collapsible:true,
             autoheight:false,
             clearStyle:true  
     });
     
    $('#accordion').bind("accordionchange", function(event, ui) { 
        jQuery(ui.newHeader.text() + '<a href="#" class="nxtlnk"> open</a>').appendTo('h3.title');
        jQuery(ui.oldHeader.text() + '<a href="#" class="nxtlnk"> hide</a>').appendTo('h3.title');
        });
        
        
  });
  </script>
</head>
<body>
  
<div id="accordion">
    <h3 class="title"><a href="#">Section 1</a></h3>
    <div class="clearfix">
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3 class="title"><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3 class="title"><a href="#">Section 3</a></h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3 class="title"><a href="#">Section 4</a></h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>

</body>
</html>

bars80080

Дата 19.4.2010, 00:08 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

Цитата(LuckyCat @ 18.4.2010, 23:04

)

почему ссылки друг на друга накладываются

дык, вы же сами написали:

Цитата(LuckyCat @ 18.4.2010, 23:04

)

position: absolute; top: 0; right: 0;

что дословно переводится как: вырвать из документа и разместить в левом верхнем углу

где вы хотите, чтобы они размещались?

LuckyCat

Дата 19.4.2010, 09:20 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 32
Регистрация: 15.6.2008

Репутация: нет
Всего: нет

Дело не в стилях, а в том, что hide/show одновренно показываются. Подскажите, что и как надо дописать?

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »