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

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

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

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

看看smilies_var.js里對(duì)表情種類(lèi)的數(shù)組

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

它其實(shí)就是一個(gè)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這個(gè)變量是用來(lái)確認(rèn)第一個(gè)表情類(lèi)型的，好給表現(xiàn)層加上當(dāng)前示意。

表情圖片的數(shù)組處理方式其實(shí)和類(lè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>

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

程序很簡(jiǎn)單，不多講。

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

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

最新評(píng)論