Mootools Highcharts单选按钮可在图表之间切换，可使用jQuery版本 [英] Mootools Highcharts radio button toggle between charts, working jQuery version

问题描述

我创建了一个Highcharts实现，其中使用了基于jQuery的单选按钮，在两个图表之间切换了视图选择": 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/

非常感谢有见识的人.

解决方案

<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/

根据Highcharts支持，将Highcharts隐藏在页面上的正确方法是使用CSS style ="position:relative; top:-9999em;"并在我的情况下更新MooTools的setStyle('top'，'0')CSS"top".我还添加了$$('.toHide').setStyle('opacity'，'0');使得淡入淡出.

您还会注意到，我需要将页边距设置为:-400px作为我的第一个div.这是补偿现在空白的底部div的正确方法吗?

I've created a Highcharts implementation with a working jQuery-based radio button toggle "view select" between two charts: http://jsfiddle.net/6sAYF/ (it's in the lower-right)

here is the working jQuery function and corresponding 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>

Where to start? Should I rewrite the function for Mootools? Use jQuery noconflict() mode and the original function?

My mootools version is here without toggle function: http://jsfiddle.net/JhWe6/

Many thanks to anyone with insight.

解决方案

<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 support, the correct way for Highcharts to be hidden on a page is to use CSS style="position:relative; top:-9999em;" and update the CSS "top" in my case MooTools' setStyle('top', '0'). I also added $$('.toHide').setStyle('opacity', '0'); which makes the fade in nice.

You'll also notice that I needed to margin-bottom:-400px my first div. Is that the correct way to compensate for the now-rendered-as-blank bottom div?

这篇关于Mootools Highcharts单选按钮可在图表之间切换，可使用jQuery版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！