一种基于JavaScript实现通用弹窗页面的方法与流程

本发明涉及通用页面技术领域，具体的说，是一种基于javascript实现通用弹窗页面的方法。

背景技术：

在实际生产工作中，每生成一个页面，需要进行相应的html代码编写。如果许多用户都要使用这个页面时，都得重复写该html代码。因此提出一个适用于所有设备以及可复用的html通用网页生成方法很重要。

技术实现要素：

本发明的目的在于提供一种基于javascript实现通用弹窗页面的方法，省去了在javascript编程过程中每写一个页面就要编写很多html代码及文件的工作，同时使生成页面的html代码用过javascript语言抽象化，复用性高，减少用户工作量。

本发明通过下述技术方案实现：一种基于javascript实现通用弹窗页面的方法，用户使用javascript预配置变量、方法生成一套通用的弹窗页面模板，再通过javascript进行配置信息settings的传递，生成用户自定义的html弹窗网页。

进一步地，为了更好的实现本发明，具体包括以下步骤：

步骤f1：用户定义一个公共的javascript文件，用于存放预配置的页面生成方法；

步骤f2：在公共的javascript文件中定义一个页面的基类；

步骤f3：使用javascript语言将页面中的一种弹窗声明为一个新的类，用于继承所述基类；

步骤f4：创建一个页面的对象，生成弹窗页面模板；

步骤f5：调用页面模板，传递配置参数，生成通用弹窗页面。

进一步地，为了更好的实现本发明，所述页面为表单弹窗。

进一步地，为了更好的实现本发明，所述步骤f1具体包括以下步骤：

步骤f11：用户打开sublime代码编辑器，点击新建文件；

步骤f12：在sublime代码编辑器右下角选择javascript语言；

步骤f13：点击保存，文件名为main.js。

进一步地，为了更好的实现本发明，所述步骤f2具体包括以下步骤：

步骤f21：在公共的javascript文件中定义弹窗基类的变量；

所述步骤f21具体包括以下步骤：

步骤f21-1：定义代表弹窗基类的变量；

步骤f21-2：定义弹窗基类的对象变量；

步骤f21-3：定义初始html代码为空值；

步骤f21-4：定义弹窗基类的标题变量；

步骤f21-5：定义弹窗基类的回调函数；

步骤f22：定义弹窗常用事件的方法；

所述步骤f22具体包括以下步骤：

步骤f22-1：定义关闭弹窗的方法；

步骤f22-2：定义设置弹窗标题的方法；

步骤f22-3：定义弹窗中显示、隐藏提示信息的方法；

步骤f22-4：绑定弹窗弹出、点击、关闭、聚焦事件的方法；

步骤f22-5：绑定弹窗esc退出事件并关闭表单弹窗的方法；

步骤f23：定义将html代码转换为可视化页面的方法。

进一步地，为了更好的实现本发明，所述步骤f3具体包括以下步骤：

步骤f31：使用javascript语言定义表单弹窗模板类的变量；

所述步骤f31具体包括以下步骤：

步骤f31-1：定义代表表单弹窗模板类的变量；

步骤f31-2：定义表单弹窗模板类继承表单弹窗基类；

步骤f31-3：定义初始化通用html页面的方法；

步骤f31-4：定义调用表单弹窗基类的方法；

步骤f31-5：定义表单弹窗模板类的回调函数；

步骤f32：根据配置信息settings定义生成表单元素的方法；

所述步骤f32具体包括以下步骤：

步骤f32-1：根据配置信息settings对表单元素进行初始化定义；

步骤f32-2：定义设置配置信息settings的标题的方法；

步骤f32-3：定义设置配置信息settings的表格大小的方法；

步骤f33：定义表单的回调函数；

所述步骤f33具体包括以下步骤：

步骤f33-1：根据配置信息settings生成相应的表单元素类型；

步骤f33-2：在表单弹窗模板类中定义表单的回调函数；

步骤f34：根据配置信息settings改变表单按钮名称。

进一步地，为了更好的实现本发明，所述表单元素包括下拉框、输入框、文本框。

进一步地，为了更好的实现本发明，所述步骤f4具体包括以下步骤：

步骤f41：表单弹窗模板类继承弹窗基类；

步骤f42：基于表单弹窗模板类创建表单弹窗的对象；

步骤f43：向表单弹窗的对象中传入配置信息settings；

步骤f44：调用表单弹窗模板类中的初始化定义的表单元素，创建表单元素。

进一步地，为了更好的实现本发明，所述步骤f5具体是指：

根据传入表单弹窗模板类的配置信息settings创建html通用网页。

进一步地，为了更好的实现本发明，所述步骤f32-4具体包括以下步骤：

步骤f32-4-1：定义调用表单元素的方法；

步骤f32-4-2：定义表单元素的回调函数；

