Kendo ui mobile将默认主题设置为flat ui
Posted
技术标签:
【中文标题】Kendo ui mobile将默认主题设置为flat ui【英文标题】：Kendo ui mobile set default theme to flat ui 【发布时间】：2013-09-07 04:57:35 【问题描述】：我刚开始使用 kendo ui，并在下面运行一个非常基本的示例。
它目前显示为 ios，但我想一直将其设置为平面 ui 主题。我在演示或文档中看不到任何说明如何执行此操作的内容。
谁能告诉我如何将默认主题更改为平面设计？
<!doctype html>
<html>
<head>
<!-- Kendo UI Mobile CSS -->
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<!-- jQuery javascript -->
<script src="js/jquery.min.js"></script>
<!-- Kendo UI Mobile combined JavaScript -->
<script src="js/kendo.mobile.min.js"></script>
<title>Kendo UI Examples</title>
</head>
<body>
<!-- Kendo Mobile View -->
<div data-role="view" data-title="test" id="index">
<!--Kendo Mobile Header -->
<header data-role="header">
<!--Kendo Mobile NavBar widget -->
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<!--Kendo Mobile ListView widget -->
<ul data-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!--Kendo Mobile Footer -->
<footer data-role="footer">
<!-- Kendo Mobile TabStrip widget -->
<div data-role="tabstrip">
<a data-icon="home" href="#index">Home</a>
<a data-icon="settings" href="#settings">Settings</a>
</div>
</footer>
</div>
<script>
// Initialize a new Kendo Mobile Application
var app = new kendo.mobile.Application();
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您可以在应用的声明中覆盖设备/皮肤。
var app = new kendo.mobile.Application($(document.body), skin: 'flat' );
或者您可以强制每个人都使用类似于 Windows Phone 的界面
var app = new kendo.mobile.Application($(document.body), platform: 'wp8' );
查看文档... http://docs.kendoui.com/api/mobile/application#configuration-platform
【讨论】：
【参考方案2】：您需要在加载页面上添加所选样式的选择。
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.flat.min.css" rel="stylesheet" />
【讨论】：
顺便说一句，如果您指定主题，我不知道您是否需要包含 all.css。你可能想测试一下。 你不需要 flat skin CSS，因为它包含在 all 包中。 另外，如果您在实例化应用程序时没有指定平台或皮肤，系统将尝试显示与设备匹配的 CSS，您可能无法得到您想要的结果。 CSS 还不够。以上是关于Kendo ui mobile将默认主题设置为flat ui的主要内容，如果未能解决你的问题，请参考以下文章
Kendo UI Bootstrap 主题无法与 Bootstrap 3.1.0 配合使用