HTML 5常用的交互元素————菜单交互元素command（2）

<command>用于定义各种类型的命令按钮，利用URL属性可以添加图片，实现图片按钮效果，另外改变type中的属性值，还可以定义复选框或者单选框按钮。

<command>的属性值如下：

属性值描述

checked checked 定义为checkbox或radio表示是否被选中

disabled disabled 设置按钮是否可用

icon URL 设置按钮中图片地址

label command name 定义可显示在页面中的按钮名称

radiogroup radiogroup name 如果设置为radio时，可以通过该属性设置所属群组

type checkbox command radio 设置按钮的类型，默认为command

如果该属性和<menu>配合使用，可以实现弹式的下拉菜单，单击下拉菜单式，执行相应的操作。

实例1

功能描述：在页面中分别添加一个<menu>和两个<command>，并将<command>包含在<menu>中，当单击一个<command>时，弹出一个对话框，显示出相应的内容。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>交互元素《menu》和《command》的结合使用</title>
<style type="text/css">
body{
font-size:12px;
padding:5px
}
menu{
padding-left：10px;
padding-bottom: 10px;
display:block;
border:solid 1px #365167;
width:40px;
height: 50px
}
command{
float: left;
margin:5px;
width: :30px;
cursor: :hand; 
}
#dialog{
display: none;
position: absolute;
left: :25%;
top: :9%;
font-size: 13px;
width: 320px;
height: 150px;
border:rgba(24,158,233,0.64) solid 3px
}
#dialog.title{
padding: 5px;
background-color: aquamarine;
height:21px;
line-height: 21px
}
#dialog.title.fleft{
float: left
}
#dialog.titlt.fright{
float: right
}
#dialog.content{
padding: 50px
}
</style>
</head>

<body>
<menu>
<command onClick="command_click('文件')">文件</command>
<command onClick="command_click('打开')">打开</command>
</menu>
<div id="dialog">
<div class="title">
<div class="fleft">提示</div>
<div class="fright">关闭</div>
</div>
<div class="content">
<div id="divTip"></div>
</div>
</div>
<script type="text/javascript">
function command_click(strS){

document.getElementById("dialog").style.display="block";
var atrContent="正在操作<font color=red>"+strS+"</font>选项";
document.getElementById("divTip").innerHTML=strContent;
}
</script>
</body>
</html>

<command>除了可以出发onclick事件外，还可以icon属性设置按钮图片，代码如下：

posted @ 2018-01-03 17:28 素心依旧阅读(384) 评论(0) 收藏举报

刷新页面返回顶部