| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- <meta name="HandheldFriendly" content="true"/>
- <meta name="MobileOptimized" content="320"/>
- <title>Hello H5+</title>
- <script type="text/javascript" src="../js/common.js"></script>
- <script type="text/javascript">
- var ws=null,wc=null;
- // 扩展API加载完毕，现在可以正常调用扩展API
- function plusReady(){
- ws=plus.webview.currentWebview();
- // 用户点击后
- ws.addEventListener('maskClick', function(){
- wc.close('auto');
- },false);
- }
- // 判断扩展API是否准备，否则监听plusready事件
- if(window.plus){
- plusReady();
- }else{
- document.addEventListener('plusready', plusReady, false);
- }
- // 显示侧滑页面
- function showSide(){
- // 防止快速点击可能导致多次创建
- if(wc){
- return;
- }
- // 开启遮罩
- ws.setStyle({mask:'rgba(0,0,0,0.5)'});
- // 创建侧滑页面
- wc = createWithoutTitle('webview_mask_side.html', {
- left: '30%',
- width: '70%',
- popGesture: 'none',
- titleNView: {
- autoBackButton: true,
- backgroundColor: '#D74B28',
- titleColor: '#CCCCCC',
- titleText: '侧滑窗口'
- }
- });
- // 侧滑页面关闭后关闭遮罩
- wc.addEventListener('close', function(){
- ws.setStyle({mask:'none'});
- wc = null;
- }, false);
- // 侧滑页面加载后显示（避免白屏）
- wc.addEventListener('loaded', function(){
- wc.show('slide-in-right', 200);
- }, false);
- }
- </script>
- <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
- </head>
- <body>
- <br/>
- <div class="button" onclick="showSide()">打开侧滑窗口</div>
- <div class="des">打开侧滑窗口后，当前Webview窗口会显示遮罩层。</div>
- <div class="des">Webview的遮罩层会覆盖Webview中所有内容（包括子Webview），并且截获Webview窗口的所有触屏事件。</div>
- </body>
- </html>
|
