HTML with tabs

的index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"></script>
  </head>
  <body>
    <ul class="tabs">
      <li><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="panes">
      <div id="pane1">Tab1 content</div>
      <div id="pane2">Tab2 content</div>
    </div>
    <script>
      $(function() {
        $("ul.tabs").tabs("div.panes > div");
      });
    </script>
  </body>
</html>

test.css

body {
  margin: 0;
  padding:50px 80px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica;
}

.panes div {
    display:none;
    padding:15px 10px;
    border-top :1px solid #999;
    height:500px;
    font-size:14px;
    background-color:#fff;
}

 ul.tabs {
    list-style:none;
    margin:0 !important;
    padding:0;
    height:30px;
}

ul.tabs li {
    float:left;
    text-indent:0;
    padding:0;
    margin:0 !important;
}

ul.tabs a {
    font-size:11px;
    display:block;
    height: 30px;
    line-height:30px;
    width: 134px;
    text-align:center;
    text-decoration:none;
    color:#333;
    padding:0px;
    margin:0px;
    position:relative;
    top:1px;
}

 ul.tabs a:active {
    outline:none;
}

ul.tabs a:hover {
    color:red;
}

ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    font-size: 14px;
    cursor:default !important;
    color:#000 !important;
}

.panes .pane {
    display:none;
}

#pane2 { 
    position: absolute;
    top: 80px;
    bottom: 10px;
    left: 80px;
    right: 10px;
}

嵌入了ACE编辑器的HTML

的index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
  </head>
  <body>
  <div id="pane2">
    function foo(items){
      var x = "All this is syntax highlighted";
      return x;
    }
  </div>
  <script src="test.js"></script>
  </body>
</html>

test.css - 是相同的

test.js

var editor = ace.edit("pane2");
editor.getSession().setUseWorker(false);
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/javascript");

带有选项卡的HTML和第二个选项卡中的ACE编辑器

的index.html

<!DOCTYPE html>
<meta charset="utf-8">
<html xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" charset="utf-8"></script>
    <script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" charset="utf-8"></script>
  </head>
  <body>
    <ul class="tabs">
      <li><a href="#">Tab 1</a></li>
      <li><a href="#">Tab 2</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="panes">
      <div id="pane1">Tab1 content</div>
      <div id="pane2">
          function foo(items){
            var x = "All this is syntax highlighted";
            return x;
          }
      </div>
    </div>
    <script>
      $(function() {
        $("ul.tabs").tabs("div.panes > div");
      });
    </script>
    <script src="test.js"></script>
  </body>
</html>

test.css - 是相同的

test.js - 是相同的

然后标签1正确显示内容但标签2中没有编辑器。 This是非工作代码的助手。

任何有关修复问题的提示，帮助，现成的代码都表示赞赏。提前谢谢。

Answer 1

你永远不应该写像.panes div {display:none}; :)这样的CSS Ace主要由div组成，这个规则隐藏了Ace中的所有内容。您可以改用.panes>.pane。有关工作演示的信息，请参阅http://plnkr.co/edit/fX3ODmSgguQHXq9daGPA?p=preview

你使用的btw版本的ace很老，使用jsdelivr或cdn.js的新版本或从github下载。

Answer 2

http://jsfiddle.net/CzLnW/3/

这可能不是最佳解决方案，但无论如何它都可以派上用场。

我在使用基于标签的系统时遇到了一些麻烦，我最终抓住了我的外置硬盘并抓住了一个移动标签式网页浏览器实验项目。

我尝试将ace编辑器直接嵌入到每个选项卡中，但这不起作用。因此，您可能希望尝试将其嵌入到网站中并通过iframe进行链接。这不是最好的解决方案，但是我现在能想出的最好的解决方案。

JQuery的/ JavaScript的：

var websiteframe = '<iframe src="http://bing.com/" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
var tabs = $("#tabs").tabs();
var tabTitle = $('#tab_title');
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
    tabCounter = 2;

function addTab() {
    var label = tabTitle.val() || "" + tabCounter,
        id = "tabs-" + tabCounter,
        li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
        websiteframe = '<iframe src="http://duckduckgo.com/" width="100%" height="100%" allowtransparency="true" frameBorder="0">Your browser does not support IFRAME</iframe>';
    tabs.find(".ui-tabs-nav").append(li);
    tabs.append("<div align='center' id='" + id + "'>" + websiteframe + "</div>");
    tabs.tabs("refresh");
    tabCounter++;
}

$("#add_tab").click(function () {
    addTab();
});

// close icon: removing the tab on click
tabs.delegate( "span.ui-icon-close", "click", function() {
    var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    tabs.tabs( "refresh" );
});

tabs.bind( "keyup", function( event ) {
    if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
        var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
        $( "#" + panelId ).remove();
        tabs.tabs( "refresh" );
    }
});

将ACE编辑器嵌入选项卡

HTML with tabs

嵌入了ACE编辑器的HTML

带有选项卡的HTML和第二个选项卡中的ACE编辑器

2 个答案: