discuz 表情的提取

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

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

既然论坛已经将表情的数据以数组的形式放在了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。

程序很简单,不多讲。


 

你可能感兴趣的:(discuz)