步骤f32-4-3：定义调用表单弹窗基类中点击事件的方法。

工作原理：

1.用户定义一个公共的javascript文件，用于存放预配置的页面生成方法。

2.在公共的javascript文件中定义一个页面的基类。

3.使用javascript语言将页面声明为一个模板类，用于继承所述基类。

4.创建一个页面的对象，生成页面模板。

5.调用页面模板，传递配置参数，生成通用页面。

本发明与现有技术相比，具有以下优点及有益效果：

本发明省去了在javascript编程过程中每写一个页面就要编写很多html代码及文件的工作，同时使生成页面的html代码用过javascript语言抽象化，复用性高，减少用户工作量。同时，将html页面的动态操作与数据库交互等行为处理放入配置信息settings中，形成通用页面模板，用户只需要进行基本配置即可生成一套可操作的通用页面。

附图说明

图1为本发明工作流程图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例1：

本发明通过下述技术方案实现，如图1所示，一种基于javascript实现通用弹窗页面的方法，用户使用javascript预配置变量、方法生成一套通用的弹窗页面模板，再通过javascript进行配置信息settings的传递，生成用户自定义的html弹窗网页。

需要说明的是，通过上述改进，本发明提出一种基于javascript实现通用弹窗页面的方法，通过javascript语言来预设置生成一套通用弹窗页面模板的方法，在将配置信息settings传入弹窗页面模板，即可生成用户需要的弹窗页面。

本发明省去了在javascript编程过程中每写一个页面就要编写很多html代码及文件的工作，同时使生成页面的html代码用过javascript语言抽象化，复用性高，减少用户工作量。同时，将html页面的动态操作与数据库交互等行为处理放入配置信息settings中，形成通用弹窗页面模板，用户只需要进行基本配置即可生成一套可操作的通用弹窗页面。

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例2：

本实施例在上述实施例的基础上做进一步优化，如图1所示，具体包括以下步骤：

步骤f1：用户定义一个公共的javascript文件，用于存放预配置的页面生成方法；

步骤f2：在公共的javascript文件中定义一个页面的基类；

步骤f3：使用javascript语言将页面中的一种弹窗声明为一个新的类，用于继承所述基类；

步骤f4：创建一个页面的对象，生成弹窗页面模板；

步骤f5：调用页面模板，传递配置参数，生成通用弹窗页面。

需要说明的是，通过上述改进，用户定义一个公共的javascript文件，用于存放预配置的弹窗页面生成方法，在公共文件中定义一个基类，该基类中包含生成html弹窗网页的方法，以及绑定一系列弹窗网页弹出、聚焦、关闭、信息提示等的方法。

对于一个模板弹窗定义一种新的类，即模板类，用于继承页面的基类，可定义多个弹窗模板类。所述模板类中包含定义初始化html弹窗网页的代码；根据自身模板类的信息以及后期传入的配置信息settings进行html弹窗网页初始化操作。

创建一个页面的对象，用于调用弹窗页面的基类和模板类，即可生成一个用户自定义的弹窗网页模板。调用生成的弹窗网页模板，往其中传入配置信息settings，最终生成通用弹窗页面。

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例3：

本实施例在上述实施例的基础上做进一步优化，如图1所示，所述页面为表单弹窗；所述步骤f1具体包括以下步骤：

步骤f11：用户打开sublime代码编辑器，点击新建文件；

步骤f12：在sublime代码编辑器右下角选择javascript语言；

步骤f13：点击保存，文件名为main.js。

需要说明的是，通过上述改进，步骤f1主要完成定义一个javascript文件，用于放置后续页面的生成方法。生成的网页有表单弹窗、表格、确认框、加载进度条等形式，本发明以生成表单弹窗为例。

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例4：

本实施例在上述实施例的基础上做进一步优化，如图1所示，所述步骤f2具体包括以下步骤：

步骤f21：在公共的javascript文件中定义弹窗基类的变量；

所述步骤f21具体包括以下步骤：

步骤f21-1：定义代表弹窗基类的变量；

步骤f21-2：定义弹窗基类的对象变量；

步骤f21-3：定义初始html代码为空值；

步骤f21-4：定义弹窗基类的标题变量；

步骤f21-5：定义弹窗基类的回调函数；

步骤f22：定义弹窗常用事件的方法；

所述步骤f22具体包括以下步骤：

步骤f22-1：定义关闭弹窗的方法；

步骤f22-2：定义设置弹窗标题的方法；

步骤f22-3：定义弹窗中显示、隐藏提示信息的方法；

步骤f22-4：绑定弹窗弹出、点击、关闭、聚焦事件的方法；

步骤f22-5：绑定弹窗esc退出事件并关闭表单弹窗的方法；

步骤f23：定义将html代码转换为可视化页面的方法。

