语源科技BlogJava-天马行空

SAFARI CSS HACK REDUX

Fenris — Tue, 19 Feb 2008 14:43:00 GMT

转一个关于safari的css hack。
文章来自http://themechanism.com/blog/2008/01/08/safari-css-hack-redux/
In March 2007, I wrote about a Safari CSS hackcalled the "Pound Safari Post Semicolon" hack (coined by Tony at Simian Design). As of Safari 3.0, this hack no longer works. However, there is a way to target Safari 3.0 (and Opera as well):

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}

As always, the disclaimer(免责声明): nobody condones the use of hacks, but we all (well, most of us) have to make use of them at least once in a while. The above code targets both Safari 3.0 and Opera 9. Hopefully, it will be a future-proof（未来保证） hack, since the -webkit part of the selector will probably not be adopted by other browsers.

Example: The following code set the background color of the element red in all browsers and then resets it to blue in Safari 3.0 and Opera 9.
body { background-color: red; } @media screen and (-webkit-min-device-pixel-ratio:0) { body { background-color: blue; } }
[demo]

Tested on Mac OS X version 10.5.1 with Safari version 3.0.4 (5523.10.6) and Mozilla Firefox version 2.0.0.11. Tested on Windows XP Professional Version 2002 SP 2 with Mozilla Firefox version 2.0.0.11, Opera 9.10, and Microsoft Internet Explorer 6. Hack from CSS, JavaScript and XHTML Explained.

Fenris 2008-02-19 22:43 发表评论

一次性为所有元素添加自定义的tooltip

Fenris — Sun, 02 Dec 2007 18:00:00 GMT

在网上看到了这样的效果：当鼠标移到某一个超链接上的时候，弹出一个自定义的提示。比ie自带的那个好看得多。

不难实现，所以来试一试：

1.准备一个测试页面。页面上只有三个超级链接，为每个连接设置好title属性。

1)LOOP…EXIT…END循环控制语句

2)WHILE…LOOP循环控制语句

3)FOR…LOOP循环控制语句

2.一般情况我们会想到，为每一个标记写上onmouseover和onmouseout事件来控制tooltip的显示与隐藏。

那么，有没有一种方便的方法来做这件事情呢？

我们知道，从dom的角度来看网页的话，所有的元素都是document下的子节点，所以我们可以通过循环的方式来为元素添加事件：

var allEles = document.all;

for(var i =0;i
allEles[i].onmouseover = function(){show(this.title)};//设置onmouseover，使我们自定义的tooltip显示
allEles[i].onmouseout = function(){hide()};设置onmouseout，使我们自定义的tooltip隐藏
}

这是最初写的代码，运行后发现了问题，因为document.all不仅会把页面上的三个标记取出来还会把
等标记一起取出。所以要在设置事件前加上判断：

if(allEles[i].title!=""&&allEles[i].title!=undefined){}

3.加上事件后，我们就可以开始处理tooltip的显示了。

首先声明一个css类

.qTip{
padding: 3px;边距=3
border: 1px solid gray;边框：1像素宽的灰色单线边框
border-right-width: 2px;
border-bottom-width: 2px;右边和下边的边框宽度设为2
color: #349045;字色为某种绿
background-color:#ffffff;背景为白色，可以试试不写着一行，会产生很奇特的效果。
font-size:12px;字体12像素
position: absolute;定位=绝对定位
z-index: 1000;
}

接下来的思路是：当鼠标移上连接时，动态产生一个层，并把链接的title属性的值赋给层。让层在鼠标移动到的地方显示。

function show(e){
tipContainer = document.createElement("div");
tipContainer.className = "qTip";
tipContainer.innerText = e;
tipContainer.style.top = event.offsetY + 15;不能直接让鼠标出现在层上，所以要设置一定量的偏移。
tipContainer.style.left = event.offsetX + 15;
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
};

同样，隐藏层：

把tipContainer从文档流中删除。

function hide(){
if(tipContainer!=null){
document.getElementsByTagName("body").item(0).removeChild(tipContainer);
}
};

演示地址：http://daixiaoxiao.googlepages.com/CustomToolTip.html

Fenris 2007-12-03 02:00 发表评论

我的第一个Ajax例程

Fenris — Sat, 01 Dec 2007 18:49:00 GMT

一、Ajax并不是像Java或Dot Net一样是一项具体的新的技术，它是以下几种技术的综合应用：
1.       JavaScript:我们一期学的那些JavaScript还不足以应付Ajax的应用。所以应该多找一些JavaScript的高级教程来看看。
2.       Dom：二年学的如果理解得好的话，够用了
3.       Css：如果向界面好看滴话，这个相当重要！
4.       XMLHttpRequest对象：相当于一个新的类。熟悉api的话很简单的。
5.       XML：和王老师讲的一样，既可以做数据存储，又可以做数据传输用。（我一般都是用作数据传输）

