plugin.html 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  6. <title>Test: Plugin</title>
  7. <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  8. <link href="../example/lib/demo.css" rel="stylesheet"/>
  9. <script src="../example/lib/zepto.min.js"></script>
  10. <script src="../example/lib/zepto.touch.min.js"></script>
  11. <script src="../dist/vconsole.min.js"></script>
  12. </head>
  13. <body ontouchstart>
  14. <div class="page">
  15. <a onclick="newTab()" href="javascript:;" class="weui_btn weui_btn_default">newTab</a>
  16. <a onclick="newTabWithTool()" href="javascript:;" class="weui_btn weui_btn_default">newTabWithTool</a>
  17. <a onclick="newGlobalToolButton()" href="javascript:;" class="weui_btn weui_btn_default">newGlobalToolButton</a>
  18. <a onclick="newTabUseJQuery()" href="javascript:;" class="weui_btn weui_btn_default">newTabUseJQuery</a>
  19. <a onclick="newTabUseDOM()" href="javascript:;" class="weui_btn weui_btn_default">newTabUseDOM</a>
  20. </div>
  21. </body>
  22. </html>
  23. <script>
  24. window.vConsole = new window.VConsole({
  25. maxLogNumber: 1000,
  26. // disableLogScrolling: true,
  27. onReady: function() {
  28. console.log('vConsole is ready.');
  29. },
  30. onClearLog: function() {
  31. console.log('on clearLog');
  32. }
  33. });
  34. function newTab() {
  35. console.info('newTab() Start');
  36. var tab = new vConsole.VConsolePlugin('tab1', 'Tab1');
  37. tab
  38. .on('init', function() { console.log(this.id, 'init'); })
  39. .on('renderTab', function(cb) {
  40. console.log(this.id, 'renderTab');
  41. cb('<div>I am ' + this.id+'</div>');
  42. })
  43. .on('ready', function() { console.log(this.id, 'ready'); })
  44. .on('show', function() { console.log(this.id, 'show'); })
  45. .on('hide', function() { console.log(this.id, 'hide'); })
  46. .on('showConsole', function() { console.log(this.id, 'showConsole'); })
  47. .on('hideConsole', function() { console.log(this.id, 'hideConsole'); });
  48. vConsole.addPlugin(tab);
  49. console.info('newTab() End');
  50. }
  51. function newTabWithTool() {
  52. console.info('newTabWithTool() Start');
  53. var tab = new vConsole.VConsolePlugin('tab2', 'Tab2');
  54. tab.on('renderTab', function(cb) {
  55. console.log(this.id, 'renderTab');
  56. cb('<div>I am ' + this.id+'</div>');
  57. })
  58. .on('addTool', function(cb) {
  59. console.log(this.id, 'addTool');
  60. cb([
  61. {
  62. name: 'Alert',
  63. global: false,
  64. onClick: function(e) {
  65. alert('I am a tool button!');
  66. }
  67. }
  68. ]);
  69. });
  70. vConsole.addPlugin(tab);
  71. console.info('newTabWithTool() End');
  72. }
  73. function newGlobalToolButton() {
  74. console.info('newGlobalToolButton() Start');
  75. var plugin = new vConsole.VConsolePlugin('plugin3', 'Plugin3');
  76. plugin.on('addTool', function(cb) {
  77. console.log(this.id, 'addTool');
  78. cb([
  79. {
  80. name: 'Global',
  81. global: true,
  82. onClick: function(e) {
  83. alert('I am a global tool button!');
  84. }
  85. }
  86. ]);
  87. });
  88. vConsole.addPlugin(plugin);
  89. console.info('newGlobalToolButton() End');
  90. }
  91. function newTabUseJQuery() {
  92. console.info('newTabUseJQuery() Start');
  93. var tab = new vConsole.VConsolePlugin('tab4', 'Tab4');
  94. var $html = $('<div><a href="javascript:;">Alert</a></div>');
  95. $html.find('a').click(function() {
  96. alert('OK');
  97. });
  98. tab.on('renderTab', function(cb) {
  99. cb($html);
  100. });
  101. vConsole.addPlugin(tab);
  102. console.info('newTabUseJQuery() End');
  103. }
  104. function newTabUseDOM() {
  105. console.info('newTabUseDOM() Start');
  106. var tab = new vConsole.VConsolePlugin('tab5', 'Tab5');
  107. var $elm = document.createElement('DIV');
  108. $elm.innerHTML = '<p>It works</p>';
  109. tab.on('renderTab', function(cb) {
  110. cb($elm);
  111. });
  112. vConsole.addPlugin(tab);
  113. console.info('newTabUseDOM() End');
  114. }
  115. </script>