JavaScript Google IG Drag Demo
作者:骆驼 日期:2007-03-09 10:38
效果演示地址：http://www.phzzy.org/code/drag/google_drag.html 加强版效果演示地址：http://www.phzzy.org/code/drag/google_drag_2.html 拖拽原理： 关于拖拽的基础，可以参考这篇文章，讲得非常不错。 http://www.sohotx.com/mzk/index.php/1007/ArticleContent/298.html 其实原理很简单，就是把绑定三个事件：onmousedown , onmousemove , onmouseup。 在鼠标点下时(onmousedown)把元素的坐标设置为鼠标的坐标，并把 position 设置为绝对坐标。 在鼠标移动时(onmousemove)改变元素坐标。 在鼠标弹起时(onmouseup)取消绑定的事件，并做后续操作。 下面是关于仿 google 个性化主页拖拽效果的一个 Demo (需包含 prototype)。 完整下载包：  Google Drag.rar (19.82 KB ,下载:376次)总共有四个文件： google_drag.html 中最后几行中有个初始化拖拽函数
必须写成这样，如果直接写成
这样会在 IE 下报个错误：尚未实现 其他代码可以直接查看源码，就几行注释。其实就是用 JavaScript 绘制了 15 个 div，然后设置它们 class 都为drag_div (后面是通过 className 来判断元素是否可拖拽)，然后把可拖拽的部分的 ID 设置元素的 ID 后加个 _h(也可设置自己为拖拽部分) drag.js 是一个比较通用的拖拽函数。里面包含四个最简单的函数：start_Drag, when_Drag, end_Drag, after_Drag。这四个函数只是实现最基本的拖拽功能，要实现其他功能可修改或在后面覆盖掉这些函数。 google_drag.js 是仿 google 个性化主页拖拽效果的函数。它覆盖了上面说的那个四个函数，实现比较高级的效果。 拖拽其实应该还是比较简单的，实现完拖拽后就是要用 Ajax 来传递拖拽后的位置，改变服务器端的值，这样下次用户访问时元素才会位置不变。效果的实现是非常简单的，主要是怎么融合到已有的项目中，从而提高用户体验。 这个 Demo 有一部分参考的网上的代码。 在网上还有很多这种例子，不过感觉效率都没这个高。有一些例子是把所有元素的位置都设置为 absolute，然后直接修改各个元素的 top 和left来显示效果，感觉那个不是很通用，那样的话比如我要把这个效果修改为一个数的拖拽，并且记录各个元素之间的位置，比较麻烦。这个例子中要记录元素的位置，只需在拖拽完成后记录被拖拽元素的 id 以及拖拽到了哪个元素的前面然后传给服务器端去修改就可以了。 Update 2007-01-26 1:22 加了个加强版的，效果请看 Demo。其实就是加了个函数，让他保证左上方那个大块只会有一个元素，如果超过一个则把后面的挤到下面的第一列去，如果没有元素则从下面的第一列拿出第一个元素放到左上方的大块中，如果下面的第一列没有元素，则找第二列，第三列。 |
推荐好文：《javascript的函数》
作者:骆驼 日期:2007-01-22 09:24
javascript的函数 整篇文档下载:
JS函数.rar (44.09 KB , 下载:195次)- 作者：F. Permadi
- 译者：Sheneyan(子乌)
- 时间：2006.01.03
- 英文原文： INTRODUCTION TO JavaScript Functions
词语翻译列表 function:函数（Function未翻译） declare:定义 assign:指派，分配 functionbody:函数体（就是函数的内容） object:对象 property:属性 unnamed:匿名（在这里没翻译成未命名） object oriented programming:面相对相编程 class:类（比如后面的class data type我翻译成类数据类型） pointer:指针 reassign:重新分配 nest:嵌套 feature:功能，特性 local/global:局部/全局 blueprint:蓝图（？） user defined:用户自定义 instance:实例 prototype:原型（除了标题都不翻译） internal:内部 constructor:构造器 duplication:复制 函数：定义有以下这些方法可以定义一个函数。所有这些都是有效的，但是它们在后台如何实现的则有一些差别。
常用的写法一般大家都用这个写法来定义一个函数：
functionName([parameters]){functionBody};
Example D1：
Language：javascript, parsed in: 0.005 seconds, using GeSHi 1.0.7.12
- function add(a, b)
{
return a+b;
}
alert(add(1,2)); // 结果 3
运行示例
当我们这么定义函数的时候，函数内容会被编译（但不会立即执行，除非我们去调用它）。而且，也许你不知道，当这个函数创建的时候有一个同名的对象也被创建。就我们的例子来说，我们现在有一个对象叫做“add”（要更深入了解，看底下函数：对象节。）
匿名函数我们也可以通过指派一个变量名给匿名函数的方式来定义它。
Example D2
Language：javascript, parsed in: 0.006 seconds, using GeSHi 1.0.7.12
- var add=function(a, b)
{
return a+b;
}
alert(add(1,2)); // 结果 3
运行示例
这个代码和前一个例子做了同样的事情。也许语法看起来比较奇怪，但它应该更能让你感觉到函数是一个对象，而且我们只是为这个对指派了一个名称。可以把它看做和var myVar=[1,2,3]一样的语句。以这种方式声明的函数内容也一样会被编译。
当我们指派一个这样的函数的时候，我们并不一定要求必须是匿名函数。在这里，我作了和ExampleD2一样的事情，但我加了函数名“theAdd”，而且我可以通过调用函数名或者是那个变量来引用函数。
Example D2A
Language：javascript, parsed in: 0.008 seconds, using GeSHi 1.0.7.12
- var add=function theAdd(a, b)
{
return a+b;
}
alert(add(1,2)); // 结果 3
alert(theAdd(1,2)); // 结果也是 3
不同浏览器 JavaScript 的getyear年份函数兼容性问题
作者:骆驼 日期:2007-01-03 07:41
不同浏览器 JavaScript 的getyear年份函数兼容性问题
先举个例子
用 Firefox 上一些网站会看到这样的提示
现在时间是 106年8月8日
而用 ie 浏览器的话就显示正常的 2006年8月8日
原因就是 javascript 的兼容性问题
var today = new date();
var year = today.getYear();
在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值 (以前都如此)
而微软很NB的做了一个改动：
当today的年份大于等于2000的时候 直接把1900加上了 返回的 200X (而不是10X)
如：today年份是1999 返回99
today年份是2000 返回2000
一个简单的解决是加一个判断：
year = (year<1900?(1900+year):year);
也有另外的方法
通过 getFullYear getUTCFullYear 去调用
var year = today.getFullYear();
(Web2.0)XHTML+CSS 设计注意事項
作者:骆驼 日期:2006-12-02 06:31
1、除选择DOCTYPE之外的语句必须使用小写英文字母书写。其中包括 Macromedia Dreamweaver 生成的鼠标动作，如 OnMouseOver 也必须修改成 onmouseover。
2、XHTML语法规要求所有的标识都必须有开始和结束。例如<body>和</body>、<p>和</p>等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如<br>写成<br />、<img>写成<img />，加空格的原因是避免代码连在一起浏览器不识别。
3、所有的XML标记都必须合理嵌套。如：<p><b></p></b> 必须修改为：<p><b></b></p> ，就是说，一层一层的嵌套必须是严格对称。
4、所有的属性必须用引号""括起来。如： <height=80> 必须修改为：<height="80"> 。特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：<alt="say'hello'">。
5、把所有<和&特殊符号用编码表示。如：任何小于号（<），不是标签的一部分，都必须被编码为& l t ; ，任何大于号（>），不是标签的一部分，都必须被编码为 & g t ; ，任何与号（&），不是实体的一部分的，都必须被编码为& a m p ; 。（以上代码字母间无空格）
6、给所有属性赋一个值。如： <td nowrap> <input type="checkbox" name="shirt" value="medium" checked> 必须修改为：<td nowrap="nowrap"> <input type="checkbox" name= "shirt" value="medium" checked="checked">。
7、不要在注释内容中使用“--”。如：<!--这里是注释-----------这里是注释--> 可以用等号或者空格替换内部的虚线 <!--这里是注释============这里是注释-->。
一个很好的Javascript范例网站。
作者:骆驼 日期:2006-11-25 13:02
Byte-Order Mark found in UTF-8 File
作者:骆驼 日期:2006-11-24 07:16
选择三篇代表性的文字说明这个问题，希望可以解决您的疑惑。
W3C的css-validator和UTF-8文档的BOM冲突
授权方式：署名，非商业用途，保持一致，转载时请务必以超链接(http://www.fwolf.com/blog/post/96)的形式标明文章原始出处和作者信息及本声明。css-validator是W3C提供的一个工具，用于检查CSS的有效性，是个不错的工具，同样的还有W3C Markup Validation Service，用于检查html、xhtml等文档的格式有效性。
但是在检查一篇文档的时候出现了问题，文档是UTF-8编码，XHTML 1.0 Strict检查已通过，CSS代码采用直接使用“<style type=”text/css”>”写在文档中的方式。在使用css-validator检查的时候出现如下错误：
Target: http://www.fwolf.com/tools/ogame_construction_resource_computer.phpPlease, validate your XML document first!
Line 1
Column 1
Content is not allowed in prolog.
第一行、第一列？这不是xml 1.0的文档声明么？怎么在检查css的时候还用这个？结果一查，可能的原因有两个：
原因一：css-validator架构于Jigsaw——W3C’s Java Server上，而Java或Jsp处理XML文档的时候，无法正确识别UTF-8格式文档的BOM，从而导致错误“Content is not allowed in prolog”。
原因二：在这里看到别人在讨论的，即然XML 1.0的规范中BOM是合理存在的，那么相关的XML工具就应该具备识别BOM标记的功能，但css-validator使用的XML
Validator是采用ElCel Technology C++ Toolkit编译的，而这个东东可能不能完全识别BOM？
在W3C的bugzilla中也有人提交了这个bug，但似乎讨论也是无疾而终。
由于Windows平台下的一些编辑器，尤其是我使用的Emeditor，在没有BOM的情况下，有时会有些麻烦，所以出于方便维护的目的来讲，我认为BOM还是保留的好。至于css-validator不能识别的问题，就只能期待css-validator进行改进了，目前倒是还可以把css标记粘贴过去进行检查不是？W3C的W3C Markup Validation Service在检查文档，发现文档具有BOM的时候，会出现一个小提示：
Byte-Order Mark found in UTF-8 File.The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.
这说明W3C也在改进各类工具对BOM的支持。
至于说了半天，什么是BOM？请看谈谈Unicode编码，简要解释UCS、UTF、BMP、BOM等名词这篇文章。还有GonDa’s Blog上的Unicode、BOM也提到了一些。
另：css-validator以前都是英文版，现在好像改成了自动识别用户语言的版本了，但是我使用FireFox访问首页居然是乱码－－文档是GB2312编码，却错误的被识别成了UTF-8编码。总体感觉易用性比W3C Markup Validation Service差远了，尤其是css-validator的中文版，错误提示有点莫名其妙的，还不知道怎么才能使用英文版界面。
怎样转换成 XHTML
作者:骆驼 日期:2006-11-23 06:55
To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules of the previous chapters. The following steps were executed (in the order listed below):
要将一个HTML网站转换成XHTML，你应该熟悉前几章节所提到的XHTML语法。然后依照下面的步骤来做：
A DOCTYPE Definition Was Added
添加DOCTYPE定义
The following DOCTYPE declaration was added as the first line of every page:
在每个页的首行添加如下DOCTYPE声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Note that we used the transitional DTD. We could have chosen the strict DTD, but found it a little too "strict", and a little too hard to conform to.
注意我们使用的是过渡型的DTD。我们可以选择严密型的 DTD，但它的要求有点过于严格，想完全地去遵循它有些困难。
10个你未必知道的CSS技巧
作者:骆驼 日期:2006-10-23 07:23
一般用CSS设定字体属性是这样做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
