16.11.2017, 03:45
|
|
Кандидат Javascript-наук
|
|
Регистрация: 17.04.2015
Сообщений: 125
|
|
|
Подгрузка файла с кодом и подсветка кода
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 - нет. Покажите, как сделать.
В архиве плагин и оба файла. Проект как есть. |
|
16.11.2017, 09:28
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,720
|
|
Строку 35 замените на это:
$("#three").load("3.html",function(){
SyntaxHighlighter.all()
});
|
|
16.11.2017, 13:47
|
|
Кандидат Javascript-наук
|
|
Регистрация: 17.04.2015
Сообщений: 125
|
|
|
Не подсвечивает всё равно.
|
|
16.11.2017, 14:07
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
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>
Последний раз редактировалось Dilettante_Pro, 16.11.2017 в 14:21.
|
|
16.11.2017, 14:48
|
|
Кандидат Javascript-наук
|
|
Регистрация: 17.04.2015
Сообщений: 125
|
|
|
Как вариант - работает же.
С другой стороны iframe повод холивару, и не похоже, что хорошее решение.
|
|
16.11.2017, 15:06
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
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>
Последний раз редактировалось Dilettante_Pro, 16.11.2017 в 15:33.
|
|
16.11.2017, 15:07
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
daslex,
|
Сообщение от daslex
|
|
iframe повод холивару
|
Вам ехать или шашечки?
|
|
16.11.2017, 15:32
|
|
Кандидат Javascript-наук
|
|
Регистрация: 17.04.2015
Сообщений: 125
|
|
|
Я не в теме сленга.
Пока что у меня просто выбора не остается, кроме использования iframe.
Там полноценная страница подгружается (в реальном месте), смесь HTML и кодов. Так что, возможно (я ни в коем случае не утверждаю, что это на самом деле так), iframe вообще единственный выход.
В любом случае спасибо. Тут на форуме система кармы странная, я не могу добавить ни одному из поучаствовавших здесь форумчан, пока отзыв кому-то не сделаю. (Либо одни и те же люди мне здесь всегда помогают, и я уже добавлял, а система кармы противится).
|
|
16.11.2017, 15:48
|
|
Профессор
|
|
Регистрация: 27.11.2015
Сообщений: 2,899
|
|
daslex,
|
Сообщение от daslex
|
|
Я не в теме сленга.
|
Если вы про шашечки, так это старый анекдот.
Одесса, вокзал. Запарившаяся дама с горой чемоданов мечется в поисках такси. Подъезжает наконец какая-то машина: «Куда желаете?» Дама осматривает авто: «Позвольте, вы же не такси!» – «Я не понял, мадам, так вам ехать или шашечки?»
Вот так и iframe - оно работает, а кошерно это или халяльно - дело десятое
Насчет единственного выхода - посмотрите вариант в пост №6 - я там рабочий пример добавил
Последний раз редактировалось Dilettante_Pro, 16.11.2017 в 15:51.
|
|
16.11.2017, 17:40
|
|
Кандидат Javascript-наук
|
|
Регистрация: 17.04.2015
Сообщений: 125
|
|
|
Вторая часть (если вот так в одну страницу всё впихивать) меня вообще не устраивает. Только из-за того, что страница одна слишком большой получилась, а на ней ещё картинок куча, я пытаюсь динамически немного разветвить тему под нужды посетителя, вынося несколько логических продолжений в отдельные файлы. В таком случае, как показано в гибриде, я, похоже, должен то, что вынес в отдельный файл, из файла того внести обратно. Как-то это странно такое делать.
Я просто думаю о тех, у кого проблемы с траффиком, им многомегабайтовые страницы вообще трудно загружать.
И я не представляю вообще, как бы я мог выдёргивать тучу кусочков листингов из "3.html", с целью их подсветки в "index.html". Даже если я их повыдёргиваю, мне представляется трудность дальнейшей правки, если придётся править.
|
|
|
|
