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程序设计有所帮助。
相关文章
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
这篇文章主要介绍了JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例,使用javascript较为逼真的模拟出了国际象棋对弈的场景,需要的朋友可以参考下2015-04-04JavaScript鼠标事件监听、触发时机和触发顺序实例讲解
事件监听是Web开发中非常重要的一个概念,掌握了它的用法,可以让我们实现更加丰富和动态的交互效果,这篇文章主要给大家介绍了关于JavaScript鼠标事件监听、触发时机和触发顺序的相关资料,需要的朋友可以参考下2024-01-01BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
这篇文章主要介绍了BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)的相关资料,需要的朋友可以参考下2017-01-01
最新评论