webview_titlenview.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>titleNView</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. var ws = null;
  12. // H5 plus事件处理
  13. function plusReady(){
  14. ws = plus.webview.currentWebview();
  15. }
  16. document.addEventListener('plusready', plusReady, false);
  17. // 自定义按钮
  18. var bButton = false;
  19. function setButtons(){
  20. ws.setStyle({
  21. titleNView: {
  22. 'padding-right': '10px',
  23. buttons:[{
  24. type: 'favorite',
  25. redDot: true
  26. },{
  27. text: '分享',
  28. fontSize: '16px',
  29. width: 'auto'
  30. },{
  31. 'float': 'left',
  32. text: '测试',
  33. fontSize: '16px',
  34. select: true,
  35. width: 'auto',
  36. onclick: onClickedButton
  37. }]
  38. }
  39. });
  40. bButton = true;
  41. }
  42. // 按钮点击事件
  43. function onClickedButton(){
  44. plus.nativeUI.toast('点击了测试按钮');
  45. }
  46. // 设置红点
  47. function showRedDot(){
  48. if(!bButton){
  49. plus.nativeUI.toast('标题栏未设置自定义按钮');
  50. }
  51. ws.showTitleNViewButtonRedDot({index:0});
  52. }
  53. // 隐藏红点
  54. function hideRedDot(){
  55. if(!bButton){
  56. plus.nativeUI.toast('标题栏未设置自定义按钮');
  57. }
  58. ws.hideTitleNViewButtonRedDot({index:0});
  59. }
  60. // 设置角标
  61. function setBadge(){
  62. if(!bButton){
  63. plus.nativeUI.toast('标题栏未设置自定义按钮');
  64. }
  65. ws.setTitleNViewButtonBadge({index:0,text:'9'});
  66. }
  67. // 移除角标
  68. function removeBadge(){
  69. if(!bButton){
  70. plus.nativeUI.toast('标题栏未设置自定义按钮');
  71. }
  72. ws.removeTitleNViewButtonBadge({index:0});
  73. }
  74. // 隐藏/显示按钮
  75. var bShow = true;
  76. function switchButton(){
  77. bShow = !bShow;
  78. ws.setTitleNViewButtonStyle(1, {width:(bShow?'auto':'0px')})
  79. }
  80. </script>
  81. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  82. </head>
  83. <body>
  84. <br/><br/>
  85. <span class="des">向上滚动显示标题栏</span>
  86. <br/><br/>
  87. <div class="button" onclick="setButtons()">标题栏自定义按钮</div>
  88. <div class="button" onclick="showRedDot()">显示红点</div>
  89. <div class="button" onclick="hideRedDot()">隐藏红点</div>
  90. <div class="button" onclick="setBadge()">设置角标</div>
  91. <div class="button" onclick="removeBadge()">移除角标</div>
  92. <br/>
  93. <div class="button" onclick="switchButton()">隐藏/显示按钮</div>
  94. <br/>
  95. <div style="width:100%;height:1000px"></div>
  96. </body>
  97. </html>