需要说明的是，通过上述改进，首先在javascript文件中定义弹窗的基类变量和一系列常用事件的方法，这些变量及方法是最底层的，是一个独立的方法，可被继承这个基类的其他类进行调用和创建，比如被表单弹窗模板类继承。定义弹窗的基类变量包括一系列初始变量的定义，比如：

以及定义弹窗常用事件的方法，比如：

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例5：

本实施例在上述实施例的基础上做进一步优化，如图1所示，所述步骤f3具体包括以下步骤：

步骤f31：使用javascript语言定义表单弹窗模板类的变量；

所述步骤f31具体包括以下步骤：

步骤f31-1：定义代表表单弹窗模板类的变量；

步骤f31-2：定义表单弹窗模板类继承弹窗基类；

步骤f31-3：定义初始化通用html页面的方法；

步骤f31-4：定义调用弹窗基类的方法；

步骤f31-5：定义表单弹窗模板类的回调函数；

步骤f32：根据配置信息settings定义生成表单元素的方法；

所述步骤f32具体包括以下步骤：

步骤f32-1：根据配置信息settings对表单元素进行初始化定义；

步骤f32-2：定义设置配置信息settings的标题的方法；

步骤f32-3：定义设置配置信息settings的表格大小的方法；

步骤f33：定义表单的回调函数；

所述步骤f33具体包括以下步骤：

步骤f33-1：根据配置信息settings生成相应的表单元素类型；

步骤f33-2：在表单弹窗模板类中定义表单的回调函数；

步骤f34：根据配置信息settings改变表单按钮名称。

需要说明的是，通过上述改进，定义一个表单弹窗的模板类，并继承弹窗的基类，首先，定义表单弹窗模板类的变量，即：

再定义html字符串，即定义初始化通用html页面的方法：

_this.html＝'<divclass＝"modal">//定义初始化通用html页面的方法

对表单弹窗的模板类进行基本的定义后，开始定义调用基类生成表单弹窗的方法：

_this.create()；//调用表单弹窗基类中定义将html代码转换为可视化页面的方法

然后定义表单弹窗模板类的回调函数_this.setcallback，当用户点击页面按钮时执行该回调函数，进行表单弹窗模板类的提交和处理：

_this.setcallback＝function(){

}//定义表单弹窗模板类的回调函数

在表单弹窗的模板类中定义生成表单元素的方法_this.createformfieldnode()，该方法根据后续传入的配置信息settings，并使用switchcase语句进行settings匹配，生成相应的表单元素。所述表单元素包括输入框input、下拉框select、文本框textarea等元素，同时可动态地进行配置信息settings选中和传输。然后定义配置信息settings进行初始化操作的方法_this.initdialog，根据后续创建表单弹窗时传入模板类的配置信息settings进行生成表单表单弹创的初始化操作。

再定义设置配置信息settings的标题的方法settings.dialogtitle，即可在创建表单弹窗时，根据传入的配置信息settings进行生成标题的初始化操作。传入settings.dialogtitle后，将该值赋给基类中表单弹窗的标题变量_this.title，再调用基类中的设置表单弹窗基类的方法_this.settitle，重新设置表单弹窗的标题。

定义设置配置信息settings的表格大小的方法settings.boxsize，即可在创建表单弹窗时，根据传入的配置信息settings进行生成表格的初始化操作。接着定义创建表单元素的方法settings.htmldoms，再调用该方法时，即可生成表单元素。

最后定义调用表单元素的方法settings.formcallback，以及定义调用基类中的点击事件的方法_this.bindevent()，在生成表单弹窗页面模板的时候调用上述方法，生成表单弹窗弹出、点击、关闭、聚焦等事件。

上述定义生成表单元素的方法代码大致为：

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例6：

本实施例在上述实施例的基础上做进一步优化，如图1所示，所述步骤f4具体包括以下步骤：

步骤f41：表单弹窗模板类继承弹窗基类；

步骤f42：基于表单弹窗模板类创建表单弹窗的对象；

步骤f43：向表单弹窗的对象中传入配置信息settings；

步骤f44：调用表单弹窗模板类中的初始化定义的表单元素，创建表单元素。

需要说明的是，通过上述改进，所有表单弹窗继承弹窗基类，并创建一个表单弹窗的对象，用于执行前述表单弹窗的基类和模板类，正式创建页面模板，并向页面模板中传入配置信息settings，生成表单元素。

创建表单弹窗对象的代码大致为：

本实施例的其他部分与上述实施例相同，故不再赘述。

实施例7：

本实施例在上述实施例的基础上做进一步优化，如图1所示，所述步骤f5具体是指：

根据传入表单弹窗模板类的配置信息settings创建html通用网页。

需要说明的是，通过上述改进，使用javascript语言在html页面代码的<script>标签中传入配置信息settings，即可成功创建html通用网页，操作代码大致为：

本实施例的其他部分与上述实施例相同，故不再赘述。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。