CN103513889B - 一种在社交网站中快速输入动态信息的方法 - Google Patents

Abstract

本发明公开了一种在社交网站中快速输入动态信息的方法。该方法包括：如果社交网站的导航条为非固定定位模式，首先将社交网站的导航条设置为固定定位模式；在社交网站的导航条中设置一个浮动输入框按钮，当用户触发该按钮时弹出浮动输入框，供用户输入动态信息；设置一控制单元，当检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离时，该控制单元在导航条上显示所述浮动输入框按钮，当检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离时，该控制单元隐藏所述浮动输入框按钮。本发明的技术方案使得用户能够在浏览动态信息时能够快速输入动态信息，提高了用户体验。

Description

一种在社交网站中快速输入动态信息的方法

技术领域

本发明互联网技术领域，特别涉及一种在社交网站中快速输入动态信息的方法。

背景技术

目前，大家常用的社交网站，如SNS（Social Networking Services，社会性网络服务）网站、空间、微博等，在首页顶部一般都会有个输入框，例如图1所示，图1是现有的一种网站页面的示意图。用户可以在输入框中输入心情、新鲜事等，然后下方是好友或用户关注的人/组织发布动态信息的动态信息区。

通常动态信息区都很长，用户会拖动页面的滑块向下浏览更多的动态信息，而且很多情况下，用户在浏览动态信息区时，会突然想起一些事或因动态信息由感而发想写一些看法或感慨，但是，输入框早已滚出显示窗口，参见图2，图2是现有网站页面中输入框已滚出显示窗口的示意图。用户若要输入动态信息，则需要将页面拖回顶端，然后在输入框中输入动态信息，发布成功后再拖动滑块继续浏览动态信息，不但会重复浏览已经看过的动态信息、浪费时间，而且每次输入动态信息都要将页面拖回顶端，操作繁琐影响易用性，降低了用户体验。

发明内容

有鉴于此，本发明提供了一种在社交网站中快速输入动态信息的方法，使得用户能够在浏览动态信息时能够快速输入动态信息，提高了用户体验。

为达到上述目的本发明的技术方案是这样实现的：

本发明公开了一种在社交网站中快速输入动态信息的方法，该方法包括：

如果社交网站的导航条为非固定定位模式，首先将社交网站的导航条设置为固定定位模式；

在社交网站的导航条中设置一个浮动输入框按钮，当用户触发该按钮时弹出浮动输入框，供用户输入动态信息；

设置一控制单元，当检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离时，该控制单元在导航条上显示所述浮动输入框按钮，当检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离时，该控制单元隐藏所述浮动输入框按钮。

所述用户触发该按钮包括：用鼠标点击该按钮，或者鼠标滑过该按钮。

该方法进一步包括：

当用鼠标点击该按钮时弹出浮动输入框之后，再次点击该按钮时隐藏浮动输入框；

当鼠标滑过该按钮时弹出浮动输入框之后，鼠标滑出浮动输入框时隐藏浮动输入框。

所述该控制单元在导航条上显示所述浮动输入框按钮包括：该控制单元用浮动输入框按钮的图标替换导航条上的社交网站的标识图标；

所述该控制单元隐藏所述浮动输入框按钮包括：该控制单元用社交网站的标识图标替换导航条上的浮动输入框按钮的图标。

所述该控制单元在导航条上显示所述浮动输入框按钮包括：该控制单元将浮动输入框按钮元素样式的显示设置为“锁定”；

所述该控制单元隐藏所述浮动输入框按钮包括：该控制单元将浮动输入框按钮元素样式的显示设置为“无”。

检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离包括：为显示窗口的滑块滑动事件绑定处理函数，在数据函数的内部判定页面元素的卷轴顶部属性的值，检测到卷轴顶部属性的值大于所述预设距离时，确定社交网站的页面顶端滚出显示窗口顶端超过预设距离。

检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离包括：检测到卷轴顶部属性的值小于或等于所述预设距离时，确定社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离。

所述将社交网站的导航条设置为固定定位模式包括：设置导航条的导航组件容器元素的样式位置为“固定”。

所述将社交网站的导航条设置为固定定位模式包括：通过使用JAVASCRIPT语言设置导航条的导航组件容器元素的样式位置为“绝对”，同时在JAVASCRIPT代码中监控显示窗口滑块滑动事件来重新计算垂直高度以定位导航组件容器元素。

弹出浮动输入框包括：绑定按钮元素的鼠标进入事件，当触发浮动输入框按钮时，使得浮动输入框所在容器元素显示；

隐藏浮动输入框包括：绑定浮动输入框所在容器元素的鼠标离开事件，当鼠标离开时触发，隐藏浮动输入框所在容器元素。

