如何在winjs上制作splitview菜单

时间:2016-05-03 02:45:26

标签: javascript html5 win-universal-app winjs

我正在尝试通过javascript制作通用应用。我在msdn网站上尝试了一个示例,但是" nav-commands"打开splitview时,不显示class。我使用closedDisplayMode =' none'。

<div id="app">
    <div class="header">
        <button class="win-splitviewpanetoggle"
                data-win-control="WinJS.UI.SplitViewPaneToggle"
                data-win-options="{ splitView: select('.splitView') }"></button>

    </div>
    <div class="splitView" data-win-control="WinJS.UI.SplitView"
         data-win-options="{ closedDisplayMode :'none' , openedDisplayMode : 'inline'}">
        <!-- Pane area -->
        <div><div class="header">
                 <div class="nav-commands">
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Home', icon: 'home'}"></div>
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Favorite', icon: 'favorite'}"></div>
                     <div data-win-control="WinJS.UI.SplitViewCommand" data-win-options="{ label: 'Settings', icon: 'settings'}"></div>

                 </div>  </div>

        <!-- Content area -->
        <div class="contenttext" id="clock"> </div>
    </div>
</div>

我正在使用我在http://try.buildwinjs.com/playground/找到的代码。 但是当我使用应用程序时,nac-commands没有显示,它只显示了splitview窗格

1 个答案:

答案 0 :(得分:1)

我想你在VS中使用的是WinJS项目模板。 VS中最新的WinJS项目模板使用WinJS 4.0.1。对于该版本,没有var http = require('http'); var express = require('express'); var url = require('url'); function find (req, res) { var queryObj = url.parse(req.url, true).query; var options = { host: queryObj.ip, // client attaches ip address of turnkey to url. port: 1234, path: '/some/path', }; // http get options var badNews = function (e) { console.log (e.name + ' error: ', e.message); res.send({'ok': false, 'msg': e.message}); }; // sends failure messages to log and client // instantiate http request object and fire it var msg = http.request(options, function (response) { var body = ''; response.on ('data', function(d) { body += d; }); // accumulate response chunks response.on ('end', function () { res.send({'ok': true, 'msg': body}); console.log('sent ok'); }); // done receiving, send reply to client response.on('error', function (e) { badNews(e); }); // uh oh, send bad news to client }); msg.on('socket', function(socket) { socket.setTimeout(2000, function () { // set short timeout so discovery fails fast var e = new Error ('Timeout connecting to ' + queryObj.ip)); e.name = 'Timeout'; badNews(e); msg.abort(); // kill socket }); socket.on('error', function (err) { // this catches ECONNREFUSED events badNews(err); msg.abort(); // kill socket }); }); // handle connection events and errors msg.on('error', function (e) { // happens when we abort console.log(e); }); msg.end(); } 控件。

  

[从Windows Library for JavaScript(WinJS)4.2开始,NavBarCommand不再可用。而是使用SplitViewCommand。 ]

请参阅WinJS.UI.NavBarCommand

因此,您可以使用WinJS.UI.SplitViewCommand代替。

或者您可以从here下载最新的WinJS。替换项目中的WinJS库,然后编辑WinJS.UI.NavBarCommand<script>标记以引用index.html文件中的新库。