CN111736833A

CN111736833A - 弹窗组件的生成方法、系统、电子设备和存储介质

Info

Publication number: CN111736833A
Application number: CN202010592479.8A
Authority: CN
Inventors: 常兵本; 蔡磊
Original assignee: Ctrip Computer Technology Shanghai Co Ltd
Current assignee: Ctrip Computer Technology Shanghai Co Ltd
Priority date: 2020-06-24
Filing date: 2020-06-24
Publication date: 2020-10-02
Anticipated expiration: 2040-06-24
Also published as: CN111736833B

Abstract

本发明公开了一种弹窗组件的生成方法、系统、电子设备和存储介质，生成方法包括：基于层叠样式表确定所述弹窗组件的样式，所述样式包括所述弹窗组件的标题的样式和尾部的样式；基于jQuery文件确定所述弹窗组件的中间部分的文字，所述中间部分位于所述标题和所述尾部之间；根据所述样式和所述文字生成所述弹窗组件。本发明的弹窗组件的生成方法，基于CSS+jQuery实现的弹窗组件，统一了弹窗组件的整体风格，简化了弹窗组件的配置过程，降低了开发门槛，重复应用时不需要重新编写代码，减少了重复劳动，通用性较强。

Description

弹窗组件的生成方法、系统、电子设备和存储介质

技术领域

本发明涉及软件开发领域，尤其涉及一种弹窗组件的生成方法、系统、电子设备和存储介质。

背景技术

弹窗是一种常用的提示方式，终端通过在页面上弹出并展示弹窗以向用户进行消息提示，web(全球广域网)系统开发中使用弹窗对用户的操作做出引导或者规范。现有的弹窗组件是通过jQuery(一种JavaScript框架)和CSS(层叠样式表)独立实现的，整体风格不一，重复应用时需要重新编写代码，通用性差，浪费开发资源；实现模式相对单一，且内容和标题不可定制；不支持二次开发，不能灵活配置。

发明内容

本发明要解决的技术问题是为了克服现有技术中弹窗组件风格不统一，内容和标题不可定制和不能二次开发的缺陷，提供一种弹窗组件的生成方法、系统、电子设备和存储介质。

本发明是通过下述技术方案来解决上述技术问题：

一种弹窗组件的生成方法，包括：

基于层叠样式表确定所述弹窗组件的样式，所述样式包括所述弹窗组件的标题的样式和尾部的样式；

基于jQuery文件确定所述弹窗组件的中间部分的文字，所述中间部分位于所述标题和所述尾部之间；

根据所述样式和所述文字生成所述弹窗组件。

较佳地，所述标题的样式包括所述标题的字体、背景颜色和文字的间距中的至少一种；

所述尾部的样式包括所述尾部的字体、背景颜色、文字的间距、按钮的颜色、按钮的位置中的至少一种；

和/或，

所述层叠样式表的数量为多个；

所述基于层叠样式表确定所述弹窗组件的样式的步骤包括：

基于层叠样式表总文件确定所述弹窗组件的样式，所述层叠样式表总文件由多个所述层叠样式表封装得到。

较佳地，所述jQuery文件的数量为多个，所述基于jQuery文件确定所述弹窗组件的中间部分的文字的步骤包括：

基于jQuery总文件确定所述弹窗组件的中间部分的文字，其中，所述jQuery总文件由多个所述jQuery文件封装得到；

和/或，

所述基于jQuery总文件确定所述弹窗组件的中间部分的文字的步骤包括：

通过jQuery总文件中的api(应用程序接口)append(一种函数)将预编辑的html(超文本标记语言)文本添加到所述弹窗组件的中间部分以确定所述弹窗组件的中间部分的文字。

较佳地，所述生成方法还包括：

将所述按钮绑定相应的事件以形成动态按钮。

一种弹窗组件的生成系统，包括：

样式确定模块，用于基于层叠样式表确定所述弹窗组件的样式，所述样式包括所述弹窗组件的标题的样式和尾部的样式；

文字确定模块，用于基于jQuery文件确定所述弹窗组件的中间部分的文字，所述中间部分位于所述标题和所述尾部之间；

弹窗组件生成模块，根据所述样式和所述文字生成所述弹窗组件。

和/或，

所述层叠样式表的数量为多个；

所述样式确定模块包括样式确定单元，所述样式确定单元用于基于层叠样式表总文件确定所述弹窗组件的样式，所述层叠样式表总文件由多个所述层叠样式表封装得到。

