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 相关文章推荐
js 中{},[]中括号,大括号使用详解
May 12 Javascript
Document:getElementsByName()使用方法及示例
Oct 28 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
puppeteer库入门初探
Jan 09 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
详解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
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
PHP多线程类及用法实例
2014/12/03 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
Python编程中的文件操作攻略
2015/10/16 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python实现的双色球生成功能示例
2017/12/18 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python urllib.request对象案例解析
2020/05/11 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
司马光教学反思
2014/02/01 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
上课说话检讨书500字
2014/11/01 职场文书
销售内勤岗位职责
2015/02/10 职场文书
告知书格式
2015/07/01 职场文书
感恩老师主题班会
2015/08/12 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python