discuz表情的JS提取方法分析

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • javascript 特殊字符串

    例如: <script> var t="</script>"; </script> 这里会出错.必须escapeHTML掉. 对于: <script> var t="$stringescapeutil.escapeJavascript($order.memo)"; </script> 无论如何要escapeJavascript过滤掉单引号.如果memo中可能有</script>标签,那么还需要e

  • jQuery过滤特殊字符及JS字符串转为数字

    //替换特殊字符 $(this).val($(this).val().replace(/[~'!<>@#$%^&*()-+_=:]/g, "")); 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把值转换成浮点数.只有对String类型调用这些方法,这两个函数才能正确运行:对其他类型返回的都是NaN(Not a Number). 一些示

  • 利用JS判断字符串是否含有数字与特殊字符的方法小结

    前言 本文主要介绍的是利用JS判断字符串是否含有数字与特殊字符的方法,文中有几种不同的方法,包括普通的JS验证法.正则表达式法,另外还有判断是否为浮点数的js函数,在最后还将简要介绍下isNAN函数的使用方法和例子,来一起学习学习吧. 一.正则表达式方法判断是否为数字,包括判断正整数: function checkRate(input) { var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字,//若判断正整数,则后边是:/^[1-9]+[0-9]*]*$/ if

  • JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例

    代码如下: reg = /[~#^$@%&!?%*]/gi; if (reg.test(postdata.Name.trim())) { alert("姓名不能含有特殊字符"); } else { if (isEmojiCharacter(postdata.Name.trim())) { alert("姓名不能含有表情"); } else { //自己的代码 } } function isEmojiCharacter(substring) { for (va

  • discuz表情的JS提取方法分析

    discuz表情的JS提取方法分析

    本文实例讲述了discuz表情的JS提取方法.分享给大家供大家参考,具体如下: discuz将应用的表情生成了一个js文件,在forumdata/cache/下,叫smilies_var.js,这个文件是根据后台数据库 生成的一个表情数组,里面有两个数组,一个是表情名称和所在目录的数组smilies_type,一个是表情图片名和代码的数组 smilies_array,这些都是更新缓存的时候自己读数据库生成的,所以后台的改动一样会改动到它. 论坛快速回复的表情是一个弹出层,虽然已经很不错,但仍然会

  • Vue.js原理分析之nextTick实现详解

    前言 tips:第一次发技术文章,篇幅比较简短,主要采取文字和关键代码表现的形式,希望帮助到大家.(若有不正确还请多多指正) nextTick作用和用法 用法:nextTick接收一个回调函数作为参数,它的作用是将回调延迟到下一次DOM更新之后执行,如果没有提供回调函数参数且在支持Promise的环境中,nextTick将返回一个Promise. 适用场景:开发过程中,开发者需要在更新完数据之后,需要对新DOM做一些操作,其实我们当时无法对新DOM进行操作,因为这时候还没有重新渲染,这时候nex

  • Vue.js原理分析之observer模块详解

    Vue.js原理分析之observer模块详解

    介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持. 注意:本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/core/observer,模块共分为这几个部分: Observer: 数据的观察者,让数据对象的读写操作都处于自己的监管之下 Watcher: 数据的订阅者,数据的变化会通知到Watcher,然后由Watcher进行相应的操作,例如更新视图 Dep: Observer

  • AngularJS压缩JS技巧分析

    本文实例讲述了AngularJS压缩JS的操作技巧.分享给大家供大家参考,具体如下: 大多数web项目在发布时候都会对js代码进行压缩,目的是为了减少js文件的大小,节省一点流量. 它的原理很简单,就是对参数及部分变量名和函数进行重命名. 但是这种工作方式在AngularJS的应用中会有例外. 由于AngularJS的依赖注入是根据参数名进行注入的,显然,对参数进行重命名会破坏这个机制. 如果不进行特殊处理,进行压缩(minify)之后,在执行时将会出现这样的错误 Unknow provider

  • jQuery树形插件jquery.simpleTree.js用法分析

    jQuery树形插件jquery.simpleTree.js用法分析

    本文实例讲述了jQuery树形插件jquery.simpleTree.js用法.分享给大家供大家参考,具体如下: 最近写项目的cms系统,客户要求后台管理可以通过一棵树来展现整个帮助文档的结构,并通过拖拽操作来实现文章和栏目的位置排列变化,我在网上找来半天,决定使用jQuery.simpleTree.js来实现. 这个树控件支持拖动节点到新的位置,通过其提供aftermove函数的覆写,我们可以在其拖动完成后在aftermove函数中调用ajax来后台更改数据库来保存拖动的结果 同时这个树的节点

  • JS通过分析userAgent属性来判断浏览器的类型及版本

    JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另 一种是通过分析浏览器的userAgent属性来判断的.本文对浏览器各自的userAgent特点做一分析,并给出判断方法: Windows操作系统浏览器系列: IE浏览器系列: 特征表现:均以 "mozilla/" 开头,"msie x.0;" 中的x表示其版本: 判断方

  • 重载toString实现JS HashMap分析

    不过请仔细对比一下,你会发现其中差别还是很大的.Java HashMap的key是Object类型,所以可以任何类型的参数,而JS的key只能是字符串或是数字. 你也许会说,obj={};map[obj]=1;这段代码传入了既不是数字也不是字符的key,但也没发生错误啊.那是因为解释器将obj对象通过内置的toString方法转换成"[object Object]"这段字符了,你可以用for each下map看看.而java之所以能够接受任何类型的key,是因为其Object实现了Ha

  • java编程中实现调用js方法分析

    本文实例讲述了java编程中实现调用js方法.分享给大家供大家参考,具体如下: /* * 加载脚本引擎,并在java中调用js方法 */ public void test2() { ScriptEngineManager manager = new ScriptEngineManager(); ScriptEngine engine = manager.getEngineByName("javascript"); try { String str="2&1"

  • jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行.因为,JQM并为将整个页面加载到当前的dom中,仅将data-role="page"元素加入当前的dom中. 因此,在<head>中引入的外部JS文件,以及<page>标签外的JS均不能正常运行,刷新页面后方可加载成功. 鉴于JQM这个特性不太可能主动更改,可以用两种方法来解决:一是在index页面中,注册所有需要使用到的外

  • jQuery滚动插件scrollable.js用法分析

    本文实例讲述了jQuery滚动插件scrollable.js用法.分享给大家供大家参考,具体如下: Scrollable是一个灵活.轻量级用于创建滚动内容的jQuery插件.任何内容(HTML.视频.文件.图片等...)都可以作为一个滚动项.支持水平与垂直两种滚动方向. 用途:滚动效果,可制作分步验证页面 以下scrollable.js方法说明描述: 方法名称 返回值 说明 getConf() Object 返回scrollable的配置对象,并且可通过设置该对象的相关属性值来修改该配置对象的属

随机推荐