WinJs項目介紹

    WinJs庫是最近微軟公布的一個開源項目。它與開源社區的協作共同完成。為了輕易創建HTML/JS/CSS應用程序開發的解決方案。WinJS是一個Javascripts的工具箱讓開發人員使用HTML/JS/CSS：

• 為開發人員提供出色的UI基礎組件，支持觸摸，鼠標，鍵盤和可以訪問性。
• 為開發人員提供一組具有粘性的組件與工具來構建應用程序的基礎設施。

如下路線圖：

例如，一個LISTVIEW如圖：

JS：

var itemArray = [
        { title: "Marvelous Mint", text: "Gelato", picture: "/images/fruits/60Mint.png" },
        { title: "Succulent Strawberry", text: "Sorbet", picture: "/images/fruits/60Strawberry.png" },
        { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" },
        { title: "Creamy Orange", text: "Sorbet", picture: "/images/fruits/60Orange.png" },
        { title: "Very Vanilla", text: "Ice Cream", picture: "/images/fruits/60Vanilla.png" },
        { title: "Banana Blast", text: "Low-fat frozen yogurt", picture: "/images/fruits/60Banana.png" },
        { title: "Lavish Lemon Ice", text: "Sorbet", picture: "/images/fruits/60Lemon.png" }
];

var items = [];

// Generate 160 items
for (var i = 0; i < 20; i++) {
    itemArray.forEach(function (item) {
        items.push(item);
    });
}


WinJS.Namespace.define("Sample.ListView", {
    data: new WinJS.Binding.List(items)
});
WinJS.UI.processAll();

CSS：

/* Template for the items in the ListViews in this sample */
.smallListIconTextItem
{
    width: 100%;
    height: 70px;
    padding: 5px;
    overflow: hidden;
}

    .smallListIconTextItem img.smallListIconTextItem-Image
    {
        width: 60px;
        height: 60px;
        margin: 5px;
        float:left;
        margin-right:20px;
    }

    .smallListIconTextItem .smallListIconTextItem-Detail
    {
        margin: 5px;
    }

   .listLayoutTopHeaderTemplateRoot, .gridLayoutLeftHeaderTemplateRoot {
        font-size: larger;
        margin-left: 16px;
    }

/* CSS applied to the ListViews in this sample */
#listView
{
    height: 280px;
}

HTML：

<!-- Simple template for the ListView instantiation  -->
<div id="smallListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="smallListIconTextItem">
        <img src="#" class="smallListIconTextItem-Image" data-win-bind="src: picture" />
        <div class="smallListIconTextItem-Detail">
            <h4 data-win-bind="textContent: title"></h4>
            <h6 data-win-bind="textContent: text"></h6>
        </div>
    </div>
</div>

<!-- The declarative markup necesary for ListView instantiation -->
<!-- Call WinJS.UI.processAll() in your initialization code -->
<div id="listView"
        class="win-selectionstylefilled"
        data-win-control="WinJS.UI.ListView"
        data-win-options="{
            itemDataSource: Sample.ListView.data.dataSource,
            itemTemplate: smallListIconTextTemplate,
            selectionMode: 'none',
            tapBehavior: 'none',
            swipeBehavior: 'none',
            layout: { type: WinJS.UI.ListLayout }
    }">
</div>

 

這是微軟官方又一個開源項目，這也是前端的解決方案。從這兒，你有興趣可以去玩一下，項目DEMO。 類似的項目有Twitter的BootStrap

希望對您軟件開發有幫助。

 

您可能感興趣的文章：

HTML5中實現拖放效果

 

作者：Petter Liu
出處：http://www.cnblogs.com/wintersun/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。
該文章也同時發布在我的獨立博客中-Petter Liu Blog。