Kendo ui 移动拆分视图导航问题
Posted
技术标签:
【中文标题】Kendo ui 移动拆分视图导航问题【英文标题】：Kendo ui mobile splitview navigation issue 【发布时间】：2014-07-14 13:21:14 【问题描述】：我尝试为通用应用设置示例。目前我被困在拆分视图中的导航。控制台记录一个错误，指出未找到链接“#rightOne”和“#rightTwo”。这是我的代码（kendo ui dojo 中的 testet）。代码调整为始终显示平板代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<style>
html, body, #phoneApp
height: 100%;
</style>
</head>
<body>
<div id="tabletApp" style="display:none;">
<div data-role="splitview">
<div data-role="pane" id="left" data-layout="leftLayout">
<div data-role="view">
<a href="#rightOne" data-target="right">One</a>
<a href="#rightTwo" data-target="right">Two</a>
</div>
<div data-role="layout" data-id="leftLayout">
<div data-role="header">
<div data-role="navbar">
TEST APP
</div>
</div>
</div>
</div>
<div data-role="pane" id="right" data-layout="rightLayout">
<div data-role="view" id="rightOne">
One
</div>
<div data-role="view" id="rightTwo">
Two
</div>
<div data-role="layout" data-id="rightLayout">
<div data-role="header">
<div data-role="navbar">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="phoneApp" style="display:none;">
<div data-role="view">
<h1>Phone Home</h1>
</div>
<div data-role="view" id="about">
<h1>Phone About</h1>
</div>
<div data-role="layout" data-id="phoneDefault">
<div data-role="header">
<div data-role="navbar">
Phone App
</div>
</div>
<!--Content-->
<div data-role="footer">
<div data-role="tabstrip">
<a href="" data-icon="home">Home</a>
<a href="#about" data-icon="info">About</a>
</div>
</div>
</div>
</div>
<script>
$(function()
var app,
//Must be mobile and tablet
isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
appElement = null,
appLayout = null;
console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);
appElement = $("#tabletApp");
appLayout = (isTablet) ? null : "phoneDefault";
console.log(appElement);
app = new kendo.mobile.Application(appElement,
transition: 'slide'
);
//Adjust visibility of proper app container
appElement.show();
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：如果您使用data-role="button" 将您的 2 个链接变成 Button 小部件，那么就可以了。
<a href="#rightOne" data-target="right" data-role="button">One</a>
<a href="#rightTwo" data-target="right" data-role="button">Two</a>
我不太确定为什么这会改变 Kendo 中的内部路由，但看起来当它是一个普通的 <a> 时，它会尝试实际导航而不是从 DOM 加载视图元素。
【讨论】：
以上是关于Kendo ui 移动拆分视图导航问题的主要内容，如果未能解决你的问题，请参考以下文章
在弹出窗口中显示 UISplitViewController