discuz表情的JS提取方法分析


Posted in Javascript onMarch 22, 2017

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

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

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

discuz表情的JS提取方法分析

既然论坛已经将表情的数据以数组的形式放在了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日期对象的dateAdd与dateDiff方法
Nov 18 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
JS常用正则表达式总结
Nov 12 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
详解JavaScript中的every()方法
Jun 08 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 #Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 #Javascript
Vue计算属性的学习笔记
Mar 22 #Javascript
Angular2实现自定义双向绑定属性
Mar 22 #Javascript
Bootstrap如何激活导航状态
Mar 22 #Javascript
Bootstrap超大屏幕的实现代码
Mar 22 #Javascript
Bootstrap缩略图的创建方法
Mar 22 #Javascript
You might like
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
Python类的专用方法实例分析
2015/01/09 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
python简单实现基数排序算法
2015/05/16 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python机器学习之神经网络(一)
2017/12/20 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python使用PyQt5的简单方法
2019/02/27 Python
python占位符输入方式实例
2019/05/27 Python
Python中Unittest框架的具体使用
2019/08/27 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
大一新生军训时的自我评价分享
2013/12/05 职场文书
致短跑运动员广播稿
2014/01/09 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
公司晚会主持词
2014/03/22 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
期中考试复习计划
2015/01/19 职场文书
街道社区活动报告
2015/02/05 职场文书
档案工作个人总结
2015/03/03 职场文书
户外拓展训练感想
2015/08/07 职场文书
企业法人任命书
2015/09/21 职场文书