CN105512124B - 在网页中实现文本编辑器悬浮的方法和装置 - Google Patents

在网页中实现文本编辑器悬浮的方法和装置 Download PDF

Info

Publication number
CN105512124B
CN105512124B CN201410492051.0A CN201410492051A CN105512124B CN 105512124 B CN105512124 B CN 105512124B CN 201410492051 A CN201410492051 A CN 201410492051A CN 105512124 B CN105512124 B CN 105512124B
Authority
CN
China
Prior art keywords
text editor
webpage
suspended state
text
instruction
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201410492051.0A
Other languages
English (en)
Other versions
CN105512124A (zh
Inventor
向国屹
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201410492051.0A priority Critical patent/CN105512124B/zh
Publication of CN105512124A publication Critical patent/CN105512124A/zh
Application granted granted Critical
Publication of CN105512124B publication Critical patent/CN105512124B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Information Transfer Between Computers (AREA)

Abstract

一种在网页中实现文本编辑器悬浮的方法,包括以下步骤:接收使文本编辑器变为悬浮状态的指令,该文本编辑器嵌入在网页的固定位置;设置文本编辑器在网页中处于顶层,并设置文本编辑器的状态标识为悬浮状态;监测网页是否发生移动,若网页发生移动,则检测所述状态标识是否表示悬浮状态;若所述状态标识表示悬浮状态,则不传送反映所述网页移动的网页移动数据给所述文本编辑器的位置控制函数,也不调用所述位置控制函数,所述位置控制函数用于根据所述网页移动数据控制所述文本编辑器的移动,使得所述文本编辑器与所述网页一起移动。上述方法可便文本编辑器不会固定在网页的特定位置。此外,还提供一种在网页中实现文本编辑器悬浮的装置。

Description

在网页中实现文本编辑器悬浮的方法和装置
技术领域
本发明涉及网络技术领域,特别是涉及一种在网页中实现文本编辑器悬浮的方法和装置。
背景技术
文本编辑器(或称文字编辑器)是用作编写普通文字的应用软件,文本编辑器一般不能对输入其中的内容进行桌面排版(例如文档格式处理),但通常支持基本的排版功能,如卷行、自动缩排、行号排版、注释排版等等。文本编辑器可分为纯文本编辑器和富文本编辑器。纯文本编辑器中只能输入文字,而富文本编辑器则可提供类似于Microsoft Word的编辑功能,其中可输入文字和图片等。文本编辑器可通过iframe元素嵌入到网页中。网页中的文本编辑器通常可用于发表讨论主题、发表评论内容、发表回复内容等等。
现有技术中网页中的文本编辑器一般固定在网页中的特定位置,而如今网页所承载的内容通常非常丰富,因此网页的版面也非常大,浏览器窗口中一般不能展示网页的全部版面。当需要在文本编辑器中输入内容而文本编辑器不处于浏览器窗口的显示区域中时,需要用户手动拖动网页的滚动条来翻滚网页,以将文本编辑器呈现到浏览器窗口的显示区域中。另外,若需要在文本编辑器中针对某一讨论主题、某一评论内容发表评论内容或针对某一评论内容发表回复内容,而所针对的讨论主题或评论内容在网页中的位置与文本编辑器在网页中位置相隔甚远,导致二者不能同时呈现在浏览器窗口的显示区域时,则需要用户强制记住所针对的讨论主题或评论内容,或者需要用户来回翻滚网页以将所针对的讨论主题或评论内容与文本编辑器交替呈现在浏览器窗口的显示区域,达到边观看所针对的讨论主题或评论内容、边完成在文本编辑器中输入有针对性的完整的内容的目的。
发明内容
基于此,针对文本编辑器只能固定在网页中特定位置的问题,有必要提供一种在网页中实现文本编辑器悬浮的方法和装置。
一种在网页中实现文本编辑器悬浮的方法,包括以下步骤:
接收使文本编辑器变为悬浮状态的指令,所述文本编辑器嵌入在网页的固定位置;
设置所述文本编辑器在网页中处于顶层,并设置所述文本编辑器的状态标识为悬浮状态;
监测所述网页是否发生移动,若所述网页发生移动,则检测所述状态标识是否表示悬浮状态;
若所述状态标识表示悬浮状态,则不传送反映所述网页移动的网页移动数据给所述文本编辑器的位置控制函数,也不调用所述位置控制函数,所述位置控制函数用于根据所述网页移动数据控制所述文本编辑器的移动,使得所述文本编辑器与所述网页一起移动。
一种在网页中实现文本编辑器悬浮的装置,包括:
指令接收模块,用于接收使文本编辑器变为悬浮状态的指令,所述文本编辑器嵌入在网页的固定位置;
层设置模块,用于在触发所述文本编辑器变为悬浮状态的指令后,设置所述文本编辑器在网页中处于顶层;
状态设置模块,用于在触发所述文本编辑器变为悬浮状态的指令后,设置所述文本编辑器的状态标识为悬浮状态;
监测模块,用于监测所述网页是否发生移动,若所述网页发生移动,则检测所述状态标识是否表示悬浮状态,若所述状态标识表示悬浮状态,则不启动所述位置控制模块;
位置控制模块,用于将反映所述网页移动的网页移动数据传递给所述文本编辑器的位置控制函数并调用所述位置控制函数,所述位置控制函数用于根据所述网页移动数据控制所述文本编辑器的移动,使得所述文本编辑器与所述网页一起移动。
上述在网页中实现文本编辑器悬浮的方法和装置,在接收使文本编辑器变为悬浮状态的指令后,设置文本编辑器在网页中处于顶层,从而使得文本编辑器不被网页中的其它元素遮挡,并设置文本编辑器的状态标识为悬浮状态,而且在网页发生移动的过程中,文本编辑器的状态标识表示悬浮状态时,文本编辑器不随着网页移动,从而在接收到使文本编辑器变为悬浮状态的指令后,文本编辑器不会固定在网页的特定位置而被移出到浏览器窗口的显示区域之外,其可一直悬浮在网页的其它元素之上,保留在浏览器窗口的显示区域。
附图说明
如图1A为一个实施例中将文本编辑器设置为悬浮状态的过程的流程示意图;
如图1B为一个实施例中根据文本编辑器是否为悬浮状态控制文本编辑器的位置的过程的流程示意图;
图2为一个实施例中生成文本编辑器的悬浮图像效果的过程的流程示意图;
图3A为一个实施例中文本编辑器的悬浮图像效果示意图;
图3B为另一实施例中文本编辑器的悬浮图像效果示意图;
图4为一个实施例中根据拖拽操作移动文本编辑器的过程的流程示意图;
图5为一个实施例中文本编辑器上方的鼠标指针示意图;
图6为一个实施例中根据拖拽操作缩放文本编辑器的过程的流程示意图;
图7为一个实施例中文本编辑器顶点上方的鼠标指针示意图;
图8为一个实施例中的在网页中实现文本编辑器悬浮的装置的结构示意图;
图9为一个实施例中的在网页中实现文本编辑器悬浮的装置的结构示意图;
图10为一个实施例中的在网页中实现文本编辑器悬浮的装置的结构示意图;
图11为一个实施例中的在网页中实现文本编辑器悬浮的装置的结构示意图;
图12为一个实施例中的在网页中实现文本编辑器悬浮的装置的结构示意图;
图13为能实现本发明实施例的一个计算机系统1000的模块图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
本申请文件中的文本编辑器为纯文本编辑器或富文本编辑器。
在一个实施例中,一种在网页中实现文本编辑器悬浮的方法,包括将文本编辑器设置为悬浮状态的过程以及根据文本编辑器是否为悬浮状态控制文本编辑器的位置的过程。
如图1A所示,在一个实施例中,将文本编辑器设置为悬浮状态的过程包括以下步骤:
步骤S102,接收使文本编辑器变为悬浮状态的指令,文本编辑器嵌入在网页的固定位置。
在一个实施例中,文本编辑器包括用于放大编辑器的控件,当发生该控件的抬起事件时,触发使文本编辑器变为悬浮状态的指令。在一个实施例中,用于放大编辑器的控件为一个按钮,该按钮具有抬起事件,按钮上显示“放大编辑”或“全屏显示”的字样,以提示用户点击该按钮可以放大文本编辑器。控件的抬起事件在控件被点击后触发。例如,当鼠标指针处于控件之上时,若鼠标左键被按下后又被放开,则触发控件的抬起事件。又例如,触摸屏在控件位置被按下后又被放开,则触发控件的抬起事件。
在一个实施例中,上述在网页中实现文本编辑器悬浮的方法还包括以下步骤:当发生上述控件的抬起事件时,按照预设的放大尺寸放大文本编辑器。在按照预设的放大尺寸放大文本编辑器之前,可先判断预设的放大尺寸是否超过屏幕分辨率,若是,则按照屏幕分辨率的长宽放大文本编辑器,若否,则按照预设的放大尺寸放大文本编辑器。本实施例中,文本编辑器在被放大的同时变为悬浮状态。
在另一个实施例中,在文本编辑器随着网页的移动而移动时,监测网页的显示区域的底部位置是否高于文本编辑器的底部位置,若是,则触发使文本编辑器变为悬浮状态的指令。
网页的版面长度可能大于浏览器窗口中用于显示网页内容的区域(浏览器窗口的显示区域)的长度,因此可能只有部分网页内容被显示,而另一部分网页内容则被隐藏。网页的显示区域即被显示的网页内容所覆盖的区域,浏览器窗口的显示区域与网页的显示区域重叠。
显示区域的底部位置可用显示区域的底边与屏幕底边的距离表示,而文本编辑器的底部位置可用文本编辑器的底边与屏幕底边的距离表示。
若网页的显示区域的底部位置高于文本编辑器的底部位置,则说明文本编辑器正在被滚出浏览器窗口的显示区域,此时需要将文本编辑器设置为悬浮状态,以将文本编辑器保留在浏览器窗口的显示区域中。
在其它实施例中,当满足上述两个条件中的任意一个条件时,即发生上述控件的抬起事件或网页的显示区域的底部位置高于文本编辑器的底部位置,都触发使文本编辑器变为悬浮状态的指令。
步骤S104,设置文本编辑器在网页中处于顶层。
网页中的元素按照层次进行分布和显示,高层元素层叠于低层元素之上。网页中的元素具有层属性,层属性用于表示元素在网页中所分布的层。层属性值越大的元素所分布的层次越高(上)。例如,元素的层属性为0可表示该元素在网页中分布于第一层(底层),元素的层属性为1则表示该元素在网页中分布于第二层(高于第一层)。步骤S104可设置文本编辑器的层属性值大于网页口中其它元素的层属性值。
步骤S106,设置文本编辑器的状态标识为悬浮状态。
步骤S104和S106在步骤S102之后执行,而步骤S104和S106的执行顺序可以互换。
如图1B所示,在一个实施例中,根据文本编辑器是否为悬浮状态控制文本编辑器的位置的过程包括以下步骤:
步骤S108,监测网页是否发生移动。
在一个实施例中,可监测网页中的元素相对于浏览器窗口的固定位置是否发生变化,例如监测网页顶部元素相对于浏览器窗口顶部的距离是否发生变化,或网页最左侧元素相对于浏览器窗口左侧边的距离是否发生变化,若发生变化则说明网页发生移动。
在另一个实施例中,若网页中包含滚动条,可监测网页的滚动条是否发生滚动,若网页的滚动条发生滚动,则说明网页发生移动。网页的滚动条为可在滚动栏中上下滚动的矩形块,滚动栏为位于可控制滚动条往上移动的向上箭头与可控制滚动条往下移动的向下箭头之间的矩形区域,滚动栏作为滚动条的滚动轨道,滚动条在滚动栏中上下滚动以控制网页上下移动,滚动条在滚动栏中的位置决定了网页的显示区域。例如,滚动条位于滚动栏底部,则网页的显示区域覆盖网页底部。滚动条上移时,网页的显示区域也相对于网页底部上移。
步骤S110,若网页发生移动,则检测文本编辑器的状态标识是否表示悬浮状态,若文本编辑器的状态标识表示悬浮状态,则不传送反映网页移动的网页移动数据给文本编辑器的位置控制函数,也不调用该位置控制函数。如图1B所示,此时可进入步骤S108,在其它实施例中,此时也可执行其它步骤,只要此时不执行步骤S112即可。若文本编辑器的状态标识不表示悬浮状态,则执行步骤S112。在其它实施例中,也可对文本编辑器的状态标识不表示悬浮状态的情况不进行限定。
步骤S112,将反映网页移动的网页移动数据传递给文本编辑器的位置控制函数并调用位置控制函数,文本编辑器的位置控制函数用于根据网页移动数据控制文本编辑器的移动,使得文本编辑器与网页一起移动。
在一个实施例中,可获取网页中的元素相对于浏览器窗口的固定位置的距离,例如网页顶部元素相对于浏览器窗口顶部的距离,或网页最左侧元素相对于浏览器窗口左侧边的距离,将该距离作为网页移动数据传递给位置控制函数。
在另一个实施例中,若网页中包括滚动条,可获取滚动条的位置,将滚动条的位置作为网页移动数据传递给位置控制函数。滚动条的位置为滚动条在滚动栏中的位置。滚动条在滚动栏中的位置可用滚动条与滚动栏底边(或顶边)的距离与滚动栏长度的比值(或百分比)来表示。
文本编辑器的位置控制函数为文本编辑器这一对象的方法函数,位置控制函数接收网页移动数据这一参数,根据网页移动数据以及文本编辑器在网页中的初始位置计算文本编辑器相对于浏览器窗口的位置,使得文本编辑器与网页中的其它元素的相对位置不变并与网页中的其它元素一起移动,从而形成文本编辑器嵌入在网页中的视觉效果。
在一个实施例中,步骤S102~S106和S108~S112可分别在不同的线程中执行。
如图2所示,在一个实施例中,在接收文本编辑器变为悬浮状态的指令后,上述在网页中实现文本编辑器悬浮的方法还包括生成文本编辑器的悬浮图像效果的过程,该过程包括以下步骤:
步骤S202,生成使得文本编辑器具有悬浮图像效果的边框元素。
边框元素可以是网页中任何的具有边框且可设置边框属性的元素。悬浮图像效果指的是在视觉上突出于其它元素的效果。在一个实施例中,边框元素与文本编辑器的边框相吻合,即边框元素与文本编辑器的尺寸和位置大致相等(相差不超过阈值),且边框元素具有突出于其它元素的视觉效果或具备辅助文本编辑器在视觉上突出于其它元素的功能。
如图3A所示,在一个实施例中,边框元素301与文本编辑器302完全重叠,边框元素的边框线条呈虚线且加粗状,使得文本编辑器302突出于网页中的其它元素。
如图3B所示,在另一个实施例中,边框元素303位于文本编辑器304的下一层,且边框元素303与文本编辑器304的尺寸一致,而二者的位置稍有偏差,且边框元素303呈灰色透明状态,在视觉上303像是文本编辑器304的影子,而文本编辑器304则是悬浮在网页之上。
步骤S204,将文本编辑器在网页中所处的块与边框元素在网页中所处的块合并。
网页中的每一个元素都各位于网页中的一个块(block),将文本编辑器在网页中所处的块与边框元素在网页中所处的块合并,可使得边框元素与文本编辑器的相对位置保持不变,在文本编辑器不随网页的滚动条滚动时,边框元素也不随网页的滚动条滚动。
如图4所示,在一个实施例中,在接收使文本编辑器变为悬浮状态的指令后,上述在网页中实现文本编辑器悬浮的方法还包括根据拖拽操作移动文本编辑器的过程,该过程包括以下步骤:
步骤S402,监测鼠标指针是否处于文本编辑器上方。
鼠标指针是在计算机开始使用鼠标后为了在图形界面上标识出鼠标位置而产生的图标。
步骤S404,当鼠标指针处于文本编辑器上方时,将鼠标指针显示为拖拽图标,并监测是否发生针对鼠标指针的拖拽操作。
如图5所示,当鼠标指针502处于文本编辑器504上方时,鼠标指针502显示为在4个方向都带箭头的十字形的拖拽图标。
例如,当鼠标指针处于文本编辑器上方时,若鼠标左键被按下后保持按下状态且鼠标被拖动,则发生针对鼠标指针的拖拽操作。又例如,当鼠标指针处于文本编辑器上方时,触摸屏在鼠标指针位置被按下形成触点,且触点与触摸屏在保持接触的状态下移动,则发生针对鼠标指针的拖拽操作。相应的,步骤S404可监测鼠标或/和触摸屏上的触点是否满足上述条件,从而判断是否发生针对鼠标指针的拖拽操作。
步骤S406,当发生针对鼠标指针的拖拽操作时,根据鼠标指针的移动轨迹移动文本编辑器。
在一个实施例中,上述在网页中实现文本编辑器悬浮的方法还包括以下步骤:在文本编辑器脱离文本编辑器在网页中的初始位置后,将文本编辑器位于初始位置时所覆盖的区域填充为白色。
本实施例可将文本编辑器拖拽到网页中的任意位置,可方便用户一边查看网页内容一边在文本编辑器中编辑信息。
如图6所示,在一个实施例中,在接收使文本编辑器变为悬浮状态的指令后,上述在网页中实现文本编辑器悬浮的方法还包括根据拖拽缩放文本编辑器的过程,该过程包括以下步骤:
步骤S602,监测鼠标指针是否处于文本编辑器的四个顶点位置。
步骤S604,当鼠标指针处于文本编辑器的四个顶点位置时,将鼠标指针显示为拉伸图标,拉伸图标指示出拉伸方向,并监测是否发生沿拉伸方向进行的针对鼠标指标的拖拽操作。
如图7所示,当鼠标指针702处于文本编辑器704的右下角顶点位置时,鼠标指针显示为具有两个箭头的线段形拉伸图标。
步骤S606,当发生沿拉伸方向进行的针对鼠标指标的拖拽操作时,根据鼠标指针的移动轨迹将文本编辑器进行缩放。
本实施例可根据用户需要对文本编辑器的大小进行任意缩放,方便用户在文本编辑器中编辑信息。
在一个实施例中,上述在网页中实现文本编辑器悬浮的方法还包括以下步骤:在文本编辑器的状态标识变为悬浮状态后,监测网页的显示区域的底部位置是否小于等于文本编辑器的底部位置,若是,则恢复文本编辑器的初始位置和初始大小,并设置文本编辑器的状态标识为非悬浮状态。在一个实施例中,若在文本编辑器的状态标识为悬浮状态后生成了使得文本编辑器具有悬浮图像效果的边框元素,则在文本编辑器的状态标识为非悬浮状态后,可隐藏该边框元素或删除该边框元素。
本实施例中,可自动实现文本编辑器在网页的非悬浮状态与悬浮状态之间的切换,并且可确保文本编辑器一直保留在浏览器窗口的显示区域中,从而可方便对文本编辑器进行操作。
在一个实施例中,步骤S102~S106、步骤S108~S112、步骤S202~S204、步骤S402~S406、步骤S602~S606可分别在不同的线程中执行,各个线程并发执行共同实现上述在网页中实现文本编辑器悬浮的方法,并提高整体处理速度以及交互过程中的响应速度。
如图8所示,在一个实施例中,一种在网页中实现文本编辑器悬浮的装置,包括指令接收模块10、层设置模块20、状态设置模块30、监测模块40和位置控制模块50,其中:
指令接收模块10用于接收使文本编辑器变为悬浮状态的指令,文本编辑器嵌入在网页的固定位置。
在一个实施例中,上述在网页中实现文本编辑器悬浮的装置还包括指令触发模块(图中未示出)。
在一个实施例中,文本编辑器包括用于放大编辑器的控件,指令触发模块用于当发生该控件的抬起事件时,触发使文本编辑器变为悬浮状态的指令。在一个实施例中,用于放大编辑器的控件为一个按钮,该按钮具有抬起事件,按钮上显示“放大编辑”或“全屏显示”的字样,以提示用户点击该按钮可以放大文本编辑器。控件的抬起事件在控件被点击后触发。例如,当鼠标指针处于控件之上时,若鼠标左键被按下后又被放开,则指令触发模块触发控件的抬起事件。又例如,触摸屏在控件位置被按下后又被放开,则指令触发模块触发控件的抬起事件。
在一个实施例中,上述在网页中实现文本编辑器悬浮的装置还包括:编辑器放大模块(图中未示出),用于当发生上述用于放大编辑器的控件的抬起事件时,按照预设的放大尺寸放大文本编辑器。在一个实施例中,编辑器放大模块用于当发生上述控件的抬起事件时,判断文本编辑器预设的放大尺寸是否超过屏幕分辨率,若是,则按照屏幕分辨率的长宽放大文本编辑器,若否,则按照预设的放大尺寸放大文本编辑器。本实施例中,文本编辑器在被放大的同时变为悬浮状态。
在另一个实施例中,指令触发模块用于在文本编辑器随着网页的移动而移动时,监测网页的显示区域的底部位置是否高于文本编辑器的底部位置,若是,则触发使文本编辑器变为悬浮状态的指令。
网页的版面长度可能大于浏览器窗口中用于显示网页内容的区域(浏览器窗口的显示区域)的长度,因此可能只有部分网页内容被显示,而另一部分网页内容则被隐藏。网页的显示区域即被显示的网页内容所覆盖的区域,浏览器窗口的显示区域与网页的显示区域重叠。
显示区域的底部位置可用显示区域的底边与屏幕底边的距离表示,而文本编辑器的底部位置可用文本编辑器的底边与屏幕底边的距离表示。
若网页的显示区域的底部位置高于文本编辑器的底部位置,则说明文本编辑器正在被滚出浏览器窗口的显示区域,此时需要将文本编辑器设置为悬浮状态,以将文本编辑器保留在浏览器窗口的显示区域中。
在其它实施例中,指令触发模块用于当发生上述用于放大编辑器的控件的抬起事件时,触发使文本编辑器变为悬浮状态的指令,以及用于在文本编辑器随着网页的移动而移动时,监测网页的显示区域的底部位置是否高于所述文本编辑器的底部位置,若是,则触发使文本编辑器变为悬浮状态的指令。
层设置模块20用于设置文本编辑器在网页中处于顶层。
网页中的元素按照层次进行分布和显示,高层元素层叠于低层元素之上。网页中的元素具有层属性,层属性用于表示元素在网页中所分布的层。层属性值越大的元素所分布的层次越高(上)。例如,元素的层属性为0可表示该元素在网页中分布于第一层(底层),元素的层属性为1则表示该元素在网页中分布于第二层(高于第一层)。步骤S104可设置文本编辑器的层属性值大于网页口中其它元素的层属性值。
状态设置模块30用于设置文本编辑器的状态标识为悬浮状态。
监测模块40用于监测网页是否发生移动,若网页发生移动,则检测文本编辑器的状态标识是否表示悬浮状态若文本编辑器的状态标识表示悬浮状态,则不启动位置控制模块50。在一个实施例中,监测模块40还用于若文本编辑器的状态标识不表示悬浮状态,则启动位置控制模块50。
在一个实施例中,监测模块40可监测网页中的元素相对于浏览器窗口的固定位置是否发生变化,例如监测网页顶部元素相对于浏览器窗口顶部的距离是否发生变化,或网页最左侧元素相对于浏览器窗口左侧边的距离是否发生变化,若发生变化则说明网页发生移动。
在另一个实施例中,若网页中包含滚动条,监测模块40可监测网页的滚动条是否发生滚动,若网页的滚动条发生滚动,则说明网页发生移动。网页的滚动条为可在滚动栏中上下滚动的矩形块,滚动栏为位于可控制滚动条往上移动的向上箭头与可控制滚动条往下移动的向下箭头之间的矩形区域,滚动栏作为滚动条的滚动轨道,滚动条在滚动栏中上下滚动以控制网页上下移动,滚动条在滚动栏中的位置决定了网页的显示区域。例如,滚动条位于滚动栏底部,则网页的显示区域覆盖网页底部。滚动条上移时,网页的显示区域也相对于网页底部上移。
位置控制模块50用于将反映网页移动的网页移动数据传递给文本编辑器的位置控制函数并调用位置控制函数,文本编辑器的位置控制函数用于根据网页移动数据控制文本编辑器的移动,使得文本编辑器与网页一起移动。
在一个实施例中,位置控制模块50可获取网页中的元素相对于浏览器窗口的固定位置的距离,例如网页顶部元素相对于浏览器窗口顶部的距离,或网页最左侧元素相对于浏览器窗口左侧边的距离,将该距离作为网页移动数据传递给位置控制函数。
在另一个实施例中,若网页中包括滚动条,位置控制模块50可获取滚动条的位置,将滚动条的位置作为网页移动数据传递给位置控制函数。滚动条的位置为滚动条在滚动栏中的位置。滚动条在滚动栏中的位置可用滚动条与滚动栏底边(或顶边)的距离与滚动栏长度的比值(或百分比)来表示。
文本编辑器的位置控制函数为文本编辑器这一对象的方法函数,位置控制函数接收网页移动数据这一参数,根据网页移动数据以及文本编辑器在网页中的初始位置计算文本编辑器相对于浏览器窗口的位置,使得文本编辑器与网页中的其它元素的相对位置不变并与网页中的其它元素一起移动,从而形成文本编辑器嵌入在网页中的视觉效果。
如图9所示,在一个实施例中,上述在网页中实现文本编辑器悬浮的装置还包括悬浮效果生成模块60,用于在接收文本编辑器变为悬浮状态的指令后,生成使得文本编辑器具有悬浮图像效果的边框元素,并将文本编辑器在网页中所处的块与边框元素在网页中所处的块合并。
边框元素可以是网页中任何的具有边框且可设置边框属性的元素。悬浮图像效果指的是在视觉上突出于其它元素的效果。在一个实施例中,边框元素与文本编辑器的边框相吻合,即边框元素与文本编辑器的尺寸和位置大致相等(相差不超过阈值),且边框元素具有突出于其它元素的视觉效果或具备辅助文本编辑器在视觉上突出于其它元素的功能。
网页中的每一个元素都各位于网页中的一个块(block),将文本编辑器在网页中所处的块与边框元素在网页中所处的块合并,可使得边框元素与文本编辑器的相对位置保持不变,在文本编辑器不随网页的滚动条滚动时,边框元素也不随网页的滚动条滚动。
如图10所示,在一个实施例中,上述在网页中实现文本编辑器悬浮的装置还包括编辑器移动模块70,用于在接收文本编辑器变为悬浮状态的指令后,监测鼠标指针是否处于文本编辑器上方,若是,则将鼠标指针显示为拖拽图标,并监测是否发生针对鼠标指针的拖拽操作,若是,则根据鼠标指针的移动轨迹移动文本编辑器。
鼠标指针是在计算机开始使用鼠标后为了在图形界面上标识出鼠标位置而产生的图标。
例如,当鼠标指针处于文本编辑器上方时,若鼠标左键被按下后保持按下状态且鼠标被拖动,则发生针对鼠标指针的拖拽操作。又例如,当鼠标指针处于文本编辑器上方时,触摸屏在鼠标指针位置被按下形成触点,且触点与触摸屏在保持接触的状态下移动,则发生针对鼠标指针的拖拽操作。相应的,编辑器移动模块70可监测鼠标或/和触摸屏上的触点是否满足上述条件,从而判断是否发生针对鼠标指针的拖拽操作。
在一个实施例中,上述在网页中实现文本编辑器悬浮的装置还包括空缺填充模块(图中未示出),用于在文本编辑器脱离文本编辑器在网页中的初始位置后,将文本编辑器位于初始位置时所覆盖的区域填充为白色。
本实施例可将文本编辑器拖拽到网页中的任意位置,可方便用户一边查看网页内容一边在文本编辑器中编辑信息。
如图11所示,在一个实施例中,上述在网页中实现文本编辑器悬浮的装置还包括编辑器缩放模块80,用于在接收使文本编辑器变为悬浮状态的指令后,监测鼠标指针是否处于文本编辑器的四个顶点位置,若是,则将鼠标指针显示为拉伸图标,拉伸图标指示出拉伸方向,并监测是否发生沿拉伸方向进行的针对鼠标指标的拖拽操作,若是,则根据鼠标指针的移动轨迹将文本编辑器进行缩放。
本实施例可根据用户需要对文本编辑器的大小进行任意缩放,方便用户在文本编辑器中编辑信息。
如图12所示,在一个实施例中,上述在网页中实现文本编辑器悬浮的装置还包括编辑器嵌入模块90,用于在文本编辑器的状态标识变为悬浮状态后,监测网页的显示区域的底部位置是否小于等于文本编辑器的底部位置,若是,则恢复文本编辑器的初始位置和初始大小,并设置文本编辑器的状态标识为非悬浮状态。在一个实施例中,若在文本编辑器的状态标识为悬浮状态后生成了使得文本编辑器具有悬浮图像效果的边框元素,则编辑器嵌入模块90还用于在文本编辑器的状态标识为非悬浮状态后,隐藏该边框元素或删除该边框元素。
本实施例中,可自动实现文本编辑器在网页的非悬浮状态与悬浮状态之间的切换,并且可确保文本编辑器一直保留在浏览器窗口的显示区域中,从而可方便对文本编辑器进行操作。
在一个实施例中,上述在网页中实现文本编辑器悬浮的装置还包括控制模块(图中未示出),用于在接收使文本编辑器变为悬浮状态的指令后,启动层设置模块20、状态设置模块30、悬浮效果生成模块60、编辑器移动模块70和编辑器缩放模块80。本实施例中,启动层设置模块20、状态设置模块30、悬浮效果生成模块60、编辑器移动模块70和编辑器缩放模块80可并发运行以实现上述在网页中实现文本编辑器悬浮的装置的功能,并提高上述在网页中实现文本编辑器悬浮的装置的整体处理速度以及交互过程中的响应速度。
上述在网页中实现文本编辑器悬浮的方法和装置,在接收使文本编辑器变为悬浮状态的指令后,设置文本编辑器在网页中处于顶层,从而使得文本编辑器不被网页中的其它元素遮挡,并设置文本编辑器的状态标识为悬浮状态,而且在网页发生移动的过程中,文本编辑器的状态标识表示悬浮状态时,文本编辑器不随着网页移动,从而在接收到使文本编辑器变为悬浮状态的指令后,文本编辑器不会固定在网页的特定位置而被移出到浏览器窗口的显示区域之外,其可一直悬浮在网页的其它元素之上,保留在浏览器窗口的显示区域,从而方便用户边查看网页中的其它内容,边在文本编辑器中编辑信息。
图13为能实现本发明实施例的一个计算机系统1000的模块图。该计算机系统1000只是一个适用于本发明的计算机环境的示例,不能认为是提出了对本发明的使用范围的任何限制。计算机系统1000也不能解释为需要依赖于或具有图示的示例性的计算机系统1000中的一个或多个部件的组合。
图13中示出的计算机系统1000是一个适合用于本发明的计算机系统的例子。具有不同子系统配置的其它架构也可以使用。例如有大众所熟知的台式机、笔记本、个人数字助理、智能电话、平板电脑、便携式媒体播放器、机顶盒等类似设备可以适用于本发明的一些实施例。但不限于以上所列举的设备。
如图13所示,计算机系统1000包括处理器1010、存储器1020和系统总线1022。包括存储器1020和处理器1010在内的各种系统组件连接到系统总线1022上。处理器1010是一个用来通过计算机系统中基本的算术和逻辑运算来执行计算机程序指令的硬件。存储器1020是一个用于临时或永久性存储计算程序或数据(例如,程序状态信息)的物理设备。系统总线1020可以为以下几种类型的总线结构中的任意一种,包括存储器总线或存储控制器、外设总线和局部总线。处理器1010和存储器1020可以通过系统总线1022进行数据通信。其中存储器1020包括只读存储器(ROM)或闪存(图中都未示出),以及随机存取存储器(RAM),RAM通常是指加载了操作系统和应用程序的主存储器。
计算机系统1000还包括显示接口1030(例如,图形处理单元)、显示设备1040(例如,液晶显示器)、音频接口1050(例如,声卡)以及音频设备1060(例如,扬声器)。显示设备1040和音频设备1060是用于体验多媒体内容的媒体设备。
计算机系统1000一般包括一个存储设备1070。存储设备1070可以从多种计算机可读介质中选择,计算机可读介质是指可以通过计算机系统1000访问的任何可利用的介质,包括移动的和固定的两种介质。例如,计算机可读介质包括但不限于,闪速存储器(微型SD卡),CD-ROM,数字通用光盘(DVD)或其它光盘存储、磁带盒、磁带、磁盘存储或其它磁存储设备,或者可用于存储所需信息并可由计算机系统1000访问的任何其它介质。
计算机系统1000还包括输入装置1080和输入接口1090(例如,IO控制器)。用户可以通过输入装置1080,如键盘、鼠标、显示装置1040上的触摸面板设备,输入指令和信息到计算机系统1000中。输入装置1080通常是通过输入接口1090连接到系统总线1022上的,但也可以通过其它接口或总线结构相连接,如通用串行总线(USB)。
计算机系统1000可在网络环境中与一个或者多个网络设备进行逻辑连接。网络设备可以是个人电脑、服务器、路由器、智能电话、平板电脑或者其它公共网络节点。计算机系统1000通过局域网(LAN)接口1100或者移动通信单元1110与网络设备相连接。局域网(LAN)是指在有限区域内,例如家庭、学校、计算机实验室、或者使用网络媒体的办公楼,互联组成的计算机网络。WiFi和双绞线布线以太网是最常用的构建局域网的两种技术。WiFi是一种能使计算机系统1000间交换数据或通过无线电波连接到无线网络的技术。移动通信单元1110能在一个广阔的地理区域内移动的同时通过无线电通信线路接听和拨打电话。除了通话以外,移动通信单元1110也支持在提供移动数据服务的2G,3G或4G蜂窝通信系统中进行互联网访问。
应当指出的是,其它包括比计算机系统1000更多或更少的子系统的计算机系统也能适用于发明。例如,计算机系统1000可以包括能在短距离内交换数据的蓝牙单元,用于照相的图像传感器,以及用于测量加速度的加速计。
如上面详细描述的,适用于本发明的计算机系统1000能执行在网页中实现文本编辑器悬浮的方法的指定操作。计算机系统1000通过处理器1010运行在计算机可读介质中的软件指令的形式来执行这些操作。这些软件指令可以从存储设备1070或者通过局域网接口1100从另一设备读入到存储器1020中。存储在存储器1020中的软件指令使得处理器1010执行上述的在网页中实现文本编辑器悬浮的方法。此外,通过硬件电路或者硬件电路结合软件指令也能同样实现本发明。因此,实现本发明并不限于任何特定硬件电路和软件的组合。
以上所述实施例仅表达了本发明的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本发明构思的前提下,还可以做出若干变形和改进,这些都属于本发明的保护范围。因此,本发明专利的保护范围应以所附权利要求为准。

Claims (16)

1.一种在网页中实现文本编辑器悬浮的方法,包括以下步骤:
当网页的显示区域的底部位置高于文本编辑器的底部位置时,触发使所述文本编辑器变为悬浮状态的指令;
接收使文本编辑器变为悬浮状态的指令,所述文本编辑器嵌入在网页的固定位置;
设置所述文本编辑器在网页中处于顶层,并设置所述文本编辑器的状态标识为悬浮状态;
监测所述网页是否发生移动,若所述网页发生移动,则检测所述状态标识是否表示悬浮状态;
若所述状态标识表示悬浮状态,则不传送反映所述网页移动的网页移动数据给所述文本编辑器的位置控制函数,也不调用所述位置控制函数,所述位置控制函数用于根据所述网页移动数据控制所述文本编辑器的移动,使得所述文本编辑器与所述网页一起移动。
2.根据权利要求1所述的在网页中实现文本编辑器悬浮的方法,其特征在于,所述方法还包括以下步骤:
若所述状态标识不表示悬浮状态,则将所述网页移动数据传送给所述位置控制函数并调用所述位置控制函数。
3.根据权利要求1所述的在网页中实现文本编辑器悬浮的方法,其特征在于,所述当网页的显示区域的底部位置高于文本编辑器的底部位置时,触发使所述文本编辑器变为悬浮状态的指令,包括:
在所述文本编辑器随着网页的移动而移动时,监测所述网页的显示区域的底部位置是否高于所述文本编辑器的底部位置,若是,则触发使文本编辑器变为悬浮状态的指令。
4.根据权利要求1所述的在网页中实现文本编辑器悬浮的方法,其特征在于,所述方法还包括以下步骤:
在接收使所述文本编辑器变为悬浮状态的指令后,生成使得所述文本编辑器具有悬浮图像效果的边框元素,并将所述文本编辑器在所述网页中所处的块与所述边框元素在所述网页中所处的块合并。
5.根据权利要求1所述的在网页中实现文本编辑器悬浮的方法,其特征在于,所述方法还包括以下步骤:
在接收使所述文本编辑器变为悬浮状态的指令后,监测鼠标指针是否处于所述文本编辑器上方;
当鼠标指针处于所述文本编辑器上方时,将鼠标指针显示为拖拽图标,并监测是否发生针对鼠标指针的拖拽操作;
当发生所述拖拽操作时,根据鼠标指针的移动轨迹移动所述文本编辑器。
6.根据权利要求1所述的在网页中实现文本编辑器悬浮的方法,其特征在于,所述方法还包括以下步骤:
在接收使所述文本编辑器变为悬浮状态的指令后,监测鼠标指针是否处于所述文本编辑器的四个顶点位置;
当鼠标处于所述文本编辑器的四个顶点位置时,将鼠标指针显示为拉伸图标,所述拉伸图标指示出拉伸方向,并监测是否发生沿所述拉伸方向进行的针对鼠标指标的拖拽操作;
当发生沿所述拉伸方向进行的针对鼠标指标的拖拽操作时,根据鼠标指针的移动轨迹将所述文本编辑器进行缩放。
7.根据权利要求1至4任一所述的在网页中实现文本编辑器悬浮的方法,其特征在于,所述方法还包括以下步骤:
在所述文本编辑器的状态标识变为悬浮状态后,监测所述网页的显示区域的底部位置是否低于文本编辑器的底部位置,若是,则恢复所述文本编辑器的初始位置和初始大小,并设置所述文本编辑器的状态标识为非悬浮状态。
8.一种在网页中实现文本编辑器悬浮的装置,其特征在于,包括:
指令触发模块,用于当网页的显示区域的底部位置高于文本编辑器的底部位置时,触发使所述文本编辑器变为悬浮状态的指令;
指令接收模块,用于接收使文本编辑器变为悬浮状态的指令,所述文本编辑器嵌入在网页的固定位置;
层设置模块,用于在触发所述文本编辑器变为悬浮状态的指令后,设置所述文本编辑器在网页中处于顶层;
状态设置模块,用于在触发所述文本编辑器变为悬浮状态的指令后,设置所述文本编辑器的状态标识为悬浮状态;
监测模块,用于监测所述网页是否发生移动,若所述网页发生移动,则检测所述状态标识是否表示悬浮状态,若所述状态标识表示悬浮状态,则不启动位置控制模块;
所述位置控制模块,用于将反映所述网页移动的网页移动数据传递给所述文本编辑器的位置控制函数并调用所述位置控制函数,所述位置控制函数用于根据所述网页移动数据控制所述文本编辑器的移动,使得所述文本编辑器与所述网页一起移动。
9.根据权利要求8所述的在网页中实现文本编辑器悬浮的装置,其特征在于,所述监测模块还用于若所述状态标识不表示悬浮状态,则启动所述位置控制模块。
10.根据权利要求8所述的在网页中实现文本编辑器悬浮的装置,其特征在于,所述指令触发模块用于在所述文本编辑器随着网页的移动而移动时,监测所述网页的显示区域的底部位置是否高于所述文本编辑器的底部位置,若是,则触发使文本编辑器变为悬浮状态的指令。
11.根据权利要求8所述的在网页中实现文本编辑器悬浮的装置,其特征在于,所述装置还包括:
悬浮效果生成模块,用于在接收使所述文本编辑器变为悬浮状态的指令后,生成使得所述文本编辑器具有悬浮图像效果的边框元素,并将所述文本编辑器在所述网页中所处的块与所述边框元素在所述网页中所处的块合并。
12.根据权利要求8所述的在网页中实现文本编辑器悬浮的装置,其特征在于,所述装置还包括:
编辑器移动模块,用于在接收使所述文本编辑器变为悬浮状态的指令后,监测鼠标指针是否处于文本编辑器上方,若是,则将鼠标指针显示为拖拽图标,并监测是否发生针对鼠标指针的拖拽操作,若是,则根据鼠标指针的移动轨迹移动所述文本编辑器。
13.根据权利要求8所述的在网页中实现文本编辑器悬浮的装置,其特征在于,所述装置还包括:
编辑器缩放模块,用于在接收使所述文本编辑器变为悬浮状态的指令后,监测鼠标指针是否处于文本编辑器的四个顶点位置,若是,则将鼠标指针显示为拉伸图标,所述拉伸图标指示出拉伸方向,并监测是否发生沿所述拉伸方向进行的针对鼠标指标的拖拽操作,若是,则根据鼠标指针的移动轨迹将所述文本编辑器进行缩放。
14.根据权利要求8至13任一所述的在网页中实现文本编辑器悬浮的装置,其特征在于,所述装置还包括:
编辑器嵌入模块,用于在所述文本编辑器的状态标识变为悬浮状态后,监测所述网页的显示区域的底部位置是否低于文本编辑器的底部位置,若是,则恢复所述文本编辑器的初始位置和初始大小,并设置所述文本编辑器的状态标识为非悬浮状态。
15.一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行如权利要求1至7中任一项所述方法的步骤。
16.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如权利要求1至7中任一项所述方法的步骤。
CN201410492051.0A 2014-09-23 2014-09-23 在网页中实现文本编辑器悬浮的方法和装置 Active CN105512124B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410492051.0A CN105512124B (zh) 2014-09-23 2014-09-23 在网页中实现文本编辑器悬浮的方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410492051.0A CN105512124B (zh) 2014-09-23 2014-09-23 在网页中实现文本编辑器悬浮的方法和装置

Publications (2)

Publication Number Publication Date
CN105512124A CN105512124A (zh) 2016-04-20
CN105512124B true CN105512124B (zh) 2019-09-17

Family

ID=55720115

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410492051.0A Active CN105512124B (zh) 2014-09-23 2014-09-23 在网页中实现文本编辑器悬浮的方法和装置

Country Status (1)

Country Link
CN (1) CN105512124B (zh)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107092471A (zh) * 2016-07-27 2017-08-25 阿里巴巴集团控股有限公司 一种功能按钮显示方法和装置
CN106775651B (zh) * 2016-11-25 2020-10-09 广州酷狗计算机科技有限公司 网页元素移位方法及装置
CN108874379B (zh) * 2017-05-10 2022-01-25 北京国双科技有限公司 页面的处理方法及装置
CN107172500B (zh) * 2017-06-26 2020-06-26 北京金山安全软件有限公司 网页中视频播放方法及装置
CN112181267B (zh) * 2020-09-11 2022-05-06 杭州未名信科科技有限公司 窗口界面交互方法及系统
CN112069428B (zh) * 2020-09-15 2023-06-02 成都知道创宇信息技术有限公司 界面显示方法、装置及服务器
CN113065022B (zh) * 2021-04-16 2024-04-19 北京金堤科技有限公司 终端设备的交互控制方法、装置及电子设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2000075822A2 (en) * 1999-06-08 2000-12-14 Innovation Quest Limited A method and system for sponsored access to the internet by client machines
CN102469034A (zh) * 2010-11-03 2012-05-23 于琨洪 一种基于浏览器的可悬浮的新型网络即时聊天方法
CN102915328A (zh) * 2012-09-04 2013-02-06 新浪网技术(中国)有限公司 编辑富文本的方法及富文本编辑器

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN100468306C (zh) * 2006-09-20 2009-03-11 腾讯科技(深圳)有限公司 一种网页页面部件隐现装置和方法
CN102045269A (zh) * 2010-11-30 2011-05-04 于琨洪 一种基于浏览器的可悬浮的新型网络即时聊天方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2000075822A2 (en) * 1999-06-08 2000-12-14 Innovation Quest Limited A method and system for sponsored access to the internet by client machines
CN102469034A (zh) * 2010-11-03 2012-05-23 于琨洪 一种基于浏览器的可悬浮的新型网络即时聊天方法
CN102915328A (zh) * 2012-09-04 2013-02-06 新浪网技术(中国)有限公司 编辑富文本的方法及富文本编辑器

Also Published As

Publication number Publication date
CN105512124A (zh) 2016-04-20

Similar Documents

Publication Publication Date Title
CN105512124B (zh) 在网页中实现文本编辑器悬浮的方法和装置
US20240036706A1 (en) User terminal device and displaying method thereof
WO2021035884A1 (zh) 投屏方法、装置、终端及存储介质
CN111339032B (zh) 管理具有多页面的文件夹的设备、方法和图形用户界面
US9898180B2 (en) Flexible touch-based scrolling
US20150363366A1 (en) Optimized document views for mobile device interfaces
JP6165154B2 (ja) 仮想入力パネルによるオクリュージョンを回避するためのコンテンツ調整
JP6368455B2 (ja) 装置、方法、及びプログラム
EP3022848B1 (en) Method of providing message and user device supporting the same
JP6133318B2 (ja) クロス・ウィンドウ・アニメーション
EP2677414A2 (en) Information display apparatus and method of user device
CN105389079B (zh) 图表显示装置和图表显示方法
JP2015512078A (ja) 直接操作を使用する確信的アイテム選択
EP2703982A2 (en) Touch sensitive device and method of touch-based manipulation for contents
JP2017515209A (ja) 適応型ユーザインターフェイスペインマネージャ
US20160004404A1 (en) Image display device, image display control method, program and information storage medium
US20150301991A1 (en) Webapp startup method and device
AU2013222958A1 (en) Method and apparatus for object size adjustment on a screen
KR20140091302A (ko) 전자장치에서 스크롤링 정보 표시 방법 및 장치
JP2013097426A (ja) 情報処理プログラム、情報処理装置、情報処理システム、および、情報処理方法
CN104166553A (zh) 一种显示方法及电子设备
CN106681616B (zh) 一种浏览器功能栏显示方法、装置及设备
US20150205513A1 (en) Using a scroll bar in a multiple panel user interface
CN108292187A (zh) 上下文命令栏
EP2876540B1 (en) Information processing device

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant