1
Я переписал Prototype и Scriptaculous ранее красиво работающую и совместимую систему MugTools «toggler», которая позволяет что два разных графика HighCharts переключаются между собой в одном и том же пространстве на странице. Он отлично работает в IE11, Chrome, Firefox, Safari, но, в частности, «переключение» системы не работает в IE9 и 10. Оба HighCharts отображаются правильно, но .setStyle .appear и .fade, похоже, не влияют CSS вообще.Javascript Функция «toggler» не работает в IE9 или IE10 (IE8 имеет резервную копию на месте), но работает в IE11, Chrome, Firefox
document.observe("dom:loaded", function() {
$("rdb1").observe("click", function(){
$("2253-2").setStyle({'opacity': '0'}),
$("2253-2").setStyle({'top': '-9999em'}),
$("btnID-2").fade({duration: .01}),
$("zoomOut-2").fade({duration: .01}),
$("2253-1").appear({duration: .1}),
$("2253-1").setStyle({'top': '0'}),
$("btnID-1").appear({duration: .01}),
$("zoomOut-1").appear({duration: .01}),
$("clr0").setStyle({'margin-bottom': '26px'})
});
$("rdb2").observe("click", function(){
$("2253-1").setStyle({'opacity': '0'}),
$("btnID-1").fade({duration: .01}),
$("zoomOut-1").fade({duration: .01}),
$("2253-2").setStyle({'top': '0'}),
$("2253-2").appear({duration: .1}),
$("btnID-2").appear({duration: .01}),
$("zoomOut-2").appear({duration: .01}),
$("clr0").setStyle({'margin-bottom': '26px'})
});
});
и HTML:
<div id="legendwrap" class="noPrint">
<h4 class="chartViewLabel">View:</h4>
<label class="viewSelectBtn"><input id="rdb1" type="radio" name="toggler" value="1" checked/> %T</label>
<label class="viewSelectBtn"><input id="rdb2" type="radio" name="toggler" value="2" /> OD</label>
</div>
<div id="zoomwrap" style="float:left;text-align:left;margin-top:-1px;margin-left:2px;zoom: 1;display: block;z-index:2;overflow: hidden;" class="noPrint">
<button id="zoomOut-1" class="btnz" style="z-index:2;position:relative;" ><i class="fa fa-search-minus"></i></button>
<button id="zoomOut-2" class="btnz" style="z-index:3;position:relative;opacity:0;"><i class="fa fa-search-minus"></i></button>
</div>
<div id="buttonwrap" style="float:right;text-align:right;margin:0 12px 0 10px;overflow: hidden;zoom: 1;display: block;">
<div id="btnID-1" class="toHide" style="position:relative;padding-top:0px;overflow: hidden;zoom: 1;display: block;">
<button id="helpBtn" class="btnz" ><i class="fa fa-question"></i></button>
<button id="printit" class="btnz" ><i class="fa fa-print"></i></button>
<button id="exportPNG" class="btnz" ><i class="fa fa-file-image-o"></i></button>
<button id="exportPDF" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>
<button id="exportCSV" class="btnz" ><i class="fa fa-file-text-o"></i></button>
</div>
<div id="btnID-2" class="toHide" style="position:relative;opacity:0;overflow: hidden;zoom: 1;display: block;"> <button id="helpBtn2" class="btnz" ><i class="fa fa-question"></i></button>
<button id="printit2" class="btnz" ><i class="fa fa-print"></i></button>
<button id="exportPNG2" class="btnz" ><i class="fa fa-file-image-o"></i></button>
<button id="exportPDF2" class="btnz" ><i class="fa fa-file-pdf-o"></i></button>
<button id="exportCSV2" class="btnz" ><i class="fa fa-file-text-o"></i></button>
</div>
</div>
<!--Line break and margin correction-->
<div id="clr0" class="clr" style="clear:both;line-height:0;"> </div>
<!--Render the chart-->
<div id="graphwrap" style="position: relative;left: 0px;height:500px;">
<div id="2253-1" class="toHide" style="position:relative;margin-bottom:-500px;" ></div>
<div id="2253-2" class="toHide" style="position:relative;opacity:0;top:-9999em;" ></div>
</div>
Сайт версия пример здесь: http://buy.alluxa.com/317-5-1-5-od6-ultra-narrow-bandpass.html
Я потянув меня за волосы с этим. Любые советы или даже намек были бы оценены. Спасибо.