Подгрузка файла с кодом и подсветка кода
Вложений: 1
index.html
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if(v === 'two'){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else if(v === 'three'){
$('#one').hide();
$('#two').hide();
$('#three').show();
//=============
/*$.ajax({
url: "2.html",
cache: false,
success: function(html){
$("#three").html(html);
}
});
*/
$(document).ready(function(){
$("#three").load("3.html");
});
//=============
}
})
})
</script>
<style>
.none{
display:none;
}
</style>
<input type="radio" name="sw" value="one" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="two" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="three" id="x3"><label for="x3">3</label>
<div id="one" class="none"></div>
<div id="two" class="none"></div>
<div id="three" class="none"></div>
3.html <head> <meta charset="UTF-8"> <link rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" type="text/css"> <link rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css" type="text/css"> </head> <pre class="brush: html"> <div class="wraperr"> <div class="lefmenu">Hello world </div> <div class="content"> </div> </div> </pre> <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script> <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script> <script type="text/javascript"> SyntaxHighlighter.all() </script> Нужно в Index.html динамически подгрузить файл 3.html и подсветить код, который описывается в 3.html. Отдельно в файле 3.html подсветка работает, но при подгрузке в index.html - нет. Покажите, как сделать. В архиве плагин и оба файла. Проект как есть. |
Строку 35 замените на это:
$("#three").load("3.html",function(){
SyntaxHighlighter.all()
});
|
Не подсвечивает всё равно.
|
daslex,
М.б. грузить 3.html не в div, а в iframe? Например, так ( index.html)
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[name=sw]').click(function(){
var v = ($(this).val());
console.log(v);
if(v === 'one'){
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if(v === 'two'){
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else if(v === 'three'){
$('#one').hide();
$('#two').hide();
$('#three').show();
$(document).ready(function(){
$("#three").attr("src","3.html");
});
}
})
})
</script>
<style>
.none{
display:none;
}
</style>
</head>
<body>
<input type="radio" name="sw" value="one" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="two" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="three" id="x3"><label for="x3">3</label>
<div id="one" class="none"></div>
<div id="two" class="none"></div>
<iframe id="three" class="none" ></iframe>
</body>
|
Как вариант - работает же.
С другой стороны iframe повод холивару, и не похоже, что хорошее решение. |
daslex,
3.html - самостоятельная страница, со своими плагинам, скриптами, стилями и не будет нормально работать в div. Не хотите грузить в iframe - тогда надо именно в нее добавлять элементы управления, а блоки pre помещать в скрываемые/отображаемые div или использовать <pre class='brush: js; collapse: true'>Здесь контент, который необходимо подсветить и скрыть</pre> Например, вот такой гибридный вариант
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="syntaxhighlighter/styles/shCore.css" type="text/css">
<link rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('input[name=sw]').click(function () {
var v = ($(this).val());
console.log(v);
if (v === 'one') {
$('#one').show();
$('#two').hide();
$('#three').hide();
}
else if (v === 'two') {
$('#one').hide();
$('#two').show();
$('#three').hide();
}
else if (v === 'three') {
$('#one').hide();
$('#two').hide();
$('#three').show();
//=============
/*$.ajax({
url: "2.html",
cache: false,
success: function(html){
$("#three").html(html);
}
});
*/
$(document).ready(function () {
$("#three").attr("src", "3.html");
});
//=============
}
})
})
</script>
</head>
<body>
<input type="radio" name="sw" value="one" id="x1"><label for="x1">1</label>
<input type="radio" name="sw" value="two" id="x2"><label for="x2">2</label>
<input type="radio" name="sw" value="three" id="x3"><label for="x3">3</label>
<div id="one" style="display:none">
<pre class="brush: html">
<div class="wraperr1">
<div class="lefmenu">Hello world </div>
<div class="content"> </div>
</div>
</pre>
</div>
<div id="two" style="display:none">
<pre class="brush: html">
<div class="wraperr2">
<div class="lefmenu">Hello world </div>
<div class="content"> </div>
</div>
</pre>
</div>
<div id="three" style="display:none">
<pre class="brush: html">
<div class="wraperr3">
<div class="lefmenu">Hello world </div>
<div class="content"> </div>
</div>
</pre>
</div>
<pre class='brush: html; collapse: true'>
<div class="wraperr4">
<div class="lefmenu">Hello world </div>
<div class="content"> </div>
</div>
</pre>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
|
daslex,
Цитата:
|
Я не в теме сленга.
Пока что у меня просто выбора не остается, кроме использования iframe. Там полноценная страница подгружается (в реальном месте), смесь HTML и кодов. Так что, возможно (я ни в коем случае не утверждаю, что это на самом деле так), iframe вообще единственный выход. В любом случае спасибо. Тут на форуме система кармы странная, я не могу добавить ни одному из поучаствовавших здесь форумчан, пока отзыв кому-то не сделаю. (Либо одни и те же люди мне здесь всегда помогают, и я уже добавлял, а система кармы противится). |
daslex,
Цитата:
Одесса, вокзал. Запарившаяся дама с горой чемоданов мечется в поисках такси. Подъезжает наконец какая-то машина: «Куда желаете?» Дама осматривает авто: «Позвольте, вы же не такси!» – «Я не понял, мадам, так вам ехать или шашечки?» Вот так и iframe - оно работает, а кошерно это или халяльно - дело десятое Насчет единственного выхода - посмотрите вариант в пост №6 - я там рабочий пример добавил |
Вторая часть (если вот так в одну страницу всё впихивать) меня вообще не устраивает. Только из-за того, что страница одна слишком большой получилась, а на ней ещё картинок куча, я пытаюсь динамически немного разветвить тему под нужды посетителя, вынося несколько логических продолжений в отдельные файлы. В таком случае, как показано в гибриде, я, похоже, должен то, что вынес в отдельный файл, из файла того внести обратно. Как-то это странно такое делать.
Я просто думаю о тех, у кого проблемы с траффиком, им многомегабайтовые страницы вообще трудно загружать. И я не представляю вообще, как бы я мог выдёргивать тучу кусочков листингов из "3.html", с целью их подсветки в "index.html". Даже если я их повыдёргиваю, мне представляется трудность дальнейшей правки, если придётся править. |
| Часовой пояс GMT +3, время: 06:47. |