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

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

Info

Publication number
CN105930166B
CN105930166B CN201610299443.4A CN201610299443A CN105930166B CN 105930166 B CN105930166 B CN 105930166B CN 201610299443 A CN201610299443 A CN 201610299443A CN 105930166 B CN105930166 B CN 105930166B
Authority
CN
China
Prior art keywords
web
ejection layer
style
interface
layer
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.)
Active
Application number
CN201610299443.4A
Other languages
English (en)
Other versions
CN105930166A (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 CN105930166A (zh) 2016-09-07
CN105930166B true 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)

Families Citing this family (4)

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

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》;20121224;第1-3页

Also Published As

Publication number Publication date
CN105930166A (zh) 2016-09-07

Similar Documents

Publication Publication Date Title
US9715370B2 (en) Method and system for providing content
CN105930166B (zh) 一种基于web界面弹出层的方法
CN104484171B (zh) 终端界面设计系统、方法及相关设备
CN105320572B (zh) 浏览器异常处理方法、装置及系统
CN109542556B (zh) 一种基于Activiti的流程与表单交互方法及系统
US20150095811A1 (en) Context aware user interface parts
CN1828597B (zh) 简单样式
KR20150043333A (ko) 선언형 템플릿을 사용하여 컨트롤을 스탬프 아웃하기 위한 사용자 인터페이스 컨트롤 프레임워크
CN108228288A (zh) 一种组件系统及其调用方法和装置
WO2018113096A1 (zh) 一种食谱程序代码生成方法及食谱编译云平台系统
US10120660B2 (en) Systems and methods for producing launchers for a mobile terminal
CN110633078B (zh) 一种实现自动生成特征计算代码的方法及装置
CN103179166A (zh) 在客户端中提供服务的方法和客户端
JP7280388B2 (ja) カスタマイズされた人工知能生産ラインを実行する装置及び方法、機器及び媒体
CN108491195A (zh) 设备控制页面生成方法与系统
Brown Silverlight 5 in action
US20110072371A1 (en) Application programming interface for user interface creation
CN110045956A (zh) 组件的配置方法、装置、设备及可读存储介质
US20120260237A1 (en) Portable Business Language and Automated Software Application Development System
CN104123155A (zh) 一种基于web的业务系统页面层开发平台及方法
CN103226475B (zh) 转码时实现控件替换的方法及装置
AU2019222873B2 (en) Method and system for providing content
CN112328225A (zh) 一种页面运行方法及其运行系统
CN112445501A (zh) 数据烧录方法及设备、计算机可读存储介质
CN109656536B (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