一种移动端html列表可自定义扩展js组件的实现方法
【专利摘要】本发明公开了一种移动端html列表可自定义扩展js组件的实现方法，属于html开发和JavaScript技术领域，本发明要解决的技术问题为现在的移动端很多功能列表都是由开发商定死，很难达到用户的需求并且完善其操作体验，技术方案为：该方法包括如下步骤：（1）、定义初始化列表，新用户第一次访问网页时，通过网页展示固定功能的初始化列表；（2）、在当前网页中添加“添加新选项”的功能图标，用户点击该功能图标，在弹出的弹出框中选择符合自己需求的功能图标并添加到新的列表中，每次添加新的功能图标后，浏览器将会保存选择的该功能图标的标志到本地存储缓存中。
【专利说明】
一种移动端htm I列表可自定义扩展j s组件的实现方法
技术领域
[0001 ] 本发明涉及html开发和JavaScript技术领域，具体地说是一种移动端html列表可自定义扩展js组件的实现方法。
【背景技术】
[0002]JavaScript—种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能。
[0003]现在的移动端很多功能列表都是由开发商定死，很难达到用户的需求并且完善其操作体验。
[0004]专利号为CN 105404502 A的专利文献公开了一种方便手机app九宫格、列表开发的js组件，通过将html九宫格及其列表代码提前封装到js函数中，用户根据参数的规定格式，组成参数，通过调用组件中的相关函数进行html代码自动生成并填充到相应的位置，从而达到九宫格和列表代码编写的功能。但是该技术方案仍然不能满足用户自定义列表的需求，且存在操作复杂，成本高等缺点。
【发明内容】
[0005]本发明的技术任务是针对以上不足之处，提供一种移动端html列表可自定义扩展js组件的实现方法，来解决现在的移动端很多功能列表都是由开发商定死，很难达到用户的需求并且完善其操作体验的问题。
[0006]本发明解决其技术问题所采用的技术方案是:移动端html列表可自定义扩展js组件的实现方法，该方法包括如下步骤:
(1)、定义初始化列表，新用户第一次访问网页时，通过网页展示固定功能的初始化列表；
(2)、在当前网页中添加“添加新选项”的功能图标，用户点击该功能图标，在弹出的弹出框中选择符合自己需求的功能图标并添加到新的列表中，每次添加新的功能图标后，浏览器将会保存选择的该功能图标的标志到本地存储缓存中；
(3)、用户在已有的功能图标中选择其中一个长按一秒钟，弹出提示框，提示是否删除当前功能图标:
①、如果选择是，则当前功能图标将会被删除，且每次删除功能图标后，浏览器将会保存该功能图标的标志到本地存储缓存中；
②、如果选择否，则网页中仍保留该功能图标；
(4)、当用户再次访问网页时，网页优先判断该用户是否是第一次访问:
①、如果是第一次访问，则初始化功能列表，即执行步骤(I);
②、如果不是第一次访问，则根据本地存储的数据依次展示所有之前保留的功能图标。
[0007]作为优选，所述步骤(I)中定义初始化列表之前还包括如下步骤:
(i)、提供给开发人员js组件和css样式文件；
(? )、开发人员在开发前，将该js组件引入html文档中，同时引入对应的css样式文件； (iii )、在html文档中定义初始化方法，在对应的事件中调用j s组件中相应的方法；
(iv)、在升级或修改网页时，修改js组件中的功能选项数据即可。
[0008]更优地，所述js组件中包括动态添加功能列表和动态删除功能列表，同时还封装了所有的功能选项的其他组件所需求的功能操作。
[0009]本发明的移动端html列表可自定义扩展js组件的实现方法和现有技术相比，具有以下有益效果:
1、本发明可以使原本固定的功能列表变成可以根据用户需求而自定义删除或者扩展等更多操作的动态列表，不同的用户可以根据自己的需求添加或删除列表中的各项功能，让用户避免重复找寻功能选项或者简化功能页面的布局；同时开发人员在每次升级时都不需要重新定义列表，只需要添加相应的数据即可，本发明中的js组件可以很好地提高移动端用户的操作体验，同时也可以是开发人员在一定程度上降低其开发工作量；
2、本发明的js组件是基于JavaScript语言的而编写，本发明提出的列表个性化定义概念，打破了以往手机网页功能列表固定写死的单一方式，本着提高网页扩展性和提高用户操作体验的理念对原本的功能列表进行优化；
3、本发明提高了列表的可扩展性和操作体验，一改传统的网页固定化列表布局方式，JavaScript是一种强大的脚本语言，对于dom的操作能力很强，同时兼有安全性，动态性，简单性和跨平台性等特点，可以很轻松的实现自定义列表的技术需求；
4、本发明与之前固定的网页列表功能对比，可以根据不同的用户生成不同的功能列表，提高了功能列表的扩展性和操作体验，同时也可以方便可发人员进行统计哪些功能的占用比更尚。
[0010]故本发明具有设计合理、操作简单、使用方便、一物多用等特点，因而，具有很好的推广使用价值。
【附图说明】
[0011 ]下面结合附图对本发明进一步说明。
[0012]附图1为移动端html列表中添加js组件的示意图。
【具体实施方式】
[0013]下面结合附图和具体实施例对本发明作进一步说明。
[0014]本发明的移动端html列表可自定义扩展js组件的实现方法，该方法包括如下步骤:
(1)、定义初始化列表，新用户第一次访问网页时，通过网页展示固定功能的初始化列表；
(2)、在当前网页中添加“添加新选项”的功能图标，用户点击该功能图标，在弹出的弹出框中选择符合自己需求的功能图标并添加到新的列表中，每次添加新的功能图标后，浏览器将会保存选择的该功能图标的标志到本地存储缓存中； (3)、用户在已有的功能图标中选择其中一个长按一秒钟，弹出提示框，提示是否删除当前功能图标:
①、如果选择是，则当前功能图标将会被删除，且每次删除功能图标后，浏览器将会保存该功能图标的标志到本地存储缓存中；
②、如果选择否，则网页中仍保留该功能图标；
(4)、当用户再次访问网页时，网页优先判断该用户是否是第一次访问:
①、如果是第一次访问，则初始化功能列表，即执行步骤(I);
②、如果不是第一次访问，则根据本地存储的数据依次展示所有之前保留的功能图标。
[0015]如附图1所示，步骤(I)中定义初始化列表之前还包括如下步骤:
(i)、提供给开发人员js组件和css样式文件；js组件中包括动态添加功能列表和动态删除功能列表，同时还封装了所有的功能选项的其他组件所需求的功能操作；
(? )、开发人员在开发前，将该js组件引入html文档中，同时引入对应的css样式文件； (iii )、在html文档中定义初始化方法，在对应的事件中调用j s组件中相应的方法；
(iv)、在升级或修改网页时，修改js组件中的功能选项数据即可。
[0016]通过上面【具体实施方式】，所述技术领域的技术人员可容易的实现本发明。但是应当理解，本发明并不限于上述的一种【具体实施方式】。在公开的实施方式的基础上，所述技术领域的技术人员可任意组合不同的技术特征，从而实现不同的技术方案。
[0017]除说明书所述的技术特征外，均为本专业技术人员的已知技术。
【主权项】
1.一种移动端html列表可自定义扩展js组件的实现方法，其特征在于:该方法包括如下步骤: (1)、定义初始化列表，新用户第一次访问网页时，通过网页展示固定功能的初始化列表； (2)、在当前网页中添加“添加新选项”的功能图标，用户点击该功能图标，在弹出的弹出框中选择符合自己需求的功能图标并添加到新的列表中，每次添加新的功能图标后，浏览器将会保存选择的该功能图标的标志到本地存储缓存中； (3)、用户在已有的功能图标中选择其中一个长按一秒钟，弹出提示框，提示是否删除当前功能图标: ①、如果选择是，则当前功能图标将会被删除，且每次删除功能图标后，浏览器将会保存该功能图标的标志到本地存储缓存中； ②、如果选择否，则网页中仍保留该功能图标； (4)、当用户再次访问网页时，网页优先判断该用户是否是第一次访问: ①、如果是第一次访问，则初始化功能列表，即执行步骤(I); ②、如果不是第一次访问，则根据本地存储的数据依次展示所有之前保留的功能图标。2.根据权利要求1所述的移动端html列表可自定义扩展js组件的实现方法，其特征在于:所述步骤(I)中定义初始化列表之前还包括如下步骤: (i)、提供给开发人员js组件和css样式文件； (? )、开发人员在开发前，将该js组件引入html文档中，同时引入对应的css样式文件； (iii )、在html文档中定义初始化方法，在对应的事件中调用js组件中相应的方法； (iv)、在升级或修改网页时，修改js组件中的功能选项数据即可。3.根据权利要求2所述的移动端html列表可自定义扩展js组件的实现方法，其特征在于:所述js组件中包括动态添加功能列表和动态删除功能列表，同时还封装了所有的功能选项的其他组件所需求的功能操作。
【文档编号】G06F9/44GK106095444SQ201610412900
【公开日】2016年11月9日
【申请日】2016年6月13日 公开号201610412900.6, CN 106095444 A, CN 106095444A, CN 201610412900, CN-A-106095444, CN106095444 A, CN106095444A, CN201610412900, CN201610412900.6
【发明人】刘晓, 路遥, 徐兵, 王永军
【申请人】浪潮软件集团有限公司