Question

我正在使用flipbook网站的bookblock主题。现在我在这里添加一个文本框来显示特定页面。当用户尝试直接浏览页面时，他必须将页码放在该文本框中。但这对我来说似乎是不可能的。我尝试了很多。

以下是该主题http://tympanus.net/Development/BookBlock/index2.html

的链接

我在这里添加了代码请帮帮我。这是我的第一个项目，必须交给客户。

<!DOCTYPE html>
<html lang="en" class="no-js demo-2">
    <head>

        <script src="js/modernizr.custom.js"></script>
    </head>
    <body>
        <div class="container">
            <!-- Top Navigation -->
            <div class="codrops-top clearfix">
                <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/codrops/2012/08/29/multiple-area-charts-with-d3-js/"><span>Previous Demo</span></a>
                <span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/"><span>Back to the Codrops Article</span></a></span>
            </div>
            <header>
                <h1>BookBlock <span>A Content Flip Plugin</span></h1>   
                <nav class="codrops-demos">
                    <a href="index.html">Demo 1</a>
                    <a class="current-demo" href="index2.html">Demo 2</a>
                    <a href="index3.html">Demo 3</a>
                    <a href="index4.html">Demo 4</a>
                    <a href="index5.html">Demo 5</a>
                </nav>
            </header>
            <div class="main clearfix">
                <div class="bb-custom-wrapper">
                    <div id="bb-bookblock" class="bb-bookblock">
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/1.jpg" alt="image01"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/2.jpg" alt="image02"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/3.jpg" alt="image03"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/4.jpg" alt="image04"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/5.jpg" alt="image05"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/6.jpg" alt="image06"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/7.jpg" alt="image07"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/8.jpg" alt="image08"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/9.jpg" alt="image09"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/10.jpg" alt="image10"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/11.jpg" alt="image11"/>

                        </div>
                        <div class="bb-item">
                            <img class="bb-custom-img" src="images/demo2/12.jpg" alt="image12"/>

                        </div>
                    </div>
                    <nav>
                        <a id="bb-nav-prev" href="#" class="bb-custom-icon bb-custom-icon-arrow-left">Previous</a>
                        <a id="bb-nav-next" href="#" class="bb-custom-icon bb-custom-icon-arrow-right">Next</a>
                    </nav>

                </div>
                <input type="text" name="pageno"><input type="button" > 
            </div>
        </div><!-- /container -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/jquery.bookblock.js"></script>
        <script>
            var Page = (function() {

                var config = {
                        $bookBlock : $( '#bb-bookblock' ),
                        $navNext : $( '#bb-nav-next' ),
                        $navPrev : $( '#bb-nav-prev' )
                    },
                    init = function() {
                        config.$bookBlock.bookblock( {
                            orientation : 'horizontal',
                            speed : 700
                        } );
                        initEvents();
                    },
                    initEvents = function() {

                        var $slides = config.$bookBlock.children();

                        // add navigation events
                        config.$navNext.on( 'click touchstart', function() {
                            config.$bookBlock.bookblock( 'next' );
                            return false;
                        } );

                        config.$navPrev.on( 'click touchstart', function() {
                            config.$bookBlock.bookblock( 'prev' );
                            return false;
                        } );

                        // add keyboard events
                        $( document ).keydown( function(e) {
                            var keyCode = e.keyCode || e.which,
                                arrow = {
                                    left : 37,
                                    up : 38,
                                    right : 39,
                                    down : 40
                                };

                            switch (keyCode) {
                                case arrow.up:
                                    config.$bookBlock.bookblock( 'prev' );
                                    e.preventDefault();
                                    break;
                                case arrow.down:
                                    config.$bookBlock.bookblock( 'next' );
                                    e.preventDefault();
                                    break;
                            }

                        } );
                    };

                    return { init : init };

            })();
        </script>
        <script>
                Page.init();
        </script>
    </body>
</html>

Answer 1

使用$( ‘#bb-bookblock’ ).bookblock( ‘jump’, position )

在jquery中使用文本框显示flipbook中的特定div

1 个答案: