当前位置:首页 > 日记 > 正文

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

相关文章

ppt2010怎么设置透明色ppt2010设置

ppt2010怎么设置透明色ppt2010设置

设置,透明,方法,背景图片,调整,  我们在使用ppt插入图片的时候,有时候需要让图片和背景色融为一体,就需要设置其中的透明色,那么具体要怎么做呢?下面小编来告诉你ppt2010设置透明色的方法吧。ppt2010设置透明色的步骤插入一张图片到PPT,在图…

Bootstrap modal 多弹窗之叠加关闭

Bootstrap modal 多弹窗之叠加关闭

解决方法,叠加,电脑软件,Bootstrap,modal,上篇我提到的‘多弹窗之叠加显示不出弹窗问题' 这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩.这个问题从哪来的,是因为modal叠加,我们点击…

Photoshop将美女照片打造速写效果

Photoshop将美女照片打造速写效果

速写,效果,美女照片,电脑软件,Photoshop,今天为大家分享Photoshop将美女照片打造速写效果方法,适合新手来学习,只需几步即可完成,好了,下面我们一起来学习吧!步骤:1、首先打开自己的照照,要求图片比较清楚,我选了一张全身的,因为没有清晰度好的头像,…

JavaScript学习笔记之惰性函数示例

JavaScript学习笔记之惰性函数示例

函数,惰性,示例,详解,学习笔记,前言本文主要给大家介绍了关于JavaScript惰性函数的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。需求我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意是首次…

ps怎么设计圆环放射性的光束效果?

ps怎么设计圆环放射性的光束效果?

圆环,光束,放射性,效果,电脑软件,今天我们就来看看使用ps设计圆环光束效果的过程,很简单,请看下文详细介绍。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、新建ps文件2、背景设置为黑色3、用椭圆工具…

js/jquery控制页面动态加载数据 滑

js/jquery控制页面动态加载数据 滑

数据,动态加载,控制,滚动条,方法,页面滚动动态加载数据,页面下拉自动加载内容相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底…

浅谈$_FILES数组为空的原因

浅谈$_FILES数组为空的原因

数组,浅谈,为空,原因,电脑软件,今天做上传的文件时候,打印$_files总是为空,查阅了下资料。发现是 max_file_uploads=0 知道了原因file_uploads = Onupload_max_filesize = 20Mmax_file_uploads = 20以上这篇浅谈$_FILES数组为空的原因就是小…

js中删除数组中的某一元素实例 |

js中删除数组中的某一元素实例 |

删除,下标,元素,组中,实例,1、使用filter数组去重;var arr1 = [1,2,3,4,5,6];//待操作数组var j = 2;//待删除元素var noRepeat = function(arr1,arr2){return arr1.flter(function(e){return arr2.indexOf(e) == -1;})};var arr2 = [];arr2…

excel表格计算优秀及格率的教程

excel表格计算优秀及格率的教程

计算,教程,表格,优秀,及格率,  Excel中的优秀率具体该如何计算呢?下面是由小编分享的excel表格计算优秀及格率的教程,以供大家阅读和学习。excel表格计算优秀及格率的教程计算优秀及格率步骤1:打开EXCEL软件,使用手动创建一些基础数据,如图。…

Photoshop简单制作个性十足的文字

Photoshop简单制作个性十足的文字

文字,人像,海报,简单,个性,作者制作文字人像的方法比较实用。前期需要把人物抠出,并单独把暗部区域选出后填色;然后新建图层,用暗部区域选区添加蒙版;再用定义好的文字笔刷在人像部分刷上文字;最后再润色。最终效果步骤:1、素材拖进ps,ctrl+j复制…

js+html获取系统当前时间

js+html获取系统当前时间

系统,时间,电脑软件,js,html,本文实例为大家分享了html获取系统当前时间的具体代码,供大家参考,具体内容如下<html><head><STYLE>TD {FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif}</STYLE><script…

Photoshop制作红斑效果的立体字

Photoshop制作红斑效果的立体字

立体字,效果,电脑软件,Photoshop,今天为大家分享Photoshop制作红斑字,教程比较基础,主要是通过图层样式进行操作,推荐到,喜欢的朋友可以参考本文!1、在ps软件中,新建一个800*800的文档,背景色为白色,写上黑色的字体,如图所示2、双击字体的图层样式,调…