类别导航:
通知:目前网站正常哦!
你的位置:首页 >> 编程技术 >> wordpress ajax之六:评论表情动态加载

wordpress ajax之六:评论表情动态加载

发表日期:2011-09-19 作者:DH分类:编程技术 标签: wordpress ajax
索引[隐藏]

1 序言

上一遍讲到利用一个简单的例子说明了如何使用简单的ajax。这里说明一个应用:评论表情动态加载。什么是表情动态加载呢?就是文章页面不加载表情,节省带宽,要知道加载很多表情符号,很费力的,在用户点击评论框之后,才动态加载表情,这样针对性更强,加快页面的转载速度。其效果就是点击评论框试试。效果如图: 表情动态加载 这个例子不仅仅讲诉的是表情分页的问题,代码中还告诉大家dhchannel主题如何写出自定义表情符号。

2 需要的元素

和上篇讲到的一样,元素包括: 1. jquery.js,下载地址为:http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js 2. 定义的js文件,规定请求的动作,和接受数据之后的动作 smiley_ajax.js 3. 定义点击评论框的操作smiley_ajax.php 4. 表情显示和点击显示符号的页面 smiley.php 5. 如果需要自己定义自己的表情,需要修改wp-includes\images\smilies的表情为自己的哦 6. 表情符号定义的需要的页面 smiley_settings.php 元素的位置: 1. jquery.js在header.php中包含

2.把自己定义的js保存为smiley_ajax.js,同样在header.php中包含

3. 定义点击评论框的操作smiley_ajax.php 放在主题下面即可,我是放在自己建立的functions/目录下 4. 表情显示和点击显示符号的页面 smiley.php 放在主题下面即可,我是放在自己建立的functions/目录下 5. 如果需要自己定义自己的表情,需要修改wp-includes\images\smilies的表情为自己的哦 这个自己到网上去找一写主题的表情哦 6. 表情符号定义的需要的页面 smiley_settings.php 放在主题下面即可,我是放在自己建立的functions/目录下

3 例子的运行情况

具体可以参考我的博客的评论效果。

4 smiley.php

将一下保存为smiley.php文件



注意自己保存的表情文件需要和以上的同名!!

5 smiley_settings.php

此文件和上面的smiley.php对应,规定哪些表情使用wp-includes\images\smilies中的哪个文件
 'i_01kewan.gif',
	   '[很酷]' => 'i_02cool.gif',
	   '[鄙视]' => 'i_03bishi.gif',
	   '[囧囧]' => 'i_04jiong.gif',	   
	   '[微笑]' => 'i_05weixiao.gif',
	   '[大笑]' => 'i_06daxiao.gif',
	   '[奸笑]' => 'i_07jianxiao.gif',	   
	   '[伤心]' => 'i_0shangxin.gif',
	   '[大哭]' => 'i_09cry.gif',	   
	   '[大汗]' => 'i_10han.gif',
	   '[折磨]' => 'i_11zhemo.gif',
	   '[大怒]' => 'i_12danu.gif',
	   '[疑问]' => 'i_13yiwen.gif',
	   '[晕了]' => 'i_14yunle.gif',
	   '[害怕]' => 'i_15haipa.gif',
	   '[满意]' => 'i_16manyi.gif',
	   '[努力]' => 'i_17nuli.gif',
	   '[闭嘴]' => 'i_18bizui.gif',
	);	
?>
在functions.php中需要引用这个文件
include("smiley_settings.php");

6 js部分

下面的代码保存为 smiley_ajax.js文件,放到模板里面,记得在header.php中包含哦
var sresponse='#smiley_ajax';
$(document).ready(function smiley_ajax(){
	$('textarea').focus(function() {
		$.ajax({
			url: "",
			type:"POST",
			data:"action=smiley_ajax_action",
			beforeSend:function()
			{
			},
			error:function (xhr, textStatus, thrownError){ 
				alert("readyState: " + xhr.readyState + " status:" + xhr.status + " statusText:" + xhr.statusText +" responseText:" +xhr.responseText + " responseXML:" + xhr.responseXML + " onreadystatechange" +xhr.onreadystatechange); 		
				alert(thrownError); 
			},	
			success: function (data)
			{
				$(sresponse).html(data);
			}
		});
		return false;
		});
})

7 smiley_ajax.php

js调用后台的函数应该这样写

8 comment.php的小小改动

comment.php需要告诉js,在哪个地方放表情哦。在合适的地方放上以下的代码,就会在哪里显示表情。

在functions.php中需要引用这个文件
include("smiley_ajax.php");

7 寄语

希望大家成功

除非注明,文章均为灯火部落原创,转载请注明出处:wordpress ajax之六:评论表情动态加载-灯火部落
相关文章:
  • wordpress主题:博客主题新功能
  • wordpress ajax之五:最近评论ajax分页
  • wordpress主题:非插件post_view
  • wordpress ajax之四:archive页面ajax分页
  • wordpress主题:添加文章目录
  • wordpress ajax之三:评论ajax分页
  • ∧回到顶部∧