二、应用Ajax程序的执行流程
        通常的情况：在我们编写基于MVC模式的程序时，过程往往是：客户端输入信息，提交一个表单到控制器，控制器执行相应的操作，把结果写到响应里，返回给客户端。
在完成这一整套流程之前，用户是不能进行其他操作的。用户必须等待服务器正确地返回了响应之后，才能进行别的操作。
        而使用Ajax设计的情况是：客户端输入信息，在后台通过javascript异步的把请求提交到控制器。在控制器处理这个请求时，客户端依然可以执行其他的操作。并不需要等待上一次的请求得到响应。
        那么为什么可以异步的提交请求呢？这就是XMLHttpRequest这个对象所提供的功能。Ajax的核心对象。（XHR对象早在1999年就随着IE出现了，从这一点就可以看出，Ajax不是什么了不起的东西）。下面我们来看看这个神奇的东东。

三、XMLHttpRequest！！！
这三个感叹号不是随便打的，用红色显示也不是一时兴起。原因只有一个：XMLHttpRequest（简写成：XHR）是整个Ajax技术的最核心的一个对象。客户端与服务器的交互都是通过这个对象来进行的。不过不要因此觉得他很难。他和我们学过的千千万万个类一样。我们只要熟悉他的API，就可以灵活的运用它了。

众所周知，类是由属性和方法组成的。下边就是XHR的属性：
readystate:请求的状态
0：未初始化
1：正在加载
2：加载完成
3：正在交互（发送请求成功，正在接收响应数据）
4：结束（数据已经成功接收）

status：Http状态码

statusText：Http状态码所对应的文字
常见的状态码和文字：
200：成功
202：接受成功，但处理未完成
400：错误的请求
404：未找到请求的文件
500：服务器内部错误

responseXML：响应的内容，表现为XML格式
Web程序是基于请求-响应模式的，响应是由服务器发送给客户端的一些数据，这个属性中存储了响应的数据

onreadystatechange：事件
当XHR的状态改变时触发的事件。最常用的情况是：当我们向服务器发送了某个请求，服务器正确响应后。我们可以设置一个函数来处理这次响应。
以上是XHR最常用的几个属性。一会再例子里还会见到他们。下边是常用方法：

open(method,url,asyschronous,user,password);
这是open方法，调用这个方法後，readystate会从0变为1；
如果仔细看这个方法的参数列表的话，可能会发现一个问题：参数缺少数据类型。如果你够聪明的话，一定会想到，这是一个在javascript中执行的方法。js的变量是不区分数据类型的。

method ：请求的类型，get或post

url ：请求的地址，可以是相对路径或绝对路径。可以写成：test.jsp?user=dodo&pass=123456这种类型的带查询字符串的格式。

asyschronous ：是否异步调用。true为异步，false为同步。
user，password：如果路径是需要用户名和密码的加密路径，在这两个参数中提供。一般来说没什么用。
---------------------------------------------------------------------------------------------------------
send(databody);
向服务器发送数据
databody：要发送的数据
如果不需要发送数据的话直接写：null
abort();
取消当前请求
以上就是XHR常用的属性和方法了。大家可以记记个大概。在例子中我会继续提到他们的。

四、例子的说明
这是一个很小的例子。只是说明了Ajax程序的工作流程。我们要做的是把xml中的内容显示在网页上。

首先，和java一样，要使用对象，就要先实例化它。
在这，我们使用javascript语言来实现。

function createXHR(){
  if(window.ActiveXObject){
    XHR = new ActiveXObject("Microsoft.XMLHTTP");
  }else if(window.XMLHttpRequest){
    XHR = new XMLHttpRequest();
  }
}

       window.ActiveXObject用来检测当前页面是不是支持ActiveX技术，如果支持的话那么客户端就是IE。
       window.XMLHttpRequest用来检测浏览器能不能直接创建XHR对象。如果能的话，就直接new出来。
这么做的原因是：虽然web遵循的是同一套接口和标准，但是生产浏览器的厂家实现的方式却不一样。比如IE和FireFox等。
在IE中XHR是通过ActiveX控件的形式提供的。而其他浏览器则罢XHR作为了内置对象来实现。因此在不同的浏览器中，实例化XHR的方式也不一样。

现在我们得到了一个XHR对象。那么他现在的readystate是为0的。下面，我们来调用它的open方法。

       XHR.open("get","someURL",true);

调用open方法的后，readystate会变成1。向服务器发送请求的准备工作都做好了

