Question

我尝试为通用应用设置示例。目前我在splitview中遇到了导航问题。控制台记录一个错误，指出链接＆＃34;＃rightOne＆＃34;和＆＃34;＃rightTwo＆＃34;找不到。这是我的代码（在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">
                              &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>

Answer 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移动splitview导航问题

1 个答案: