文档章节

仿微博的发布与删除

wenzichel
 wenzichel
发布于 2015/03/28 09:57
字数 1661
阅读 14
收藏 0

    很久之前闲着没事仿照新浪微博的发布与删除,写过一次代码!那时主要是实现滑动的效果,不过代码却是非常的乱,html与css样式混用等。可是这段代码也没怎么用过,就一直在那扔着。点击查看效果

    直到昨天下午,有一妹子说她想实现那种跟新浪微博似的那种效果,我才想起我原先也写过这个东西,不过因为那时的代码啊有段乱,也就没给妹子推荐。然后晚上回到家后,就把我一年前写的代码重新设计了一下,相对来说结构更加清晰了一些!

    新代码和旧代码都放在一个仓库里,不过这两个没有纠缠。旧代码就一个文件:microblog.html,剩下的全部都是新代码,若不想要旧的代码,删了这个文件就是。

    放上代码地址:github-microblog

    说下这次的重构主要都进行了哪些工作:

  • 更新了jQuery的版本:由1.7.1升级到了1.11.1,同时也废除了live方法,改用on;

  • 把html, css与js进行相互的分离,不再集合到一个文件里;

  • 添加了字数的统计和限制,最多只能输入140个字;

  • 添加了输入框为空或字符超过限制时的提示;

  • 添加了表情的插入

    这次重写也学到了很多的东西,比如CSS3中的animation,字数的限制,表情的添加等。

    点击链接【新的效果页面】,看看重构后的效果。

image

1. CSS3中的ANIMATION

    在输入框为空时或者字数超过了限制,输入框就是闪两下进行提示,这是通过CSS3中的animation属性实现的。关于animation更多的介绍,可以参考这个链接,本文就不展开说明了,你可以通过此链接【CSS3的animation】查看animation更多详细的信息与使用,这里简单的介绍下animation的使用:

.send .warning{
    background: #fff;
    -webkit-animation:'wobble' 0.8s ease-in-out;}@-webkit-keyframes wobble{
    0%{background: #fff;}
    25%{background: #FFC0CB;}
    50%{background: #fff;}
    75%{background: #FFC0CB;}
    100%{background: #fff;}}

    animation中的参数分别表示:  
+ 'wobble' : 动画的名称,随便定义
+ 0.8s : 动画执行的总时间
+ ease-in-out : 动画执行的方式

    在wobble的结构体里,有很多的百分比数字,这些就是在0.8s里的执行时间里的各个进度,我们可以定义每个当前进度展示怎样的属性。

    定义了样式,还要确定触发点是什么?当用户点击确定“发布”按钮或者使用ctrl+enter组合键时进行信息的校验,如果输入框为空或者字数超过了限制,那么textarea标签就添加warning类,执行完成后再去掉该类名。

timer : null,warning : function(){
    $("#say").addClass( "warning" );

    this.timer && clearTimeout(this.timer);
    this.timer = setTimeout(function(){
        $("#say").removeClass( "warning" );
    }, 800);}

2. 字数的限制

    字数的限制,叫实时显示剩余字数更加确切一些。在这里我是让textarea标签监听keydown事件实现的,这里为什么不选择监听keypress或keyup事件呢?因为:

keypress与keydown事件差不多,keydown是监听按键按下事件,keypress是监听按下与松开事件;但是keypress只能监听单个按键事件,不能监听组合按键。这里使用到了ctrl+enter组合按键提交,因此就不能使用keypress了;关于keydown和keyup,假如在输入英文字符或者数字时,虽然按键一直没有松开,但是一直在进行输入(没有松开按键则表示keydown事件无限执行),那么如果使用keyup事件来计算剩余字数就不准确了。因此最终选择了keydown事件

    每次执行keydown事件时,均获取textarea的值的长度,然后计算出剩余的字数,如果剩余字数为0,则不再让用户进行输入。

3. 将内容添加到列表中

    参考现在的html结构,每条留言都是一个li标签,因此插入新留言时,也是要插入一个li标签。正常情况下,应该是:

  1. 添加成为ul标签的第一个li标签

  2. 默认隐藏这个刚添加的li标签

  3. 使用slideDown()、fadeIn()等函数显示出来

    可是这里,在我的代码里,有一个很难理解的问题:需要添加的li标签必须添加成为第二个li标签,如果是添加成为第一个li标签,执行显示动画或者删除该留言时,会闪动一下,也不知道为什么? 不知有谁能解决下不?

var $ul = $("#talklist"),
    $one = $('<li class="item"><p>'+word+'</p><div class="info"><span class="datetime fl">'+datetime+'</span><div class="fr"><a class="delBtn" href="javascript:;"">删除</a></div></div></li>');$ul.find('.first').after($one);	// 添加到第一个标签的后面$one.hide().slideDown( 'slow' );

4. 表情的添加

    这一次最大的变化就是能够插入表情了。因为输入框为textarea标签,是不能直接显示html元素的,只能显示文本信息。因此我们换个思路实现,当点击表情图片时,用某个字符表示这个表情。提交后,再把所有的字符转换回表情链接。

    表情的操作主要在js/express.js的文件中,expdata变量中存着所有可以显示的表情图片链接,比如:

'抠鼻':'./img/express/kbsa_org.gif'

    当点击表情时,输入框内显示[抠鼻],当用户提交信息后,再把[抠鼻]字符转换为<img src="./img/express/kbsa_org.gif" alt="exp" />,这样就能显示图片了。

    这里还有一个要注意的点:点击表情按钮弹出表情列表层后,点击其他地方也能够关闭这个层,因此需要在body的层级上绑定click事件,来隐藏掉这个表情列表层;不过不是点击body上所有的地方都要隐藏的:一个是表情弹出按钮,一个是表情列表层。我们需要为这两个地方的click事件阻止事件冒泡:e.stopPropagation()

$exp_list.delegate("li", "click", function(e){
	var title = '['+$(this).attr("title")+']';
	$("#say").val($("#say").val()+title);

	e.stopPropagation();});$("body").not('.express, .exp_list').on("click", function(e){
	$exp_list.fadeOut();});

    当然,依然还有很多的地方需要完善呢,期待你们的意见和建议。

    原文地址:http://www.xiabingbao.com/javascript/2015/03/21/imitate-microblog/


© 著作权归作者所有

wenzichel
粉丝 0
博文 5
码字总数 9296
作品 0
朝阳
私信 提问
iOS高仿QQ录音、智能语音诗歌、高仿微信图片浏览源码

iOS精选源码 好看实用的日期时间选择器--CCTimePicker 高仿QQ录音功能 QQ侧滑抽屉效果 MMActionSheet介绍(自定义的类似于微信的UIActionSheet弹出框组件) 智能语音查询诗歌 仿课程表表格效果...

sunnyaigd
2017/10/25
0
0
OpenCenter v1.0 发布,开源用户和后台管理系统

让php开发人员只需专注业务模块的开发,从用户和后台管理中解放出来。 相信很多关注OC的开发者们已经等了很久了。今天,发布了OC的v1.0正式版。开发者们已经可以开始使用OC做项目了。同时欢迎...

想天软件奕潇
2015/04/28
8.3K
19
ThinkOX v0.1 RC 版发布

终于到了tox RC版发布的时候了,今天,我们打包了tox的 rc版安装包,注册了thinkox.com和thinkox.cn两个域名,正式将OnePlus更名为tox。2014年3月27日,里程碑式的一天。tox凝聚了我们想天软...

想天软件奕潇
2014/03/28
2.3K
13
金山一员工在办公室猝死 死因正在调查中

金山集团旗下游戏工作室《西山居》一名员工于9月4日上午在北京公司办公室内猝死,具体死因正在调查中。 据了解,该员工为《西山居》游戏的运营部员工,年仅25岁,死亡时正是工作时间。 截至稿...

华宰
2012/09/04
7.5K
58
网络社交如何保护个人隐私?做好这4步

在这个全民社交时代,互联网成为了我们生活最主要的娱乐方式,但也让我们的“一举一动”变得有迹可寻。比如,在微博上发布的动态、评论、定位以及第三方应用的授权等操作,都在不经意间将个人...

ThinkSNS官方帐号
02/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot+jpa 错误信息org.springframework.beans.factory.BeanCreationException

报错信息 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory' defined in class path resource [org/springframework/boot/a......

冥焱
31分钟前
1
0
威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

迷你芊宝宝
38分钟前
3
0
十大经典排序算法动画与解析

排序算法是《数据结构与算法》中最基本的算法之一。 排序算法可以分为内部排序和外部排序。 内部排序是数据记录在内存中进行排序。 而外部排序是因排序的数据很大,一次不能容纳全部的排序记...

夜黑人模糊灬
41分钟前
5
0
7. java枚举

1. 枚举是什么 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便 2. 为什么不用静态常量来替代枚举类呢? 3. 常用方式 3.1 方式1 枚举类: package cn.ali.tencent...

20190513
42分钟前
1
0
elasticsearch – 弹性搜索:“Term”,“Match Phrase”和“Query String”之间的差异

术语查询匹配单个术语,因为它是:不分析值。 所以,它不必根据你索引的情况而降低。 如果您在索引时间提供Bennett并且未分析该值,则以下查询将不返回任何内容: { "query": { "te...

xiaomin0322
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部