18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

微信小程序免费制_discuz表情的JS提取方法分析

2021-01-12分享 "> 对不起,没有下一图集了!">
discuz表情的JS提取方法分析       这篇文章主要介绍了discuz表情的JS提取方法,简单分析了discuz中表情JS文件调用的原理与相关操作技巧,需要的朋友可以参考下

本文实例讲述了discuz表情的JS提取方法。分享给大家供大家参考,具体如下:

discuz将应用的表情生成了一个js文件,在forumdata/cache/下,叫smilies_var.js,这个文件是根据后台数据库 生成的一个表情数组,里面有两个数组,一个是表情名称和所在目录的数组smilies_type,一个是表情图片名和代码的数组 smilies_array,这些都是更新缓存的时候自己读数据库生成的,所以后台的改动一样会改动到它。

论坛快速回复的表情是一个弹出层,虽然已经很不错,但仍然会增加用户的操作复杂度,因此需要将它移出来,放在边上,就向下图:

既然论坛已经将表情的数据以数组的形式放在了JS文件里,那要实现这个功能,其实就是一个操作数组的问题了,再上一些简单的翻页,换表情,点击表情 输出到文本框里就行了。那现在就在拆分一下,从图上就可以看出,表情部分一共分成了3块,1、表情种类(表情名称),2、表情列表,3、分页。

看看smilies_var.js里对表情种类的数组

var smilies_type = new Array();
smilies_type[6] = ['悠嘻猴', 'yxh'];
smilies_type[5] = ['免斯基', 'tsj'];
smilies_type[4] = ['蘑菇点', 'mgd'];
smilies_type[3] = ['呆呆男', 'grapeman'];

它其实就是一个2维数组,要像图上那样做,可以这样做:

 script type="text/javascript" 
for(var a in smilies_type){
 i++;
 for(var b in smilies_type[a]){
 if(b==0){
 if(i==1){
 document.write(" li a href='javascript:;' "+smilies_type[a][0]+" /a /li 
 }else{
 document.write(" li a href='javascript:;' "+smilies_type[a][0]+" /a /li 
 /script 

其中的ftab()和loadsmilies()函数都先可以不管,i这个变量是用来确认第一个表情类型的,好给表现层加上当前示意。

表情图片的数组处理方式其实和类型是一样,只是可能不只2维了,具体的处理程序如下:

 script type="text/javascript" 
function loadsmilies (m,n,f) {
var restr='';
var restr=' div 
for(var a in smilies_array[n]){
for(var b in smilies_array [n][a]){
if(b==2){
restr=restr+" img src='images/smilies/"+smilies_type [1]+"/"+smilies_array [n][a][b]+"' alt='' / 
restr=restr+" /div div 
var mnum=smilies_array .length;
for(var i=0;i mnum-1;i++){
var j=i+1;
restr=restr+" a href=\"javascript:;\" "loadsmilies("+m+","+j+",'f');\" ["+j+"] /a 
restr=restr+" /div 
document.getElementById(f).innerHTML=restr;
 /script 

这里面还包含了分页的处理,就是通过对数组求其长度来找到页数,然后循环输出,再调用loadsmilies()函数,传参,达到目的,每次点击都 往指定的 div 里输出,一切就OK了。初始化代码: script type='text/javascript' loadsmilies(6,1,'f'); /script ,里面的第三个参数f 即为用于放表情的 div ID。

程序很简单,不多讲。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家JavaScript程序设计有所帮助。


"> 对不起,没有下一图集了!">
在线咨询