由上述可见，本发明这种，将社交网站的导航条设置为固定定位模式，在社交网站的导航条中设置一个浮动输入框按钮，当用户触发该按钮时弹出浮动输入框，供用户输入动态信息；此外，设置一控制单元，当检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离时，该控制单元在导航条上显示所述浮动输入框按钮，当检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离时，该控制单元隐藏所述浮动输入框按钮的技术方案，使得用户可以在浏览动态信息时，随时输入动态信息，并且输入发布完成后，可以接着刚阅读的内容继续浏览，发布信息更及时，操作简单快捷，提高了用户体验。

附图说明

图1是现有的一种网站页面的示意图；

图2是现有网站页面中输入框已滚出显示窗口的示意图；

图3是本发明实施例中的一种在社交网站中快速输入动态信息的方法的流程图；

图4是本发明实施例中的已弹出的浮动输入框的示意图。

具体实施方式

现有社交网站的导航条一般都是固定定位模式，即导航条始终固定在窗口显示区的最顶端，即使滑块滑动到页面最底端也可以看见导航条。即使不是固定定位模式，也可以将其转变为固定定位模式。因此，本发明在导航条中设置一个能弹出快速输入动态信息的浮动输入框的按钮，当用户按下该按钮时，一个浮动输入框就会弹出来，用户就可以随时输入动态信息了。

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

图3是本发明实施例中的一种在社交网站中快速输入动态信息的方法的流程图。如图3所示，该方法包括：

301，如果社交网站的导航条为非固定定位模式，首先将社交网站的导航条设置为固定定位模式。

302，在社交网站的导航条中设置一个浮动输入框按钮，当用户触发该按钮时弹出浮动输入框，供用户输入动态信息。

图4是本发明实施例中的已弹出的浮动输入框的示意图。浮动输入框可以与页面顶部的输入框在外观和功能上完全相同，也可以如图1和图4所示，在功能上有些差别，可以根据具体场景调整。

303，设置一控制单元，当检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离时，该控制单元在导航条上显示所述浮动输入框按钮，当检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离时，该控制单元隐藏所述浮动输入框按钮。

当滑块位于页面顶部时，用户能够看到页面顶部的输入框，因此在本步骤中通过设置一个控制单元来控制浮动输入框的显示和隐藏。所述的预设距离与输入框的高度相关，例如，输入框的高度为100px，则该预设距离可以为120px、100px或80px等。

用户触发浮动输入框按钮的具体行为包括：用鼠标点击该按钮，或者鼠标滑过该按钮。

图3所示的方法进一步包括：当用鼠标点击该按钮时弹出浮动输入框之后，再次点击该按钮时隐藏浮动输入框；或者，当鼠标滑过该按钮时弹出浮动输入框之后，鼠标滑出浮动输入框时隐藏浮动输入框。

为了使导航条更简洁美观，可以在隐藏浮动输入框的按钮时正常显示网站的标识图标（即logo图片），而在显示浮动输入框的按钮时，使用该按钮的图标替换网站的标识图标，参见图4。

因此，图3中的所述该控制单元在导航条上显示所述浮动输入框按钮包括：该控制单元用浮动输入框按钮的图标替换导航条上的社交网站的标识图标；所述该控制单元隐藏所述浮动输入框按钮包括：该控制单元用社交网站的标识图标替换导航条上的浮动输入框按钮的图标。

浮动输入框外观、功能等可以通过html的div来具体定义实现。

上述的在导航条上增加设置弹出浮动输入框的功能按钮的一种技术实现具体如下：

所述该控制单元在导航条上显示所述浮动输入框按钮具体为：该控制单元将浮动输入框按钮元素样式（style）的显示（display）设置为“锁定（block）”；

所述该控制单元隐藏所述浮动输入框按钮包括：该控制单元将浮动输入框按钮元素样式（style）的显示（display）设置为“无（none）”。

检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离包括：为显示窗口（window）的滑块滑动（onscroll）事件绑定处理函数，在数据函数的内部判定页面（document）元素的卷轴顶部（scrollTop）属性的值，检测到卷轴顶部（scrollTop）属性的值大于所述预设距离时，确定社交网站的页面顶端滚出显示窗口顶端超过预设距离。

检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离包括：检测到卷轴顶部（scrollTop）属性的值小于或等于所述预设距离时，确定社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离。

所述将社交网站的导航条设置为固定定位模式包括：设置导航条的导航组件容器元素的样式位置（style.position）为“固定（fixed）”，以实现导航组件的固定定位,即使屏幕滚动导航也一直停留在上方

