12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8"/>
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
- <meta name="HandheldFriendly" content="true"/>
- <meta name="MobileOptimized" content="320"/>
- <title>titleNView</title>
- <script type="text/javascript" src="../js/common.js"></script>
- <script type="text/javascript">
- var ws = null;
- // H5 plus事件处理
- function plusReady(){
- ws = plus.webview.currentWebview();
- }
- document.addEventListener('plusready', plusReady, false);
- // 自定义按钮
- var bButton = false;
- function setButtons(){
- ws.setStyle({
- titleNView: {
- 'padding-right': '10px',
- buttons:[{
- type: 'favorite',
- redDot: true
- },{
- text: '分享',
- fontSize: '16px',
- width: 'auto'
- },{
- 'float': 'left',
- text: '测试',
- fontSize: '16px',
- select: true,
- width: 'auto',
- onclick: onClickedButton
- }]
- }
- });
- bButton = true;
- }
- // 按钮点击事件
- function onClickedButton(){
- plus.nativeUI.toast('点击了测试按钮');
- }
- // 设置红点
- function showRedDot(){
- if(!bButton){
- plus.nativeUI.toast('标题栏未设置自定义按钮');
- }
- ws.showTitleNViewButtonRedDot({index:0});
- }
- // 隐藏红点
- function hideRedDot(){
- if(!bButton){
- plus.nativeUI.toast('标题栏未设置自定义按钮');
- }
- ws.hideTitleNViewButtonRedDot({index:0});
- }
- // 设置角标
- function setBadge(){
- if(!bButton){
- plus.nativeUI.toast('标题栏未设置自定义按钮');
- }
- ws.setTitleNViewButtonBadge({index:0,text:'9'});
- }
- // 移除角标
- function removeBadge(){
- if(!bButton){
- plus.nativeUI.toast('标题栏未设置自定义按钮');
- }
- ws.removeTitleNViewButtonBadge({index:0});
- }
- // 隐藏/显示按钮
- var bShow = true;
- function switchButton(){
- bShow = !bShow;
- ws.setTitleNViewButtonStyle(1, {width:(bShow?'auto':'0px')})
- }
- </script>
- <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
- </head>
- <body>
- <br/><br/>
- <span class="des">向上滚动显示标题栏</span>
- <br/><br/>
- <div class="button" onclick="setButtons()">标题栏自定义按钮</div>
- <div class="button" onclick="showRedDot()">显示红点</div>
- <div class="button" onclick="hideRedDot()">隐藏红点</div>
- <div class="button" onclick="setBadge()">设置角标</div>
- <div class="button" onclick="removeBadge()">移除角标</div>
- <br/>
- <div class="button" onclick="switchButton()">隐藏/显示按钮</div>
- <br/>
- <div style="width:100%;height:1000px"></div>
- </body>
- </html>
|