Я сделал html-сайт с некоторым кодом jQuery и протестировал его на Linux с Chrome и Firefox.И это работает точно так, как должно.Но когда я пытаюсь открыть эту страницу в Internet Explorer (версия 6) на Windows XP, возникает проблема.Вот скриншот:
Мой код jQuery выглядит так:
/*Кад се изабере PHP у првој падајућој листи онда се испод приказује листа
* са PHP библиотекама за приказ графикона. У супротном, када се из падајуће
* листе изабере jQuery онда се појављују jQuery библиотеке за приказ графикона.
* Поред овога, за PHP се скривају опције за зумирање и постизање hover ефекта,
* пошто их није могуће остварити.
*/
$(document).ready(function() {
$('#phplib').hide();
$("select[name='lang']").change(function() {
var $selectedOption = $(this).find('option:selected');
if ($selectedOption.val() == 'php') {
$('#jqlib').hide();
$('#phplib').show();
//Онемогућавамо зумирање и ефекат превлачења (hover)
$('#zoom').hide();
$('#hover').hide();
$('#zoom-text').hide();
$('#hover-text').hide();
} else {
$('#phplib').hide();
$('#jqlib').show();
//Омогућавамо зумирање и ефекат превлачења (hover)
$('#zoom').show();
$('#hover').show();
$('#zoom-text').show();
$('#hover-text').show();
}
});
});
$(document).ready(function () {
$(".options input[type='submit']").click(function() {
//Тест2 - добијање назива изабраног језика (php или jQuery)
var $lang = $("select[name='lang']").find('option:selected').val();
//Да ли треба да се прикаже легенда на графикону
var $legenda = $('#legenda').is(':checked');
//Распон дана за који желимо температуру
var $DatumOd = $('#DatumOd').datepicker('getDate').getDate();
var $DatumDo = $('#DatumDo').datepicker('getDate').getDate();
// console.log($DatumOd);
// console.log($DatumDo);
// if ($DatumOd === null) {
/ / $DatumOd = '';
// }
// if ($DatumDo === null) {
// $DatumDo = '';
// }
if ($lang == "php") {
var $phplib = $("select[name='phplib']").find('option:selected').val();
if ($phplib == "jpgraph") {
// $.post('php/jpgraph/example2.php', {
// 'legenda': $legenda,
// 'DatumOd': $DatumOd,
// 'DatumDo': $DatumDo
// }, function(data) {
// var $newImg = $('<img src="' + data + '" />');
// $('#placeholder').html($newImg);
// });
$('#placeholder').html('<img src="php/jpgraph/example2.php?DatumOd=' + $DatumOd + '&DatumDo=' + $DatumDo + '&legenda=' + $legenda + '" />');
} else if ($phplib == "phplot") {
$('#placeholder').html('<img src="php/phplot/example1.php?DatumOd=' + $DatumOd + '&DatumDo=' + $DatumDo + '&legenda=' + $legenda + '" />');
// $.post('php/phplot/example1.php', {
// 'legenda' : $legenda,
// 'DatumOd': $DatumOd,
// 'DatumDo': $DatumDo
// }, function(data) {
// var $newImg = $('<img src="' + data + '"/>');
// $('#placeholder').html($newImg);
// });
} else {
$('#placeholder').html('<img src="php/pchart/Example1.php?DatumOd=' + $DatumOd + '&DatumDo=' + $DatumDo + '&legenda=' + $legenda + '" />');
}
} else if ($lang == "jquery") {
$jqlib = $("select[name='jqlib']").find('option:selected').val();
//Да ли треба да постоји опција за зумирање графикона
$zoom = $('#zoom').is(':checked');
//Да ли треба да постоји опција превлачења (када пређемо мишем преко линије треба да нам да податке у облику нпр. [1, 5]
$hover = $('#hover').is(':checked');
if ($jqlib == "flot") {
//Прва линија која се исцртава на графику. Друга се добија из базе података (data)
//var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
//Прослеђивање захтева за извршењем database2json.php путем POST методе.
$.post('php/database2json.php', {
'DatumOd': $DatumOd,
'DatumDo': $DatumDo
}, function(data){
//Постављамо опције
var options = {
series: {
lines: {show: true},
points: {show: true}
},
grid: {hoverable: $hover, clickable: true},
legend: {
show: $legenda
},
zoom: {
interactive: $zoom
},
pan: {
interactive: $zoom
}
};
//Из базе добијамо податке у виду низа. Нпр: [[1,1],[2,5],[3,3]]
//Уколико низу података не подесимо лабелу, неће се прказивати лабела на легенди.
var obj = {};
obj.label = "Ниш";
obj.data = data;
/* Када се подаци врате са сервера (тј. из database2json.php), врши се
* исцртавање графика са 2 линије (једна из базе - data, друга из ручно
* направљеног низа d2).
*/
var plot = $.plot($("#placeholder"), [obj], options);
},
'json'
);
// show pan/zoom messages to illustrate events
$('#placeholder').bind('plotpan', function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Panning to x: " + axes.xaxis.min.toFixed(2)
+ " – " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " – " + axes.yaxis.max.toFixed(2));
});
$('#placeholder').bind('plotzoom', function (event, plot) {
var axes = plot.getAxes();
$(".message").html("Zooming to x: " + axes.xaxis.min.toFixed(2)
+ " – " + axes.xaxis.max.toFixed(2)
+ " and y: " + axes.yaxis.min.toFixed(2)
+ " – " + axes.yaxis.max.toFixed(2));
});
var pointClicked = false,
clicksYet = false;
function showTooltip(x, y, contents) {
if( clicksYet )
contents += (pointClicked)? ' hello':' bye';
$('<div id="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
$("#x").text(pos.x.toFixed(2));
$("#y").text(pos.y.toFixed(2));
if (item) {
if (previousPoint != item.datapoint) {
previousPoint = item.datapoint;
$("#tooltip").remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, " [" + x + ", " + y + "]");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
} else if ($jqlib == "jqplot") {
$.post('php/database2json.php', {
'DatumOd': $DatumOd,
'DatumDo': $DatumDo
}, function(data) {
// $.each(data, function(i, e) {
// data[i][0] = parseInt(e[0]);
// data[i][1] = parseInt(e[1]);
// });
var options = {
title: 'Месечна температура',
series: [
{label: 'Ниш'}
],
axes:{
xaxis:{
label:'Дани',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
// min: 1,
// max: 31,
// numberTicks: 31
},
yaxis:{
label:'Температура',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
// min: -20,
// max: 50,
// numberTicks: 10
}
},
legend: {
show: $legenda
},
highlighter: {
show: $hover
},
cursor:{
show: $zoom,
zoom: $zoom, //Вредност се узима из променљиве $zoom (true, false)
showTooltip: true
}
};
//Бришемо све што се налази унутар блока који има id placeholder.
//То радимо да се не би исцртавала нова слика преко претходне.
$('#placeholder').empty();
var plot1 = $.jqplot ('placeholder', [data], options);
},
'json'
);
} else if ($jqlib == "jqchart") {
$.post('php/database2json.php', {
'DatumOd': $DatumOd,
'DatumDo': $DatumDo
}, function(data){
$('#placeholder').jqChart({
title: {text: 'Месечна температура'},
axes: [
{
type: 'linear',
location: 'bottom',
title: {text: 'Дани'}
},
{
type: 'linear',
location: 'left',
title: {text: 'Температура'}
}
],
series: [
{
type: 'line',
title: 'Ниш',
data: data
}
],
legend: {
visible: $legenda,
location: 'w' // compass direction, nw, n, ne, e, se, s, sw, w.
//xoffset: 12, // pixel offset of the legend box from the x (or x2) axis.
//yoffset: 12 // pixel offset of the legend box from the y (or y2) axis.
},
tooltips: { //Ovo je u stvari hover evekat
disabled: !$hover //Omogucen je hover evekat ako je false
}
});
},
'json'
);
} else if ($jqlib == "highcharts") {
var zoomxy;
if ($zoom) {
zoomxy = 'xy';
} else {
zoomxy = '';
}
$.post('php/database2json.php', {
'DatumOd': $DatumOd,
'DatumDo': $DatumDo
},
function(data){
var podaci = [];
$.each(data, function(i, e) {
podaci.push(e[1]);
});
var chart = new Highcharts.Chart({
chart: {
renderTo: 'placeholder',
setDefaultSeriesType: 'area',
zoomType: zoomxy
},
title: {
text: 'Месечна температура'
},
xAxis: {
title: {
text: 'Дани'
}
},
yAxis: {
title: {
text: 'Температура'
}
},
// plotOptions: {
// area: {
// pointStart: 1940,
// marker: {
// enabled: true,
// symbol: 'circle',
// radius: 2,
// states: {
// hover: {
// enabled: false
// }
// }
// }
// }
// },
legend: {
enabled: $legenda
},
tooltip: {
enabled: $hover
},
series: [{
name: 'Ниш',
data: podaci
}]
});
},
'json'
);
}
}
});
});
/* corner() омогућава заобљивање ивица неког елемента.
У овом примеру се заобљују <div> елементи који имају ид-јеве:
#container, #header, #footer */
$(document).ready(function() {
$('#container').corner();
$('#header').corner("top");
$('#footer').corner("bottom");
});
/* Кад се кликне на legendпоља за унос датума отвара се прозорчић за избор датума.
* Наравно, увек је могуће ручно унети датум. */
$(document).ready(function() {
$('#DatumOd').datepicker();
$('#DatumDo').datepicker();
});
РЕДАКТИРОВАТЬ: Я обнаружил, что файл javascript непроблема, но HTML.Мой HTML выглядит так:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Графикони</title>
<!--Generalni stilovi koje se primenjuju u dokumentu-->
<link rel="stylesheet" href="css/layout.css" type="text/css"/>
<!--Ubaceno zbog teme za kalendar-->
<link rel="stylesheet" href="css/jquery-ui-1.8.17.custom.css" type="text/css" />
<!--Tema dodatka jqPlot-->
<link rel="stylesheet" href="css/jquery.jqplot.min.css" type="text/css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<!--Flot plugin za iscrtavanje grafikona-->
<script type="text/javascript" src="js/jquery.flot.js"></script>
<!--Dodatak za zumiranje kod Flot grafikona-->
<script type="text/javascript" src="js/jquery.flot.navigate.min.js"></script>
<!--Dodatak koju omogucava zaobljivanje ivica elemenata-->
<script type="text/javascript" src="js/jquery.corner.js"></script>
<!--jquery.ui je potreban zbog kalendara-->
<script type="text/javascript" src="js/jquery-ui.js"></script>
<!--U ovaj fajl ide kod za iscrtavanje grafikona i pokretanja ostalih efekata.-->
<script type="text/javascript" src="js/custom-backup.js"></script>
<!--skripte potrebne za pokretanje dodatka jqChart-->
<script type="text/javascript" src="js/jquery.jqplot.js"></script>
<!-- Додаци за приказ курсора, зумирање и ховер ефекат -->
<script type="text/javascript" src="js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!--Библиотека потребна за покретање highchart графикона-->
<script type="text/javascript" src="js/highcharts.src.js"></script>
<!-- End additional plugins -->
<!--Neophodni fajlovi za rad jqChart dodatka-->
<link rel="stylesheet" href="css/jquery.jqChart.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.jqChart.min.js"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
</head>
<body>
<!-- content here -->
</body>
</html>
Сообщение об ошибке Internet Explorer не отображается, когда я удаляю эти 3 строки:
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="js/syntaxhighlighter/scripts/shBrushXml.min.js"></script>
Как я уже сказал, все хорошо в Chrome и Firefox.