本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