需要注意的是，在少数不支持fixed定位的浏览器或相应版本下（如IE6）,则需要通过使用JAVASCRIPT语言设置导航条的导航组件容器元素的样式位置（style.position）为“绝对（absolute）”，同时在JAVASCRIPT代码中监控显示窗口滑块滑动（window.onScroll）事件来重新计算垂直高度以定位导航组件容器元素。

弹出浮动输入框的具体实现可以为：绑定按钮元素的鼠标进入（onmouseenter）事件，当触发浮动输入框按钮时，使得浮动输入框所在容器元素显示；

隐藏浮动输入框的具体实现可以为：绑定浮动输入框所在容器元素的鼠标离开（onmouseleave）事件，当鼠标离开时触发，隐藏浮动输入框所在容器元素自身。

至于浮动输入框本身功能的实现,则完全与普通输入框一致,在此处不另作详细描述。

综上所述，本发明这种，将社交网站的导航条设置为固定定位模式，在社交网站的导航条中设置一个浮动输入框按钮，当用户触发该按钮时弹出浮动输入框，供用户输入动态信息；此外，设置一控制单元，当检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离时，该控制单元在导航条上显示所述浮动输入框按钮，当检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离时，该控制单元隐藏所述浮动输入框按钮的技术方案，使得用户可以在浏览动态信息时，随时输入动态信息，并且输入发布完成后，可以接着刚阅读的内容继续浏览，发布信息更及时，操作简单快捷，提高了用户体验。

以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。

Claims (8)

1.一种在社交网站中快速输入动态信息的方法，其特征在于，该方法包括：

如果社交网站的导航条为非固定定位模式，首先将社交网站的导航条设置为固定定位模式；

在社交网站的导航条中设置一个浮动输入框按钮，当用户触发该按钮时弹出浮动输入框，供用户输入动态信息；

设置一控制单元，当检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离时，该控制单元在导航条上显示所述浮动输入框按钮，当检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离时，该控制单元隐藏所述浮动输入框按钮；

其中，检测到社交网站的页面顶端滚出显示窗口顶端超过预设距离包括：为显示窗口的滑块滑动事件绑定处理函数，在数据函数的内部判定页面元素的卷轴顶部属性的值，检测到卷轴顶部属性的值大于所述预设距离时，确定社交网站的页面顶端滚出显示窗口顶端超过预设距离；其中，检测到社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离包括：检测到卷轴顶部属性的值小于或等于所述预设距离时，确定社交网站的页面顶端与显示窗口顶端的距离小于或等于所述预设距离。

2.根据权利要求1所述的方法，其特征在于，所述用户触发该按钮包括：用鼠标点击该按钮，或者鼠标滑过该按钮。

3.根据权利要求2所述的方法，其特征在于，该方法进一步包括：

当用鼠标点击该按钮时弹出浮动输入框之后，再次点击该按钮时隐藏浮动输入框；

当鼠标滑过该按钮时弹出浮动输入框之后，鼠标滑出浮动输入框时隐藏浮动输入框。

4.根据权利要求1所述的方法，其特征在于，

所述该控制单元在导航条上显示所述浮动输入框按钮包括：该控制单元用浮动输入框按钮的图标替换导航条上的社交网站的标识图标；

所述该控制单元隐藏所述浮动输入框按钮包括：该控制单元用社交网站的标识图标替换导航条上的浮动输入框按钮的图标。

5.根据权利要求1-4中任一项所述的方法，其特征在于，

所述该控制单元在导航条上显示所述浮动输入框按钮包括：该控制单元将浮动输入框按钮元素样式的显示设置为“锁定”；

所述该控制单元隐藏所述浮动输入框按钮包括：该控制单元将浮动输入框按钮元素样式的显示设置为“无”。

6.根据权利要求1-4中任一项所述的方法，其特征在于，所述将社交网站的导航条设置为固定定位模式包括：

设置导航条的导航组件容器元素的样式位置为“固定”。

7.根据权利要求1-4中任一项所述的方法，其特征在于，所述将社交网站的导航条设置为固定定位模式包括：

通过使用JAVASCRIPT语言设置导航条的导航组件容器元素的样式位置为“绝对”，同时在JAVASCRIPT代码中监控显示窗口滑块滑动事件来重新计算垂直高度以定位导航组件容器元素。

8.根据权利要求3所述的方法，其特征在于，

弹出浮动输入框包括：绑定按钮元素的鼠标进入事件，当触发浮动输入框按钮时，使得浮动输入框所在容器元素显示；

隐藏浮动输入框包括：绑定浮动输入框所在容器元素的鼠标离开事件，当鼠标离开时触发，隐藏浮动输入框所在容器元素。