HTML5 App商业开发实战教程3-5 实战案例：账目列表
HTML5 App商业开发实战教程1-8 实现案例：H5表单应用 教学案例
HTML5 App商业开发实战教程教学案例一、功能简介熟练使用HTML5提供的高级表单元素及表单元素属性.二、创建或搜集相关信息搜集单位：H5创新学院搜集时间：2016-8-29来源：原创三、适用对象学生、教师、及H5 App开发人员、相关技术人员等。
四、程序代码案例一：验证邮件地址是否合法<!DOCTYPE html><html><head><meta charset="utf-8" /><title>使用email</title><link href="css/css1.css" rel="stylesheet" type="text/css"></head><body><form id="frmTmp"><fieldset><legend>请输入正确的邮件地址：</legend><input name="txtEmail" type="email"class="inputtxt" multiple><input name="frmSubmit" type="submit"class="inputbtn" value="提交"></fieldset></form></body></html>案例二：自动弹出日期和时间输入框<!DOCTYPE html><html><head><meta charset="utf-8" /><title>选择日期</title><link href="css/css2.css" rel="stylesheet" type="text/css"> </head><body><form id="frmTmp"><fieldset><legend>日期+时间类型：</legend><input name="txtDate_1" type="date"class="inputtxt"><input name="txtDate_2" type="time"class="inputtxt"></fieldset><fieldset><legend>月份+星期类型：</legend><input name="txtDate_3" type="month"class="inputtxt"><input name="txtDate_4" type="week"class="inputtxt"></fieldset><fieldset><legend>日期+时间型：</legend><input name="txtDate_5" type="datetime"class="inputtxt"><input name="txtDate_6" type="datetime-local"class="inputtxt"></fieldset></form></body></html>案例三：获取光标的位置<!DOCTYPE html><html><head><meta charset="utf-8" /><title>使用autofocus属性</title><link href="css.css" rel="stylesheet" type="text/css"></head><body><form id="frmTmp"><fieldset><legend>属性autofocus</legend><p>输入姓名：<input type="text" name="txtName"class="inputtxt" autofocus></p><p>输入密码：<input type="password" name="txtPws"class="inputtxt"></p><p class="p_center"><input name="frmSubmit" type="submit"class="inputbtn" value="提交" /><input name="frmReset" type="reset"class="inputbtn" value="取消" /></p></fieldset></form></body></html>案例四：在输入框中显示提示信息<!DOCTYPE html><html><head><meta charset="utf-8" /><title>使用placeholder属性</title><link href="css/css4.css" rel="stylesheet" type="text/css"></head><body><form id="frmTmp"><fieldset><legend>属性placeholder</legend>邮箱：<input name="txtEamil" type="Email"class="inputtxt"placeholder="亲，要输入正确的邮件地址哟！" /> <input name="frmSubmit" type="submit"class="inputbtn" value="提交" /></fieldset></form></body></html>案例五：验证表单内容是否为空<!DOCTYPE html><html><head><meta charset="utf-8" /><title>使用input元素</title><link href="css/css5.css" rel="stylesheet" type="text/css"></head><body><form id="frmTmp"><fieldset><legend>属性required</legend>姓名:<input name="txtUserName" type="text"class="inputtxt" required /><input name="frmSubmit" type="submit"class="inputbtn" value="提交" /></fieldset></form></body></html>案例六：在输入框中自动提示文本<!DOCTYPE html><html><head><meta charset="utf-8" /><title>使用input元素</title><link href="css/css5.css" rel="stylesheet" type="text/css"> </head><body><form id="frmTmp"><fieldset><legend>属性required</legend>姓名:<input name="txtUserName" type="text"class="inputtxt" required /><input name="frmSubmit" type="submit"class="inputbtn" value="提交" /></fieldset></form></body></html>案例七：上传文件<!DOCTYPE html><html><head><meta charset="utf-8" /><title>单个上传文件</title><link href="css/css7.css" rel="stylesheet" type="text/css"> </head><body><form id="frmTmp"><fieldset><legend>上传一个文件：</legend><input type="file" name="fleUpload" id="fleUpload"/> </fieldset></form></body></html>案例八：验证表单数据是否合法<!DOCTYPE html><html><head><meta charset="utf-8" /><title>使用pattern属性</title><link href="css/css.css" rel="stylesheet" type="text/css"></head><body><form id="frmTmp"><fieldset><legend>使用pattern属性：</legend>用户名:<input name="txtAge" type="text"class="inputtxt" pattern="^[a-zA-Z]\w{5,7}$" /> <input name="frmSubmit" type="submit"class="inputbtn" value="提交" /><p class="p_color">亲，必须以字母开头,包含字符或数字和下划线,长度在6~8之间！</p></fieldset></form></body></html>五、运行结果案例一：验证邮件地址是否合法案例二：自动弹出日期和时间输入框案例三：获取光标的位置案例四：在输入框中显示提示信息案例五：验证表单内容是否为空案例六：在输入框中自动提示文本案例七：上传文件案例八：验证表单数据是否合法。
html5 app实例教程
html5 app实例教程HTML5是一种用于构建网页和Web应用程序的标记语言。
它是HTML（超文本标记语言）的第五个版本，引入了许多新的功能和API，使开发者能够创建更丰富和交互性更强的应用程序。
在本教程中，我们将介绍一个HTML5应用程序的实例，该应用程序是一个简单的待办事项列表。
该应用程序允许用户创建、编辑和删除任务，并将任务保存在浏览器的本地存储中。
首先，我们需要创建一个HTML文件，命名为index.html。
在文件中，我们开始编写基本的HTML结构和样式。
```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Todo App</title><style>/* 样式 */</style></head><body><header><h1>Todo App</h1></header><main><input type="text" id="taskInput" placeholder="输入任务"><button id="addButton">添加</button><ul id="taskList"></ul></main><script src="app.js"></script></body></html>```在上面的代码中，我们创建了一个带有标题的页面，并添加了一个输入框、一个添加按钮和一个任务列表。
HTML5 App商业开发实战教程4-5 数据组件
获取静态数据
◦ ◦
data组件刷新数据时，会触发onCustomRefresh 事件 在此事件中，从JSON文件中获取数据，并装入 data组件中
数据组件中的数据是一个二维表，有行有列 先设置列，再编辑数据 可以将JSON格式的数据导入到数据组件中
商品ID 1 2
图片路径 img/goods1.png img/goods2.png
H5 App开发
JSON数据
[ { }, { }
数据组件
"id": "1", "fImg": "img/goods1.png" "id": "2", "fImg": "img/goods2.png"
]
添加中，将xid属性设置为 goodsData，注意xid是组件的唯一标识，在一个 W文件中，不能重复。不要设置id属性
设置列信息
◦ ◦
使用data组件先设置列。选择data组件，右击，在 弹出的快捷菜单中选择“编辑列”命令 打开“data列编辑”对话框，新增商品ID和图片两 列，并设置商品ID列为“ID列”
HTML5 App商业开发实战教程章节设计_第六章 页面样式
操作5：演示在element.style里面增加background-color:white样式，当前选择的media的背景色变成白色
操作6：演示将这个样式写入W文件的同名CSS文件中，使得所有media应用这个样式
教师：归纳总结
实战训练
给购物车页的商品列表增加卡片式风格样式
给仿微店应用首页的buttonGroup组件增加卡片式风格样式
动手实践
做中学
多媒体
真实系统环境
学生：实践操作
教师：巡视检查
评估
讨论
（1）讨论使用系统样式的好处
（2）展ห้องสมุดไป่ตู้学生的讨论结果
（3）考核学生结果
教师启发
讨论归纳
分数激励
多媒体
学生：思考
教师讲授
多媒体
学生：听讲
教师：布置作业、提出要求
多媒体
学生：思考
教师：演示
知识讲解
知识点1：使用系统样式，即有利于界面风格统一，又有利于实现App的换肤
知识点2：常用的排版样式包括：标题、情景文本颜色、情景背景色、文本对齐和元素对齐等样式
知识点3：常用的表单样式包括：基本样式、尺寸样式、水平排列的表单等样式
知识点4：常用的图片样式包括：响应式图片、图片形状等样式
知识点2：在Elements->Styles中查看现有样式，修改样式，查看效果
知识点3：将调整后的样式写入CSS文件
启发讲解
讨论归纳
多媒体
课件演示
学生：思考、记录笔记
教师：启发
示范操作
操作1：演示打开一级分类列表页面
HTML5 App商业开发实战教程章节设计_第二章+JavaScript基础
教师讲授
引导文法
多媒体
学生：思考
教师：讲解
知识讲解
知识点1：为什么要使用JavaScript及JavaScript引入方式
问题引导
操作演示
分析归纳
多媒体
系统演示
学生：观摩思考
教师：归纳总结
实战训练
完成演示案例
动手实践
做中学
多媒体
真实系统环境
学生：实践操作
教师：巡视检查
评估
讨论
（1）讨论HTML5提供的WebStorage的AP及使用场合
（2）讨论sessionStorage，
localStorage的进行数据保存的实现及特点
操作3：在截图按钮的点击事件中调用自定义函数实现视频的截图功能
问题引导
操作演示
分析归纳
多媒体
系统演示
学生：观摩思考
教师：归纳总结
评估
讨论
（1）讨论Canvas表前对象的属性
（2）讨论如何通过JavaScript操作Canvas对象
（3）讨论使用getContext()方法返回的画笔对象常用的绘制图形的方法有哪些
启发讲解
讨论归纳
多媒体
课件演示
学生：思考、记录笔记
教师：启发,讲解，演示
示范操作
操作1：演示通过sessionStorage实现保存病毒去临时数据
操作2：演示使用localStorage实现读取并保存登录的用户名和密码
HTML5 App商业开发实战教程3-6 实战案例：记一笔
页面跳转可以使用打开对话框的方式实现，页面跳转时可以传参 对话框是可以返回数据的 新增、删除、保存数据使用数据组件的相关方法实现
在账目列表页单击一条账目， 打开记一笔页进行编辑 在记一笔页中，用户编辑这 条记录后，点“确定”按钮 将这条记录传给账目列表页 在账目列表页中接收这条数 据，保存到数据库 实现
在账目列表页中，每条 账目后有“删除”按钮 删除按钮所在行的账目 信息 删除后立即保存到数据 库
添加展现组件
◦ 使用controlGroup组件提供边距， 使组件不会紧贴着屏幕边缘，如 果不需要title，切换到源码页， 直接删除 ◦ 使用labelSelect组件，作为类型 和分类使用的下拉组件 ◦ 使用labelInput组件，作为日期、 金额和备注的输入框
设置数据绑定
◦ ◦ ◦
设置label组件，绑定字段名 设置select组件，绑定accountData 中的类型和分类字段，还要绑定 typeData和classData作为下拉选项 设置input组件，绑定accountData 中的日期、金额和备注字段
H5 App开发
制作记一笔表单 实现新增、修改、删除账目数据
数据表
数据组件
新增数据newData 录入数据 保存数据saveData
新建页面
◦ 使用“标准页面”模板
添加数据组件
◦ 账目数据用于编辑账目信息， 从list.w文件中复制 ◦ 账目类型数据用于类型下拉选 择，使用data组件 ◦ 账目分类数据用于分类下拉选 择，使用baasData组件
在账目列表页点击“新增”按 钮，打开记一笔页
html5中的列表案例
html5中的列表案例HTML5中的列表是一种非常常用的元素，被用于展示有序或无序的项目。
在这里，我们将介绍一些HTML5中的列表案例，让您更好地了解如何在您的网站或应用程序中使用列表元素。
首先，我们将介绍无序列表（ul）和有序列表（ol）的使用场景和常见的样式。
1. 无序列表（ul）无序列表（ul）被用于展示一系列项目，这些项目没有明确的顺序。
例如，展示您网站的导航栏或产品特点时，无序列表是非常适合的。
在HTML5中，无序列表通常使用“<ul>”标签来定义，每个项目使用“<li>”标签来定义。
以下是一个简单的无序列表案例：<ul><li>导航1</li><li>导航2</li><li>导航3</li></ul>您可以使用CSS对无序列表进行样式设置，例如更改项目符号的样式、间距等。
2. 有序列表（ol）有序列表（ol）被用于展示一系列有明确的顺序的项目。
例如，展示您网站的步骤或流程时，有序列表是非常适合的。
在HTML5中，有序列表通常使用“<ol>”标签来定义，每个项目使用“<li>”标签来定义。
以下是一个简单的有序列表案例：<ol><li>步骤1</li><li>步骤2</li><li>步骤3</li></ol>您可以使用CSS对有序列表进行样式设置，例如更改数字的样式、间距等。
3. 嵌套列表您可以将无序列表或有序列表嵌套在另一个列表中，以展示更复杂的项目结构。
例如，您可以使用无序列表嵌套有序列表以展示一组任务列表。
以下是一个简单的嵌套列表案例：<ul><li>任务1<ol><li>子任务1</li><li>子任务2</li></ol></li><li>任务2</li><li>任务3</li></ul>总结无序列表和有序列表是HTML5中常用的列表元素，被用于展示项目和流程。
html5app案例
html5app案例html5app案例【篇一：html5app案例】html5 技术为开发者提供了一个跨平台的移动apps开发方案，并且该方案具有很好的扩展性和灵活性。
如今国内使用html5开发app应用技术尚有欠缺，因为在手机开发app上，html5应用只有两种方法，要不就是全使用html5的语法，要不就是仅使用java引擎。
java引擎的构建方法让制作手机网页游戏成为可能。
由于界面层很复杂，已预订了一个ui工具包去使用。
纯html5手机应用运行缓慢并错漏百出，但优化后的效果会好转。
尽管不是很多人愿意去做这样的优化，但依然可以去尝试。
html5手机应用的最大优势就是可以在网页上直接调试和修改。
原生应用的开发人员可能需要花费非常大的力气才能达到html5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。
即使这样，好运互联还是很看好html5 app开发，原因有一下几点。
一：现在html5非常火的技术，主要方向在使用高端浏览器的高端移动设备，所以可以用作开发android系统的app。
二：html5对android、ios系统都支持。
三：html5可以用作离线应用的开发，离线应用就是把需要的资源先缓存到本地，下次再查看时无需联网。
四：html5开发app，能提供更快、更简便的服务，代码可高度重用，服务发布方便。
五：动画、游戏方面，地理定位方面的app应用正在崛，而html5技术优势正是这在些方面。
可以说，未来采用html5开发app的，将会大量减少代码量，应用软件也会得到更高的用户体验。
webapp的实现基础就是html5+js+css3.但是webapp还是基于浏览器的微网站开发。
正式如此，我们必须要深入的了解html5的8大特性，这样才能方便我们在开发和设计app的时候，更合理的采用原生app与webapp 的相结合。
而app里面最重要的一个分享功能，分享出去的必须是网页形式的。
29个非常实用的HTML 5实例、教程和技巧
29个非常实用的HTML 5实例、教程和技巧【51CTO精选译文】对于想要着手新建Web项目的人来说，HTML5实例确实很能给人以灵感，毕竟HTML5是未来的网页标记技术，我们都需要为此作好准备。
HTML5是作为HTML(超文本标记语言)的下一个主要版本而开发的。
主要的市场和互联网领导企业已经在转而改用HTML 5平台。
由于苹果和谷歌都大力推行这项标准，以便从事更高级的Web开发，随着更多的公司支持HTML 5的先进特性，我们现在看到实施HTML 5的网站遍地开花。
51CTO推荐专题：HTML 5 下一代Web开发标准详解由于Flash在Web和互联网应用程序中的应用越来越少，HTML5为Web设计师和开发者打开了新的大门。
在这种情况下，每一个Web开发者的确有必要了解HTML 5的基本教程、技巧和术语。
下面我们介绍了一份完整的列表——如果你是位Web开发者，绝对不想错过这30余个HTML5实例、教程和技巧。
不妨先看一下几个HTML5实例1. 用HTML5创建移动设备上的离线Web应用程序IBM的技术库里面有一篇由IT架构师Dietmar Krueger撰写的内容翔实的文章。
作者在该文中描述和介绍了为什么为操作系统和移动平台编写应用程序困难重重。
作者选择了走开放的道路，通过HTML 5来进行开发，而不是依赖学习针对特定平台的语言，比如面向iPhone平台的带Cocoa框架的Objective-C语言。
这篇文章介绍得非常清晰、深入浅出。
2. HTML 5演示和实例这个网站到处都有HTML5实例，还有很不错的实例。
有些是本人一起改动的HTML 5实例和演示。
点击浏览器支持图标或技术标签，就可以过滤演示(过滤器是“或”过滤器)。
3. WTF is HTML5这一页概述了HTML5，非常实用，还有很不错的HTML5实例!4. 用PHP以及HTML 5构建一个实时新闻博客系统这个教程表明了如何用HTML 5和CSS3来构建一个新闻网站。
HTML5 App商业开发实战教程_整体设计
《HTML5 App商业开发实战教程》课程整体设计一、课程设计思路本课程依据课程标准，先通过几个App了解WeX5开发H5 App的过程及方法，再以仿微店App的开发为主线，贯穿整个教学过程，在逐步完成各章节同步训练的过程中，以“层层递进”的方式完成H5 App 的开发，从而让学生在实践中掌握知识和技能。
二、课程目标设计通过本课程的学习，使学生了解H5 App的基本概念，学会开发App的前端页面、打包生成安卓App 或苹果App，并进行云部署的完整过程。
培养学生掌握页面组件的基本用法，掌握App调用手机硬件的方法，以及界面设计实现能力，为今后学习开发各种类型的App打下扎实基础。
㈠知识目标1．掌握H5 App开发原理和开发过程2．理解WeX5的页面基础和组件基础3．掌握数据组件、布局组件、列表组件等常用组件的使用场景和使用方法4．理解数据绑定，通过数据绑定实现页面的动态计算5．掌握常用JS方法和常用CSS6．掌握H5 App访问手机硬件的方法7．了解App的组成和分类，了解iOS开发者帐号和证书8．掌握一键部署的方法㈡能力目标1．了解WeX5开发工具，掌握使用WeX5开发跨平台应用的能力2．具备开发流行应用的首页页面的能力3．具备开发单列列表、多列列表以及嵌套列表页面的能力4．具备页面JS代码、页面样式以及App的开发调试能力5．灵活运用各种表达式实现界面控制和动态计算6．学会调用手机硬件设备，例如照相、录像、录音、获取地理位置信息等7．生成个性化的App，通过一键部署实现在互联网上的发布8．对页面设计和用户体验有一定了解，具备较好的产品设计能力㈢素质目标1.具有规范的企业编程风格和习惯以及良好的排查程序错误的能力；2.具有良好的分析问题和解决问题的能力以及技术文档写作、沟通和团队协作能力；3.具有诚信、求实、科学、严谨的工作态度，具有高度的责任心，良好的敬业精神和创新精神；4.培养学生自主学习的能力，具有终身学习的精神和和可持续发展能力。
HTML5 App商业开发实战教程3-6 实战案例：记账本首页及打包 教学案例
运行首页，显示账目列表页，如下图
在首页中打开左侧边栏，效果如下图
varModel =function() {
this.callParent();
this.shellImpl =newShellImpl(this, {
contentsXid : "pages",
wingXid : "wing",
pageMappings : {
"main" : {
url : require.toUrl('./list.w')
Web路径
不填
首页
/acc/index.w
双击下面目录树中的acc\index.w，即可自动填上
选择需要发布的资源
整个acc目录
选择目录树中的acc目录
配置应用信息
版本号
1.0.0
注意，一定要是三段的
应用包名
com.justep.x5.acc
应用的唯一ID名。如果要生成iOSApp，必须和证书中的BundleID一致。如果使用微信插件，必须和微信账号的应用包名一致。
}
}
});
};
Model.prototype.modelLoad =function(event) {
justep.Shell.showPage("main");
};
Model.prototype.classSettingBtnClick =function(event){
justep.Shell.showPage(require.toUrl("./classSetting.w"));
label
HTML5 App商业开发实战教程章节设计_第七章 App开发
（1）介绍H5 App调用手机硬件的方法；
（2）介绍App安装包的组成，以及打调试包和发布包的方法；
（3）介绍真机调试和云部署的方法。
重点：
（1）掌握Cordova插件的使用方法
（2）掌握打调试包的方法
（3）掌握打发布包的方法
（4）掌握部署到CloudX5的方法
难点：
（1）真机调试
课后作业
（1）7.1.3同步训练：使用Cordova插件实现拍照、录像等功能；
（4）使用个性化的应用图标、启动页、引导页打个性化的发布包
（5）如果有Mac系统，可以申请苹果免费帐号的开发证书。如果有苹果证书和Mac版本的WeX5，可以打苹果包
（6）掌握用Chrome浏览器调试安卓手机App
（7）掌握用Mac系统的Safari浏览器调试苹果手机App
（8）将自己开发的App部署到CloudX5
（2）7.3.3同步训练：将前面开发出来的仿微店App打成Android包或iOS包；
（3）7.5.3同步训练：将前面开发出来的仿微店App部署到CloudX5。
教学过程设计
节7-1：App调用设备硬件（学时数：7）
主要步骤
教学内容
教学方法
教学手段
师生活动
问题引入
H5 App是如何调用设备原生API的？
知识点6：只有iOS开发者才能开发iOS App。首先申请苹果开发者帐号，成为iOS开发者。然后生成开发证书用于开发调试App，生成发布证书用于发布App
知识点7：Hybrid App融合Web App的原理就是嵌入一个WebView组件，可以在这个组件中载入页面，就相当于一个内嵌的浏览器，将应用的首页地址，设置为Web View的访问地址，就可以在Hybrid App中访问整个Web App了
HTML5 App商业开发实战教程4-8 实现案例：多列列表 教学案例
HTML5 App商业开发实战教程教学案例一、功能简介搜索页里面的一级分类列表，这是一个双列列表，列表的数据是一次性全部加载的。
二、创建或搜集相关信息搜集单位：H5创新学院搜集时间：2016-8-24来源：原创三、适用对象学生、教师、及H5 App开发人员、相关技术人员等。
四、程序代码Data组件的W文件源代码如下：<div component="$UI/system/components/justep/data/data"autoLoad="true"xid="classData"idColumn="id"onCustomRefresh="classDataCustomRefresh"limit="-1"><column label="ID"name="id"type="String"xid="xid1"/><column label="名称"name="fClassName"type="String"xid="xid2"/><column label="图片"name="fImg"type="String"xid="xid3"/><column label="描述"name="fDescription"type="String"xid="xid4"/></div>在data组件的onCustomRefresh事件中，从JSON文件中获取数据，并装入data组件中。
HTML5App商业开发实战教程章节设计_第五章页面代码
《HTML5 App商业开发实战教程》课程教学章节设计第五章：页面代码授课教师：Web课程组 授课班级: 学时：11 教学条件 计算机、局域网环境教学素材 教材、课件、授课录像、案例库、教学网站等教学目标设计知识目标：（1）理解单页应用使用模块化JS的必要性 （2）掌握JS模块的定义方法（3）理解数据绑定的用途（4）掌握绑定表达式、过滤表达式和规则表达式的用途及设置方法（5）掌握常用JS方法以及调试方法 能力目标：（1）学会自定义JS类（2）使用数据绑定设置绑定表达式实现控制组件是否显示（3）使用数据绑定设置过滤表达式控制列表显示的数据（4）使用数据绑定设置规则表达式实现自动计算 （5）熟练掌握获取组件JS对象的方法、数据组件的方法以及打开页面的方法（6）掌握调试自己写的JS代码，以及系统JS代码的方法教学内容 （1）介绍实现数据绑定功能的绑定表达式、过滤表达式、规则表达式的用法； （2）介绍常用组件的JS方法和系统JS类的常用方法、以及调试方法。
重点：（1）掌握绑定表达式、过滤表达式、规则表达式的用法（2）常用组件的JS方法和系统JS类的常用方法（3）掌握调试JS代码的方法 难点：（1）定义符合AMD规范的JS文件（2）理解表达式环境变量及上下文对象 （3）理解表达式中当前行和计算行的区别（4）调试系统JS方法课后作业 （1）5.2.5同步训练：设置绑定表达式实现控制折扣信息是否显示、设置过滤表达式实现使用一级分类ID过滤二级分类列表、设置规则表达式实现购物车页中的商铺合计金额、商品种类数量的计算；（2）5.3.5同步训练：参照附录中仿微店App的页面介绍，将开发出来的页面基本串通起来。
教学过程设计节5-1：JS基础（学时数：1）主要步骤教学内容 教学方法 教学手段 师生活动问题 引入 单页应用如何提高客户端性能？教师讲授引导文法多媒体学生：思考教师：演示知识讲解 知识点1： 对单页应用来说模块化的开发和设计相当重要，能够实现异步、动态加载，从而提高客户端性能知识点2： 使用RequireJS实现模块化。
《HTML5 CSS3项目开发案例教程》教学课件 项目七《HTML5+CSS3项目开发案例教程》
<form action="#" method="post"> <p>请输入日期：<input type="date" /></p> <p>请输入月份：<input type="month" /></p> <p>请输入周数：<input type="week" /></p> <p>请输入时间：<input type="time" /></p> <input type="submit" value="保存" /> <input type="reset" />
（1）name属性用于设置表单控件的名称，value属性用于设置表单控件的默认 值，为同一个表单控件设置这两个属性之后，服务器可以通过name属性值找到对 应的value属性值。
提示：在添加单选钮与复选框时，需要为同一组的选项设置相同的name属
性值。例如，例7-3中的“性别”组与“兴趣”组，两组的单选钮与复选框都分 别设置了相同的name属性值，从而实现单选与复选的效果。
（2）readonly属性可设置表单控件中的内容不可修改，而disabled属性用于禁 用表单控件。两者都会使输入型文本框变为不可编辑状态，但readonly属性无法作 用于单选钮及复选框等控件。
（3）checked属性用于设置默认选中某个单选钮或复选框。
【例7-8】 制作水果订货表单，页面效果如下图7-9所示。
</form>
HTML5 App商业开发实战教程3-5 实战案例：记账本分类设置 教学案例
HTML5 App商业开发实战教程教学案例
一、功能简介
账目分类设置页实现新增、修改、删除账目分类的功能。
编辑时下拉选择账目类型、输入分类名称。
二、创建或搜集相关信息
搜集单位：H5创新学院
搜集时间：2016-8-24
来源：原创
三、适用对象
学生、教师、及H5 App开发人员、相关技术人员等。
四、程序代码
账目分类设置页添加2个数据组件，它们的主要属性设置见下表
账目分类设置页的展现组件的主要属性设置见下表
新增账目分类数据
Model.prototype.newBtnClick = function(event) {// 新增分类数据并给出默认值p("classData").newData({
"defaultValues" : [ {
"fID" : justep.UUID.createUUID(),
"fType" : "支出"
} ]
});
};
删除账目分类数据
Model.prototype.deleteBtnClick = function(event) {// 删除list当前行数据var row = event.bindingContext.$object;
p("classData").deleteData(row);
};
五、运行结果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
在row组件的col中放output组 件
设置list组件的data属性 为accountData 设置output组件显示分类 fClass 设置output组件显示金额 fMoney 设置output组件显示备注 fDescription 设置output组件显示日期 fDate
列表页是移动应用中最常见的页面 列表可以将数据组件中的数据全部显示出来 列表中的每一行代表数据组件中的一条数据
H5 App开发
新闻列表
商品列表
数据组件
accountData
列表组件
新建应用
◦ ◦ ◦ 选择“模型资源”视图中的UI2目录， 右击，在弹出的快捷菜单中选择“新 建”→“应用”命令 打开“新建应用”对话框，输入应用 名称。单击“完成”按钮 在UI2目录下就会生成一个acc目录
新建页面
◦ 选择acc目录，右击，在弹出的快捷 菜单中选择“新建”→“W文件”命 令，打开“新建W向导”对话框 在“新建W向导”中选择模板“移动 →标准→标准页面”，文件名输入 list，生成list.w文件。Fra bibliotek
启动Tomcat 选择“模型资源”视图 中的UI2\acc\list.w文件， 右击，在弹出的快捷菜 单中选择“用浏览器运 行”命令，打开Chrome 浏览器，并运行list.w 界面显示出account数据 表中的数据
改变字体大小
◦ 设置style属性
动态设置字体颜色
◦ 设置bind-style属性
◦
在model组件中放baasData 组件
◦ baasData组件可以从后端服务中 获取数据
启动MySQL数据库
◦ 执行“启动MySQL数据库.bat”
选择后端服务中的动作
◦ ◦ 单击tableName属性右侧的按钮 选择queryAccount动作
在panel组件的content区域放 scrollview组件 在scrollview组件的第二个div 下放list组件 在list组件的li中放row组件， 形成如下图的行列结构