保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

js从0开始构思表情插件-安度博客

时间:2019-02-04 14:53:03   作者:   来源:   阅读:69   评论:0
内容摘要:前言:由于公司开发项目需要用到心情插件,在网上百度了良久,许多心情插件,都是需要引用许多几何js文件,也没有现成的demo可以使用,尚有一些插件是引用许多几何图片,每一个心情都要重新请求一下。为了这样一个功效,要引入许多几何js,img,也是得不偿失…&hellip......
  • 前言: 

    由于公司开发项目需要用到心情插件,在网上百度了良久,许多心情插件,都是需要引用许多几何js文件,也没有现成的demo可以使用,尚有一些插件是引用许多几何图片,每一个心情都要重新请求一下。为了这样一个功效,要引入许多几何js,img,也是得不偿失……

    所以,博主自己码了一个小巧的“心情插件”,利便以后项目直接使用。

    功效

    功效:通报心情对应的字符名堂到后台,后台返回字符串,前端将该字符串剖析展示成相应的心情展示在页面上。      
    使用要领:
    在option中配置需要的参数
     1 var option = { 2 emojiArray: ['angry'] //填写心情字符串的数组,【注:源文件image下面的图标,只需要写红框内的字符串,详见下图】 3 textareaId: 'emoji-editor' //输入框的id 4 loadId: 'load' //加载心情的id 5 emojiContainer: 'emojiContainer'  //存储心情的容器工具 6 sendId: 'send'    //发送信息的按钮 id 7 emojiTranslateCls:'emoji-comment' //需要转换成心情(img)的容器类名,只需要添加一个类,即可自动将:kissing_heart:渲染成心情~ 8 }; 9 /*调用要领*/10 var text = new Emoji(option);11 text.init();

    大致效果截图:(ui方面可以凭据各自需要举行美化)
     

     点击发送后,发送给后台的数据是:

        

    心情插件的三个原理:
    如何显示心情?
     CSS Sprites(图片整合技术),先设定好配景图标,然后界说每一个小图标的position,width,height,即可显示想要显示的心情。
     期间遇到的问题:如何控制显示心情的巨细?
    首先想到的是background-size这个要领,可是要重新界说它的position,很是泯灭“体力”,厥后,柳暗花明,发现一个属性transform: scale(1.5); 控制当前元素缩放比率,哈哈,一行代码就搞定啦~想要心情大,照旧小,尺寸不满足?通通一行代码搞定
    如何在输入框中显示心情图标?

    一开始是选择 input 的textarea,可是,将心情img “append”到这个输入框后面,也没有显示出这个图标,厥后实验了div,再“append”之后,发现能够乐成显示心情,可是div又不能输入文字,无果……

    开端想法:使用input监听,将textarea值实时加到div中,同样的,这个也是艰辛不讨好~继续探索…… 厥后发现一个很公共的属性。contenteditable='true',又愉快的选择了contenteditable。

    一开始是用span承载心情图标,可是用div或者span标签放置图像,则contenteditable会默认加到最后的div/span中……,所以会导致输入心情图标后,再输入文字,最后的文字会在最后一个div/span中,导致没有显示文字。好吧……真是心累……

    既然div/span 不行以,就使用img标签承载心情,这下终于能够正常输入了。

    【contenteditable有一个问题,它支持富文本,不宁静,而且用户体验欠好。】

    好比:用户粘贴的时候,会自动带名堂,例子如下:

    这边是接纳网上大神的一段代码,去除掉富文本功效,详细参考:某大神博文
      如何对图片和文字举行转换?
    这时候就要使用强大的正则了,先用html()获取内容,再对内容举行处置惩罚。
    转换成文字:
    1 content.replace(/<img[^>]*/ imgObj[j]) //匹配所有的<img />,替换成相应的名堂2 imgObj.push(format + img[i].getAttribute(&#39;alt&#39;) + format); //这里的format我使用的是: 所以就是类似这样 :fearful: 的名堂
    转换成图片:
    1 var keys = &#39;\+1|-1|100|109|1234|8ball|a|ab|abc|abcd|accept……&#39; //这里只列出部门2 regex = new RegExp(&#39;:(&#39; + keys + &#39;):&#39; &#39;g&#39;) // 匹配名堂形如这样子的名堂 :100:3 $(obj[i]).html().replace(regex emoji) //替换4 function emoji() {5 var key = arguments[1];6 return &#39;<img src=&#39;&#39; alt=&#39;&#39; + key + &#39;&#39;class=&#39;emoji emoji_&#39; + key + &#39;&#39;/>&#39;; //返回对应的img名堂7 }
    整个插件的代码名堂,也是较量常见的封装方式
    1 //Emoji工具可变的属性2 function Emoji(option) {3 this.emoji = option.emojiArray4 this.textareaId = option.textareaId5 this.loadId = option.loadId6 this.sendId = option.sendId7 this.emojiContainer = option.emojiContainer8 this.emojiTranslateCls = option.emojiTranslateCls;9 }
    //每一次生成一个实例,上面的属性都市重新生成一次,这样对于牢靠的要领,会多占用一些内存。这样既不环保,也缺乏效率。所以可以把那些稳定的属性和要领,直接界说在prototype工具上。这时所有牢靠的要领,其实都是同一个内存地址,指向prototype工具,因此就提高了运行效率。
     1 Emoji.prototype = { 2 init: function () { //放一些初始化的要领 3 this.toEmoji(); 4 this.loadEmoji(); 5 this.bindEvent(); 6 } 7 bindEvent: function () {} 8 toEmoji: function () {} //服务器数据转换成心情 9 toText: function () {} //转换成文字10 loadEmoji: function () {} //加载心情11 }
    好啦,这样一个心情插件就算完工了,系不系很简朴?现在暂时需要依赖jquery,之后如果有精神的话继续捣鼓一个基于原生js的O(∩_∩)O,详细的实现代码在github上。
    最后,附上github地址:https://github.com/beidan/emoji 接待star,fork~~~~~~~ 附:秋招要开始了,有没有大神有好事情推荐~~
     

最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)