Question

我创建了一个Highcharts实现，其中包含一个基于jQuery的工作单选按钮切换＆＃34; view select＆＃34;在两个图表之间：http://jsfiddle.net/6sAYF/（它位于右下方）

这里是工作的jQuery函数和相应的html：

$(function() {
    $("[name=toggler]").click(function(){
            $('.toHide').hide();
            $("#0829-"+$(this).val()).fadeIn('fast');
    });
 });

<div id="0829-1" class="toHide" ></div>
<div id="0829-2" class="toHide" style="display:none;width:780px;"></div>

<label><input id="rdb1" type="radio" name="toggler" value="1" checked/>&#37;</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" />2</label>

从哪里开始？我应该重写Mootools的功能吗？使用jQuery noconflict（）模式和原始函数？

我的mootools版本没有切换功能：http://jsfiddle.net/JhWe6/

非常感谢有见识的人。

Answer 1

<div id="graphwrap" style="height: 410px;">

<div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
<div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>

<div id="viewSelectWrap">
<h4>View Select</h4>
<label><input id="rdb1" type="radio" name="toggler" value="1" style="cursor:pointer;" checked/>&#37;</label>
<label><input id="rdb2" type="radio" name="toggler" value="2" style="cursor:pointer;" />2</label>
</div>

</div>


window.addEvent('domready', function() {
document.getElements("[name=toggler]").addEvent('click', function(){
    $$('.toHide').setStyle('top', '-9999em');
    $$('.toHide').setStyle('opacity', '0');
    $("divID-"+this.get('value')).setStyle('top', '0').fade(0,1);
});  
var chart1 = new Highcharts.Chart({
    chart: {
         renderTo: 'divID-1',
         height: 400, //works with the margin-bottom style
         ...

var chart2 = new Highcharts.Chart({
    chart: {
         renderTo: 'divID-2',
         height: 400,
         ...

http://jsfiddle.net/JhWe6/10/

Per Highcharts支持，Highcharts隐藏在页面上的正确方法是使用CSS style =＆＃34; position：relative;顶部：-9999em;＆＃34;并更新CSS＆＃34; top＆＃34;就我而言，MooTools＆＃39; setStyle（＆＃39; top＆＃39;，＆＃39; 0＆＃39;）。我还添加了$$（＆＃39; .toHide＆＃39;）。setStyle（＆＃39; opacity＆＃39;，＆＃39; 0＆＃39;）;这使得淡入淡出。

你还会注意到我需要保留底部：-400px我的第一个div。这是补偿现在渲染为空白的底部div的正确方法吗？

Mootools Highcharts单选按钮在图表之间切换，工作jQuery版本

1 个答案: