我在三星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
中