2.1子评论开发规范
目前市面很多APP都可以看到 评论内可以再子评论回复 此功能是很实用的
子评论 比回复引用更出色 如果评论多了 引用回复会变得乱七八糟
2.1版本已经加入了 子评论功能 在此规范一下 子评论的模板开发
首先先参考一下HYBBS2018新模板的子评论开发 "thread_index" 文件
在评论列表循环时输出此代码
id 以及 class 必须使用 post--
子评论分为5个部分
按钮 (显示或隐藏 子评论框)
子评论框代码
分页按钮
JavaScript控制代码
多出一个 thread_post 模板 用于另开页面显示 子评论列表 ( 此处参考 HYBBS2018新模板写法 )
按钮 必须加入的标签属性
id="post--start-{$v.pid}"
data-str0="默认排序"
data-str1="最新回复"
data-sort="0"
data-posts="{$v.posts}"
data-state="hide"
data-pid="{$v.pid}"
onclick="show_post_post_box(this)"
子评论框代码
id="post--ul-{$v.pid}" 用于插入评论列表的容器元素 可见下面代码的 <ul id="post--ul-{$v.pid}">
当你点击显示子评论框按钮时 触发 show_post_post_box() 会把评论数据 插入 li标签 到(<ul id="post--ul-{$v.pid}">)容器中
发表子评论
<span id="post--{$v.pid}" type="text" class="input-text" contenteditable="true">编写评论内容</span>
<button id="post--btn-{$v.pid}" class="btn btn-primary" onclick="post_post({$v.pid})">发表</button>
当你点击发表按钮时 触发post_post() 将 span#post--{$v.pid}提交到服务器 完成发送
分页按钮
<div id="post--btns-{$v.pid}" class="post--page-btns">
</div>
Ajax API:
//发表子评论
post_post(评论PID,成功返回,失败返回);
使用例子:
post_post(评论PID,function(e){
if(e.error){
alert('发表成功');
}else{
alert('发表失败 原因:' + e.info);
}
},function(e){
alert('服务器出错 或 客户本地网络原因')
});
//可能大家看到 为什么不需要输入其他参数 只需要输入 PID . 这就是之前的 post--PID 规范//获取子评论列表
get_post_post(评论PID,分页ID,排序方式) 排序方式 0=默认沙发 1=最新(最后评论)
get_post_post(评论PID,1,0); 获取评论PID 第1页 默认排序
//自动插入<ul id="post--ul-{$v.pid}"> 中说了那么多废话 估计大家也看不懂 还是来点直观的
将下面的代码复制到 评论列表循环中
就是复制到
{foreach $PostList as $k => $v}
~~~~~~~~ 这里是原本默认评论列表的代码
把下面的代码复制在这里
{/foreach}
<button id="post--start-{$v.pid}" class="btn btn-link" data-str0="默认排序" data-str1="最新回复" data-sort="0" data-posts="{$v.posts}" data-state="hide" data-pid="{$v.pid}" onclick="show_post_post_box(this)">
<i class="iconfont icon-commentalt2fill"></i> 显示子评论框
</button>
<div id="post--box-{$v.pid}" class="post--box">
<h2 id="post--pos-{$v.pid}">
评论列表
<button class="btn btn-link post--sort pull-right">
<span id="post--sort-s{$v.pid}">{if X('get.order')=='desc'}{$_LANG['最新回复']}{else}默认排序{/if}</span> <i class="iconfont icon-sort"></i>
</button>
<div class="select-pop wrap-box">
<button onclick="$('#post--start-{$v.pid}').data('state','hide').data('sort','0').click()" class="btn select-option">默认排序</button>
<button onclick="$('#post--start-{$v.pid}').data('state','hide').data('sort','1').click()" class="btn select-option">{$_LANG['最新回复']}</button>
</div>
</h2>
<ul id="post--ul-{$v.pid}">
<li>
<img src="{#WWW}View/hybbs/loading.gif" style="margin: 0 auto;display: block;">
<p style="text-align: center;color: #a3a3a3;">加载数据中...</p>
</li>
</ul>
<div id="post--btns-{$v.pid}" class="post--page-btns">
</div>
<div class="post--foot">
<div id="post--loading-{$v.pid}" class="loading"></div>
<span id="post--{$v.pid}" onfocus="if(this.textContent=='编写评论内容')this.textContent=''" onblur="if(this.textContent=='')this.textContent='编写评论内容'" type="text" class="input-text" contenteditable="true">编写评论内容</span>
<button id="post--btn-{$v.pid}" class="btn btn-primary" onclick="post_post({$v.pid})">发表</button>
<button onclick="$('#post--start-{$v.pid}').data('state','show').click()" class="btn pull-right"><i class="iconfont icon-top2"></i> 收起列表</button>
</div>
</div>
<script type="text/javascript">
//初始化子评论列表排序UI组件
$(document).ready(function() {
$(".post--sort").click(function() {
var _this2 = $(this).next();
_this2.addClass('select-pop-show');
$(document).bind('mousedown.efscbarEvent', function(e) {
$(document).unbind("mousedown.efscbarEvent");
if (!$(e.target).is($('#btn')) && !$(e.target).is($('#box')) && $(e.target).parent('#box').length === 0) {
_this2.removeClass('select-pop-show');
}
});
});
});
//子评论列表分页按钮
function create_post_post_page_btn(pid, pageid, posts, max, sort) {
$('#post--ul-' + pid).html('<li><img src="{#WWW}View/hybbs/loading.gif" style="margin: 0 auto;display: block;"><p style="text-align: center;color: #a3a3a3;">加载数据中...</p></li>');
console.log(max);
get_post_post(pid, pageid, sort);
var tmp = (posts % max) ? (parseInt(posts / max) + 1) : parseInt(posts / max);
var page_count = (posts % max != 0) ? (parseInt(posts / max) + 1) : parseInt(posts / max);
pageid = pageid || 1;
var html = '';
if (pageid != 1) {
html += '<button data-pageid="' + (pageid - 1) + '" class="btn btn-primary">上一页</button>';
}
for (var i = (pageid - 5 < 1) ? 1 : pageid - 5; i < ((pageid + 5 > tmp) ? tmp + 1 : pageid + 5); i++) {
html += '<button data-pageid="' + i + '" class="btn btn-primary ' + (pageid == i ? 'disabled' : '') + '">' + i + '</a>';
}
if (pageid != page_count)
html += '<button data-pageid="' + (pageid + 1) + '" class="btn btn-primary">下一页</button>';
$('#post--btns-' + pid).html(html).find('button').click(function() {
var _this = $(this);
var _pageid = _this.data('pageid');
location.href = "#post--pos-" + pid;
if (pageid == _pageid)
return;
create_post_post_page_btn(pid, _pageid, posts, max, sort);
});
}
//显示子评论框
function show_post_post_box(obj) {
var _this = $(obj);
var state = _this.data('state');
var pid = _this.data('pid');
var posts = _this.data('posts');
var sort = _this.data('sort');
if (state == 'hide') { //Show
_this.data('state', 'show');
_this.html('<i class="iconfont icon-top2"></i> 收起列表');
_this.addClass('active');
$('#post--box-' + pid).show();
$('#post--sort-s' + pid).text(_this.data('str' + sort));
if (posts) //存在子评论 显示分页按钮
create_post_post_page_btn(pid, 1, posts, { php echo intval(BBSCONF('post_post_show_size')) }, sort);
else {
$('#post--ul-' + pid).html('<li><p style="text-align: center;color: #a3a3a3;">暂无数据...</p><li>');
}
} else { //收起评论列表
_this.data('state', 'hide');
if (posts != 0)
_this.html('<i class="iconfont icon-commentalt2fill"></i> ' + posts + ' 条评论');
else
_this.html('<i class="iconfont icon-commentalt2fill"></i> 回复帖子');
_this.removeClass('active');
$('#post--box-' + pid).hide();
}
}
</script>说再多也没用 挺复杂 三言两语 也弄不明白
模板开发者 请参考PC端 HYBBS2018新模板 中的代码开发
返回首页
模板开发
小黑屋社区
发表于 2017-12-29
mob1.html那这个文件是备份吗？
评论列表
加载数据中...
小黑屋社区
发表于 2017-12-29
应该是修改的时候 备份忘记删了
评论列表
加载数据中...