none
WinJS.UI.Template 设置透明样式无效 RRS feed

  • 问题

  • <!-- Template -->
            <div id="weatherTemplate" data-win-control="WinJS.Binding.Template" style="display: none; ">
                <div class="weatherTemplateItem" style="width: 225px; background-color: rgba(0, 0, 0, 0.1);">
                    <div class="templateContainer">
                        <img class="weatherTemplateItem-Image" src="/images/weather2/na.png" data-win-bind="src: pictrue" width="80" height="80" />
                        <div class="weatherTemplateItem-Weather">
                            <div class="week" data-win-bind="innerText: week"></div>
                            <div class="w" data-win-bind="innerText: w"></div>
                            <div data-win-bind="innerText: t"></div>
                            <div data-win-bind="innerText: wind" style="font-size: 12px;"></div>
                        </div>
                    </div>
                </div>
            </div>

    以上Template是WinJS.UI.ListView控件的itemTemplate。

    其中style样式background-color: rgba(0, 0, 0, 0.1); 设置透明无效。

    最后的显示结果是:这个ListView中的列表层背景颜色是黑色的,没有任何透明效果。

    而我在其他的Div控件中添加style样式background-color: rgba(0, 0, 0, 0.1); 都会有透明效果。

    请问Template没透明效果是不是与WinJS.Binding.Template组件有关系?

    我印象中WinJS库升级后就没透明效果了。

    2012年11月12日 9:54

答案

  • 哦,确实,本身Item背景为黑色,所以透明度上看上去只是变略深而已,并没有显示背景图片。他所作用的样式来自

    所以重写这个样式即可,CSS中添加:

    .win-listview :not(.win-footprint) .win-container {
        background-color: rgba(255, 255, 255, 0);
    }



    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 Allen-Hu 2012年11月15日 1:52
    2012年11月14日 6:54
    版主

全部回复

  • 我直接用的例子测试,设置透明是有效的。 请问能不能分享下你的完整的例子给我。看看是不是其他样式有影响,或者是看看是否需要升级你的WinJS库。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年11月13日 5:15
    版主
  • default.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title>ListViewExample</title>
    
        <!-- WinJS 引用 -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <!-- ListViewExample 引用 -->
        <link href="/css/default.css" rel="stylesheet" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div id="template" data-win-control="WinJS.Binding.Template">
    		<div class="template-item">
    			<div><h2 data-win-bind="innerText: cityName"></h2></div>
    			<div><span data-win-bind="innerText: desc"></span></div>
    		</div>
        </div>
    
        <div id="resultListView" role="listitem" data-win-control="WinJS.UI.ListView" data-win-options="{ layout : {type: WinJS.UI.GridLayout}, itemTemplate: select('#template') }"></div>
    </body>
    </html>


    default.css

    body {
        background: url('/images/Mac_os_x_lion012.jpg') no-repeat;
    }
    
    .template-item {
    	padding: 10px 20px;
    	width: 230px;
            background-color: rgba(255, 0, 0, 0.21);
    }
    
    @media screen and (-ms-view-state: fullscreen-landscape) {
    }
    
    @media screen and (-ms-view-state: filled) {
    }
    
    @media screen and (-ms-view-state: snapped) {
    }
    
    @media screen and (-ms-view-state: fullscreen-portrait) {
    }


    default.js

    // 有关“空白”模板的简介,请参阅以下文档:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        var data = new WinJS.Binding.List([
            { id: '123', cityName: '乌鲁木齐牧试站', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' },
            { id: '123', cityName: 'HangZhou', cityCode: '100101000', desc: 'HangZhou CN' }
        ]);
    
        WinJS.Binding.optimizeBindingReferences = true;
    
        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: 此应用程序刚刚启动。在此处初始化
                    //您的应用程序。
                } else {
                    // TODO: 此应用程序已从挂起状态重新激活。
                    // 在此处恢复应用程序状态。
                }
                args.setPromise(WinJS.UI.processAll());
    
                var listView = document.getElementById('resultListView').winControl;
                listView.itemDataSource = data.dataSource;
            }
        };
    
        app.oncheckpoint = function (args) {
        };
    
        app.start();
    })();
    

    WinJS Version: 1.0.9200.20512

    显示结果:



    • 已编辑 Allen-Hu 2012年11月13日 11:33
    2012年11月13日 11:29
  • 代码已附上,麻烦Bob帮我看看。
    2012年11月14日 6:00
  • 哦,确实,本身Item背景为黑色,所以透明度上看上去只是变略深而已,并没有显示背景图片。他所作用的样式来自

    所以重写这个样式即可,CSS中添加:

    .win-listview :not(.win-footprint) .win-container {
        background-color: rgba(255, 255, 255, 0);
    }



    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    • 已标记为答案 Allen-Hu 2012年11月15日 1:52
    2012年11月14日 6:54
    版主
  • 非常感谢Bob帮我解决了一个困扰很久的问题。

    请问你发的图中那个调试界面是如何打开的?

    有了这个调试就不会再为设置样式而困扰了,授人以鱼,不如授人以渔吧!哈哈。

    2012年11月15日 1:53
  • 在你运行你的 JS应用的时候,你切回VS 会看到 DOM Explorer ,你打开它,可以调试当前页面的DOM状态,右侧则有样式,布局状态等信息。


    Bob Bao [MSFT]
    MSDN Community Support | Feedback to us

    2012年11月15日 3:08
    版主