0

イベントのカレンダーを作成していますが、イベントの「詳細」は非表示のdivにあります。クリックするとjavascriptを使用して詳細を表示する小さなアイコンがあります。

私が欲しいのは、これがクリックされると、アイコンが別のアイコンに置き換えられ（「開いている」ことを示すため）、そのアイコンがクリックされると、divを再び閉じることです。

したがって、現在のコードは

<a href="#" onclick="Effect.BlindDown('eventdetails<?php echo $event_count;?>'); return false;"><img class="open" src="./img/plus.png"></a>

そして、画像を「minus.png」に変更したいと思います。だからそれは

<a href="#" onclick="Effect.BlindUp('eventdetails<?php echo $event_count;?>'); return false;"><img class="open" src="./img/minus.png"></a>

しかし、それを完全に理解することはできません。何か案は？

アップデート

Miaのおかげで、次のコードが機能するようになりました。ボタン...

<a href="#" onclick="toggleDisplayWait('eventdetails<?php echo $event_count;?>', 'icon<?php echo $event_count;?>', 800); return false;"); return false;"><img id="icon<?php echo $event_count;?>" class="open" src="./img/plus.png"></a>

そしてヘッダーで...

    <script type="text/javascript" language="javascript">

    function toggleDisplayWait(divId, imgId, durationmSec) {
    if(!$(divId).visible()) {
        move = Effect.BlindDown;
        newImage = "./img/minus.png";
    }
    else {
        move = Effect.BlindUp;
        newImage = "./img/plus.png";  
    }        
    move(divId, {duration: durationmSec / 1000.0 });
    setTimeout(function() { $(imgId).src = newImage; }, durationmSec)
}

    </script>
4

1 に答える 1

1

子猫が+記号で、黒い画像が-であるふりをします。私は2つのバージョンを作成しました。最初のバージョン（toggleDisplay）では、画像がすぐに変更されます。おそらく必要なのは、アニメーションが終了した後にのみ+/-を変更することです。

EDITは、複数の暦日のdivのdividとimageidの引数を追加しました。それ以外の場合は、画像IDを関数内にハードコーディングできます。また、すべてのカレンダーの日付がプラスとマイナスに同じ画像を使用すると仮定します。

ご覧ください：http：//jsfiddle.net/BfWUQ/3/

divのレイアウトは派手ですが、レイアウトがわかっていると思います。

toggleDisplayWait('eventdetails', 'icon', 800);
// hidden div id, +/- image id, animation length in milliseconds

function toggleDisplayWait(divId, imgId, durationmSec) {
    if(!$(divId).visible()) {
        move = Effect.BlindDown;
        newImage = "http://placehold.it/100/100";
    }
    else {
        move = Effect.BlindUp;
        newImage = "http://placekitten.com/100/100";  
    }        
    move(divId, {duration: durationmSec / 1000.0 });
    setTimeout(function() { $(imgId).src = newImage; }, durationmSec)
}

編集2

変化する

onclick="toggleDisplayWait("eventdetails<?php echo $event_count;?>", 
"icon", 800); return false;"

に

onclick="toggleDisplayWait('eventdetails<?php echo $event_count;?>', 
'icon', 800); return false;"
于 2012-04-29T01:00:47.510 に答える