Kendo ui移动分屏导航问题

我尝试为通用应用设置示例。目前我在splitview内部导航卡住了。控制台记录错误，指出找不到链接“#rightOne”和“#rightTwo”。这是我的代码（kendo ui dojo中的testet）。如果你把你的2个链接到按钮构件与data-role="button"然后是作品Kendo 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>

来源

2014-05-25 Romano Zumbé

：代码调整为八方通展示平板电脑代码。

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

我真的不知道为什么这改变了剑道的内部路由，但它看起来像当它是一个纯<a>然后它试图代替实际负荷导航从DOM视图元素。

来源

2014-05-25 22:48:44 CodingWithSpike

Kendo ui移动分屏导航问题

回答

相关问题