快捷導航

discuz表情的JS提取方法分析

更新時間：2017年03月22日 10:06:34 作者：onlyfu

這篇文章主要介紹了discuz表情的JS提取方法,簡單分析了discuz中表情JS文件調(diào)用的原理與相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了discuz表情的JS提取方法。分享給大家供大家參考，具體如下：

discuz將應(yīng)用的表情生成了一個js文件，在forumdata/cache/下，叫smilies_var.js，這個文件是根據(jù)后臺數(shù)據(jù)庫生成的一個表情數(shù)組，里面有兩個數(shù)組，一個是表情名稱和所在目錄的數(shù)組smilies_type，一個是表情圖片名和代碼的數(shù)組 smilies_array，這些都是更新緩存的時候自己讀數(shù)據(jù)庫生成的，所以后臺的改動一樣會改動到它。

論壇快速回復(fù)的表情是一個彈出層，雖然已經(jīng)很不錯，但仍然會增加用戶的操作復(fù)雜度，因此需要將它移出來，放在邊上，就向下圖：

既然論壇已經(jīng)將表情的數(shù)據(jù)以數(shù)組的形式放在了JS文件里，那要實現(xiàn)這個功能，其實就是一個操作數(shù)組的問題了，再上一些簡單的翻頁，換表情，點擊表情輸出到文本框里就行了。那現(xiàn)在就在拆分一下，從圖上就可以看出，表情部分一共分成了3塊，1、表情種類（表情名稱），2、表情列表，3、分頁。

看看smilies_var.js里對表情種類的數(shù)組

var smilies_type = new Array();
smilies_type[6] = ['悠嘻猴', 'yxh'];
smilies_type[5] = ['免斯基', 'tsj'];
smilies_type[4] = ['蘑菇點', 'mgd'];
smilies_type[3] = ['呆呆男', 'grapeman'];

它其實就是一個2維數(shù)組，要像圖上那樣做，可以這樣做：

<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()函數(shù)都先可以不管，i這個變量是用來確認第一個表情類型的，好給表現(xiàn)層加上當前示意。

表情圖片的數(shù)組處理方式其實和類型是一樣，只是可能不只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>

這里面還包含了分頁的處理，就是通過對數(shù)組求其長度來找到頁數(shù)，然后循環(huán)輸出，再調(diào)用loadsmilies()函數(shù)，傳參，達到目的，每次點擊都往指定的<div>里輸出，一切就OK了。初始化代碼：<script type='text/javascript'>loadsmilies(6,1,'f');</script>，里面的第三個參數(shù)f 即為用于放表情的<div>ID。

程序很簡單，不多講。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: