1

次の Flip JQuery プラグインを使用しています。

http://lab.smashup.it/flip/

動作させることはできましたが、自分のサイトで使用するには問題があります。ボタンをクリックするとdivを反転でき、別のボタンをクリックすると古い状態に戻ることができるものを最初から作成するにはどうすればよいですか。

以下は、Flip を使用したものですが、ゼロから始める必要があります。

コード：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="container">
        <div class="real_thing" id="flipbox">
            <a href="#" id="email_flip">
            <div class="button1">
                <span class="line_text">
                    Button 1
                </span>
            </div>
            </a>
            <div class="button2">
                <span class="line_text">
                    Button 2
                </span>
            </div>
            <div class="button3">
                <span class="line_text">
                    Button 3
                </span>
            </div>
        </div>
        <a href="#" class="flip" id="clicker">Flip</a>
        <a href="#" class="flip" id="clicker2" onclick="flip();">Revert</a>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.flip.js"></script>
    <script type="text/javascript">
    $("#clicker2").click(function(){
    $("#flipbox").revertFlip();

    });
    </script>
    <script type="text/javascript">
    function flip() {
        $("#email_flip").click(function()

        {

            $("#flipbox").flip({

            direction: 'tb',

            content: '<input type="text" placeholder="Email">&nbsp;<input type="text" placeholder="Password">',


        })

        }

        )
    }
    $(document).ready(function() {
        $("#flipbox").on("focus", function(){flip();});
        flip();
    });
    </script>
</body>
</html>
4

0 に答える 0