CN105930166A - 一种基于web界面弹出层的方法 - Google Patents

一种基于web界面弹出层的方法 Download PDF

Info

Publication number
CN105930166A
CN105930166A CN201610299443.4A CN201610299443A CN105930166A CN 105930166 A CN105930166 A CN 105930166A CN 201610299443 A CN201610299443 A CN 201610299443A CN 105930166 A CN105930166 A CN 105930166A
Authority
CN
China
Prior art keywords
web
ejection layer
interface
style
method based
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.)
Granted
Application number
CN201610299443.4A
Other languages
English (en)
Other versions
CN105930166B (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.)
United Communications (suzhou) Co Ltd
Original Assignee
United Communications (suzhou) 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 United Communications (suzhou) Co Ltd filed Critical United Communications (suzhou) Co Ltd
Priority to CN201610299443.4A priority Critical patent/CN105930166B/zh
Publication of CN105930166A publication Critical patent/CN105930166A/zh
Application granted granted Critical
Publication of CN105930166B publication Critical patent/CN105930166B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

本发明公开了一种基于WEB界面弹出层的方法，包括WEB弹出层组件封装、WEB弹出层示例界面制作，多种风格样式文件制作。通过上述，本发明提供的基于WEB界面弹出层的方法，提供了多种风格样式和统一调用的WEB弹出层界面，并将系统提示、信息确认、消息提示显示数秒后消失、自定义交互界面等功能进行统一封装，方便开发人员统一组件，使用较少的API实现多种需求功能，提高开发效率且便于维护，避免多种类型组件同时存在，进而减少网页缓冲时间；编写多个风格样式文件，便于快速选择和修改，统一界面风格。

Description

一种基于 WEB 界面弹出层的方法
技术领域
本发明涉及互联网技术领域的技术领域，尤其涉及一种基于WEB界面弹出层的方法。
背景技术
在如今前端快速发展的时代，如何将产品做得更好得到更多与客户交流的机会，并为客户提供专业的优质服务。用户体验则显得尤为重要。为用户提供最基本的信息状态或操作提示，避免用户误操作，WEB弹出层便被越来越多的开发人员优先选择。
然而现有的技术中，WEB弹出层组件种类很多，为完成用户需求，同个系统中会出现多个WEB弹出层组件。多个同类组件混合在一起便存在着很多问题：（1）缺乏统一性，由于开发人员根据自己所熟悉的组件选择不同方案实现，导致界面会出现多种风格，无法与原有系统界面风格保持一致；（2）缺乏维护性，需要开发人员掌握多种前端知识，才能维护系统，增加了维护成本。
发明内容
本发明主要解决的技术问题是提供一种基于WEB界面弹出层的方法，提供了多种风格样式和统一调用的WEB弹出层界面，并将系统提示、信息确认、消息提示显示数秒后消失、自定义交互界面等功能进行统一封装，方便开发人员统一组件，使用较少的API实现多种需求功能，提高开发效率且便于维护，避免多种类型组件同时存在，进而减少网页缓冲时间；编写多个风格样式文件，便于快速选择和修改，统一界面风格。
为解决上述技术问题，本发明采用的一个技术方案是：提供了一种基于WEB界面弹出层的方法，包括以下具体步骤：
步骤一：使用基于Jquery框架技术$.extend()方法将多种功能封装为一个WEB弹出层组件，并提供API文档组件；
步骤二：制作网页，并将步骤一中封装的WEB弹出层组件引入页面中，根据WEB弹出层组件所提供的API文档组件制作出多个按钮，形成WEB弹出层组件示例页面，为开发人员提供文档示例；
步骤三：采用Sass语言编写样式文件，并为所述文件制作至少3种风格样式，并选择其中一种风格；
步骤四：通过Javascript语言获取封装组件源代码和所选择的风格样式文件，将所选择的样式文件通过工具编译成CSS样式文件；
步骤五：将封装的WEB弹出层组件和编译后的风格样式文件上传至服务器；
步骤六：对照步骤二所述的示例页面，按照步骤一中提供的API文档组件通过Jquery对按钮进行绑定操作，完成WEB界面弹出层交互体验。
在本发明一个较佳实施例中，所述的API文档组件包含系统提示、信息确认、消息提示显示数秒后消失和自定义交互界面功能。
本发明的有益效果是：本发明的基于WEB界面弹出层的方法，提供了多种风格样式和统一调用的WEB弹出层界面，并将系统提示、信息确认、消息提示显示数秒后消失、自定义交互界面等功能进行统一封装，方便开发人员统一组件，使用较少的API实现多种需求功能，提高开发效率且便于维护，避免多种类型组件同时存在，进而减少网页缓冲时间；编写多个风格样式文件，便于快速选择和修改，统一界面风格。
附图说明
为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图，其中：
图1 是本发明基于WEB界面弹出层的方法的一较佳实施例的流程框图。
具体实施方式
下面将对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
如图1所示，本发明实施例包括：
一种基于WEB界面弹出层的方法，包括以下具体步骤：
步骤一：使用基于Jquery框架技术$.extend()方法将多种功能封装为一个WEB弹出层组件，并提供API文档组件；
步骤二：制作网页，并将步骤一中封装的WEB弹出层组件引入页面中，根据WEB弹出层组件所提供的API文档组件制作出多个按钮，形成WEB弹出层组件示例页面，为开发人员提供文档示例；
步骤三：采用Sass语言编写样式文件，并为所述文件制作至少3种风格样式，并选择其中一种风格；
步骤四：通过Javascript语言获取封装组件源代码和所选择的风格样式文件，将所选择的样式文件通过工具编译成CSS样式文件；
步骤五：将封装的WEB弹出层组件和编译后的风格样式文件上传至服务器；
步骤六：对照步骤二所述的示例页面，按照步骤一中提供的API文档组件通过Jquery对按钮进行绑定操作，完成WEB界面弹出层交互体验。
上述中，所述的API文档组件包含系统提示、信息确认、消息提示显示数秒后消失和自定义交互界面功能。
本发明的基于WEB界面弹出层的方法，它包括WEB弹出层组件封装、WEB弹出层示例界面制作，多种风格样式文件制作。
通过将系统提示、信息确认、消息提示显示数秒后消失、自定义交互界面等功能使用$.extend()扩展Jquery方法将其功能封装为一个组件，便于开发人员统一调用。
将封装完成的WEB弹出层组件引入文件中，在WEB示例界面中写入多种弹出层种类的按钮，并使用Jquery技术，根据组件API文档，对示例界面中的按钮进行依次绑定，实现界面中多种弹出层，为开发人员提供组件示例。
使用Sass语言编写弹出层风格样式，提供多种风格样式，便于开发人员快速修改或选择并保持界面的美观性与统一性。
本发明的基于WEB界面弹出层的方法与现有技术相比，具有如下优点：
a:采用WEB界面弹出层统一封装此方法，避免了因页面过多而发生的混乱，减少多个同种组件引入从而提高WEB界面的缓冲加载时间和开发效率，减少维护成本；
b:通过Sass语言为弹出层界面编写多种风格样式，增加界面的美观性，开发人员也可修改Sass样式文件，实现与系统原有风格的统一性。
综上所述，本发明的基于WEB界面弹出层的方法，提供了多种风格样式和统一调用的WEB弹出层界面，并将系统提示、信息确认、消息提示显示数秒后消失、自定义交互界面等功能进行统一封装，方便开发人员统一组件，使用较少的API实现多种需求功能，提高开发效率且便于维护，避免多种类型组件同时存在，进而减少网页缓冲时间；编写多个风格样式文件，便于快速选择和修改，统一界面风格。以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书内容所作的等效结构或等效流程变换，或直接或间接运用在其它相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (2)

1.一种基于WEB界面弹出层的方法，其特征在于，包括以下具体步骤：
步骤一：使用基于Jquery框架技术$.extend()方法将多种功能封装为一个WEB弹出层组件，并提供API文档组件；
步骤二：制作网页，并将步骤一中封装的WEB弹出层组件引入页面中，根据WEB弹出层组件所提供的API文档组件制作出多个按钮，形成WEB弹出层组件示例页面，为开发人员提供文档示例；
步骤三：采用Sass语言编写样式文件，并为所述文件制作至少3种风格样式，并选择其中一种风格；
步骤四：通过Javascript语言获取封装组件源代码和所选择的风格样式文件，将所选择的样式文件通过工具编译成CSS样式文件；
步骤五：将封装的WEB弹出层组件和编译后的风格样式文件上传至服务器；
步骤六：对照步骤二所述的示例页面，按照步骤一中提供的API文档组件通过Jquery对按钮进行绑定操作，完成WEB界面弹出层交互体验。
2.根据权利要求1所述的基于WEB界面弹出层的方法，其特征在于，所述的API文档组件包含系统提示、信息确认、消息提示显示数秒后消失和自定义交互界面功能。
CN201610299443.4A 2016-05-09 2016-05-09 一种基于web界面弹出层的方法 Active CN105930166B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610299443.4A CN105930166B (zh) 2016-05-09 2016-05-09 一种基于web界面弹出层的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610299443.4A CN105930166B (zh) 2016-05-09 2016-05-09 一种基于web界面弹出层的方法

Publications (2)

Publication Number Publication Date
CN105930166A true CN105930166A (zh) 2016-09-07
CN105930166B CN105930166B (zh) 2019-01-25

Family

ID=56834651

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610299443.4A Active CN105930166B (zh) 2016-05-09 2016-05-09 一种基于web界面弹出层的方法

