Ajax实战：使用CSS间接添加事件

2016-02-19 19:45 2 1 收藏

下面请跟着图老师小编一起来了解下Ajax实战：使用CSS间接添加事件，精心挑选的内容希望大家喜欢，不要忘记点个赞哦！

【 tulaoshi.com - Web开发】

　　让我们来看一个简单的例子，在这里将鼠标事件绑定在虚拟的音乐键盘的键上。代码清单4-1定义了一个包含原始文档结构的简单页面。

　　代码清单4-1 musical.html

　　!DOCTYPE html
　　PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
　　html
　　head
　　titleKeyboard/title
　　link rel='stylesheet' type='text/css' href='musical.css'/
　　script type='text/javascript' src='musical.js'/script
　　script type='text/javascript'
　　window.onload=assignKeys;
　　/script
　　/head
　　body

　　我们声明了页面以符合严格定义的XHTML，仅仅为了显示这是可以做到的。我们为表示键盘的keyboard元素分配了唯一的ID，但是没有为表示键的元素分配ID。注意，每一个指定的键都有两个样式。musicalButton对于所有的键是通用的，另外一个单独的样式通过音符来区别它们。这些样式在样式表中单独定义(代码清单4-2)。

　　代码清单4-2 musical.css

　　样式musicalButton定义了每个键的通用属性，特定于音符的样式仅仅定义了每个键的颜色。注意，尽管顶级文档元素使用显式的像素精度来定位，但是通过float样式属性应用浏览器内建的布局引擎，可以将各个键分布在一条水平线上。

来源:https://www.tulaoshi.com/n/20160219/1621705.html

上一篇：客户端(CSS)解决自动截取字符串长度,并以...代替
下一篇： SQL Server 7.0与以前的版本相比安全模式中最重要的

看过《Ajax实战：使用CSS间接添加事件》的人还看了以下文章更多>>

ajax下RegisterClientScriptBlock使用

标签： Web开发

之前在常规页面下为了实现注册一段js脚本以实现弹出一个消息提示框通常可以这样做 string strJS = "script type='text/javascript' language='javascript' "; strJS = "alert('');"; strJS += "/script"; VS2003下 Page.RegisterClientScriptBlock("ajs", strJS); VS20...

iOS开发中使用cocos2d添加触摸事件的方法

标签：编程语言网络编程

CCLayer类是用来接收触摸输入的。不过你要首先启用这个功能才可以使用它。你通过设置isTouchEnabled为YES来让层接收触摸事件: 代码如下： self.isTouchEnabled = YES; 此项设定最好在init方法中设置。你可以在任何时间将其设置为NO或者YES。一旦启用isTouchEnabled属性,许多与接收触摸输入相关的方法将会开始被调用。这些事件包括:当新的触...

div css制作网页实战笔记心得

标签： Web开发

以下的内容是一位网友的DIV CSS编码笔记，是值得大家学习的，在实际工作与开发中，将工作中的点滴记录下来，回首这些过往，你也会收获很多，与大家共同交流，相信进步就更快了。大家一起努力！最近在做一个魔术网的div css切割，昨晚发现了长期以来一直无记录下来的问题！关于兼容IE跟FF的float属性。趁现在还清醒赶紧记下笔记先： ...

使用jQuery简化Ajax开发 Ajax开发入门

标签： Web开发

这篇文章就会带领你见识一下jQuery的哲学，探讨一下他的特性以及功能，并且会做一些ajax的示例，以及如何使用plug- in（插件）来扩展jQuery。 1. 什么是jQuery？ jQuery是个很优秀的Javascript库，它诞生于2006年，出自John Resig之手。不管你是一个 javascript 新手，但是却想尝试一下DOM（Document Object Model）以及Ajax的繁杂，抑或你...

CSS实战：利用CSS相对定位进行多行多列布局

标签： Web开发

CSS制作网页的实例，利用CSS相对定位进行多行多列布局。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" / title无标题文档/title styl...

查看更多精彩>>