移动端气泡弹窗

博客介绍了移动端气泡弹窗的实现过程,首先尝试使用github上的jqm-mobile-bookmark-bubble项目,但由于库的复杂性导致对接问题,最终选择了一个更合理的插件http://caibaojian.com/add-to-home-screen.html。对接步骤包括指定图标路径,引入CSS和JS并调用启动函数。在CSS和JS中调整参数以优化样式和行为,如改变图标大小、布局和关闭按钮样式。还讨论了如何通过调整startDelay参数实现在页面加载时立即显示气泡。博主提出希望实现检测用户是否已添加到桌面的功能,以提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

github上的项目https://github.com/okamototk/jqm-mobile-bookmark-bubble

下载下来后有英文,日文,法文,要对照英文自己改一个中文版的重载,然后还需要一个logo,添加到手机桌面后就是用的这个logo,我自己用ppt画了一个,正方形作底,两个艺术字交叉叠在一起,就像LV和YSL。但是目前我还没把这个js控件和我的系统对接,现在demo中是按钮触发,但是真实环境应该是onload触发,所以今天我还需要研究下,到时候就在这篇博文中进行补充。

2016.02.29更新

那个插件应该是针对jquery mobile的,调用的库实在是乱七八糟,和系统对接的时候出现了各种问题,不得已放弃了这个插件,另外寻找,baidu上找到了另一个插件http://caibaojian.com/add-to-home-screen.html,这个插件的调用接口合理多了,一个CSS负责样式,一个JS负责逻辑,然后再用一个函数调用,丰富多样的参数可供修改,我把我的对接过程简述如下:

1、为页面指定图标路径

<link rel="apple-touch-icon" href="/icon.png" />

2、添加提示,head中引入addtohomescreen.css和addtohomescreen.js,然后立马调用启动函数addToHomescreen();就这么简单

3、然后就可以在css中调整样式,在js中调整参数,我把图标大小从6em调整到4em,然后向左浮动float:left,把图标和文字改成左右结构,再然后改close button的样式,把底色改成和整个区域底色一致,把显示的文字分三行,最后整个样式就比较美观了,但是现在还没测试除ios以外设备的显示效果;在js中调整了下参数,默认的页面加载后要等一会才会出现气泡,startDelay参数调整成-0.5效果好多了(最后延迟计算是startDelay*1000+500),所以改成-0.5恰好就是页面加载的时候就显示气泡,显示间隔displayPace单位是分钟数,我用的就是默认1440

这类插件不知道是否可以实现,检测用户是否已经把网页添加到了桌面,对于已添加的用户就不再弹出气泡,这样的话,体验就更好!



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值