js 通过Notification 让本地文件显示通知,但是本地html文件不被允许通知怎么办,总是问我是否允许?

JavaScript06

js 通过Notification 让本地文件显示通知,但是本地html文件不被允许通知怎么办,总是问我是否允许?,第1张

创建UILocalNotification。

设置处理通知的时间fireDate。

配置通知的内容:通知主体、通知声音、图标数字等。

配置通知传递的自定义数据参数userInfo(这一步可选)。

调用通知,可以使用scheduleLocalNotification:按计划调度一个通知,也可以使用presentLocalNotificationNow立即调用通知。

首先用户登陆时,判断他有没有要弹的消息

其次,调用JS弹出消息;

建议使用jquery框架,

当然还要有html内容:<div id="tankuang_message" style="display:none">message</div>

当然这个div的样式需要你自己去美化,去定位的,并且要有弹窗的效果。

弹出时:$('#tankuang_message').show()

关闭时:$('#tankuang_message').hide()

如果你实在不想用,那是可行的,就是麻烦点,还有可能存在兼容性问题。

弹出时:document.getElementById('tankuang_message').style.display = ''

弹出时:document.getElementById('tankuang_message').style.display = 'none'

【实现原理】

弹出层的基本原理在仿Lightbox效果中已经说的差不多了。

关键的地方就是定位,一般相对文档的定位用absolute就行了。

要随屏移动,即相对窗口定位,就用fixed定位。

这些实现起来都很简单,除了不支持fixed的ie6。

【兼容ie6的fixed】

由于ie6本身不支持fixed定位,只能模拟或取巧来间接实现。

最原始的方法是在window的scroll事件中不断修正弹出层的位置。

后来有人发现还可以通过reflow“离奇”地实现。

但以上方法都有一个缺陷,滚动时弹出层会“发抖”,很不舒服(可以用缓动等来改善)。

想要不发抖,可以通过html和css的巧妙应用来实现,具体参考14px的介绍。

原理是用一个容器代替body,然后对不会动的body绝对定位。

看来很完美,但有一个致命的问题,这个方法需要修改html结构,会影响到相关的一些东西,例如window的scroll事件等。

程序中用了另一个方法,通过body的背景和expression来实现,下面是一个兼容的fixed效果:

相比前面的方法,这个是比较完美的了,但也有一些问题,例如body的背景只能用fixed,使用expression资源消耗相对较大。

更大的问题是不能实现用百分比值或right/bottom来定位。

为了解决这个问题,程序使用了一个定位层,这个层用上面的方法实现fixed定位,尺寸跟窗口大小一样,并且位置重合,那么只要用一般的定位方法相对这个层定位,就能达到相对窗口定位的效果了。

兼容程序主要在RepairFixed对象中,首先设置body背景

再创建定位层

定位层还要设置"overflow:hidden",好处是不会因弹出层在document原来的范围外而自动扩大document。

ie6测试以下代码,document会随着下滚而不断扩大

加上"overflow:hidden"就可以防止这种情况。

然后弹出层通过append方法修改为"absolute"定位,并插入到这个定位层,这样就能实现fixed效果了。

由于这个定位层比较耗资源,所以在有元素插入时才会插到body中。

在不需要fixed的时候,要用remove方法从定位层中移除,当定位层内没有需要定位元素就会自动从body移除。

ps:隐藏的话expression还会继续执行,要移出文档才行。

【居中效果】

加入居中扩展程序,并且设置center为true,就会自动相对窗口居中。

居中的原理跟仿Lightbox效果是一样的,通过设置负的元素尺寸一半的margin和"50%"的top/left来居中。

要注意的是不是使用fixed定位时,计算需要加上scrollTop/scrollLeft。

【覆盖层】

在仿Lightbox效果中,ie6的覆盖层是通过创建一个覆盖整个页面的层来做的。

使用新的兼容fixed方法后,就不用另外做兼容,按照fixed的效果做就行了。

覆盖层是由AlertBox扩展而来,它其实就是一个大小跟窗口一样,并且跟窗口重合的弹出层。

由于覆盖层一般只需要定义一个就行了,这里把它做成一个OverLay对象,使用时直接调用它的show和close方法。

【遮盖select】

在仿Lightbox效果中介绍过两种遮盖select的方法:隐藏和iframe。

程序是通过iframe来遮盖的,放在ie6的兼容扩展程序中。

在iframe定位时要注意,要定位到弹出层的负的clientTop/clientLeft,这样才能保证边框不会被遮住。

使用技巧

【定位】

除了居中,程序会按照弹出层本身的定位样式来显示。

不是fixed定位时要注意,在ie6是相对当前窗口来定位的,其他都是相对第一屏窗口来定位的。

还要注意,必须声明DOCTYPE,才能正确定位。

程序为了尽量通用,降低了效率(用了4个expression),所以最好还是根据实际情况自己来调整。

ps:需要像定位提示效果那样预设定位的话,可以自行扩展。

【锁定键盘】

使用覆盖层时,为了防止用户通过键盘操作页面,可以在document的keydown中执行preventDefault来禁用。

如果弹出层需要正常操作,只要在弹出层的keydown中执行stopPropagation就行了。

【拖动弹窗】

这里只是简单的加上拖动功能,要注意的是fixed定位时,计算拖动的参考对象是不同的。

更详细的拖动介绍可以看看这个拖动效果。

【遮盖flash】

有时显示出即使设置了zIndex也会被flash遮住,只要给flash添加一个wmode属性设置其值为transparent,即把flash设置透明就行了。

使用说明

实例化时,必须有弹出层作为参数:

new AlertBox("idBox")

可选参数用来设置程序的默认属性,包括:

属性:默认值//说明

fixed: false,//是否固定定位

zIndex: 1000,//层叠数

onShow: $$.emptyFunction,//显示时执行

onClose: $$.emptyFunction//关闭时执行

还提供了以下方法:

show:显示弹出层;

close:隐藏弹出层;

dispose:销毁程序。

加入兼容ie6扩展程序后,会自动修正ie6的fixed问题,可根据fixSelect属性设置是否修正select遮盖bug,默认是。

加入居中扩展程序后,可根据center属性设置是否居中,默认否。

RepairFixed修正fixed对象,可独立使用,有append和remove方法添加和移除需要fixed的元素,只能在ie6使用。

OverLay覆盖层对象,有如下属性:

属性:默认值//说明

"color": "#fff",//背景色

"opacity": .5,//透明度(0-1)

"zIndex": 100,//层叠值

还有show和close方法显示和隐藏覆盖层。