《HTML5 开发实例大全》——1.12 使用< command >标记元素实现动态对话框效果-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5 开发实例大全》——1.12 使用< command >标记元素实现动态对话框效果

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.12节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.12 使用< command >标记元素实现动态对话框效果


<a href=https://yqfile.alicdn.com/4a1200389fb018ba46f8b15e75eb2f928ae7087b.png" >

实例说明

在HTML 5中,< command >是一个新增的标记元素,功能是定义各种类型的命令按钮。利用该标记的“url”属性可以添加图片,并且实现图片按钮效果。另外,通过改变标记中的“type”属性值,可以定义复选框或单选框按钮。< command >元素包含的属性及描述信息如表1-2所示。


<a href=https://yqfile.alicdn.com/9cd88bb1ee7839fcedc0f3564bfd218293ceceb5.png" >

< command >能够定义各种类型的按钮,例如,命令按钮、单选按钮、图片按钮,另外,也能够定义复选框。如果< command >元素与< menu >元素结合使用,可以在网页中实现弹出式的下拉菜单。当单击菜单中的某个选项时,将执行相应的操作。

在本实例的页面中,分别添加一个< menu >元素和两个< command >元素,并将< command >元素包含在< menu >中。当单击其中一个< command >元素时会弹出一个对话框,并且显示对应操作的内容。

注意

虽然各浏览器对HTML 5兼容性都进行了很好的支持,但毕竟不可能照顾到每个元素的全部属性,例如,< command >元素就有许多属性不能被浏览器支持,因此,所提到的功能也只是HTML 5元素所具有的功能,暂时还不能真正执行,但随着各大浏览器厂商对HTML 5的兼容性力度的加强,这种暂时不兼容的功能终将解决。
具体实现

使用Dreamweaver创建一个名为“012.html”的文件,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>联合使用<menu>与<command></title>
<style type="text/css"> 
 body{ 
  padding:5px;
  font-size:12px
 }
 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:#666 solid 3px
 }
 #dialog .title{
  padding:5px; 
  background-color:#eee;
  height:21px;
  line-height:21px
 }
 #dialog .title .fleft{
  float:left
 }
 #dialog .title .fright{
  float:right
 }
 #dialog .content{
  padding:50px
 }
</style>
</head>
<body>
 <menu>
  <command onClick="command_click('文件')">文件</command>
  <command onClick="command_click('打开')">打开</command>
  <command icon="Images/chrome.png" label="带图片的按钮"></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.getElementsByName("command").disabled="disabled"
   document.getElementById("dialog").style.display="block";
   var strContent="正在操作<font color=red> "+strS+" </font>选项";
   document.getElementById("divTip").innerHTML=strContent;
  }
 </script>
</body>
</html>

在上述代码中,< command >标记元素被包含在< menu >元素中,同时为了使元素显示手状的被单击效果,加入了如样式中粗体所示的代码;另外,当< command >元素被单击时,弹出一个显示操作内容的对话框,具体内容是JavaScript代码中的部分,如图1-22所示。


51898723e454111b939cee8765964dd33a0d42eb

其实< command >元素除了可以触发onClick事件外,还可以通过icon属性设置按钮图片,例如下面的代码:

<command icon="Images/chrome.png" label="有图的按钮”></command>

通过上述代码创建了一个带图片的< command >元素,并且指定了元素的名称是“有图的按钮”。另外,还可以通过JavaScript代码控制< command >元素的“disabled”属性,例如下面的代码:


< script type="text/j avascript">
  ……
  document. getElement sByName("command").disabled="disabled"j
  ……
  </ script>

上述JavaScript代码的功能是,禁止单击全部的< command >元素。通常将上述代码放置在单击< command >元素操作某项功能的后面,这样可以防止用户反复单击或提示用户按钮已经单击成功。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章