注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery边栏评论插件side comments

ajax fishcity 2352浏览

jquery评论side comments

side comments是一款非常棒的jquery边栏评论插件,它会在每个文章标题留一个小图标,点击后便展开显示最新的评论,可在下方直接评论,完成后可以隐藏起来,使用非常方便。评论以ajax方式获取或提交,自动生成格式,很轻松就可以把side comments集成到网站了。

jquery实例:side comments的使用方法

引入核心文件,你可以不引入default-theme.css,但是你需要自定义一套样式,因为side-comments.css只是最基本的样式。

  <link rel="stylesheet" href="release/side-comments.css" />
  <link rel="stylesheet" href="release/themes/default-theme.css" />
  <script src="support/js/jquery.js"></script>
  <script src="release/side-comments.js"></script>

构建html

你需要建立一个包裹评论的元素,然后在元素里面的每条评论需要加上两个属性,commentable-section和data-section-id,data-section-id为评论对应的唯一ID。

<div id="commentable-area">
  <p data-section-id="1" class="commentable-section">
    This is a section that can be commented on.
  </p>
  <p data-section-id="2" class="commentable-section">
    This is a another section that can be commented on.
  </p>
  <p data-section-id="3" class="commentable-section">
    This is yet another section that can be commented on.
  </p>
</div>

写入JS

//首先加载
var SideComments = require('side-comments');
 
// 然后创建一个sidecommets实例, 传递包裹评论元素,当前用户和现有的评论三个参数。
sideComments = new SideComments('#commentable-area', currentUser, existingComments);

当前用户currentUser是一个对象,具体代码

var currentUser = {
"id": 1,
"avatarUrl": "users/avatars/user1.png",
"name": "Jim Jones"
};

现有评论existingComments也是一对象,具体代码

var existingComments = [
  {
    "sectionId": "1",
    "comments": [
      {
        "authorAvatarUrl": "http://f.cl.ly/items/1W303Y360b260u3v1P0T/jon_snow_small.png",
        "authorName": "Jon Sno",
        "comment": "I'm Ned Stark's bastard. Related: I know nothing."
      },
      {
        "authorAvatarUrl": "http://f.cl.ly/items/2o1a3d2f051L0V0q1p19/donald_draper.png",
        "authorName": "Donald Draper",
        "comment": "I need a scotch."
      }
    ]
  },
  {
    "sectionId": "3",
    "comments": [
      {
        "authorAvatarUrl": "http://f.cl.ly/items/0l1j230k080S0N1P0M3e/clay-davis.png",
        "authorName": "Senator Clay Davis",
        "comment": "These Side Comments are incredible. Sssshhhiiiiieeeee."
      }
    ]
  }
];

监听提交与删除事件

//监听 "commentPosted", 和发送存储请求
sideComments.on('commentPosted', function( comment ) {
    $.ajax({
        url: '/comments',
        type: 'POST'
        data: comment,
        success: function( savedComment ) {
           // 一旦保存成功, 你就可以使用 "insertComment(comment)"把评论加到评论列表
            sideComments.insertComment(comment);
        }
    });
});
 
// 监听 "commentDeleted" 和发送删除请求
sideComments.on('commentDeleted', function( commentId ) {
    $.ajax({
        url: '/comments/' + commentId,
        type: 'DELETE',
        success: function( success ) {
            // 删除成功后你想做的事情
        }
    });
});

方法

deselectSection(sectionId)

隐藏评论,如果已经隐藏了没影响。

sideComments.deselectSection(12);

setCurrentUser(currentUser)

设置currentUser用于所有新评论

var currentUser = {
  "id": 1,
  "avatarUrl": "users/avatars/user1.png",
  "name": "Jim Jones"
};
sideComments.setCurrentUser(currentUser);

removeCurrentUser()

移除当前用户 

insertComment(comment)

把评论添加到评论列表

var comment = {
  sectionId: 12,
  comment: "Hey there!",
  authorAvatarUrl: "users/avatars/test1.png",
  authorName: "Jim Jones",
  authorId: 16
};
sideComments.insertComment(comment);

removeComment(sectionId, commentId)

删除评论

destroy()

移除sidecomments对象

事件

事件名称 类型 描述
commentPosted comment (Object) 提交时触发
addCommentAttempted None 在缺少当前用户但又点了评论按钮时触发
commentDeleted comment (Object) 用户点击删除后触发

转载请注明:jQ酷 » jquery边栏评论插件side comments

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。