剑道ui移动分屏导航问题

我尝试为通用应用程序设置一个示例。目前我被分屏视图中的导航所困扰。控制台记录一个错误，指出没有找到链接"#rightOne"one_answers"#rightTwo"。这是我的代码(测试在剑道ui道场)。代码被调整为总是显示平板代码:

<!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">
                              &nbsp;
                          </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>

如果你用data-role="button"把你的2个链接变成按钮小部件，那么它是有效的。

<a href="#rightOne" data-target="right" data-role="button">One</a>
<a href="#rightTwo" data-target="right" data-role="button">Two</a>

我真的不知道为什么这改变了内部路由在剑道，但它看起来像当它是一个普通的<a>然后它尝试实际导航，而不是从DOM加载一个视图元素

相关内容

最新更新

热门标签：