较佳地，所述jQuery文件的数量为多个，所述文字确定模块包括文字确定单元，所述文字确定单元用于基于jQuery总文件确定所述弹窗组件的中间部分的文字，其中，所述jQuery总文件由多个所述jQuery文件封装得到；

和/或，

所述文字确定单元用于通过jQuery总文件中的api append将预编辑的html文本添加到所述弹窗组件的中间部分以确定所述弹窗组件的中间部分的文字。

较佳地，所述生成系统还包括：

绑定按钮模块，用于将所述按钮绑定相应的事件以形成动态按钮。

一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述所述的弹窗组件的生成方法。

一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现上述所述的弹窗组件的生成方法的步骤。

本发明的积极进步效果在于：本发明基于CSS+jQuery实现弹窗组件，统一了弹窗组件的整体风格，简化了弹窗组件的配置过程，降低了开发门槛；进一步的，先通过CSS定义整体弹窗组件样式，再通过jQuery将已经做好的html(超文本标记语言)文本追加到弹窗组件的内容中，重复应用时不需要重新编写代码，减少了重复劳动，通用性较强；进一步的，弹窗组件的内容和标题可定制，支持二次开发，能灵活配置，提高了开发效率。

附图说明

图1为根据本发明实施例1的弹窗组件的生成方法的流程图。

图2为根据本发明实施例2的弹窗组件的生成方法的流程图。

图3为根据本发明实施例2的弹窗组件的生成方法实际应用时的效果图。

图4为根据本发明实施例2的弹窗组件的生成方法应用编辑图。

图5为根据本发明实施例3的弹窗组件的生成系统的模块示意图。

图6为根据本发明实施例4的弹窗组件的生成系统的模块示意图。

图7为根据本发明实施例5的电子设备的结构示意图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

实施例1

如图1所示，本实施例的弹窗组件的生成方法，包括以下步骤：

S100、基于层叠样式表确定弹窗组件的样式，样式包括弹窗组件的标题的样式和尾部的样式；

S200、基于jQuery文件确定弹窗组件的中间部分的文字，中间部分位于标题和尾部之间；

S300、根据样式和文字生成弹窗组件。

本实施例的弹窗组件的生成方法基于CSS+jQuery实现弹窗组件，统一了弹窗组件的整体风格，简化了弹窗组件的配置过程，降低了开发门槛。

实施例2

如图2所示，本实施例的弹窗组件的生成方法是对实施例1的进一步改进，具体地：

步骤S100具体包括：

S101、基于层叠样式表总文件确定弹窗组件的样式，层叠样式表总文件由多个层叠样式表封装得到；

标题的样式包括标题的字体、背景颜色和文字的间距中的至少一种；

尾部的样式包括尾部的字体、背景颜色、文字的间距、按钮的颜色、按钮的位置中的至少一种。

本实施例的弹窗组件的生成方法，先通过CSS定义整体弹窗的样式，包括弹窗的边框和位置、弹窗组件的头部和尾部、头部和尾部的标题部分的字体、文字的间距、背景颜色、弹窗组件中按钮的颜色和按钮的位置等。弹窗标题可以由使用者自己定制。将所有CSS文件封装成一个CSS总文件。

步骤S200具体包括：

S201、jQuery文件的数量为多个，基于jQuery总文件确定弹窗组件的中间部分的文字，其中，jQuery总文件由多个jQuery文件封装得到。

通过jQuery总文件中的api append将预编辑的html文本添加到弹窗组件的中间部分以确定弹窗组件的中间部分的文字。

本实施例的弹窗组件的生成方法，弹窗组件的中间部分内容可任意定制，只需控制中间的位置。具体地，通过jquery文件中的api append将已经做好的html文本追加到弹窗组件的中间部分中，生成弹窗组件的中间部分的文字，html文本的内容可任意编辑以实现多样化的弹窗组件内容。将所有jQuery文件封装成一个jQuery总文件。

本实施例的弹窗组件的生成方法还包括以下步骤：

S400、将按钮绑定相应的事件以形成动态按钮。

具体地，通过bind(一种绑定方法)方法给弹窗组件的中间部分各个按钮绑定相应的事件，整体完成之后通过匿名对象暴露对应的回调，以实现弹窗的中间部分的功能。使用者只需关心回调函数中的业务逻辑即可，实现了弹窗按钮的自定制，提高了开发效率。比如下面为包括回调函数定义的匿名对象的部分代码：

本实施例的弹窗组件的生成方法具体应用如下：

