剑道移动图表不可滚动?

时间:2014-09-10 15:24:28

标签: kendo-ui kendo-mobile

JSFiddle example此处

我在三星Galaxy S4以及Chrome的移动仿真器上测试它。

<div class="demo-section">
    <div id="drawer">
        <a href="#" data-target="DashBoard" class="drawer-link active">
            DashBoard
        </a>
        <a href="#" data-target="BioMarkers" class="drawer-link">BioMarkers</a>
        <a href="#" data-target="LifeStyle" class="drawer-link">LifeStyle</a>
        <a href="#" data-target="Settings" class="drawer-link">Settings</a>
    </div>

    <div id="content-container" >
        <a id="drawer-trigger" href="#"></a>

        <div id="DashBoard" class="inner-content" style="height: 100%;width:100%;padding:5px;">
            <h3>DashBoard</h3>
            <br />
            <div id="_steps">
                <h4>Steps</h4>
                <div id="steps" style="height: 80px; background-color: lightgray;"></div>
            </div>
            <br />
            <div id="_distance">
                <h4>Distance</h4>
                <div id="distance" style="height: 80px; background-color: lightgray;"></div>
            </div>
            <br />
            <div id="_calories">
                <h4>Calories Out</h4>
                <div id="caloriesout" style="height: 80px; background-color: lightgray;"></div>
            </div>
        </div>

        <div id="BioMarkers" class="inner-content">
            BioMarkers
        </div>
        <div id="LifeStyle" class="inner-content">
            LifeStyle
        </div>
        <div id="Settings" class="inner-content">
            Settings
        </div>
    </div>
</div>




$(document).ready(function () {

        $("#steps").width($("#_steps").width());
        $("#distance").width($("#_distance").width());
        $("#caloriesout").width($("#_calories").width());


        $("#steps").kendoSparkline({
            dataSource: {
                data: actData
            },
            type: "area",
            seriesColors: ["blue"],
            series: [{
                name: "steps",
                field: "steps",
                categoryField: "createddate"
            }],
        });

        $("#distance").kendoSparkline({
            dataSource: {
                data: actData
            },
            seriesColors: ["green"],
            series: [{
                name: "distances",
                field: "distances",
                categoryField: "createddate"
            }],
        });

        $("#caloriesout").kendoSparkline({
            dataSource: {
                data: actData
            },
            type: "column",
            seriesColors: ["red"],
            series: [{
                name: "caloriesOut",
                field: "caloriesOut",
                categoryField: "createddate"
            }],
        });

    });

    $(function () {
        $("#drawer").kendoMobileDrawer({
            container: "#content-container"
        });

        $("#drawer-trigger").click(function () {
            $("#drawer").data("kendoMobileDrawer").show();
            return false;
        });

        $(".drawer-link").click(function () {
            $("#drawer").data("kendoMobileDrawer").hide();
            $(".drawer-link").removeClass("active");
            $(this).addClass("active");
            return false;
        });

        $(".drawer-link").click(function () {
            $(".inner-content").hide();
            $("#" + $(this).data("target")).show();
        });

    });


    var app = new kendo.mobile.Application(document.body);

我的问题是我无法使用触摸滚动图表。我正在使用kendoMobileDrawer。

移动版本位于网址http://m.biotracker.me

0 个答案:

没有答案