您好,登錄后才能下訂單哦!
本文實例講述了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 >'; 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程序設計有所幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。