如图3所示，本实施例的弹窗组件包括标题、内容、尾部三部分。标题部分的文字是“拒绝预订”，文字的间距是26磅，背景颜色是浅灰色。弹窗组件尾部包括两个按钮，两个按钮分别是“拒绝预订”和“取消”，按钮的颜色可以是蓝色或者其他颜色，按钮的位置是居中排列。尾部的按钮是动态按钮组件，支持回调函数，回调函数可以按照业务逻辑实现不同的功能，比如图3中的“拒绝预订”按钮支持放置数据到后端，“取消”按钮不做任何操作，仅仅是关闭当前弹窗。弹窗组件的内容是请选择拒绝订单原因，原因包括：满房、房价不对、该房型不合作、需提供担保和其他。弹窗组件的内容通过jQuery文件中api append将预编辑的html文本添加到弹窗组件的内容中以形成内容部分的文字，该文字可任意定制。弹窗组件的内容通过jQuery居中定位。

图3中的弹窗组件通过jQuery+CSS实现，只需要引用一个CSS文件和一个jQuery文件即可实现。

如图4所示，弹窗内容编辑部分“我是内容1.”、“我是内容2.”和“我是内容3.”是html文本，使用者可任意定制。请输入弹窗Title(标题)部分显示该部分可由使用者自己定制。请选择弹窗Footer(页脚)部分显示是动态按钮，使用者也可根据实际需要自定制按钮和按钮对应的事件。

本实施例的弹窗组件的生成方法先通过CSS定义整体弹窗组件样式，再通过jQuery将已经做好的html文本追加到弹窗组件的内容中，动态按钮绑定回调函数，弹窗组件的可以按照自己的意愿编辑弹窗组件的内容，弹窗组件的标题和弹窗组件内的按钮也可以由使用者自己定制；本实施例的弹窗组件的生成方法统一了弹窗组件的风格，重复应用时不需要重新编写代码，减少了重复劳动，使用简单，通用性较强；进一步的，弹窗组件的内容和标题可定制，支持二次开发，能灵活配置，提高了开发效率。

实施例3

如图5所示，本实施例的弹窗组件的生成系统，包括以下模块：

样式确定模块1，用于基于层叠样式表确定弹窗组件的样式，样式包括弹窗组件的标题的样式和尾部的样式；

文字确定模块2，用于基于jQuery文件确定弹窗组件的中间部分的文字，中间部分位于标题和尾部之间；

弹窗组件生成模块3，根据样式和文字生成弹窗组件。

本实施例的弹窗组件的生成系统基于CSS+jQuery实现弹窗组件，统一了弹窗组件的整体风格，简化了弹窗组件的配置过程，降低了开发门槛。

实施例4

如图6所示，本实施例的弹窗组件的生成系统是对实施例3的进一步改进，具体地：

层叠样式表的数量为多个；

样式确定模块1包括样式确定单元11，样式确定单元11用于基于层叠样式表总文件确定弹窗组件的样式，层叠样式表总文件由多个层叠样式表封装得到。

本实施例的弹窗组件的生成系统，先通过CSS定义整体弹窗的样式，包括弹窗的边框和位置、弹窗组件的头部和尾部、头部和尾部的标题部分的字体、文字的间距、背景颜色、弹窗组件中按钮的颜色和按钮的位置等。弹窗标题可以由使用者自己定制。将所有CSS文件封装成一个CSS总文件。

jQuery文件的数量为多个，文字确定模块2包括文字确定单元21，文字确定单元21用于基于jQuery总文件确定弹窗组件的中间部分的文字，其中，jQuery总文件由多个jQuery文件封装得到；

本实施例的弹窗组件的生成系统，弹窗组件的中间部分内容可任意定制，只需控制中间的位置。具体地，通过jquery文件中的api append将已经做好的html文本追加到弹窗组件的中间部分中，生成弹窗组件的中间部分的文字，html文本的内容可任意编辑以实现多样化的弹窗组件内容。将所有jQuery文件封装成一个jQuery总文件。

本实施例的弹窗组件的生成系统还包括以下模块：

所述生成系统还包括：

绑定按钮模块4，用于将按钮绑定相应的事件以形成动态按钮。

具体地，通过bind方法给弹窗组件的中间部分各个按钮绑定相应的事件，整体完成之后通过匿名对象暴露对应的回调，以实现弹窗的中间部分的功能。使用者只需关心回调函数中的业务逻辑即可，实现了弹窗按钮的自定制，提高了开发效率。比如下面为包括回调函数定义的匿名对象的部分代码：

