一种基于JavaScript实现通用弹窗页面的方法技术

本发明专利技术公开了一种基于JavaScript实现通用弹窗页面的方法，用户使用JavaScript预配置生成一套通用的页面模板，再通过JavaScript进行配置信息settings的传递，生成用户自定义的HTML网页。本发明专利技术省去了在JavaScript编程过程中每写一个页面就要编写很多HTML代码及文件的工作，同时使生成页面的HTML代码用过JavaScript语言抽象化，复用性高，减少用户工作量。同时，将HTML页面的动态操作与数据库交互等行为处理放入配置信息settings中，形成通用页面模板，用户只需要进行基本配置即可生成一套可操作的通用页面。

A Method of Implementing General Bullet Window Page Based on JavaScript

The invention discloses a method of realizing a universal pop-up window page based on JavaScript. Users use JavaScript to pre-configure a set of universal page templates, and then transfer configuration information settings through JavaScript to generate user-defined HTML pages. The invention eliminates the work of writing many HTML codes and files for every page in the process of JavaScript programming. At the same time, the HTML codes for generating pages have been abstracted by JavaScript language, and have high reusability and reduce the workload of users. At the same time, the dynamic operation of HTML pages and database interaction behavior processing are put into configuration information settings to form a universal page template. Users only need to make basic configuration to generate a set of operable universal pages.

【技术实现步骤摘要】
一种基于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：调用页面模板，本文档来自技高网...

【技术保护点】
1.一种基于JavaScript实现通用弹窗页面的方法，其特征在于：用户使用JavaScript预配置变量、方法生成一套通用的弹窗页面模板，再通过JavaScript进行配置信息settings的传递，生成用户自定义的HTML弹窗网页。

【技术特征摘要】
1.一种基于JavaScript实现通用弹窗页面的方法，其特征在于：用户使用JavaScript预配置变量、方法生成一套通用的弹窗页面模板，再通过JavaScript进行配置信息settings的传递，生成用户自定义的HTML弹窗网页。2.根据权利要求1所述的一种基于JavaScript实现通用弹窗页面的方法，其特征在于：具体包括以下步骤：步骤F1：用户定义一个公共的JavaScript文件，用于存放预配置的页面生成方法；步骤F2：在公共的JavaScript文件中定义一个页面的基类；步骤F3：使用JavaScript语言将页面中的一种弹窗声明为一个新的类，用于继承所述基类；步骤F4：创建一个页面的对象，生成弹窗页面模板；步骤F5：调用页面模板，传递配置参数，生成通用弹窗页面。3.根据权利要求2所述的一种基于JavaScript实现通用弹窗页面的方法，其特征在于：所述页面为表单弹窗。4.根据权利要求3所述的一种基于JavaScript实现通用弹窗页面的方法，其特征在于：所述步骤F1具体包括以下步骤：步骤F11：用户打开sublime代码编辑器，点击新建文件；步骤F12：在sublime代码编辑器右下角选择JavaScript语言；步骤F13：点击保存，文件名为main.js。5.根据权利要求4所述的一种基于JavaScript实现通用弹窗页面的方法，其特征在于：所述步骤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代码转换为可视化页面的方法。6.根据权利要求5所...

【专利技术属性】
技术研发人员：刘佳，范渊，吴永越，郑学新，刘韬，
申请(专利权)人：成都安恒信息技术有限公司，
类型：发明
国别省市：四川,51