實現讀/未讀像在電子郵件

我想實現像讀/未讀電子郵件中的東西。我可以通過使用jQuery，PHP和MySQL這樣做。我想在步驟中做什麼：實現讀/未讀像在電子郵件

1-當我點擊html表格中的一行時，我在數據庫中更改此消息的狀態。 2-然後改變這一行的背景，但如果我註銷並重新登錄該行仍保持改變。我知道我已經在表格行中使用了css類。

我到現在爲止所做的是，我更新了數據庫中此特定消息的狀態。

問候。

來源

2009-11-17 Sarah

這太寬了我想，也許你可以更具體？ –

你將不得不重新解釋你的問題，詳細說明你需要什麼，並理想地解釋你到目前爲止所嘗試的。 – karim79

我不明白這是一個問題。我覺得你正在問我們其中一個人爲你寫代碼，這不是本網站的用途。 –

我不能給你全部的代碼，因爲這只是一個小太多，但這裏是我會怎麼做：

使用jQuery，指定功能表中的行onChange事件。
該函數使用AJAX通知服務器該事件的狀態更改。
服務器更新該特定行的狀態。
它可以發回該行的HTML代碼，或者您可以使用jQuery更改該類。
因爲狀態在數據庫中現在已經改變，右側狀態將再次登錄後顯示，因爲頁面會在這種情況下，服務器（我假設）被加載中...

您必須考慮您希望爲JavaScript支持人員禁用的功能。

如果您在編碼方面需要更多幫助，請評論！

來源

2009-11-17 14:24:11 Franz

嘿弗蘭茲謝謝你的回答，所以你的意思是我應該檢查狀態，一旦我從服務器加載，然後根據狀態改變行的類 – Sarah

是的，你可以讓AJAX腳本返回新的狀態。 – Franz

如果它是一個生產站點，您可能會想要提供一個無javascript的解決方案，所以如果您在點擊上更改頁面，那麼您根本不需要涉及JavaScript。在數據庫中創建一個默認爲0的「讀取」布爾字段。當您點擊查看記錄時，請將記錄ID保存在網址中，並在點擊後到達的頁面中通過php將該記錄的「讀取」更改爲1。

如果您希望在點擊之後留在同一頁面上，那麼您需要獲取JavaScript，正如Franz上面提到的那樣，但以漸進式增強方式執行此操作非常好，其中JavaScript爲增值，以及底層可用的基本功能。

來源

2009-11-17 17:50:40 Kzqai

嘿Tchalvak謝謝你回答實際上我已經在數據庫中創建了一個aboolean，它被改變onclick和一切，但我不認爲這個網址的想法是最好的，因爲我們在這裏談論幾個記錄。 – Sarah

我同意Tchalvak。嘗試爲禁用它的人提供非JS方式。 – Franz

好吧，如果您曾經使用Gmail或Hotmail或雅虎郵件，原則是相同的，如果您可以通過點擊查看記錄「查看」記錄，然後處理您的頁面上的「讀/未讀」過程正在查看記錄。只有javascript解決方案的問題是（對於製作，賺錢類型的網站）當有人試圖使用較少的瀏覽器（ie6），手機上的某些東西，某些較舊的瀏覽器或僅當意外斷開JavaScript時發生了什麼情況。所以漸進式增強是關鍵。 – Kzqai

也許我可以更好地格式化這個，但這應該按照您正在尋找的概念來工作。

循環播放電子郵件結果集。

<tr class="email_unread"><td><img class="email" id="email_id_'.$email_id.'" /></td><td> '.$email_subject.' </td></tr>

根據電子郵件是否被讀取，您將該類設置爲email_read或email_unread。如果（$ email_read = 1）$ css =「email_read」;其他$ css =「email_unread」;

使用jQuery做髒工作。

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

        $.get("emailRead.php", { id: $(this).attr("id") }); 
        $(this).parent().parent().removeClass('email_unread').addClass('email_read'); 

      }); 

     }); 
    </script>

這將是emailRead。php

在這裏，您抓取GET var，修剪email_id_部分以獲取數字，然後在更新查詢中使用它。當然，你將不得不對安全檢查進入emailRead.php

來源

2010-02-05 21:07:02 mmundiff

實現讀/未讀像在電子郵件

回答

相關問題