2

ユニバーサル アプリのサンプルをセットアップしようとしています。現在、スプリットビュー内のナビゲーションに固執しています。コンソールは、リンク「#rightOne」と「#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>
4

1 に答える 1