代码之家  ›  专栏  ›  技术社区  ›  Harsha M V

Facebook风格的评论框

  •  3
  • Harsha M V  · 技术社区  · 15 年前

    我有这样的微博和评论系统

    alt text

    这是一组tweet及其评论和评论框的代码块:

    <li class="storyBlock">
      <div>
        <div class="grid userImageBlockL">
          <div class="imgMedium"> <a href="/bakasura1/users/harshamv"><img width="44" height="44" alt="image" src="/bakasura1/files/images/medium/1288170363aca595cabb50.jpg"></a> </div>
        </div>
        <div class="grid userContentBlockL">
          <div class="userContentHeader">
            <h5> <a href="/bakasura1/users/harshamv">Harsha Vantagudi</a> <span class="storyMessage">Testing the Seconds</span></h5>
            <span class="user-status-time">6 hours ago</span> <span><a href="#" class="user-status-buttons">Comment</a> <a href="#" class="user-status-buttons">Delete</a></span> </div>
          <ul class="commentList">
            <li class="commentBlock">
              <div>
                <div class="grid userImageBlockS">
                  <div class="imgSmall"> <a href="/bakasura1/users/harshamv"><img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"></a> </div>
                </div>
                <div class="grid userContentBlockS alpha omega">
                  <h5> <a href="/bakasura1/users/harshamv">Harsha Vantagudi</a> <span class="storyMessage">Write your comment...</span></h5>
                  <span class="user-status-time">27 minutes ago</span> <span><a href="#" class="user-status-buttons">Comment</a> <a href="#" class="user-status-buttons">Delete</a></span></div>
                <div class="clear"></div>
              </div>
            </li>
            <li class="commentBlock">
              <div>
                <div class="grid userImageBlockS">
                  <div class="imgSmall"> <img width="35" height="35" alt="image" src="/bakasura1/files/images/small/1288170363aca595cabb50.jpg"> </div>
                </div>
                <div class="grid userContentBlockS alpha omega">
                  <form accept-charset="utf-8" action="/bakasura1/account/saveComment" method="post">
                    <div style="display: none;">
                      <input type="hidden" value="POST" name="_method">
                    </div>
                    <input type="hidden" id="StatusMessageReplyPid" value="67" name="data[StatusMessageReply][pid]">
                    <input type="hidden" id="StatusMessageReplyItemId" value="1" name="data[StatusMessageReply][item_id]">
                    <input type="hidden" id="StatusMessageReplyCommentersItemId" value="1" name="data[StatusMessageReply][commenters_item_id]">
                    <textarea id="StatusMessageReplyMessage" name="data[StatusMessageReply][message]">Write your comment...</textarea>
                    <input type="submit" name="" value="Comment">
                  </form>
                </div>
                <div class="clear"></div>
              </div>
            </li>
          </ul>
        </div>
        <div class="clear"></div>
      </div>
    </li>
    

    对于如何在保存注释时从submit创建Ajax,我有点困惑,新的注释应该从上到下堆叠。因为没有唯一的tweet标识符。我不知道如何解决这个问题。

    有人能推荐一个简单的解决方案吗?

    2 回复  |  直到 15 年前
        1
  •  3
  •   Harsha M V    15 年前
        2
  •  1
  •   kobe    15 年前

    你试过这个插件吗,

    http://timeago.yarp.com/

    这应该有用

    推荐文章