CN106095444A - 一种移动端html列表可自定义扩展js组件的实现方法 - Google Patents
一种移动端html列表可自定义扩展js组件的实现方法 Download PDFInfo
- Publication number
- CN106095444A CN106095444A CN201610412900.6A CN201610412900A CN106095444A CN 106095444 A CN106095444 A CN 106095444A CN 201610412900 A CN201610412900 A CN 201610412900A CN 106095444 A CN106095444 A CN 106095444A
- Authority
- CN
- China
- Prior art keywords
- list
- icon
- assembly
- webpage
- mobile terminal
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 21
- 238000012217 deletion Methods 0.000 claims description 4
- 230000037430 deletion Effects 0.000 claims description 4
- 230000000712 assembly Effects 0.000 claims description 3
- 238000000429 assembly Methods 0.000 claims description 3
- 230000000717 retained effect Effects 0.000 claims description 3
- 230000006870 function Effects 0.000 abstract description 25
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000005314 correlation function Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
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)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种移动端html列表可自定义扩展js组件的实现方法，属于html开发和JavaScript技术领域，本发明要解决的技术问题为现在的移动端很多功能列表都是由开发商定死，很难达到用户的需求并且完善其操作体验，技术方案为：该方法包括如下步骤：（1）、定义初始化列表，新用户第一次访问网页时，通过网页展示固定功能的初始化列表；（2）、在当前网页中添加“添加新选项”的功能图标，用户点击该功能图标，在弹出的弹出框中选择符合自己需求的功能图标并添加到新的列表中，每次添加新的功能图标后，浏览器将会保存选择的该功能图标的标志到本地存储缓存中。
Description
技术领域
本发明涉及html开发和JavaScript技术领域，具体地说是一种移动端html列表可自定义扩展js组件的实现方法。
背景技术
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
现在的移动端很多功能列表都是由开发商定死，很难达到用户的需求并且完善其操作体验。
专利号为CN 105404502 A的专利文献公开了一种方便手机app九宫格、列表开发的js组件，通过将html九宫格及其列表代码提前封装到js函数中，用户根据参数的规定格式，组成参数，通过调用组件中的相关函数进行html代码自动生成并填充到相应的位置，从而达到九宫格和列表代码编写的功能。但是该技术方案仍然不能满足用户自定义列表的需求，且存在操作复杂，成本高等缺点。
发明内容
本发明的技术任务是针对以上不足之处，提供一种移动端html列表可自定义扩展js组件的实现方法，来解决现在的移动端很多功能列表都是由开发商定死，很难达到用户的需求并且完善其操作体验的问题。
本发明解决其技术问题所采用的技术方案是：移动端html列表可自定义扩展js组件的实现方法，该方法包括如下步骤：
（1）、定义初始化列表，新用户第一次访问网页时，通过网页展示固定功能的初始化列表；
（2）、在当前网页中添加“添加新选项”的功能图标，用户点击该功能图标，在弹出的弹出框中选择符合自己需求的功能图标并添加到新的列表中，每次添加新的功能图标后，浏览器将会保存选择的该功能图标的标志到本地存储缓存中；
（3）、用户在已有的功能图标中选择其中一个长按一秒钟，弹出提示框，提示是否删除当前功能图标：
①、如果选择是，则当前功能图标将会被删除，且每次删除功能图标后，浏览器将会保存该功能图标的标志到本地存储缓存中；
②、如果选择否，则网页中仍保留该功能图标；
（4）、当用户再次访问网页时，网页优先判断该用户是否是第一次访问：
①、如果是第一次访问，则初始化功能列表，即执行步骤（1）；
②、如果不是第一次访问，则根据本地存储的数据依次展示所有之前保留的功能图标。
作为优选，所述步骤（1）中定义初始化列表之前还包括如下步骤：
（ⅰ）、提供给开发人员js组件和css样式文件；
（ⅱ）、开发人员在开发前，将该js组件引入html文档中，同时引入对应的css样式文件；
（ⅲ）、在html文档中定义初始化方法，在对应的事件中调用js组件中相应的方法；
（ⅳ）、在升级或修改网页时，修改js组件中的功能选项数据即可。
更优地，所述js组件中包括动态添加功能列表和动态删除功能列表，同时还封装了所有的功能选项的其他组件所需求的功能操作。
本发明的移动端html列表可自定义扩展js组件的实现方法和现有技术相比，具有以下有益效果：
1、本发明可以使原本固定的功能列表变成可以根据用户需求而自定义删除或者扩展等更多操作的动态列表，不同的用户可以根据自己的需求添加或删除列表中的各项功能，让用户避免重复找寻功能选项或者简化功能页面的布局；同时开发人员在每次升级时都不需要重新定义列表，只需要添加相应的数据即可，本发明中的js组件可以很好地提高移动端用户的操作体验，同时也可以是开发人员在一定程度上降低其开发工作量；
2、本发明的js组件是基于JavaScript语言的而编写，本发明提出的列表个性化定义概念，打破了以往手机网页功能列表固定写死的单一方式，本着提高网页扩展性和提高用户操作体验的理念对原本的功能列表进行优化；
3、本发明提高了列表的可扩展性和操作体验，一改传统的网页固定化列表布局方式，JavaScript是一种强大的脚本语言，对于dom的操作能力很强，同时兼有安全性，动态性，简单性和跨平台性等特点，可以很轻松的实现自定义列表的技术需求；
4、本发明与之前固定的网页列表功能对比，可以根据不同的用户生成不同的功能列表，提高了功能列表的扩展性和操作体验，同时也可以方便可发人员进行统计哪些功能的占用比更高。
故本发明具有设计合理、操作简单、使用方便、一物多用等特点，因而，具有很好的推广使用价值。
附图说明
下面结合附图对本发明进一步说明。
附图1为移动端html列表中添加js组件的示意图。
具体实施方式
下面结合附图和具体实施例对本发明作进一步说明。
本发明的移动端html列表可自定义扩展js组件的实现方法，该方法包括如下步骤：
（1）、定义初始化列表，新用户第一次访问网页时，通过网页展示固定功能的初始化列表；
（2）、在当前网页中添加“添加新选项”的功能图标，用户点击该功能图标，在弹出的弹出框中选择符合自己需求的功能图标并添加到新的列表中，每次添加新的功能图标后，浏览器将会保存选择的该功能图标的标志到本地存储缓存中；
（3）、用户在已有的功能图标中选择其中一个长按一秒钟，弹出提示框，提示是否删除当前功能图标：
①、如果选择是，则当前功能图标将会被删除，且每次删除功能图标后，浏览器将会保存该功能图标的标志到本地存储缓存中；
②、如果选择否，则网页中仍保留该功能图标；
（4）、当用户再次访问网页时，网页优先判断该用户是否是第一次访问：
①、如果是第一次访问，则初始化功能列表，即执行步骤（1）；
②、如果不是第一次访问，则根据本地存储的数据依次展示所有之前保留的功能图标。
如附图1所示，步骤（1）中定义初始化列表之前还包括如下步骤：
（ⅰ）、提供给开发人员js组件和css样式文件；js组件中包括动态添加功能列表和动态删除功能列表，同时还封装了所有的功能选项的其他组件所需求的功能操作；
（ⅱ）、开发人员在开发前，将该js组件引入html文档中，同时引入对应的css样式文件；
（ⅲ）、在html文档中定义初始化方法，在对应的事件中调用js组件中相应的方法；
（ⅳ）、在升级或修改网页时，修改js组件中的功能选项数据即可。
通过上面具体实施方式，所述技术领域的技术人员可容易的实现本发明。但是应当理解，本发明并不限于上述的一种具体实施方式。在公开的实施方式的基础上，所述技术领域的技术人员可任意组合不同的技术特征，从而实现不同的技术方案。
除说明书所述的技术特征外，均为本专业技术人员的已知技术。
Claims (3)
1.一种移动端html列表可自定义扩展js组件的实现方法，其特征在于：该方法包括如下步骤：
（1）、定义初始化列表，新用户第一次访问网页时，通过网页展示固定功能的初始化列表；
（2）、在当前网页中添加“添加新选项”的功能图标，用户点击该功能图标，在弹出的弹出框中选择符合自己需求的功能图标并添加到新的列表中，每次添加新的功能图标后，浏览器将会保存选择的该功能图标的标志到本地存储缓存中；
（3）、用户在已有的功能图标中选择其中一个长按一秒钟，弹出提示框，提示是否删除当前功能图标：
①、如果选择是，则当前功能图标将会被删除，且每次删除功能图标后，浏览器将会保存该功能图标的标志到本地存储缓存中；
②、如果选择否，则网页中仍保留该功能图标；
（4）、当用户再次访问网页时，网页优先判断该用户是否是第一次访问：
①、如果是第一次访问，则初始化功能列表，即执行步骤（1）；
②、如果不是第一次访问，则根据本地存储的数据依次展示所有之前保留的功能图标。
2.根据权利要求1所述的移动端html列表可自定义扩展js组件的实现方法，其特征在于：所述步骤（1）中定义初始化列表之前还包括如下步骤：
（ⅰ）、提供给开发人员js组件和css样式文件；
（ⅱ）、开发人员在开发前，将该js组件引入html文档中，同时引入对应的css样式文件；
（ⅲ）、在html文档中定义初始化方法，在对应的事件中调用js组件中相应的方法；
（ⅳ）、在升级或修改网页时，修改js组件中的功能选项数据即可。
3.根据权利要求2所述的移动端html列表可自定义扩展js组件的实现方法，其特征在于：所述js组件中包括动态添加功能列表和动态删除功能列表，同时还封装了所有的功能选项的其他组件所需求的功能操作。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610412900.6A CN106095444A (zh) | 2016-06-13 | 2016-06-13 | 一种移动端html列表可自定义扩展js组件的实现方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610412900.6A CN106095444A (zh) | 2016-06-13 | 2016-06-13 | 一种移动端html列表可自定义扩展js组件的实现方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106095444A true CN106095444A (zh) | 2016-11-09 |
Family
ID=57845672
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610412900.6A Pending CN106095444A (zh) | 2016-06-13 | 2016-06-13 | 一种移动端html列表可自定义扩展js组件的实现方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106095444A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108304114A (zh) * | 2018-01-30 | 2018-07-20 | 深圳市富途网络科技有限公司 | 一种可定制的列表交互系统 |
| CN111222071A (zh) * | 2020-01-03 | 2020-06-02 | 精硕科技（北京）股份有限公司 | 问卷处理方法、装置及电子设备 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101115068A (zh) * | 2007-07-19 | 2008-01-30 | 潘晓梅 | 在客户端调整网页显示内容的方法及系统 |
| CN101393519A (zh) * | 2008-07-09 | 2009-03-25 | 深圳企网信息技术有限公司 | 基于部件的、拖放式设计的网站快速开发技术 |
| US20150379030A1 (en) * | 2014-06-27 | 2015-12-31 | Beijing Jinher Software Co.,Ltd | Platform integrating method and system for adapting third-party web page in application |
| CN105577446A (zh) * | 2015-12-30 | 2016-05-11 | 邦彦技术股份有限公司 | 一种轻量级嵌入式网络管理系统和方法 |
-
2016
- 2016-06-13 CN CN201610412900.6A patent/CN106095444A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101115068A (zh) * | 2007-07-19 | 2008-01-30 | 潘晓梅 | 在客户端调整网页显示内容的方法及系统 |
| CN101393519A (zh) * | 2008-07-09 | 2009-03-25 | 深圳企网信息技术有限公司 | 基于部件的、拖放式设计的网站快速开发技术 |
| US20150379030A1 (en) * | 2014-06-27 | 2015-12-31 | Beijing Jinher Software Co.,Ltd | Platform integrating method and system for adapting third-party web page in application |
| CN105577446A (zh) * | 2015-12-30 | 2016-05-11 | 邦彦技术股份有限公司 | 一种轻量级嵌入式网络管理系统和方法 |
Non-Patent Citations (3)
| Title |
|---|
| FUHUO8686: "《谷歌page speed安装使用及页面问题详解》", 《百度文库：HTTPS://WENKU.BAIDU.COM/VIEW/B0A61F3EBCD126FFF7050B40.HTML?FROM=SEARCH》 * |
| KEJMLN: "《谷歌浏览器Adblock Plus安装》", 《百度经验：HTTPS://JINGYAN.BAIDU.COM/ARTICLE/8CDCCAE99DA444315413CDC0.HTML》 * |
| 懦涨潮刃: "《谷歌浏览器CHROME如何直接打开WORD，EXCEL和PPT文档》", 《百度文库：HTTPS://WENKU.BAIDU.COM/VIEW/8655F82B770BF78A64295444.HTML?FROM=SEARCH》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108304114A (zh) * | 2018-01-30 | 2018-07-20 | 深圳市富途网络科技有限公司 | 一种可定制的列表交互系统 |
| CN111222071A (zh) * | 2020-01-03 | 2020-06-02 | 精硕科技（北京）股份有限公司 | 问卷处理方法、装置及电子设备 |
| CN111222071B (zh) * | 2020-01-03 | 2023-08-25 | 北京秒针人工智能科技有限公司 | 问卷处理方法、装置及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103984686B (zh) | 页面切换方法及装置 | |
| JP5575511B2 (ja) | ウェブサイト閲覧システム、サーバ及びクライアント端末 | |
| CN100440208C (zh) | 改进万维网设备中超文本标记语言页面表现的方法和系统 | |
| CN101211364B (zh) | 用于万维网页中暴露的资源的公共书签的方法和系统 | |
| EP2284728A1 (en) | Web browsing method and web browsing device | |
| CN102955694B (zh) | 基于WebKit 浏览器的客户端实现方法以及客户端 | |
| CN108132814A (zh) | 应用程序的页面加载方法、装置、计算机设备和存储介质 | |
| CN106294658A (zh) | 网页快速展示方法和装置 | |
| CN104731589A (zh) | 用户界面的自动生成方法及自动生成装置 | |
| US9727354B2 (en) | System and methods for loading an application and its modules in a client device | |
| CN104035753A (zh) | 一种双WebView展示定制页面的方法及系统 | |
| CN102693280A (zh) | 网页浏览方法、WebApp框架、执行JavaScript方法及装置、移动终端 | |
| JP2011186913A (ja) | ウェブサイト閲覧システム及びサーバ | |
| CN101335762A (zh) | 反映网页的历史使用行为的方法,及服务器、终端和系统 | |
| CN106569783A (zh) | 一种执行任务脚本的方法和装置 | |
| CN106533926B (zh) | 一种网页信息传播方法以及装置 | |
| JP2011070481A (ja) | ウェブ・ブラウザ送信サーバおよびその動作制御方法 | |
| CN110297636A (zh) | 一种基于页面配置文件的页面自动生成和参数管理方法、系统和装置 | |
| JP2012032943A (ja) | ウェブサイト閲覧システム、サーバ、サーバ用プログラム及びウェブサイト閲覧支援方法 | |
| CN109240697A (zh) | 调用处理方法及装置、存储介质 | |
| EP4198773A1 (en) | Image processing method and apparatus, and computer readable storage medium | |
| CN104850498B (zh) | 一种填充信息测试方法及系统 | |
| CN108228717A (zh) | 页面的加载方法及装置 | |
| CN108280219A (zh) | 文本翻译方法、装置、计算机设备和存储介质 | |
| CN104424224B (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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20161109 |