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程序设计有所帮助。

# discuz # 表情 # JS # 提取方法 # Discuz不使用插件实现简单的打赏功能 # Discuz论坛密码与密保加密规则 # discuz图片顺序混乱解决方案 # discuz目录文件资料汇总 # discuz论坛更换域名 # 详细文件修改步骤 # 放在 # 分页 # 图上 # 是一个 # 成了 # 就在 # 相关内容 # 第一个 # 遍历 # 不多 # 感兴趣 # 数据结构 # 这样做 # 给大家 # 很简单 # 弹出 # 很不错 # 快速回复 # 将它 # 第三个

返回目录在线咨询

上一篇：Python编写自动监控系统资源使用率的脚本流程讲解【指导】
下一篇：如何利用搬瓦工提供的备份功能，确保新添加站点的数据安全？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

discuz表情的JS提取方法分析

您的项目需求