SAP與其他程式學習筆記

這是接續上一篇設定 infinite scorll的，有時侯我們載入的不只是html,php頁面，如果第二頁當中，有些一些jquery還想要執行的，如果不重新載入，那麼只有第一頁才能跑jquery的功能，第二頁新讀入以後就沒辦法了。所以如何讀取第二頁之後的jquery fucntion，就是本篇的重點...........

我花了7小時才，才找到這一篇http://stackoverflow.com/questions/8763308/infinite-scroll-and-the-callback，所以特此做個記錄

以下黃色部份是原來的程式

<script type="text/javascript">
    $(document).ready(function(){

/*自動載入捲動項目*/
        $(function() {
            $('#contentserial').infinitescroll({
                loading: {
                          finishedMsg        : "<em>這已經是最後一個項目了.</em>",/*最後一頁顯示的字*/
                          msgText            : "<em>載入更多項目...</em>",/*自動載入中的暫時顯示的字*/
                          speed                : 'fast',/*載入速度*/
                        },
                state: {
                          currPage: <?php echo $currentPage;//目前網頁。很多教學在此用預設值1，但因為如果有人從pageID=2開始，就不能從1數了，故用可變動參數較好。 我用php的PEAR模組的 pager套件指定一個參數目前網頁表示$currentPage然後預設是1，但仍可以自由變動，在這裏網友們也可以不靠套件手動指定，PEAE的 pager套件就不多解釋，它只是一種換頁的套件，網友們可自行寫其他程式替代這個$currentPage參數 ?>
                        },
                navSelector        : "#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
                nextSelector    : "a#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
                itemSelector    : "#contentserial li", /*你要讀入的內容物是什麼，在此例子是讀入下一頁的li，並插入#contentserial裏面*/
                maxPage            : <?php $totalnumpages  = $pager->numpages(); if ($totalnumpages < 1) $totalnumpages = '1'; echo $totalnumpages; //網頁多最是幾頁。在此我用PEAE pager內建的總頁數計算功能，指定參數為$totalnumpages，至少為1。網友在此可以寫其他程式來自行計算，可以不用照抄，照抄的話，因為你沒有用pager套件，所以也是無用的 ?>,
                dataType        : "php",/*檔案名稱*/
                animate            : false, /*動畫效果。這個一定要取消，否則在有資料庫多欄讀入的網頁會出錯，會亂跳*/
                extraScrollPx    : 0, /*刷入新網頁後，要自動往上移多少空間，我選擇不要*/
                pixelsFromNavToBottom    : 30, /*距離滑到最底部的距離多少時要開始啟動，在此指定30px*/
                path: function(index) {/*path是infinite scroll內建的下一頁換頁功能，這邊有點複雜，很重要！！！*/
                    <?php
                    if (empty($_GET['pageID']))/*沒有PageID時，比如 test.php?o=t ，補上為test.php?o=t&pageID= */
                        $nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&pageID=';
                    else {/*如果有pageID了，舉例第3頁，那麼要把pageID=3的3給刪除掉，用str_replace功能去跑，比如test.php?o=t&pageID=3 要替換為 test.php?o=t&pageID= */
                        $nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
                        $nowpageID_path = '&pageID='.$_GET['pageID'];
                        $nextscrollpage_path = str_replace($nowpageID_path,'&pageID=',$nextscrollpage_path);
                    }
                    ?>
                    return "<?php echo $nextscrollpage_path; ?>" + index; /*index原理是根據目前state:currPage的頁數自動+1，這是infinite scroll內建的自動累加功能。所以舉例第3頁產生的網頁下一頁參數會是4(index)，下一頁就是test.php?o=t&pageID=4*/
                }
            });
        });

    });
</script>

在新網頁讀入之後，我要同時想再執行功能($('#exampletarget').hide(),$(".exampleclick").click.....)在讀入之後。

所以，新添加的部份如橘色部份下，從逗點,開始，接在infinitescorll之後執行。這麼一來新讀入的東西，就會再執行一次我們要的功能了！

<script type="text/javascript">
    $(document).ready(function(){

/*自動載入捲動項目*/
        $(function() {
            $('#contentserial').infinitescroll({
                loading: {
                          finishedMsg        : "<em>這已經是最後一個項目了.</em>",/*最後一頁顯示的字*/
                          msgText            : "<em>載入更多項目...</em>",/*自動載入中的暫時顯示的字*/
                          speed                : 'fast',/*載入速度*/
                        },
                state: {
                          currPage: <?php echo $currentPage;//目前網頁。很多教學在此用預設值1，但因為如果有人從pageID=2開始，就不能從1數了，故用可變動參數較好。 我用php的PEAR模組的 pager套件指定一個參數目前網頁表示$currentPage然後預設是1，但仍可以自由變動，在這裏網友們也可以不靠套件手動指定，PEAE的 pager套件就不多解釋，它只是一種換頁的套件，網友們可自行寫其他程式替代這個$currentPage參數 ?>
                        },
                navSelector        : "#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
                nextSelector    : "a#nextscroll:last",/*讀入下一網頁的連結，稍後解釋*/
                itemSelector    : "#contentserial li", /*你要讀入的內容物是什麼，在此例子是讀入下一頁的li，並插入#contentserial裏面*/
                maxPage            : <?php $totalnumpages  = $pager->numpages(); if ($totalnumpages < 1) $totalnumpages = '1'; echo $totalnumpages; //網頁多最是幾頁。在此我用PEAE pager內建的總頁數計算功能，指定參數為$totalnumpages，至少為1。網友在此可以寫其他程式來自行計算，可以不用照抄，照抄的話，因為你沒有用pager套件，所以也是無用的 ?>,
                dataType        : "php",/*檔案名稱*/
                animate            : false, /*動畫效果。這個一定要取消，否則在有資料庫多欄讀入的網頁會出錯，會亂跳*/
                extraScrollPx    : 0, /*刷入新網頁後，要自動往上移多少空間，我選擇不要*/
                pixelsFromNavToBottom    : 30, /*距離滑到最底部的距離多少時要開始啟動，在此指定30px*/
                path: function(index) {/*path是infinite scroll內建的下一頁換頁功能，這邊有點複雜，很重要！！！*/
                    <?php
                    if (empty($_GET['pageID']))/*沒有PageID時，比如 test.php?o=t ，補上為test.php?o=t&pageID= */
                        $nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'].'&pageID=';
                    else {/*如果有pageID了，舉例第3頁，那麼要把pageID=3的3給刪除掉，用str_replace功能去跑，比如test.php?o=t&pageID=3 要替換為 test.php?o=t&pageID= */
                        $nextscrollpage_path = $_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
                        $nowpageID_path = '&pageID='.$_GET['pageID'];
                        $nextscrollpage_path = str_replace($nowpageID_path,'&pageID=',$nextscrollpage_path);
                    }
                    ?>
                    return "<?php echo $nextscrollpage_path; ?>" + index; /*index原理是根據目前state:currPage的頁數自動+1，這是infinite scroll內建的自動累加功能。所以舉例第3頁產生的網頁下一頁參數會是4(index)，下一頁就是test.php?o=t&pageID=4*/
                }
            });
        },/*想要執行的東西，就是擺在這裏下面，請注意從arrayOfNewElems是必要的，逗點也不要忘記*/
        function(arrayOfNewElems){
            $('#exampletarget').hide();  /*要執行之功能*/
            $(".exampleclick").click(function() {  /*要執行之功能*/
                $('#exampletarget').show();  /*要執行之功能*/
            })
        }
        );
    });
</script>