discuz表情的JS提取方法分析

 更新时间:2017年03月22日 10:06:34   作者:onlyfu  
这篇文章主要介绍了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">
i=0;
for(var a in smilies_type){
  i++;
  for(var b in smilies_type[a]){
    if(b==0){
      if(i==1){
        document.write("<li class='fthis' onclick='ftab(this);loadsmilies("+a+",1,\"f\");'><a href='javascript:;'>"+smilies_type[a][0]+"</a></li>");
      }else{
        document.write("<li onclick='ftab(this);loadsmilies("+a+",1,\"f\");'><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 style="width:300px;height:170px;">';
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='' onclick='document.getElementById(\"fastpostmessage\").value=document.getElementById(\"fastpostmessage\").value+\""+smilies_array[n][a][1]+"\";' style='cursor:pointer;width:30px;height:30px;' /> ";
}
}
}
restr=restr+"</div><div class='fsmilies_page'>";
var mnum=smilies_array­.length;
for(var i=0;i<mnum-1;i++){
var j=i+1;
restr=restr+"<a href=\"javascript:;\" onclick=\"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图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript图形绘制技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

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

相关文章

  • js判断浏览器版本以及浏览器内核的方法

    js判断浏览器版本以及浏览器内核的方法

    这篇文章主要介绍了js判断浏览器版本以及浏览器内核的方法,可实现针对各个浏览器的判断,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 深入理解 ES6中的 Reflect用法

    深入理解 ES6中的 Reflect用法

    这篇文章主要介绍了深入理解 ES6中的 Reflect用法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 原生JavaScript实现弹幕组件的示例代码

    原生JavaScript实现弹幕组件的示例代码

    这篇文章主要介绍了原生JavaScript实现弹幕组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • 原生js编写基于面向对象的分页组件

    原生js编写基于面向对象的分页组件

    这篇文章主要为大家详细介绍了原生js编写基于面向对象的分页组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 详解微信小程序工程化探索之webpack实战

    详解微信小程序工程化探索之webpack实战

    这篇文章主要介绍了详解微信小程序工程化探索之webpack实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • ES6学习笔记之正则表达式和字符串正则方法分析

    ES6学习笔记之正则表达式和字符串正则方法分析

    这篇文章主要介绍了ES6学习笔记之正则表达式和字符串正则方法,结合实例形式对比分析了ES5与ES6正则操作的常用函数功能与用法区别,需要的朋友可以参考下
    2017-04-04
  • javascript 键盘事件总结 推荐

    javascript 键盘事件总结 推荐

    在进入正题前,我们看一下浏览器对于键盘的一些默认事件,这有助于我们用javascript截获键盘事件。
    2009-12-12
  • js实现鼠标经过时图片滚动停止的方法

    js实现鼠标经过时图片滚动停止的方法

    这篇文章主要介绍了js实现鼠标经过时图片滚动停止的方法,可实现js滚动特效中的鼠标悬停停止图片滚动的功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • javascript 支持页码格式的分页类

    javascript 支持页码格式的分页类

    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然后在载入的时候进行分页,网上很多jquery,property等都实现了
    2009-12-12
  • JS实现从对象获取对象中单个键值的方法示例

    JS实现从对象获取对象中单个键值的方法示例

    这篇文章主要介绍了JS实现从对象获取对象中单个键值的方法,涉及javascript数组对象遍历、事件监听、处理等相关操作技巧,需要的朋友可以参考下
    2019-06-06

最新评论