[技能檢定]題組一 步驟20 完成更多最新消息功能

當設定為顯示的最新消息超過五筆時會在首頁出現 More... 的連結，並導引使用者跳轉到 index.php?do=news 頁面。

列出最新消息筆數的做法和首頁是一樣的，只是這邊有要求一頁五筆，且需有分頁的功能，因此我們在類別中建立一個新方法 morenews() 用來輸出最新消息分頁需要的html碼。

原本的版型檔案中也有附一段js的程式是用來顯示更多最新消息的彈出視窗的，原理和首頁的程式碼幾乎一樣，只是加上了垂直位置的變化而已，我們直接套用該程式就可以了，不用另外自己寫程式。

NEWS-前台更多最新消息顯示區

/Controller/News.php

function moreNews(){

    //取得所有設定為顯示的資料
    $rows=$this->paginate(5,['sh'=>1]);

    //根據頁碼來計算清單的序號起始值
    $start=$this->links['start']+1;
    
    //使用<ol> 來建立有序號的清單，屬性start可以設定起始值
    echo "<ol start='$start'>";
    foreach($rows as $row){
        echo "<li class='sswww'>";  //class加上sswww做為js的彈出視窗功能使用
        echo mb_substr($row['text'],0,20);
        echo "<span class='all' style='display:none'>";
        echo $row['text'];
        echo "</span>";
        echo "</li>";
    }
    echo "</ol>";
    echo "<div class='cent'>";

    //執行links()方法來建立分頁連結
    echo $this->links();
    echo "</div>";
}

/view/front/news.php

<!--正中央-->
<h3 class="cent">更多最新消息內容</h3>
<hr>
<!--執行物件中的moreNews()方法，輸出更多消息的列表及分頁連結-->
<?=$News->moreNews();?>

如果發現滑鼠移到最新消息上沒有彈出視窗時，
在 index.php 或 backend.php 找找是否有下列的js程式碼片段，複製到 /view/front/news.php 的html碼下方即可

彈出視窗程式碼片段

<div id="alt"
    style="position: absolute; width: 350px; min-height: 100px; word-break:break-all; text-align:justify;
      background-color: rgb(255, 255, 204); top: 50px; left: 400px; z-index: 99; display: none;
       padding: 5px; border: 3px double rgb(255, 153, 0); background-position: initial initial;
        background-repeat: initial initial;">
</div>
<script>
$(".sswww").hover(
    function() {
        //原始程式碼把<pre>拿掉，字型會跑掉，手動加上<pre>即正常
        $("#alt").html("<pre>" + $(this).children(".all").html() + "</pre>").css({
            "top": $(this).offset().top - 50
        })
        $("#alt").show()
    }
)
$(".sswww").mouseout(
    function() {
        $("#alt").hide()
    }
)
</script>