我正在尝试创建一个AppBuilder应用程序并且遇到了一个表单的单选按钮组。 http://demos.telerik.com/kendo-ui/mobile/forms/checkboxes.html中的示例显示了listview。但是，由于我的表单本身是一个列表视图，嵌套在表单列表视图中的单选按钮的列表视图不起作用。有什么方法可以显示单选按钮吗？
答案 0 :(得分：0)
以下代码可能会帮助您解决问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
</head>
<body>
<div id="forms" data-role="view" data-title="Form Elements" data-init="initForm" data-use-native-scrolling="true">
<form action="./index.html">
<ul data-role="listview" data-style="inset">
<li>
<label>Select element
<select>
<option value="First Option">First Option</option>
<option value="Second Option">Second Option</option>
<option value="Third Option">Third Option</option>
<option value="Fourth Option">Fourth Option</option>
</select>
</label>
</li>
<li>
<label>DropDownList
<select id="dropdown">
<option value="First Option">First Option</option>
<option value="Second Option">Second Option</option>
<option value="Third Option">Third Option</option>
<option value="Fourth Option">Fourth Option</option>
<option value="First Option">Fifth Option</option>
<option value="Sixth Option">Sixth Option</option>
</select>
</label>
</li>
<li>
<label>Slider
<input id="slider" type="range" max="100" />
</label>
</li>
<li>
<label>Type text
<input type="text" value="Text" />
</label>
</li>
<li>
<label>
Type password
<input type="password" value="password" />
</label>
</li>
<li>
<label>
Type search
<input type="search" value="search" />
</label>
</li>
<li>
<label>
Type url
<input type="url" value="http://www.telerik.com" />
</label>
</li>
<li>
<label>
Type email
<input type="email" value="kendoui@telerik.com" />
</label>
</li>
<li>
<label>
Type number
<input type="number" value="20" />
</label>
</li>
<li>
<label>
Type tel
<input type="tel" value="+44 22 11 10" />
</label>
</li>
<li>
<label>
Type date
<input type="date" value="2012-03-22" />
</label>
</li>
<li>
<label>
Type time
<input type="time" value="22:30" />
</label>
</li>
<li>
<label>
Type month
<input type="month" value="2012-01" />
</label>
</li>
<li>
<label>
Type datetime-local
<input type="datetime-local" value="2012-03-22T20:15" />
</label>
</li>
<li>
<label>
Textarea
<textarea style="resize: none">Multiline
Text</textarea>
</label>
</li>
<li data-layout="checklayout">
<ul data-role="listview" data-style="inset">
<li>
<label>
<input type="checkbox" checked="checked" />
Lettuce
</label>
</li>
<li>
<label>
<input type="checkbox" />
Carrots
</label>
</li>
<li>
<label>
<input type="checkbox" />
Peas
</label>
</li>
<li>
<label>
<input type="checkbox" />
Bread
</label>
</li>
<li>
<label>
<input type="checkbox" />
Unicorns
</label>
</li>
</ul>
</li>
</ul>
</form>
</div>
<script>
function initForm() {
var body = $(".km-pane");
if (kendo.ui.DropDownList) {
$("#dropdown").kendoDropDownList({
// The options are needed only for the desktop demo, remove them for mobile.
popup: {
appendTo: body
},
animation: {
open: {
effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") || body.hasClass("km-wp") ? "slideIn:up" : "slideIn:down"
}
}
});
}
if (kendo.ui.Slider) {
$("#slider").kendoSlider({
tooltip: {
enabled: false
}
});
}
}
</script>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>