摘要: 这是一个简单可用的拖拽代码。用鼠标和键盘都可以操作。当示例的box上的#链接处于活动状态的时候(不论是用tab然后点击enter或者使用鼠标点击)这个元素就能够通过方向键拖拽。然后点击enter或者Esc释放。(可以随意改变这些键。我不确定释放键应该设置成为什么所以enter和Esc都可以)使用1、复制文章后面的dragDrop对象。2、复制我的addEventSimple和removeEvent... 阅读全文
posted @ 2010-02-18 23:42 BeiYuu 阅读(1845) 评论(1) 推荐(0) 编辑
摘要: 在所有的表单项里面,文件上传部分是最难添加样式的。IE支持一些(不是很多)样式属性,Mozilla很少,其他浏览器几乎没有。“浏览”按钮在CSS操作里面也很难访问。问题在一个网站中可能我的输入框式下面这样的: 设计者可能想让上传部分也像这样然后再添加一个select按钮。但是当我想把普通的输入框改为上传框时就根本不能工作。浏览器之间有很大的不同,给默认按钮添加样式也几乎不可... 阅读全文
posted @ 2010-02-18 23:04 BeiYuu 阅读(789) 评论(0) 推荐(0) 编辑
摘要: 今天我打算使用一些元素的透明度设置来实现淡出淡入效果。但是有些浏览器对于某些元素的透明度设置支持不够。而且要设置表格的透明度,几乎在所有的浏览器里面都不可能。这里是测试页。在JavaScript里面设置透明度我用下面的代码来设置透明度:function setOpacity(value) { testObj.style.opacity = value/10; testObj.style.filte... 阅读全文
posted @ 2010-02-18 22:58 BeiYuu 阅读(441) 评论(0) 推荐(0) 编辑
摘要: 在这一章我打算通过直接修改页面的样式表而不是通过访问元素的办法来修改PRE的背景颜色。不幸的是,浏览器严重的不兼容性让这个代码基本上不能使用。请注意代码和传统的DHTML的区别。在DHTML你通过直接修改页面上的特定元素来改变样式,而这里的代码修改的是样式表。在这里查看W3C DOM-CSS的兼容性列表。定义一个页面总是包含一个或者几个样式表,一个样式表里面包含一条或者几条规则,一条规则里有详细的... 阅读全文
posted @ 2010-02-18 22:51 BeiYuu 阅读(770) 评论(0) 推荐(0) 编辑
摘要: 有时候你想看看文档的默认样式。比如,你的某个段落的宽度是50%,你想知道在用户的浏览器中他的确切的像素是多少。另外,有时候你也许想知道添加到一个元素或者链接上的样式的具体内容。而style属性只能读取元素的内联形式的样式,所以如果你想读取其他样式就得另想办法了。偏移在使用一些小技巧之前,IE和Mozilla已经添加了一个比较好的办法:offsetSomething。使用这些属性你就能够读取这个段落... 阅读全文
posted @ 2010-02-18 22:48 BeiYuu 阅读(450) 评论(0) 推荐(0) 编辑
摘要: 在这一章我会给出查找页面上的元素位置的代码。他能帮助你找到真正的位置,假如你改变了窗口的尺寸,然后再次运行代码,也会告诉你新的位置。offset在所有的浏览器里面元素的offsetTop和offsetLeft两个属性都是很有用的。他们会给出你元素相对于父元素的坐标位置。这段代码会向上查找offsetParent,然后添加offsetTop和offsetLeft。最终无论offsetParent在哪... 阅读全文
posted @ 2010-02-18 22:38 BeiYuu 阅读(486) 评论(0) 推荐(0) 编辑
摘要: 这一章会对范围对象做一些介绍。使用这个对象你能选取HTML文档中的任何部分然后根据选取信息作一些事情。最常见的范围对象是由用户选择的。虽然我们会讲解用程序创建范围对象,但是我们把精力主要集中在如何将用户的选取范围转换成为W3C 范围或者微软的文档范围对象。什么是范围范围是指HTML文档中的任意一部分内容。一个范围的开始和结束点都可以是随意的,甚至是相同的(一个空范围)。最常见的范围就是用户选取的文... 阅读全文
posted @ 2010-02-18 14:24 BeiYuu 阅读(1373) 评论(1) 推荐(1) 编辑
摘要: 这一章详细介绍的表单错误提示的方法比那种大多数使用警告框的方法要好的多。在我看来,警告框只用在浏览器不支持其他显示错误信息的办法的时候。W3C建议我们在表单项的附近显示错误信息。这是一种很好的办法,所以我们只在浏览器不支持这种高级的办法的时候才使用警告对话框。例子试试下面的例子。每一项都是必须的。另外我会坚持email项是否有@符号。如果没有也会提示错误信息。var W3CDOM = (docum... 阅读全文
posted @ 2010-02-18 14:21 BeiYuu 阅读(568) 评论(0) 推荐(0) 编辑
摘要: 这一章我会处理一个简单的W3C DOM脚本。他会帮助我们从一个新的角度来看待交互设计。想法假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢?你在这个页面上需要添加多少字段呢?在W3CDOM出现之前这确实是一个问题。假设你放置了7张CD。但是用户很可能只想查看一张,太多可能会吓着用户,而有些用户想查看自己的所有CD,这样就不得不反复提交很多次。这... 阅读全文
posted @ 2010-02-18 14:20 BeiYuu 阅读(432) 评论(0) 推荐(0) 编辑
摘要: 在这一章我有一个检查用户输入然后打印用户输入的表单和代码。下面我会着重讲解检测文本的代码。表单实例这是一个表单的实力。这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交。我会打印出你的输入,然后返回一个false,这样表单就没有被提交。onSubmit的代码做了两件事情:检查你是否在四个文本框里面都填写了数据,然后把所有的元素都连接起来打印在下面的文本区域中。原文中有实例,需要童鞋请移步... 阅读全文
posted @ 2010-02-18 14:17 BeiYuu 阅读(302) 评论(0) 推荐(0) 编辑
摘要: 在这一章我主要介绍一些用来检测用户输入的代码,利用这些代码,你也可以写一些自己的检测函数。因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码。你需要用我在这一章介绍的这些元素构建自己的检测函数。我在后面一张还有一个例子,你也可以参考。在这一章我会首先讨论一下用JavaScript来检测表单的局限性,然后会解释一下提交时间处理程序,然后是表单本身的一些方法和属性。最后就是如何访问表单元素。... 阅读全文
posted @ 2010-02-18 14:13 BeiYuu 阅读(494) 评论(0) 推荐(0) 编辑
摘要: HTML有一些相关有不同tag名字的相关元素,比如H1-H6或者input,select和TEXTAREA。getElementByTagName只能取得那些有相同tag名称的元素,所以你不能用他来取得所有的标题或者整个表单内容。getElementByTagNames(注意是复数的names)会获得一些tag的元素,然后按照他们的顺序保存在一个数组中。这非常的有用,比如在上一章的TOCScrip... 阅读全文
posted @ 2010-02-18 14:09 BeiYuu 阅读(637) 评论(0) 推荐(1) 编辑
摘要: 在这一章我会解释我的网站上的所有页面都在运行的内容表格的代码。他会生产这个页面的所有h3和h4的列表,然后给他们添加一个链接。如果你也想这么做,那么你还需要我的getElementByTagNames()函数。代码function createTOC() { var y = document.createElement('div'); y.id = 'innertoc'; var a = y.ap... 阅读全文
posted @ 2010-02-18 14:08 BeiYuu 阅读(365) 评论(0) 推荐(0) 编辑
摘要: 在这一章我会给出一个在CMS里非常有用的更新页面的代码。在任一段落点击鼠标你就可以修改了。完成以后点击按钮,修改的文本就显示了。例子这个页面就是个例子。点击一个段落,编辑,然后点Ready。你的修改就会呈现。问题遇到的第一个问题是:我想用文本框作为编辑区域。一开始我却把内容放不进文本框去。读者发现Mozilla的一个警告说是只有在文本框放置到文档之后才能设置它的value。另外,在Mozilla下... 阅读全文
posted @ 2010-02-18 14:04 BeiYuu 阅读(501) 评论(0) 推荐(0) 编辑
摘要: 文档对象模式(Document Object Model DOM)用来描述HTML页面中那些输入框、图片、段落等等元素与最顶级的结构document之间的关系。用适当的方法来选取这些元素,我们就可以改变他们。在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。首先是对于DOM的一些建议和DOM设计的目的,然后我会告诉你什么... 阅读全文
posted @ 2010-02-18 14:00 BeiYuu 阅读(1338) 评论(0) 推荐(1) 编辑