Z-Blog Wiki Z-Blog Wiki

Z-Blog官方文档

用户工具

站点工具


zblogphp:development:theme:zbpjsf

Z-BlogPHP 自定义前端脚本

自Z-BlogPHP1.5版本开始,我们提供了Z-BlogPHP JavaScript Framework,针对前端引入接口开发机制,通过ZBPJF可以方便的自定义系统js事件处理,或注册新事件,为应用开发者提供了便利。

自由引入JS模块

在ZBP1.5+版本中,开发者将不再需要引入从前100+KB的zb_system/script/common.js了,你可以更加自由引用所需要的JS组件,现在你的主题头部JS引用可以是这样的

<!--- cdn 引入自定义jq版本 --->
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
<!--- 引入ZBPJF --->
<script src="{$host}zb_system/script/zblogphp.js" type="text/javascript"></script>
<!--- 引入系统动态 JS --->
<script src="{$host}zb_system/script/c_html_js_add.php" type="text/javascript"></script>
<!--- 引入主题自定义 JS --->
<script src="{$host}zb_users/theme/{$theme}/script/common.js" type="text/javascript"></script>

简化前端事件处理

事件绑定说明:

  • 绑定:用于创建一个监听器,监听事件的发生。
  • 解绑:用于解绑一个监听器,如系统comment.reply将产生一次页面跳转,导致js中断执行,这时候就需要解绑再绑定新处理代码

zb_users/theme/THEMEID/script/common.js 中你只需绑定需要的事件进行个性化即可,如

//解绑系统事件
zbp.plugin.unbind("comment.reply", "system");
//绑定评论回复事件,点击回复按钮时移动评论框
zbp.plugin.on("comment.reply", "THEMEID", function(id) {
	var i = id;
	$("#inpRevID").val(i);
	var frm = $('#divCommentPost'),cancel = $("#cancel-reply");
 
	frm.before($("<div id='temp-frm' style='display:none'>")).addClass("reply-frm");
	$('#AjaxComment' + i).before(frm);
 
	cancel.show().click(function() {
		var temp = $('#temp-frm');
		$("#inpRevID").val(0);
		if (!temp.length || !frm.length) return;
		temp.before(frm);
		temp.remove();
		$(this).hide();
		frm.removeClass("reply-frm");
		return false;
	});
	try {
		$('#txaArticle').focus();
	} catch (e) {}
	return false;
});
 
//绑定评论取得事件(一般是翻页等操作),取消回复状态(即取消评论框移动)
zbp.plugin.on("comment.get", "THEMEID", function (logid, page) {
	$('span.commentspage').html("Waiting...");
	$.get(bloghost + "zb_system/cmd.php?act=getcmt&postid=" + logid + "&page=" + page, function(data) {
		$('#AjaxCommentBegin').nextUntil('#AjaxCommentEnd').remove();
		$('#AjaxCommentEnd').before(data);
		$("#cancel-reply").click();
	});
})
 
//绑定回复成功事件,成功发表后取消回复状态
zbp.plugin.on("comment.postsuccess", "THEMEID", function () {
	$("#cancel-reply").click();
});

应注意:THEMEID 是指你的主题或者插件ID,以便其它APP解绑,防止冲突。

更多系统事件代码请参考: zblogphp.orig.js

zblogphp/development/theme/zbpjsf.txt · 最后更改: 2016/11/29 15:07 由 yszm