XHR.send(null);

调用send方法，发送请求。

发送请求后，就等着服务器传回响应了。那么我们怎么知道服务器有没有响应呢？

//处理响应的函数
function handleChange(){
  //当Http状态为200并且readystate为4时，才正确的返回了响应。
  if(XHR.readystate==4){
    if(XHR.status==200){
      //获取XHR返回的XML格式的响应信息
      xmldoc = XHR.responseXML;

      //解析XML文档取得用户名和密码
      var un = xmldoc.getElementsByTagName("name")[0].text;
      var pass = xmldoc.getElementsByTagName("pass")[0].text;

      //验证用户名和密码
      if(document.getElementById("username").value == un){
        if(document.getElementById("password").value == pass){
          //用innerHTML属性来实现无状态刷新
          document.body.innerHTML = "验证成功！";
        }
      }
    }
  }
}

请注意一开始的两个if判断。通过这两个判断的组合，我们就能确定服务器已经正确的响应了我们的请求了。
然后就可以开始处理响应信息。

到这里，整个Ajax请求和获取效应的流程就结束了。至于如何处理响应信息就要看实际情况了。

Fenris 2007-12-02 02:49 发表评论

这些天做一个网页，发现了js和css一些有趣的问题。

Fenris — Thu, 29 Nov 2007 08:11:00 GMT

这些天做一个网页，发现了js和css一些有趣的问题。

1.不同的标准，不同的效果

首先是css，原来一直用ie7和ff的浏览器，网页的效果也一直和想象中一样。然而新装系统后，ie的版本降为6的时候，问题出现了。

在网页中一个div元素的css如下：

.i-top-3btn-1{

background-color:#e8f2fc;

}

.i-top-3btn-1:hover{

background-color:#990000;

}

这两个类可以控制这个层在鼠标经过时显示不同的背景色，要达到这个效果当然也可以用js在div上做事件来实现，但是使用css中的伪类“:hover”则减轻了不少的编码量，也让代码看起来很清秀。

这个“:hover”伪类，在ie7和ff下正常的表现出了鼠标经过变化底色的效果，而在ie6下却没有反应。经过一番资料查找，才发现，ie7和ff实现的是css2标准，而ie6只实现了一部分的css1标准。

在css1中，伪类“:hover”只有“a”标记才能正确表现。而其他标记都不支持“:hover”伪类。在css2中，所有的标记都开始支持“:hover”这个伪类了。

我的项目中，div里本来就应该是一个链接，所以加上“a”标记并不会对我的布局以及效果产生太大的影响，然而如果只是淡出的想让div或其它元素产生背景色变化的话，最好的解决方法可能还是在元素上做事件吧。

2.for的陷阱

早在看js面向对象方式编程的一些书籍的时候，就看到了这样的写法：

for(var i in obj){

alert(i);

}

通过这样的方法，可以准确的获知对象obj的所有成员的名称。这也被称之为js的反射机制。

而这次做项目的时候由于在页面加载时要同时执行大量的函数，所以按照ajax in action 一书中的建议，使用Observer模式变现启动加载的代码：

//首先声明一个数组型变量，把要在启动时加载的函数全部存春在这个数组中。

var __SYS_Startup_Funcs = new Array();

//提供一个方法，让程序员可以把要在启动时加载的函数存放到先前声明的数组里。

function registerStartup(pFunction){

__SYS_Startup_Funcs.push(pFunction);

}

//替换系统的onload函数以达到加载启动的目的。

window.onload = function (){

for(var i in __SYS_Startup_Funcs){

i.call();

}

红色的这段代码是郁闷我很久的根源，按照常理，每次循环就从“__SYS_Startup_Funcs”中取出一个函数，并调用这个函数的call方法来执行它。

但是在执行时发生错误：“对象不支持此方法或属性”。

这是人很迷惑，因为call方法是属于Function这个对象的，而每一个函数都是继承自Function的。为什么产生这样的错误呢？

于是开始排错，首先用alert(i)来打印。对话框中显示的正好是我传进去的函数名。于是换另外一种方式alert(typeof(i))来打印。对话框中显示的是“string”。

这次的结果出乎我意料，但是却直接指出了这段代码的错误所在。

在查阅资料后，见到这样一段话：

Javascript 提供了一种特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数组的所有元素。for...in 循环中的循环计数器是一个字符串，而不是数字。它包含了当前属性的名称或者表示当前数组元素的下标。

根据这个特性，我们取出来的并不是集合中的一个元素，而是这个元素的名字！

这样的错误显然是受了c#和java这样面向对象语言的影响。

Fenris 2007-11-29 16:11 发表评论