문제
I have to jsfiddles
Below are complete codes per warning
index.html
https://stackoverflow.com/questions/21271487
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!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;
}
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 - is the same
test.js
var editor = ace.edit("pane2");
editor.getSession().setUseWorker(false);
editor.setTheme("ace/theme/textmate");
editor.getSession().setMode("ace/mode/javascript");
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 - is the same
test.js - is the same
then Tab 1 shows content correctly but there's no editor in tab 2. This is the jsfiddle of non-working code.
Any hints, help, ready-to-go code that fix the problem are appreciated. Thanks in advance.
해결책
You should never ever write css like .panes div {display:none};:)
Ace mostly consists of divs, and this rule hides everything inside Ace.
You can use .panes>.pane instead.
for working demo see http://plnkr.co/edit/fX3ODmSgguQHXq9daGPA?p=preview
Btw version of ace you used is very old, use newer one from jsdelivr or cdn.js or download from github.
다른 팁
This is probably not the best solution but it may come in handy anyway.
I was having some trouble getting it to work with your tab based system, I ended up grabbing my external hard drive and grabbing a mobile tabbed web browser experiment project.
I tried embedding the ace editor directly into each tab, but that wasn't working. So you may want to try and embed it into a website and link it via iframe. It's not the best solution, but the best I could come up with at this time.
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" );
}
});
