jquery flip плагин показать и скрыть содержимое - PullRequest
Новая
       20

jquery flip плагин показать и скрыть содержимое

0 голосов
/ 10 февраля 2011

на самом деле я не программист, я дизайнер ... много, чем для тех, кто отвечает на этот случай .....

У меня возникают трудности с применением показа и скрытия контента на флип-плагине ..... 

var init = function(){

            $("#flipTop").click(function(e){


                $("#flipbox").flip({
                    dir: "top",
                    endColor: "white",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html(TOP);
                        $("#flipbox").css();  
                    }
                });
            });

            $("#flipRight").click(function(e){
                $("#flipbox").flip({
                    dir: "right",
                    endColor: "yellow",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("RIGHT");
                        $("#flipbox").css({
                            color: "red",
                            background: "yellow"
                        });  
                    }
                });
            });
            $("#flipLeft").click(function(e){
                $("#flipbox").flip({
                    dir: "left",
                    endColor: "blue",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("LEFT");
                        $("#flipbox").css({
                            color: "white",
                            background: "blue"

                        });  
                    }
                });
            });
            $("#flipBottom").click(function(e){
                $("#flipbox").flip({
                    dir: "bottom",
                    endColor: "red",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("BOTTOM");
                        $("#flipbox").css({
                            color: "yellow",
                            background: "red"
                        });  
                    }
                });
            });



        }

        $(document).ready(init);

=============================================== ================================================== == Я думал, что вышеупомянутый javascript слишком избыточен ... он должен быть упрощен, чтобы изменить показ и скрыть выбранный контент

и вот HTML, который я пытался сделать ....... 

<ul id="navigation" >  
        <li class="selected">
            <a href="#" id="Top"    rel="white"  rev="777">  TOP   </a></li>  
        <li><a href="#" id="Right"  rel="yellow" rev="777"> RIGHT  </a></li> 
        <li><a href="#" id="Left"   rel="blue"   rev="777">  LEFT  </a></li>  
        <li><a href="#" id="Bottom" rel="red"    rev="777"> BOTTOM </a></li>  
    </ul>






<div id="container">    
<div id="flipbox" class="top">
TOP
</div>
<div id="flipbox"class="right">
RIGHT
</div>
<div id="flipbox"class="left">
LEFT
</div>
<div id="flipbox"class="bottom">
BOTTOM
</div>
</div>

=============================================== ===========================================

Затем я пытаюсь скомпилировать это для команды сценария Java, но я не работал ....: (

$('document').ready(function(){  
    $('#flipbox').flip();  
    $('#navigation li a').each(function(){  
        $(this).click(function(){  
            $('#navigation li').each(function(){  
                $(this).removeClass('selected');  
            });  
            $(this).parent().addClass('selected');  

            var flipid=$(this).attr('id').substr(4);  
            $('#flipbox').flip({   
                dir: $this.attr("id"),
        endColor: $this.attr("rel"),
        duration:$this.attr("rev"),
                onEnd: function(){
             }, flipid, 1);

            return false;  
        });  
    });  
});

я хочу спросить, как заставить эти работы показывать и скрывать контент после эффекта флип, нажимая на вкладку навигации ...... большое спасибо за ответы на эту проблему ммм

1 Ответ

0 голосов
/ 10 февраля 2011

Просмотреть исходный код этой страницы http://lab.smashup.it/flip/ это может помочь вам понять, так как я никогда не пробовал флип-плагин, но готов помочь вам. !!

...