waibao
/
NN2022100801


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>Test: Plugin</title>
  <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  <link href="../example/lib/demo.css" rel="stylesheet"/>

  <script src="../example/lib/zepto.min.js"></script>
  <script src="../example/lib/zepto.touch.min.js"></script>

  <script src="../dist/vconsole.min.js"></script>
</head>
<body ontouchstart>
  <div class="page">
    <a onclick="newTab()" href="javascript:;" class="weui_btn weui_btn_default">newTab</a>
    <a onclick="newTabWithTool()" href="javascript:;" class="weui_btn weui_btn_default">newTabWithTool</a>
    <a onclick="newGlobalToolButton()" href="javascript:;" class="weui_btn weui_btn_default">newGlobalToolButton</a>
    <a onclick="newTabUseJQuery()" href="javascript:;" class="weui_btn weui_btn_default">newTabUseJQuery</a>
    <a onclick="newTabUseDOM()" href="javascript:;" class="weui_btn weui_btn_default">newTabUseDOM</a>
  </div>
</body>
</html>

<script>

function newTab() {
  console.info('newTab() Start');
  var tab = new vConsole.VConsolePlugin('tab1', 'Tab1');
  tab
  .on('init', function() { console.log(this.id, 'init'); })
  .on('renderTab', function(cb) {
    console.log(this.id, 'renderTab');
    cb('<div>I am ' + this.id+'</div>');
  })
  .on('ready', function() {  console.log(this.id, 'ready'); })
  .on('show', function() { console.log(this.id, 'show'); })
  .on('hide', function() { console.log(this.id, 'hide'); })
  .on('showConsole', function() { console.log(this.id, 'showConsole'); })
  .on('hideConsole', function() { console.log(this.id, 'hideConsole'); });
  vConsole.addPlugin(tab);
  console.info('newTab() End');
}

function newTabWithTool() {
  console.info('newTabWithTool() Start');
  var tab = new vConsole.VConsolePlugin('tab2', 'Tab2');
  tab.on('renderTab', function(cb) {
    console.log(this.id, 'renderTab');
    cb('<div>I am ' + this.id+'</div>');
  })
  .on('addTool', function(cb) {
    console.log(this.id, 'addTool');
    cb([
      {
        name: 'Alert',
        global: false,
        onClick: function(e) {
          alert('I am a tool button!');
        }
      }
    ]);
  });
  vConsole.addPlugin(tab);
  console.info('newTabWithTool() End');
}

function newGlobalToolButton() {
  console.info('newGlobalToolButton() Start');
  var plugin = new vConsole.VConsolePlugin('plugin3', 'Plugin3');
  plugin.on('addTool', function(cb) {
    console.log(this.id, 'addTool');
    cb([
      {
        name: 'Global',
        global: true,
        onClick: function(e) {
          alert('I am a global tool button!');
        }
      }
    ]);
  });
  vConsole.addPlugin(plugin);
  console.info('newGlobalToolButton() End');
}

function newTabUseJQuery() {
  console.info('newTabUseJQuery() Start');
  var tab = new vConsole.VConsolePlugin('tab4', 'Tab4');
  var $html = $('<div><a href="javascript:;">Alert</a></div>');
  $html.find('a').click(function() {
    alert('OK');
  });
  tab.on('renderTab', function(cb) {
    cb($html);
  });
  vConsole.addPlugin(tab);
  console.info('newTabUseJQuery() End');
}

function newTabUseDOM() {
  console.info('newTabUseDOM() Start');
  var tab = new vConsole.VConsolePlugin('tab5', 'Tab5');
  var $elm = document.createElement('DIV');
  $elm.innerHTML = '<p>It works</p>';
  tab.on('renderTab', function(cb) {
    cb($elm);
  });
  vConsole.addPlugin(tab);
  console.info('newTabUseDOM() End');
}

</script>