zx66
/
nc.963.cn


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
							<!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>Dev: Plugin</title>
  <link href="../example/lib/weui.min.css" rel="stylesheet"/>
  <link href="../example/lib/demo.css" rel="stylesheet"/>

  <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>

window.vConsole = new window.VConsole({

  maxLogNumber: 1000,

  // disableLogScrolling: true,

  onReady: function() {

    console.log('vConsole is ready.');

  },

  onClearLog: function() {

    console.log('on clearLog');

  }

});


function newTab() {

  console.info('newTab() Start');

  var tab = new window.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>