2015-10-06 121 views
1

我是WinJS开发新手,我开始使用WinJS教程。更新我的HTML并添加一个WinJS.UI.SplitView后,我看不到WinJS.UI.SplitViewCommands。为什么我看不到SplitViewCommand输入?

BTW,当我切换窗格中我看不到图标没有

结果 enter image description here

这是我的代码。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>WePin</title> 

    <!-- WinJS references --> 
    <link href="WinJS/css/ui-dark.css" rel="stylesheet" /> 
    <script src="WinJS/js/base.js"></script> 
    <script src="WinJS/js/ui.js"></script> 

    <!-- WePin references --> 
    <link href="/css/default.css" rel="stylesheet" /> 
    <script src="/js/default.js"></script> 
    </head> 
    <body class="win-type-body"> 
    <div id="app" class="show-home"> 
     <div class="splitView" data-win-control="WinJS.UI.SplitView"> 
     <!-- Pane area --> 
     <div> 
      <div class="header"> 
      <!--this is a button that allows you to "toggle" the menu in and out of view --> 
      <button class="win-splitviewpanetoggle" data-win-control="WinJS.UI.SplitViewPaneToggle" 
         data-win-options="{ splitView: select('.splitView') }"></button> 
      <div class="title">SplitView Pane area</div> 
      </div> 

      <!--this is where the navigation icons go --> 
      <div class="nav-commands"> 
      <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ 
        label: 'Alki Trail', 
        icon: 'mappin', 
        onclick: mySplitView.trailClicked 
       }"></div> 
      </div> 
      </div> 
      <!--/ Pane area--> 

      <!-- Content area --> 
      <div class="contenttext"><h2 class="win-h2">SplitView Content area</h2></div> 
      <!--/ Content area --> 
     </div> 
     </div> 
    </body> 
    </html> 

CSS

.content, 
#app { 
    height: 100%; 
} 
#app .win-splitviewpanetoggle { 
    float: left; 
} 

/* SplitView pane content style*/ 
#app .header { 
    white-space: nowrap; 
} 

#app .title { 
    font-size: 25px; 
    left: 50px; 
    margin-top: 6px; 
    vertical-align: middle; 
    display: inline-block; 
} 

#app .nav-commands { 
    margin-top: 20px; 
} 

#app .win-splitview-pane-closed .win-splitviewcommand-label { 
    /* Make sure pane content doesn't scroll if 
     SplitViewCommand label receives focus while pane is closed. 
    */ 
    visibility: hidden; 
} 

/*SplitView content style*/ 
#app .win-splitview-content { 
    background-color: rgb(112,112,112); 
} 

#app .contenttext { 
    margin-left: 20px; 
    margin-top: 6px; 
} 

的Javascript

(function() { 
"use strict"; 

var app = WinJS.Application; 
var activation = Windows.ApplicationModel.Activation; 

app.onactivated = function (args) { 
    if (args.detail.kind === activation.ActivationKind.launch) { 
     if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) { 
      // TODO: This application has been newly launched. Initialize your application here. 
     } else { 
      // TODO: This application was suspended and then terminated. 
      // To create a smooth user experience, restore application state here so that it looks like the app never stopped running. 
     } 

     args.setPromise(WinJS.UI.processAll()); 

    } 
}; 

app.oncheckpoint = function (args) { 
    // TODO: This application is about to be suspended. Save any state that needs to persist across suspensions here. 
    // You might use the WinJS.Application.sessionState object, which is automatically saved and restored across suspension. 
    // If you need to complete an asynchronous operation before your application is suspended, call args.setPromise(). 
}; 

app.start(); 
})(); 
+0

我有完全相同的问题,当我检查了我的WinjS版本(只需查看'base.js'文件)它是'WinJS.4.1 4.1。 0.winjs.2015.7.10'和@angellocke答案是正确的 - 只需要升级! –

回答

相关问题