tabs.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>KindEditor Tabs Test</title>
  6. <link rel="stylesheet" href="../lib/qunit/qunit.css" />
  7. <script src="../lib/firebug-lite/build/firebug-lite.js#startOpened"></script>
  8. <script src="../lib/qunit/qunit.js"></script>
  9. <link rel="stylesheet" href="../themes/default/default.css" />
  10. <script src="../src/core.js"></script>
  11. <script src="../src/config.js"></script>
  12. <script src="../src/event.js"></script>
  13. <script src="../src/html.js"></script>
  14. <script src="../src/selector.js"></script>
  15. <script src="../src/node.js"></script>
  16. <script src="../src/range.js"></script>
  17. <script src="../src/cmd.js"></script>
  18. <script src="../src/widget.js"></script>
  19. <script src="../src/tabs.js"></script>
  20. </head>
  21. <body>
  22. <h1>KindEditor Tabs Test</h1>
  23. <div id="tabs"></div>
  24. <div id="tab1">内容1</div>
  25. <div id="tab2">内容2</div>
  26. <div id="tab3">内容3</div>
  27. <script>
  28. var tabs = K.tabs({
  29. src : '#tabs',
  30. afterSelect : function(i) {
  31. K('#tab' + (i + 1)).html('选中了标签#' + (i + 1));
  32. }
  33. });
  34. tabs.add({
  35. title : '标签#1',
  36. panel : '#tab1'
  37. });
  38. tabs.add({
  39. title : '标签#2',
  40. panel : '#tab2'
  41. });
  42. tabs.add({
  43. title : '标签#3',
  44. panel : '#tab3'
  45. });
  46. tabs.select(0);
  47. </script>
  48. </body>
  49. </html>