本实施例的弹窗组件的生成系统具体应用与实施例2相同，此处不再赘述。

本实施例的弹窗组件的生成系统先通过CSS定义整体弹窗组件样式，再通过jQuery将已经做好的html文本追加到弹窗组件的内容中，动态按钮绑定回调函数，弹窗组件的可以按照自己的意愿编辑弹窗组件的内容，弹窗组件的标题和弹窗组件内的按钮也可以由使用者自己定制；本实施例的弹窗组件的生成方法统一了弹窗组件的风格，重复应用时不需要重新编写代码，减少了重复劳动，使用简单，通用性较强；进一步的，弹窗组件的内容和标题可定制，支持二次开发，能灵活配置，提高了开发效率。

实施例5

图7为本发明实施例5提供的一种电子设备的结构示意图。电子设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现实施例1或2的弹窗模组的生成的方法。图7显示的电子设备30仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，电子设备30可以以通用计算设备的形式表现，例如其可以为服务器设备。电子设备30的组件可以包括但不限于：上述至少一个处理器31、上述至少一个存储器32、连接不同系统组件(包括存储器32和处理器31)的总线33。

总线33包括数据总线、地址总线和控制总线。

存储器32可以包括易失性存储器，例如随机存取存储器(RAM)321和/或高速缓存存储器322，还可以进一步包括只读存储器(ROM)323。

存储器32还可以包括具有一组(至少一个)程序模块324的程序/实用工具325，这样的程序模块324包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

处理器31通过运行存储在存储器32中的计算机程序，从而执行各种功能应用以及数据处理，例如本发明实施例1或2所提供的弹窗模组的生成的方法。

电子设备30也可以与一个或多个外部设备34(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口35进行。并且，模型生成的设备30还可以通过网络适配器36与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器36通过总线33与模型生成的设备30的其它模块通信。应当明白，尽管图中未示出，可以结合模型生成的设备30使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID(磁盘阵列)系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了电子设备的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

实施例6

本实施例提供了一种计算机可读存储介质，其上存储有计算机程序，程序被处理器执行时实现实施例1或2所提供的弹窗模组的生成的方法步骤。

其中，可读存储介质可以采用的更具体可以包括但不限于：便携式盘、硬盘、随机存取存储器、只读存储器、可擦拭可编程只读存储器、光存储器件、磁存储器件或上述的任意合适的组合。

在可能的实施方式中，本发明还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行实现实施例1或2的弹窗模组的生成的方法中的步骤。

其中，可以以一种或多种程序设计语言的任意组合来编写用于执行本发明的程序代码，程序代码可以完全地在用户设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户设备上部分在远程设备上执行或完全在远程设备上执行。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

Claims

1.一种弹窗组件的生成方法，其特征在于，包括：

根据所述样式和所述文字生成所述弹窗组件。

2.如权利要求1所述的弹窗组件的生成方法，其特征在于，

所述标题的样式包括所述标题的字体、背景颜色和文字的间距中的至少一种；

和/或，

所述层叠样式表的数量为多个；

所述基于层叠样式表确定所述弹窗组件的样式的步骤包括：

3.如权利要求1所述的弹窗组件的生成方法，其特征在于，

所述jQuery文件的数量为多个，所述基于jQuery文件确定所述弹窗组件的中间部分的文字的步骤包括：

和/或，

通过jQuery总文件中的api append将预编辑的html文本添加到所述弹窗组件的中间部分以确定所述弹窗组件的中间部分的文字。

4.如权利要求2所述的弹窗组件的生成方法，其特征在于，所述生成方法还包括：

将所述按钮绑定相应的事件以形成动态按钮。

5.一种弹窗组件的生成系统，其特征在于，包括：

6.如权利要求5所述的弹窗组件的生成系统，其特征在于，

和/或，

所述层叠样式表的数量为多个；

7.如权利要求5所述的弹窗组件的生成系统，其特征在于，所述jQuery文件的数量为多个，所述文字确定模块包括文字确定单元，所述文字确定单元用于基于jQuery总文件确定所述弹窗组件的中间部分的文字，其中，所述jQuery总文件由多个所述jQuery文件封装得到；

和/或，

8.如权利要求6所述的弹窗组件的生成系统，其特征在于，所述生成系统还包括：

9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至4中任一项所述的弹窗组件的生成方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1至4中任一项所述的弹窗组件的生成方法的步骤。