用jquery自動存檔新聞

Question

當我在網站上發佈一些新聞或更新時，我想顯示5個最新版本，並自動創建新聞/ page2，news/page3等所有舊版本。

因爲我不是使用CMS林通過自己這樣

<div class="news">    
    <h2>Headline</h2> 
    <div class="news_text">  
     content here... 
    </div> 
</div> 

寫新聞是否有任何可能性，自動歸檔中動態創建網頁的消息沒有我不必這樣做，所有的時間我寫某事新？

Answer 1

是的，這是絕對有可能的，但您可能需要放開'網頁'。相反，您可以將其他新聞項目分爲5組（或類似的內容）並將其顯示在同一頁面上。

你可以使用JavaScript（或者jQuery，如果你喜歡的話）使用（或不使用）AJAX。

由於您沒有CMS，也不打算製作一個CMS，所以我推薦'簡單'的jQuery方法。

僞代碼是這樣：

- Hide all news items 
- Show latest five items 
- Make functionality to show next 
    - Etc.. 

更新

jQuery中的函數看起來像：

toShow = 5; 
i = 0; 

//initial run 
processNews(); 

//process button clicks 
$('#nextItems').click(function() { 
    if ((i + toShow) >= $('.news_text').length) 
    { 
     i = 0; 
     processNews(); 
    } 
    else 
    { 
     i = i + toShow; 
     processNews();   
    } 
}); 

$('#prevItems').click(function() { 
    if ((i - toShow) < 0) 
    { 
     i = $('.news_text').length - toShow; 
     processNews(); 
    } 
    else 
    { 
     i = i - toShow; 
     processNews();   
    } 
}); 

//show news items function 
function processNews(){ 
    $("#display").empty(); 
    $('.news_text').hide(); 
    for (var j = i; j < i+toShow; j++) { 
     var $new = $('.news_text:eq('+j+')'); 
     $('#display').add($('.news_text:eq('+j+')')); 
     $new.fadeIn(400); 
     // or other cool animations like: $new.slideDown(300); 
    } 
}; 

哪裏toShow是要顯示newsitems數量在同一時間（目前我顯示5）。

然後，您可以使用我的功能中定義的divs或buttons通過nextItems和prevItems滾動瀏覽新聞。

所以你的HTML會是這個樣子：

<div id="news"> 
    <div id="display"></div> 
    <div class="news_text"><h2>Headline 1</h2> article one </div> 
    <div class="news_text"><h2>Headline 2</h2> article two </div> 
    <div class="news_text"><h2>Headline 3</h2> article three </div> 
    <div class="news_text"><h2>Headline 4</h2> article four </div> 
    <div class="news_text"><h2>Headline 5</h2> article five </div> 
    <div class="news_text"><h2>Headline 6</h2> article six </div> 
    <div class="news_text"><h2>Headline 7</h2> article seven </div> 
    <div class="news_text"><h2>Headline 8</h2> article eight </div> 
    <div class="news_text"><h2>Headline 9</h2> article nine </div> 
    <div class="news_text"><h2>Headline 10</h2> article ten </div> 
    // etc.... 
</div> 

<button id="prevItems">Show prev 5</button> 
<button id="nextItems">Show next 5</button> 

這裏是執行的DEMO。

另請注意，您可以通過$new更改新聞項目之間的轉換。

目前我有$new.fadeIn(400);，但你也可以做其他很酷的事情，如$new.slideDown(300);，如果你讓<div id="news">的高度爲auto，看起來非常酷。玩一下時間也是一樣。你可以做一些很酷的事情:)

我希望這可以幫助你。

玩得開心:)

更新

如果你不希望所有的新聞項目在一開始加載，但過程中：你可以使用AJAX加載就像我早先提到。

例如改變processNews功能，這（未經測試小心了）：

var page = 1; 

//show news items function 
function processNews(){ 
    $(".display").empty(); 
    for (var j = 0; j < toShow; j++) { 
     $("#display").load("news/newsitems"+page+".html .news_text:eq("+j+")"); 
    } 
}; 

負荷newsitems1.html這是在這種情況下，一個名爲news文件夾中的網頁上找到的第一個5個newsitems和必須可以訪問您的根文件夾。

然後，您可以在此文件夾中創建多個html文件，並通過更改變量var page來訪問它們。

我希望有幫助。