Country Status (1)

Country Link
CN (1) CN105930166B (zh)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108021419A (zh) * 2016-11-02 2018-05-11 阿里巴巴集团控股有限公司 一种弹出层的展现控制方法及装置
CN110543308A (zh) * 2019-08-13 2019-12-06 上海易点时空网络有限公司 移动端模块化用户界面数据库的建立方法及系统
CN110955482A (zh) * 2019-11-27 2020-04-03 维沃移动通信有限公司 弹窗显示的方法、装置、电子设备及介质
CN112241297A (zh) * 2019-07-18 2021-01-19 上海幻电信息科技有限公司 数据展示方法、系统、计算机设备及可读存储介质
CN112241297B (zh) * 2019-07-18 2024-05-14 上海幻电信息科技有限公司 数据展示方法、系统、计算机设备及可读存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103034731A (zh) * 2012-12-20 2013-04-10 北京思特奇信息技术股份有限公司 一种生成Web前端交互页面的方法
CN103064685A (zh) * 2012-12-27 2013-04-24 北京思特奇信息技术股份有限公司 一种模块化配置网页页面的方法及装置
CN103176778A (zh) * 2011-12-21 2013-06-26 北大方正集团有限公司 网页开发方法和装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103176778A (zh) * 2011-12-21 2013-06-26 北大方正集团有限公司 网页开发方法和装置
CN103034731A (zh) * 2012-12-20 2013-04-10 北京思特奇信息技术股份有限公司 一种生成Web前端交互页面的方法
CN103064685A (zh) * 2012-12-27 2013-04-24 北京思特奇信息技术股份有限公司 一种模块化配置网页页面的方法及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
水行者: "jQuery的extend属性(非常好的用于封装插件，给出接口用)", 《HTTPS://WWW:CNBLOGS.COM/GUOZHE/ARCHIVE/2012/12/24/2831399/HTML》 *

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108021419A (zh) * 2016-11-02 2018-05-11 阿里巴巴集团控股有限公司 一种弹出层的展现控制方法及装置
CN112241297A (zh) * 2019-07-18 2021-01-19 上海幻电信息科技有限公司 数据展示方法、系统、计算机设备及可读存储介质
CN112241297B (zh) * 2019-07-18 2024-05-14 上海幻电信息科技有限公司 数据展示方法、系统、计算机设备及可读存储介质
CN110543308A (zh) * 2019-08-13 2019-12-06 上海易点时空网络有限公司 移动端模块化用户界面数据库的建立方法及系统
CN110955482A (zh) * 2019-11-27 2020-04-03 维沃移动通信有限公司 弹窗显示的方法、装置、电子设备及介质
CN110955482B (zh) * 2019-11-27 2023-12-05 维沃移动通信有限公司 弹窗显示的方法、装置、电子设备及介质

Also Published As

Publication number Publication date
CN105930166B (zh) 2019-01-25

Similar Documents

Publication Publication Date Title
CN105354013B (zh) 应用界面渲染方法及装置
US9792354B2 (en) Context aware user interface parts
CN105354014B (zh) 应用界面渲染展示方法及装置
KR101416089B1 (ko) 웹 어플리케이션 저작을 위한 통합 플랫폼 및 그 저작 방법
CN105094786B (zh) 基于JavaScript定制页面的方法及系统
US20170286068A1 (en) Development support system
US20140019891A1 (en) System and method for creating and delivering platform independent interactive applications on user devices
CN101226479A (zh) 一种实现手机菜单动态配置的方法
US20120198415A1 (en) Unified interface for meta model checking, modifying, and reporting
CN103678135A (zh) 大数据环境下实现跨进程与跨线程调试的系统与方法
CN108170497A (zh) 一种页面渲染的方法及装置
CN110780868A (zh) 基于组件化模板的网站开发方法、装置、设备和存储介质
CN111176629A (zh) 一种应用开发的方法和装置
CN111090431A (zh) 一种数据处理方法及装置
CN110275704A (zh) 页面数据处理方法和装置，存储介质和电子设备
Brown Silverlight 5 in action
CN105930166A (zh) 一种基于web界面弹出层的方法
CN110825383A (zh) 一种视频交互方法、装置及计算机可读存储介质
CN114217789A (zh) 功能组件拓展方法、装置、设备、存储介质及程序产品
WO2024066825A1 (zh) 页面项目开发方法、装置、设备、介质及产品
CN113778405A (zh) 一种跨平台app构建方法、装置、系统及介质
CN116909553A (zh) 一种页面在线开发及本地编译运行系统
CN115469849B (zh) 一种业务处理系统、方法、电子设备和存储介质
US9256403B2 (en) Unified flow designer
CN102637290B (zh) 一种基于浏览器的作业编辑方法及作业系统

Legal Events

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