第2章 HTML5中常用的交互元素
2.1 内容交互元素
在H5中，与元素属于新增的内容交互元素，主要用于文档的标题、细节、内容的交互显示。
2.1.1 detail元素
(详情)是HTML5中新增的一个标记，用于说明文档或某个细节信息的作用，常与(概要)元素搭配使用。
默认是不显示的，与summary配合使用时，单击summary标记后才显示details中设置的内容。
元素的常用属性以及描述：
- open：值open，用于控制summary元素是否显示，默认不可见。
- subject：值sub_id，用于设置元素对应的项目ID号。
- draggable：值true/false，用于是否可以拖动元素，默认不可拖动。
示例：交互元素details的使用
1.功能描述
创建新H5页面，加入details元素，通过不设置open和设置，查看结果并比较。
2.实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素<details>的使用</title>
<style>
body {
font-size: 12px;
}
span {
font-weight: bold;
}
details {
overflow: hidden;
padding-left: 20px;
position: relative;
display: block;
}
details[open] {
height: auto;
}
</style>
</head>
<body>
<span>隐藏注脚</span>
<details>
本页面生成于2024-9-11
</details>
<span>显示注脚</span>
<details open>
本页面生成于2024-9-11
</details>
</body>
</html>3.页面效果
2.1.2 summary元素
summary常包含于元素中，配合使用，元素说明文档的标题，
说明文档的详细信息。summary是details第一个子元素，二者经常同时出现在页面中。
实例：交互元素summary与details的结合使用
1.功能描述
新建页面中分别加入一个元素和一个元素，当显示summary元素内容时，其子元素details以字体加粗的形式展示在页面中。summary尽量放第一个位置。
2.实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素summary的使用</title>
<style>
body {
padding: 5px;
font-size: 12px;
}
summary {
font-weight: bold;
}
</style>
</head>
<body>
<details open>
本页面生成于2024-9-11
<summary>页面说明</summary>
本页面生成于2024-9-12
</details>
</body>
</html>3.页面效果
2.2 菜单交互元素
在H5交互元素中，除了内容交互元素外，使用较为频繁的是菜单交互元素，其中以menu与command两个元素为代表。
2.2.1 menu元素
menu是H5重新恢复使用并赋予了新的功能含义。常与
- 列表元素结合使用，用来定义一个列表式的菜单，其属性如下：
- autosubmit：true/false，true表示表单中的元素发生变化时会自动提交。
- label：任意字符，为菜单定义一个可见的标注。
- type：context toolbar list，定义菜单显示的类型，默认list，表示列表显示菜单中的选项。
案例：交互元素menu的使用
1.功能描述
新建H5页面，添加menu元素，在该元素中加入li列表元素，列表元素中放置与元素，用于展示图片与标题，最后通过样式代码，当用户将鼠标移至某个menu元素时，展示菜单中某选项被选中的效果。
2.代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素<menu>的使用</title>
<style>
body {
padding: 5px;
font-size: 12px;
}
menu {
padding: 0;
margin: 0;
display: block;
border: 1px solid #365167;
width: 222px;
}
menu li {
list-style-type: none;
padding: 5px;
margin: 5px;
width: 200px;
}
menu li:hover {
border: 1px solid #7da2ce;
background-color: #cfe3fd;
}
menu li img {
clear: both;
padding-right: 8px;
}
menu li span {
display: inline-block;
font-size: 13px;
}
</style>
</head>
<body>
<menu>
<li>
<img src="img/JS高级.jpg" alt="" />
<span>JS高级程序设计</span>
</li>
<li>
<img src="img/并发编程.jpg" alt="" />
<span>Java并发编程</span>
</li>
<li>
<img src="img/计算机网络.jpg" alt="" />
<span>计算机网络</span>
</li>
<li>
<img src="img/实战.jpg" alt="" />
<span>HTML5实战</span>
</li>
</menu>
</body>
</html>3.页面效果
这里忘记了浮动相关的内容，导致span无法垂直居中，还需复习后再完善！！！！！！
2.2.2 command元素(谷歌不支持了解即可)
定义各种类型的命令按钮，利用该标记的url属性可以添加图片，并且实现图片按钮效果，改变标记中的type属性值，还可以定义复选框或单选框按钮。属性如下：
- checked：值checked，类型定义为checkbox或radio是否选中
- disabled：disabled，按钮是否可用
- icon：url，按钮中图片地址
- label：command name，可显示于页面中按钮的名称
- radiogroup：radiogroup name，定义为radio是，设置群组
- type：checkbox command radio，按钮的类型，默认radio
与menu结合使用，可以实现弹出式下拉菜单，单击菜单的某个选项时，执行相应的操作。
实例：交互元素command与menu的结合使用
1.功能描述
新建H5页面，分别添加一个menu和两个command元素，并将command元素包含于menu中，当单击其中一个command元素时，弹出一个对话框，并显示对应操作的内容。
2.代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素command与menu的结合使用</title>
<style>
body {
padding: 5px;
font-size: 12px;
}
menu {
display: block;
width: 30px;
height: 50px;
padding-left: 10px;
padding-bottom: 10px;
border: 1px solid #365167;
}
command {
float: left;
cursor: hand;
width: 30px;
margin: 5px;
}
#dialog {
display: none;
position: absolute;
left: 25%;
top: 9%;
font-size: 13px;
width: 320px;
height: 150px;
border: 3px solid #666;
}
#dialog.title {
padding: 5px;
background-color: #eee;
height: 21px;
line-height: 21px;
}
#dialog .title .fletf {
float: left;
}
#dialog.content {
padding: 50px;
}
</style>
<script>
function commClick(strS) {
document.getElementById("dialog").style.display = "block";
var strContent = "正在操作<font color=red>" + strS + "</font>选项";
document.getElementById("divTip").innerHTML = strContent;
}
</script>
</head>
<body>
<menu>
<command onclick="commClick('文件')">文件</command>
<command onclick="commClick('打开')">打开</command>
</menu>
<div id="dialog">
<div class="title">
<div class="fleft">提示</div>
<div class="fright">关闭</div>
</div>
<div class="content">
<div class="divTip"></div>
</div>
</div>
</body>
</html>3.页面效果
由于主流浏览器不兼容，则无法正常显示，火狐可以查看，这里只做了解即可。
2.3 状态交互元素
增强用户UI体验，状态交互元素包括与元素
2.3.1 progress元素
用来表示某个任务完成的进度(进程)。
例如下载文件的进度值，可以通过该元素动态展示在页面中，展示的方式既可以使用整数1-100，也可以使用百分比10%-100%.
元素的属性：
- max：整数或者浮点数，设置完成时的值，表示总体工作量。
- value：整数或者浮点数，设置正在进行时的值，表示已完成的工作量。
元素设置的值value必须小于或者等于max的值，且两者都必须大于0。
示例：交互元素的使用
1.功能描述
创建新页面，增加progress元素和一个下载按钮，当单击按钮时，元素progress动态展示下载进度状态和百分比信息，下载结束时，提示下载完成！
2.实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素progress在下载中的使用</title>
</head>
<body>
<p id="pTip">开始下载</p>
<progress value="0" max="100" id="proDownFile"></progress>
<input type="button" value="下载" onclick="btnClick();" />
<script>
var intValue = 0;
var intTimer;
var objPro = document.getElementById('proDownFile');
var objTip = document.getElementById("pTip");
//定时事件
function intervalHandler() {
intValue++;
objPro.value = intValue;
if (intValue >= objPro.max) {
clearInterval(intTimer);
objTip.innerHTML = "下载完成！";
} else {
objTip.innerHTML = "正在下载" + intValue + "%";
}
}
//下载按钮单击事件
function btnClick() {
intTimer = setInterval(intervalHandler, 100);
}
</script>
</body>
</html>3.页面效果
2.3.2 meter元素
用于在一定数量范围内的值，如投票中，候选人各占比例情况以及考试分数等。
meter元素的属性以及描述：以下属性全是数值
- value：展示的实际值，可以是浮点数，默认0
- min：展示的最小值，默认0
- max：展示的最大值，默认1
- low：最低值，必须小于等于min
- high：最高值，必须小于等于max
- optimum：最优值，必须在min与max之间
案例：交互元素meter的使用
1.功能描述
创建两个meter元素，通过设置不同的属性值，展示两个候选人的占票数比例，同时用span元素说明比例的百分数。
2.实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素meter的使用</title>
</head>
<body>
<p>共120人参与投票，明细如下：</p>
<p>张三：
<meter value="0.3" optimum="1" high="0.6" low="0.1" max="1" min="0"></meter>
<span>30%</span>
</p>
<p>李四：
<meter value="70" optimum="100" high="60" low="10" max="100" min="0"></meter>
<span>70%</span>
</p>
</body>
</html>3.页面效果
2453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
