一种提示框展示的方法、系统、设备及存储介质与流程

1.本发明涉及互联网技术领域，特别涉及一种提示框展示的方法、系统、设备及存储介质。


背景技术：

2.现阶段在web端提示框的使用是很频繁的，它可以使用在按钮或者文字情境下，当鼠标指针滑过时可以进行文字的提示或者展示出页面上仅有部分文字时的完整内容，既节约空间又能使得用户得到完整的信息，使用程度较高。
3.目前，现有技术中展示提示框，一种方式是通过系统默认的tooltip组件进行提示框展示；另一种方式是通过第三方插件或重设的tooltip组件进行提示框展示。
4.但就现有技术而言，第一种方式提示框样式不容易更改，无法根据不同场景进行不同的设计与实现，而且提示框的位置固定，有时无法达到需求；第二种方式虽然样式美观、方便调整，但不能当已经能展示全部内容时还会通过提示框进行展示，显得冗余且不合理。


技术实现要素：

5.为解决现有技术中提示框展示冗余程度高及合理性低的技术问题，本发明提供了一种提示框展示的方法，在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。
6.本发明提供了一种提示框展示的方法，包括如下步骤：
7.父级元素获取步骤，当检测到鼠标指针滑过网页中目标标题时，获取所述目标标题的父级元素及所述父级元素的边框宽度；
8.父级元素实际宽度计算步骤，基于所述父级元素的样式，获取所述父级元素内所述目标标题距所述父级元素的边框的第一间距及距所述父级元素的边框的第二间距，根据所述边框宽度、所述第一间距及所述第二间距，计算得到所述父级元素的实际宽度；
9.目标标题宽度计算步骤，基于创建的span标签，将所述目标标题填充至所述span标签中，将填充后的所述span标签展示于所述网页中，以此获得所述目标标题的宽度；
10.提示框展示步骤，比较所述父级元素的实际宽度和所述目标标题的宽度的大小，根据比较结果，基于提示框进行所述目标标题的展示。
11.上述的提示框展示的方法，其中，所述父级元素实际宽度计算步骤中所述父级元素的实际宽度的计算方法，具体包括：
12.计算所述第一间距和所述第二间距的和值；
13.利用所述边框宽度减去所述和值，计算得到所述父级元素的实际宽度。
14.上述的提示框展示的方法，其中，所述提示框展示步骤中具体包括：
15.当所述目标标题的宽度大于所述父级元素的实际宽度时，则基于所述提示框进行所述目标标题的展示；
16.当所述目标标题的宽度小于等于所述父级元素的实际宽度时，则无需基于所述提示框进行所述目标标题的展示。
17.上述的提示框展示的方法，其中，还包括：
18.提示框创建步骤，根据预设样式设置tooltip组件，通过所述tooltip组件创建所述提示框，并基于所述提示框进行所述目标标题的展示。
19.上述的提示框展示的方法，其中，所述父级元素实际宽度计算步骤中所述父级元素的样式的获取方法，具体包括：
20.基于windouw.getcomputedstyle(ref)获取所述父级元素的样式。
21.上述的提示框展示的方法，其中，所述目标标题宽度计算步骤中span标签的创建方法，具体包括：
22.基于document.createelement(span)创建span标签。
23.本发明还提供一种提示框展示的系统，包括：
24.父级元素获取单元，用于当检测到鼠标指针滑过网页中目标标题时，获取所述目标标题的父级元素及所述父级元素的边框宽度；
25.父级元素实际宽度计算单元，用于基于所述父级元素的样式，获取所述父级元素内所述目标标题距所述父级元素的边框的第一间距及距所述父级元素的边框的第二间距，根据所述边框宽度、所述第一间距及所述第二间距，计算得到所述父级元素的实际宽度；
26.目标标题宽度计算单元，用于基于创建的span标签，将所述目标标题填充至所述span标签中，将填充后的所述span标签展示于所述网页中，以此获得所述目标标题的宽度；
27.提示框展示单元，用于比较所述父级元素的实际宽度和所述目标标题的宽度的大小，根据比较结果，基于提示框进行所述目标标题的展示。
28.上述的提示框展示的系统，其中，还包括：
29.提示框创建单元，用于根据预设样式设置tooltip组件，通过所述tooltip组件创建所述提示框，并基于所述提示框进行所述目标标题的展示。
30.本发明还提供一种计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如上所述的提示框展示的方法。
31.本发明还提供一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如上所述的提示框展示的方法。
32.本发明的技术效果或优点：
33.本发明提供的一种提示框展示的方法，当检测到鼠标指针划过网页中目标标题时，获取目标标题的父级元素及父级元素的边框宽度，基于父级元素的样式，获取父级元素内目标标题距父级元素的边框的第一间距及距父级元素的边框的第二边距，根据边框宽度、第一间距和第二间距，计算父级元素的实际宽度，基于创建的span标签，将目标标题填充至span标签中，将填充后的span标签展示于网页中，以此获得目标标题的宽度，比较父级元素的实际宽度和目标标题的宽度的大小，根据比较结果，基于提示框进行目标标题的展示。通过上述方式，该方法在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。
附图说明
34.图1为本发明实施例提供的一个提示框展示的方法的流程图；
35.图2为本发明实施例提供的一个提示框展示过程的示意图；
36.图3为本发明实施例提供的又一个提示框展示过程的示意图；
37.图4为本发明实施例提供的一个提示框的展示系统的结构示意图；
38.图5为本发明实施例提供的一个电子设备的框架图；
39.以上图中：
40.1、父级元素获取单元；2、父级元素实际宽度计算单元；3、目标标题宽度计算单元；4、提示框展示单元；5、提示框创建单元；
41.10、总线；11、处理器；12、存储器；13、通信接口；
42.20、网页；21、父级元素；22、目标标题；23、边框宽度；24、第一间距；25、第二间距。
具体实施方式
43.为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
44.显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。
45.本申请所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“a和/或b”可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。
46.为解决现有技术中提示框展示冗余程度高及合理性低的技术问题，本发明提供了
一种提示框展示的方法，在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。
47.下面结合具体实施例及说明书附图，对本发明的技术方案作详细说明。
48.本实施例提供一种提示框展示的方法，包括如下步骤：
49.父级元素获取步骤，当检测到鼠标指针滑过网页中目标标题时，获取所述目标标题的父级元素及所述父级元素的边框宽度；
50.父级元素实际宽度计算步骤，基于所述父级元素的样式，获取所述父级元素内所述目标标题距所述父级元素的边框的第一间距及距所述父级元素的边框的第二间距，根据所述边框宽度、所述第一间距及所述第二间距，计算得到所述父级元素的实际宽度；
51.目标标题宽度计算步骤，基于创建的span标签，将所述目标标题填充至所述span标签中，将填充后的所述span标签展示于所述网页中，以此获得所述目标标题的宽度；
52.提示框展示步骤，比较所述父级元素的实际宽度和所述目标标题的宽度的大小，根据比较结果，基于提示框进行所述目标标题的展示。
53.本实施例提供的一种提示框展示的方法，在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。
54.具体地说，参考图1，图1为本发明实施例提供的一个提示框展示的方法的流程图。本发明提供了一种提示框展示的方法，包括如下步骤：
55.父级元素获取步骤s1，当检测到鼠标指针滑过网页中目标标题时，获取所述目标标题的父级元素及所述父级元素的边框宽度。
56.在具体应用中，父级元素为一个包含目标主题内容的边框，父级元素的边框宽度为水平方向上边框宽度；当检测到鼠标指针滑过网页中目标标题时，可获得目标标题的父级元素，及父级元素的offsetwidth，根据offsetwidth可得到父级元素整个边框的宽度。
57.更具体地说，参考图2，父级元素整个边框的宽度即为23。
58.父级元素实际宽度计算步骤s2，基于所述父级元素的样式，获取所述父级元素内所述目标标题距所述父级元素的边框的第一间距及距所述父级元素的边框的第二间距，根据所述边框宽度、所述第一间距及所述第二间距，计算得到所述父级元素的实际宽度。具体地说，第一间距和第二间距均为水平方向上的。
59.在本实施例中，所述父级元素实际宽度计算步骤s2中所述父级元素的实际宽度的计算方法，具体包括：
60.计算所述第一间距和所述第二间距的和值；
61.将所述边框宽度减去所述和值，计算得到所述父级元素的实际宽度。
62.在本实施例中，所述父级元素实际宽度计算步骤s2中所述父级元素的样式的获取方法，具体包括：
63.基于windouw.getcomputedstyle(ref)获取所述父级元素的样式。
64.在具体应用中，参考图2，父级元素21内目标主题22距父级元素21的边框的第一间距24，即目标主题22中首字距父级元素21边框的第一间距24，父级元素21内目标主题距父级元素21的边框的第二间距25，即目标主题22中显示的末字距父级元素21边框的第二间距25。计算父级元素实际宽度时，首先计算第一间距24和第二间距25的和值，利用边框宽度23
减去和值，即可得到父级元素的实际宽度。
65.目标标题宽度计算步骤s3，基于创建的span标签，将所述目标标题填充至所述span标签中，将填充后的所述span标签展示于网页中，以此获得所述目标标题的宽度。
66.在本实施例中，所述目标标题宽度计算步骤s3中span标签的创建方法，具体包括：
67.基于document.createelement(span)创建span标签。
68.提示框展示步骤s4，比较所述父级元素的实际宽度和所述目标标题的宽度的大小，根据比较结果，基于所述提示框进行所述目标标题的展示。
69.在本实施例中，所述提示框展示步骤s4中具体包括：
70.当所述目标标题的宽度大于所述父级元素的实际宽度时，则基于所述提示框进行所述目标标题的展示；
71.当所述目标标题的宽度小于等于所述父级元素的实际宽度时，则无需基于所述提示框进行所述目标标题的展示。
72.提示框创建步骤s5，根据预设样式设置tooltip组件，通过所述tooltip组件创建所述提示框，并基于所述提示框进行所述目标标题的展示。
73.在具体应用中，预设样式的tooltip组件包括三个属性，具体包括placement属性、content属性及alwayshow属性，其中，
74.placement属性，用于设置鼠标指针滑过目标主题时提示框展示的位置，可设置为在目标主题的上方、下方、左侧或右侧等，可用top、bottom、left及right等表示；
75.content属性，用于设置鼠标指针滑过目标主题时提示框展示的内容，可以是某种提示性文字，也可以是当前目标主题未展示完全的内容；
76.alwayshow属性，boolean类型，用于设置鼠标指针滑过目标主题时是否一直展示提示框，true为一直展示，false为根据父级元素实际宽度和目标主题的宽度的大小，判断是否进行提示框的展示。
77.更具体地说，在本实施例中，alwayshow属性设置为false，当鼠标指针滑过目标主题时，以此根据父级元素获取步骤s1、父级元素实际宽度计算步骤s2、目标标题宽度计算步骤s3及提示框展示步骤s4进行提示框展示。
78.本实施例提供的一种提示框展示的方法，在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。
79.参考图3，作为一个示例，下面具体介绍一下提示框的展示过程，具体如下：
80.根据预设样式设置tooltip组件，通过所述tooltip组件创建所述提示框，当检测到鼠标指针滑过网页20中目标标题22时，获取目标标题22的父级元素21及父级元素21的边框宽度23，基于windouw.getcomputedstyle(ref)获取父级元素21的样式，从而得到目标标题22到父级元素21的边框的第一间距24和目标标题22到父级元素21的边框第二间距25，计算第一间距24和第二间距25和值，利用边框宽度23减去和值，即可得到父级元素21的实际宽度，基于document.createelement(span)创建span标签，根据创建的span标签，将目标标题22填充至span标签，将填充后的span标签展示于网页20中，以此获得目标标题22的宽度，其中，目标标题22的宽度大于父级元素21的实际宽度，则基于提示框将目标标题22的内容进行展示。
81.本发明实施例还提供一种提示框展示的系统，参考图4，包括：父级元素获取单元1、父级元素实际宽度计算单元2、目标标题宽度计算单元3、提示框展示单元4及提示框创建单元5，其中，父级元素获取单元1与父级元素实际宽度计算单元2和提示框创建单元5连接，父级元素实际宽度计算单元2与提示框展示单元4连接，目标标题宽度计算单元3与提示框展示单元4连接，提示框展示单元4与提示框创建单元5连接。本实施例中，其中，
82.父级元素获取单元1，用于当检测到鼠标指针滑过网页中目标标题时，获取所述目标标题的父级元素及所述父级元素的边框宽度；父级元素获取单元1根据提示框创建单元5创建的提示框获取目标标题的父级元素，父级元素获取单元1将目标主题的父级元素和父级元素的边框宽度发送至父级元素实际计算单元2。
83.父级元素实际宽度计算单元2，用于基于所述父级元素的样式，获取所述父级元素内所述目标标题距所述父级元素的边框的第一间距及距所述父级元素的边框的第二间距，根据所述边框宽度、所述第一间距及所述第二间距，计算得到所述父级元素的实际宽度；父级元素实际宽度计算单元2将父级元素的实际宽度发送至提示框展示单元4。
84.目标标题宽度计算单元3，用于基于创建的span标签，将所述目标标题填充至所述span标签中，将填充后的所述span标签展示于网页中，以此获得所述目标标题的宽度；目标标题宽度计算单元3将目标标题的宽度发送至提示框展示单元4。
85.提示框展示单元4，用于比较所述父级元素的实际宽度和所述目标标题的宽度的大小，根据比较结果，基于所述提示框进行所述目标标题的展示；提示框展示单元4根据提示框创建单元5创建的提示框、父级元素的实际宽度及目标标题的宽度，判断是否进行提示框展示。
86.提示框创建单元5，用于根据预设样式设置tooltip组件，通过所述tooltip组件创建所述提示框，并基于所述提示框进行所述目标标题的展示；提示框创建单元5将创建的提示框发送至父级元素获取单元1和提示框展示单元4。
87.本实施例提供的一种提示框展示的系统，在已经展示完全内容时自动不再展示提示框，而在未展示完全内容时可自动展示提示框，实现了提示框的合理展示，减少了提示框展示的冗余程度。
88.参考图5，本实施例还提供一种计算机设备，包括存储器12、处理器11以及存储在所述存储器12上并可在所述处理器11上运行的计算机程序，所述处理器11执行所述计算机程序时实现如上所述的提示框展示的方法。
89.设备可以包括处理器11以及存储有计算机程序指令的存储器12。具体地，上述处理器11可以包括中央处理器(cpu)，或者特定集成电路(application specific integrated circuit，简称为asic)，或者可以被配置成实施本申请实施例的一个或多个集成电路。
90.其中，存储器12可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器12可包括硬盘驱动器(hard disk drive，简称为hdd)、软盘驱动器、固态驱动器(solid state drive，简称为ssd)、闪存、光盘、磁光盘、磁带或通用串行总线(universal serial bus，简称为usb)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器12可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器12可在数据处理装置的内部或外部。在特定实施例中，存储器12是非易失性(non
‑
volatile)存储器。在特定实施例
中，存储器12包括只读存储器(read
‑
only memory，简称为rom)和随机存取存储器(random access memory，简称为ram)。在合适的情况下，该rom可以是掩模编程的rom、可编程rom(programmable read
‑
only memory，简称为prom)、可擦除prom(erasable programmable read
‑
only memory，简称为eprom)、电可擦除prom(electrically erasable programmable read
‑
only memory，简称为eeprom)、电可改写rom(electrically alterable read
‑
only memory，简称为earom)或闪存(flash)或者两个或更多个以上这些的组合。在合适的情况下，该ram可以是静态随机存取存储器(static random
‑
access memory，简称为sram)或动态随机存取存储器(dynamic random access memory，简称为dram)，其中，dram可以是快速页模式动态随机存取存储器(fast page mode dynamic random access memory，简称为fpmdram)、扩展数据输出动态随机存取存储器(extended date out dynamic random access memory，简称为edodram)、同步动态随机存取内存(synchronous dynamic random
‑
access memory，简称sdram)等。
91.存储器12可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器11所执行的可能的计算机程序指令。
92.处理器11通过读取并执行存储器12中存储的计算机程序指令，以实现上述实施例中的任意一种提示框展示的方法。
93.在其中一些实施例中，计算机设备还可包括通信接口13和总线10。其中，参考图5，处理器11、存储器12、通信接口13通过总线10连接并完成相互间的通信。通信接口13用于实现本申请实施例中各模块、装置、单元和/或设备之间的通信。通信端口13还可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。
94.总线10包括硬件、软件或两者，将电子设备的部件彼此耦接在一起。总线10包括但不限于以下至少之一：数据总线(data bus)、地址总线(address bus)、控制总线(control bus)、扩展总线(expansion bus)、局部总线(local bus)。举例来说而非限制，总线10可包括图形加速接口(accelerated graphics port，简称为agp)或其他图形总线、增强工业标准架构(extended industry standard architecture，简称为eisa)总线、前端总线(front side bus，简称为fsb)、超传输(hyper transport，简称为ht)互连、工业标准架构(industry standard architecture，简称为isa)总线、无线带宽(infiniband)互连、低引脚数(low pin count，简称为lpc)总线、存储器总线、微信道架构(micro channel architecture，简称为mca)总线、外围组件互连(peripheral component interconnect，简称为pci)总线、pci
‑
express(pci
‑
x)总线、串行高级技术附件(serial advanced technology attachment，简称为sata)总线、视频电子标准协会局部(video electronics standards association local bus，简称为vlb)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线10可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。
95.另外，结合上述实施例中的提示框展示的方法，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种提示框展示的方法。
96.以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技
术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。