这是Win8 App神圣不可侵犯的头文件：

<head>

    <meta charset="utf-8">

    <title>ListViewExample</title>

    <!-- WinJS references -->

    <link href="//Microsoft.WinJS.0.6/css/ui-light.css" rel="stylesheet">

    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>

    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <!-- ListViewExample references -->

    <link href="/css/default.css" rel="stylesheet">

    <script src="/js/default.js"></script>

    <!-- Your data file. -->

    <script src="/js/dataExample.js"></script>

</head>

HTML页面加入以下代码：

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">

    <div style="width: 150px; height: 100px;">

        <!-- Displays the "picture" field. -->

        <img src="#" style="width: 60px; height: 60px;"

             data-win-bind="alt: title; src: picture" />

        <div>

            <!-- Displays the "title" field. -->

            <h4 data-win-bind="innerText: title"></h4>

            <!-- Displays the "text" field. -->

            <h6 data-win-bind="innerText: text"></h6>

        </div>

    </div>

</div>       

<div id="basicListView" data-win-control="WinJS.UI.ListView"

    data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">

</div>

js文件夹中dataExample.js中的js文件：

(function () {

    "use strict";

    var dataArray = [

    { title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },

    { title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },

    { title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },

    { title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },

    { title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },

    { title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },

    { title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },

    { title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },

    { title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }

    ];

    var dataList = new WinJS.Binding.List(dataArray);

    // Create a namespace to make the data publicly

    // accessible.

    var publicMembers =

        {

            itemList: dataList

        };

    WinJS.Namespace.define("DataExample", publicMembers); 

})();

Win8 App使用Listview的简单方法的更多相关文章

  1. ListView与.FindControl()方法的简单练习 #2 -- ItemUpdting事件中抓取「修改后」的值

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/06/24/listview_itemupdating_findcontrol_201 ...

  2. 【转】预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法

    [转]预装Win8/8.1 中文版系统升级为专业版或专业版含媒体中心版的简单方法 原文地址:http://www.iruanmi.com/upgrade-win8-china-to-a-higher- ...

  3. C#中ListView的简单使用方法

    ListView是用于显示数据的,先在窗体中拉一个lisview控件,还有一些新增.修改.删除.查询按钮和文本框,控件名称为listview,按钮为btnInsert,btnUpate,btnDele ...

  4. Android SQLite与ListView的简单使用

    2017-04-25 初写博客有很多地方都有不足,希望各位大神给点建议. 回归主题,这次简单的给大家介绍一下Android SQLite与ListView的简单使用sqlite在上节中有介绍,所以在这 ...

  5. Android—— ListView 的简单用法及定制ListView界面

    一.ListView的简单用法 2. 训练目标 1) 掌握 ListView 控件的使用 2) 掌握 Adapter 桥梁的作用 实现步骤: 1)首先新建一个项目, 并让ADT 自动帮我们创建好活动. ...

  6. Xcode7使用插件的简单方法&&以及怎样下载到更早版本的Xcode

    Xcode7自2015年9上架以来也有段时间了, 使用Xcode7以及Xcode7.1\Xcode7.2的小伙伴会发现像VVDocumenter-Xcode\KSImageNamed-Xcode\HO ...

  7. Win8.1屏幕亮度自动调节关闭方法

    细心的朋友会发现,Win8.1系统的笔记本屏幕亮度有时候,会根据外界光线亮度以及温度自动调节屏幕亮度,尽管看似比较智能,但有时候我们并不希望笔记本屏幕亮度受光线影响,忽暗忽亮.如果我们希望Win8笔记 ...

  8. 获取一个 app 的 URL Scheme 的方法：

    获取一个 app 的 URL Scheme 的方法: 上这个网站 URL Schemes 查一下相应的 app 的 URL Scheme 是否有被收录 第一种方法没找到的话,把相应的 app 的 ip ...

  9. ListView的setSelectionFromTop()方法与setSelection()方法的联系

      通常,app中的数据都是以ListView的形式展示的.默认地,把“新”数据添加到数据列表的尾部. 但是,如果是IM类型的app,比如查看历史消息这个模块.新数据并不是插到数据列表的尾部,而是插到 ...

随机推荐

  1. nginx的配置与安装

    说说在Linux系统下安装配置Nginx的详细过程. 1. 从Nginx官网下载Nginx.目前最新的稳定版为:1.6.2. 2. 将下载下来的Nginx上传到/opt/nginx目录下.运行“tar ...

  2. C的|、||、&、&&、异或、~、！运算(转)

    位运算     位运算的运算分量只能是整型或字符型数据,位运算把运算对象看作是由二进位组成的位串信息,按位完成指定的运算,得到位串信息的结果. 位运算符有:     &(按位与).|(按位或) ...

  3. 【巧妙预处理系列+离散化处理】【uva1382】Distant Galaxy

    给出平面上的n个点,找一个矩形,使得边界上包含尽量多的点. [输入格式] 输入的第一行为数据组数T.每组数据的第一行为整数n(1≤n≤100):以下n行每行两个整数,即各个点的坐标(坐标均为绝对值不超 ...

  4. php 添加 redis 扩展模块

    由于PHP源码中并未有redis的文件,所以需要自己下载. 下载地址: http://pecl.php.net/get/redis-2.2.5.tgz [root@study package]# ta ...

  5. android——背景颜色渐变（梯度变化）

    首先在drawable文件夹下面新建一个xml文件,起名为bgcolor.xml. 代码如下: <?xml version="1.0" encoding="utf- ...

  6. 沃通tomcat jks 安装配置

    废话不多说上代码: <Connector port="443" protocol="org.apache.coyote.http11.Http11NioProtoc ...

  7. oracle数据库10g下载地址

    Oracle Database 10g Release 2 (10.2.0.1.0) Enterprise/Standard Edition for Microsoft Windows (32-bit ...

  8. 解决linux top命令提示的unknown terminal type的问题

    [root@localhost bin]# top 'xterm-256color': unknown terminal type. 在网上搜索了解决方法如下: 解决办法: 1.临时办法,下次启动失效 ...

  9. C++程序设计实践指导1.5求两个整数集合并集改写要求实现

    改写要求1:改写为单链表结构可以对任意长度整数集合求并集 #include <cstdlib> #include <iostream> using namespace std; ...

  10. delete、update忘加where条件误操作恢复过程演示

    update.delete没有带where条件,误操作,如何恢复呢? 我现在有一张学生表,我要把小于60更新成不及格. mysql> select * from student; +----+- ...