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

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票 
    <!-- 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
    |

答案

  • Question
    登录进行投票
    0
    登录进行投票

    哦，确实，本身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
    |
    版主

全部回复

  • Question
    登录进行投票
    0
    登录进行投票

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

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

    2012年11月13日 5:15
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票

    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
    |
  • Question
    登录进行投票
    0
    登录进行投票
    代码已附上，麻烦Bob帮我看看。
    2012年11月14日 6:00
    |
  • Question
    登录进行投票
    0
    登录进行投票

    哦，确实，本身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
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票

    非常感谢Bob帮我解决了一个困扰很久的问题。

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

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

    2012年11月15日 1:53
    |
  • Question
    登录进行投票
    0
    登录进行投票

    在你运行你的 JS应用的时候，你切回VS 会看到 DOM Explorer ，你打开它，可以调试当前页面的DOM状态，右侧则有样式，布局状态等信息。

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

    2012年11月15日 3:08
    |
    版主