0

「DynamicPage」jQuery プラグインを使用して、移動時にページがリロードされないようにしています。インデックスページには「Coin-Slider」という画像スライダープラグインがあります。クリックして画像スライダーのあるインデックスページに戻る場合を除いて、動的ページは正常に機能します。なんらかの理由で (私が知る限り)、コイン スライダーの準備完了機能は、インデックスに戻ったときにアクティブになりません。host.com/index.php は機能しますが、host.com/#index.php は機能しないため、URL に関係している可能性があります。これを行う理由は何ですか？ページが変更されるたびに実行されるように、js ファイルの DynamicPage 関数に ready 関数を含めようとしましたが、役に立ちませんでした。ページは以下に含まれています。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="css.css" rel="stylesheet" type="text/css" />
        <title>Liberty Design, Scarborough</title>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
        <script type='text/javascript' src='js/dynamicpage.js'></script>
        <script type="text/javascript" src="coin-slider/coin-slider.min.js"></script>
    </head>
    <body>
        <div id="nav-back"></div>
        <div id="wraps">
            <div id="left-wrap"></div>
            <div id="right-wrap"></div>
        </div>
        <div style="background:url(images/layout/shadow-bottom.png) no-repeat bottom center; width:900px; margin:0 auto; padding-bottom: 26px;">
            <div id="page-wrap">
                <div id="header">
                    <div id="banner">
                        <div id="social"><a href="https://www.facebook.com/pages/Liberty-Retreat/195182670529660"><img src="images/layout/facebook.png" alt="Like us on Facebook!" /></a></div>
                    </div>
                </div>
                <navbar>
                    <div id="nav">
                        <div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px; z-index:999;"></div>
                        <ul id="navbar">
                            <li><a href="index.php">Home</a></li>
                            <li><a href="test.php">Facilities</a></li>
                            <li><a href="#">Staff</a></li>
                            <li><a href="#">Where are we?</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                    </div>
                </navbar>
                <section id="main-content">
                    <div id="guts">           
                        <!-- Content Start -->
                        <div style="background:url(images/layout/sides.png) center center no-repeat; height:373px;">
                            <div id="gamesHolder">
                                <div id="games">
                                    <img src="images/banner_img/1335800583.png" alt="Welcome" />
                                    <span>
                                        <b>Welcome</b><br/>
                                        Welcome to Liberty
                                    </span>
                                    <img src="images/banner_img/1335800633.png" alt="shop front" />
                                    <span>
                                        <b>shop front</b><br/>
                                        this is the front of the shop
                                    </span>
                                    <img src="images/banner_img/" alt="staff #3" />
                                    <span>
                                        <b>staff #3</b>
                                        <br/>this is the description for staff #3
                                    </span>
                                    <img src="images/banner_img/" alt="staff #1" />
                                    <span>
                                        <b>staff #1</b><br/>
                                        this is staff #1
                                    </span>
                                    <img src="images/banner_img/" alt="asdas" />
                                    <span>
                                        <b>asdas</b><br/>
                                        sdasdas
                                    </span>       
                                </div>
                            </div>
                        </div>
                       <script>
                            $(document).ready(function() {
                                $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
                            });
                        </script>
                    </div>
                </section>
                <div id="footer">
                    <!-- Cosmetics for the footer -->
                    <div id="footer-back"></div>
                    <div id="footer-wraps">
                        <div id="footer-left-wrap"></div>
                        <div id="footer-right-wrap"></div>
                    </div>
                    <div style="background:url(images/layout/gradient-up.png) repeat-x;height:20px;position:relative;top:-20px;"></div>
                    <center style="position:relative; top:-8px; color:#999;">Liberty Design, Scarborough - Website by Chain.</center>
                </div>
            </div>
        </div>
    </body>
</html>
4

1 に答える 1

1

OK、mydomain.com と mydomain.com/#anything は同じです。これらは、index.php、index.html などのデフォルト ファイルを指しています。同じファイルにナビゲートしている間、ブラウザーは更新されませんが、次のような異なるハッシュタグがあります: file#hashA から file#hashB へ、または file から file#hashRandom へ、または file#index.php から file へ。ページが更新されない (ロードされない) ため、準備完了のドキュメントも起動されません (最初にページが読み込まれたときに既に起動されています)。

問題の最初の修正: mydomain.com/#index.php にリンクする代わりに、mydomain.com または mydomain.com/index.php にリンクします。

2番目の修正は次のとおりです。

<script>
$(document).ready(function() {
  var sliderInit = false;

  $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
  // Adding fix
  $('#idOfLinkThatGetsClicked').click(function () {

    if (!sliderInit) {
      $('#games').coinslider({ navigation: true, height:325, width: 595, hoverPause: true, delay: 5000,});
      sliderInit = true;
    }
  });
});
</script>
于 2012-05-04T22:39:09.540 に答える