h色视频在线观看,亚洲国产日本,四虎影院在线域名免费观看

SAFARI CSS HACK REDUX

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

转一个关于safari的css hack�?br /> 文章来自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�Q�未来保证） 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 发表评论

一�ơ性�ؓ(f��)所有元素添加自定义的tooltip

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

在网上看��C��q�样的效果：(x��)当鼠标移到某一个超链接上的时候，弹出一个自定义的提�C�。比ie自带的那个好看得多�?/div>

不难实现�Q�所以来试一试：(x��)

1.准备一个测试页面。页面上只有三个��链接�Q��ؓ(f��)每个�q�接讄��好title属性�?/div>

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

2)WHILE…LOOP循环控制语句

3)FOR…LOOP循环控制语句

2.一般情冉|��们会(x��)惛_��Q��ؓ(f��)每一�?lt;a>标记写上onmouseover和onmouseout事�g来控制tooltip的显�C�Z��隐藏�?/font>

那么�Q�有没有一�U�方便的�Ҏ(gu��)��来做�q��g事情呢？

我们知道�Q�从dom的角度来看网��늚�话，所有的元素都是document下的子节点，所以我们可以通过循环的方式来为元素添加事�Ӟ��(x��)

var allEles = document.all;

for(var i =0;i
allEles[i].onmouseover = function(){show(this.title)};//讄��onmouseover�Q��我们自定义的tooltip昄��
allEles[i].onmouseout = function(){hide()};讄��onmouseout�Q��我们自定义的tooltip隐藏
}

�q�是最初写的代码，�q�行后发��C��问题�Q�因为document.all不仅�?x��)把��面上的三�?lt;a>标记取出来还�?x��)�?lt;br>�{�标��C��起取出。所以要在设�|�事件前加上判断�Q?/font>

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

3.加上事�g后，我们��可以开始处理tooltip的显�C�Z��?/div>

首先声明一个css�c?/div>

.qTip{
padding: 3px;边距=3
border: 1px solid gray;�Ҏ(gu��)��Q?像素宽的灰色单线�Ҏ(gu��)��
border-right-width: 2px;
border-bottom-width: 2px;双��和下边的�Ҏ(gu��)��宽度设�ؓ(f��)2
color: #349045;字色为某�U�绿
background-color:#ffffff;背景为白�Ԍ��可以试试不写着一行，�?x��)��生很奇特的效果�?br /> font-size:12px;字体12像素
position: absolute;定位=�l�对定位
z-index: 1000;
}

接下来的思�\是：(x��)当鼠标移上连接时�Q�动态��生一个层�Q��ƈ把链接的title属性的��D��l�层。让层在鼠标�U�d��到的地方昄��?/div>

function show(e){
tipContainer = document.createElement("div");
tipContainer.className = "qTip";
tipContainer.innerText = e;
tipContainer.style.top = event.offsetY + 15;不能直接让鼠标出现在层上�Q�所以要讄��一定量的偏�U�R�?br /> tipContainer.style.left = event.offsetX + 15;
document.getElementsByTagName("body").item(0).appendChild(tipContainer);
};

同样�Q�隐藏层�Q?/div>

把tipContainer从文档流中删除�?/div>

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

演示地址�Q?a >http://daixiaoxiao.googlepages.com/CustomToolTip.html

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

我的�W�一个Ajax例程

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

一、Ajax�q�不是像Java�?font style="line-height: 1.3em" face="Times">Dot Net一��h��一��具体的新的技术，它是以下几种技术的�l�合应用�Q?/font>
1.       JavaScript:我们一期学的那�?font style="line-height: 1.3em" face="Times">JavaScript�q�不��以应付Ajax的应用。所以应该多找一�?font style="line-height: 1.3em" face="Times">JavaScript的高�U�教�E�来看看�?/font>
2.       Dom�Q�二�q�学的如果理解得好的话，够用�?/font>
3.       Css�Q�如果向界面好看滴话�Q�这个相当重要！
4.       XMLHttpRequest对象�Q�相当于一个新的类。熟�(zh��n)?font style="line-height: 1.3em" face="Times">api的话很简单的�?/font>
5.       XML�Q�和王老师讲的一��P��既可以做数据存储�Q�又可以做数据传输用。（我一般都是用作数据传输）

二�?/font>应用Ajax�E�序的执行流�E?/font>
        通常的情况：(x��)在我们编写基�?font style="line-height: 1.3em" face="Times">MVC模式的程序时�Q�过�E�往往是：(x��)客户端输入信息，提交一个表单到控制器，控制器执行相应的操作�Q�把�l�果写到响应里，�q�回�l�客��L(f��ng)��?/font>
在完成这一整套��程之前�Q�用��h��不能�q�行其他操作的。用户必��ȝ��待服务器正确地返回了响应之后�Q�才能进行别的操作�?/font>
        而��?font style="line-height: 1.3em" face="Times">Ajax设计的情冉|��Q�客��L(f��ng)��输入信息�Q�在后台通过javascript异步的把��h��提交到控制器。在控制器处理这个请求时�Q�客��L(f��ng)��依然可以执行其他的操作。�ƈ不需要等待上一�ơ的��h��得到响应�?/font>
        那么��Z��么可以异步的提交��h��呢？�q�就�?font style="line-height: 1.3em" face="Times">XMLHttpRequest�q�个对象所提供的功能�?font style="line-height: 1.3em" face="Times">Ajax的核心对象。（XHR对象早在1999�q�就随着IE出现了，从这一点就可以看出�Q?font style="line-height: 1.3em" face="Times">Ajax不是什么了不�v的东西）。下面我们来看看�q�个��奇的东东�?/font>

三、XMLHttpRequest�Q�！�Q?/span>
�q�三个感叹号不是随便打的�Q�用�U�色昄��也不是一时兴赗��原因只有一个：(x��)XMLHttpRequest�Q�简写成�Q?font style="line-height: 1.3em" face="Times">XHR�Q�是整个Ajax技术的最核心的一个对象。客��L(f��ng)��与服务器的交互都是通过�q�个对象来进行的。不�q�不要因此觉得他很难。他和我们学�q�的千千万万个类一栗��我们只要熟�(zh��n)�他�?font style="line-height: 1.3em" face="Times">API�Q�就可以灉|��的运用它了�?/font>

众所周知�Q�类是由属性和�Ҏ(gu��)��l�成的。下边就�?font style="line-height: 1.3em" face="Times">XHR的属性：(x��)
readystate:��h��的状�?/font>
0�Q�未初始�?/font>
1�Q�正在加�?/font>
2�Q�加载完�?/font>
3�Q�正在交互（发送请求成功，正在接收响应数据�Q?/font>
4�Q�结束（数据已经成功接收�Q?/font>

status�Q?font style="line-height: 1.3em" face="Times">Http状态码

statusText�Q?font style="line-height: 1.3em" face="Times">Http状态码所对应的文�?/font>
常见的状态码和文字：(x��)
200�Q�成�?/font>
202�Q�接受成功，但处理未完成
400�Q�错误的��h��
404�Q�未扑ֈ��h��的文�?/font>
500�Q�服务器内部错误

responseXML�Q�响应的内容�Q�表��Cؓ(f��)XML格式
Web�E�序是基于请�?font style="line-height: 1.3em" face="Times">-响应模式的，响应是由服务器发送给客户端的一些数据，�q�个属性中存储了响应的数据

onreadystatechange�Q�事�?/font>
�?font style="line-height: 1.3em" face="Times">XHR的状态改变时触发的事件。最常用的情冉|��Q�当我们向服务器发送了某个��h��Q�服务器正确响应后。我们可以设�|�一个函数来处理�q�次响应�?/font>
以上�?font style="line-height: 1.3em" face="Times">XHR最常用的几个属性。一�?x��)再例子里还会(x��)见��C��们。下�Ҏ(gu��)��常用�Ҏ(gu��)��Q?/font>

open(method,url,asyschronous,user,password);
�q�是open�Ҏ(gu��)��Q�调用这个方法後�Q?font style="line-height: 1.3em" face="Times">readystate�?x��)�?font style="line-height: 1.3em" face="Times">0变�ؓ(f��)1�Q?/font>
如果仔细看这个方法的参数列表的话�Q�可能会(x��)发现一个问题：(x��)参数�~�少数据�c�d��。如果你够聪明的话，一定会(x��)惛_��Q�这是一个在javascript中执行的�Ҏ(gu��)��?font style="line-height: 1.3em" face="Times">js的变量是不区分数据类型的�?/font>

method �Q�请求的�c�d��Q?font style="line-height: 1.3em" face="Times">get�?font style="line-height: 1.3em" face="Times">post

url �Q�请求的地址�Q�可以是相对路径或绝对�\径。可以写成：(x��)test.jsp?user=dodo&pass=123456�q�种�c�d��的带查询字符串的格式�?/font>

asyschronous �Q�是否异步调用�?font style="line-height: 1.3em" face="Times">true为异步，false为同步�?/font>
user�Q?font style="line-height: 1.3em" face="Times">password�Q�如果�\径是需要用户名和密码的加密路径�Q�在�q�两个参��C��提供。一般来说没什么用�?/font>
---------------------------------------------------------------------------------------------------------
send(databody);
向服务器发送数�?/font>
databody�Q�要发送的数据
如果不需要发送数据的话直接写�Q?font style="line-height: 1.3em" face="Times">null
abort();
取消当前��h��
以上��是XHR常用的属性和�Ҏ(gu��)��了。大家可以记��C��大概。在例子中我�?x��)��l�提��C��们的�?/font>

四�?/font>例子的说�?/font>
�q�是一个很��的例子。只是说明了Ajax�E�序的工作流�E�。我们要做的是把xml中的内容昄��在网��上�?/font>

首先�Q�和java一��P��要��用对象，��p��先实例化它�?/font>
在这�Q�我们��?font style="line-height: 1.3em" face="Times">javascript语言来实现�?/font>

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

       window.ActiveXObject用来��当前页面是不是支持ActiveX技术，如果支持的话那么客户端就�?font style="line-height: 1.3em" face="Times">IE�?/font>
       window.XMLHttpRequest用来��浏览器能不能直接创�?font style="line-height: 1.3em" face="Times">XHR对象。如果能的话�Q�就直接new出来�?/font>
�q�么做的原因是：(x��)虽然web遵��@的是同一套接口和标准�Q�但是生产浏览器的厂家实现的方式却不一栗��比�?font style="line-height: 1.3em" face="Times">IE�?font style="line-height: 1.3em" face="Times">FireFox�{��?/font>
�?font style="line-height: 1.3em" face="Times">IE�?font style="line-height: 1.3em" face="Times">XHR是通过ActiveX控�g的�Ş式提供的。而其他浏览器则�ŞXHR作�ؓ(f��)了内�|�对象来实现。因此在不同的浏览器中，实例�?font style="line-height: 1.3em" face="Times">XHR的方式也不一栗��?/font>

现在我们得到了一�?font style="line-height: 1.3em" face="Times">XHR对象。那么他现在�?font style="line-height: 1.3em" face="Times">readystate是�ؓ(f��)0的。下面，我们来调用它�?font style="line-height: 1.3em" face="Times">open�Ҏ(gu��)��?/font>

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

调用open�Ҏ(gu��)��的后�Q?font style="line-height: 1.3em" face="Times">readystate�?x��)变�?font style="line-height: 1.3em" face="Times">1。向服务器发送请求的准备工作都做好了

XHR.send(null);

调用send�Ҏ(gu��)��Q�发送请求�?/font>

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

//处理响应的函�?/font>
function handleChange(){
  //�?font style="line-height: 1.3em" face="Times">Http状态�ؓ(f��)200�q�且readystate�?font style="line-height: 1.3em" face="Times">4�Ӟ��才正��的�q�回了响应�?/font>
  if(XHR.readystate==4){
    if(XHR.status==200){
      //获取XHR�q�回�?font style="line-height: 1.3em" face="Times">XML格式的响应信�?/font>
      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){
          //�?font style="line-height: 1.3em" face="Times">innerHTML属性来实现无状态刷�?/font>
          document.body.innerHTML = "验证成功�Q?font style="line-height: 1.3em" face="Times">";
        }
      }
    }
  }
}

��h��意一开始的两个if判断。通过�q�两个判断的�l�合�Q�我们就能确定服务器已经正确的响应了我们的请求了�?/font>
然后��可以开始处理响应信息�?/font>

到这里，整个Ajax��h��和获取效应的��程��q��束了。至于如何处理响应信息就要看实际情况了�?/font>

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

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

�q�些天做一个网��，发现了js和css一些有��的问题�?

1.不同的标准，不同的效�?

首先是css�Q�原来一直用ie7和ff的浏览器�Q�网��늚�效果也一直和惌��中一栗��然而新装系�l�后�Q�ie的版本降�?的时候，问题出现了�?

在网��中一个div元素的css如下�Q?

.i-top-3btn-1{

background-color:#e8f2fc;

}

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

background-color:#990000;

}

�q�两个类可以控制�q�个层在鼠标�l�过时显�C�Z��同的背景�Ԍ��要达到这个效果当然也可以用js在div上做事�g来实玎ͼ�但是使用css中的伪类“:hover”则减��M��不少的编码量�Q�也让代码看��h��很清�U��?

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

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

我的��目中，div里本来就应该是一个链接，所以加�?#8220;a”标记�q�不�?x��)对我的布局以及(qi��ng)效果产生太大的媄响，然而如果只是��E出的惌��div或其它元素��生背景色变化的话�Q�最好的解决�Ҏ(gu��)��可能�q�是在元素上做事件吧�?

2.for的陷�?

早在看js面向对象方式�~�程的一些书�c�的时候，��q��C��q�样的写法：(x��)

for(var i in obj){

alert(i);

}

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

而这�ơ做��目的时候由于在��面加蝲时要同时执行大量的函敎ͼ�所以按照ajax in action 一书中的徏议，使用Observer模式变现启动加蝲的代码：(x��)

//首先声明一个数�l�型变量�Q�把要在启动时加载的函数全部存春在这个数�l�中�?

var __SYS_Startup_Funcs = new Array();

//提供一个方法，让程序员可以把要在启动时加蝲的函数存攑ֈ�先前声明的数�l�里�?

function registerStartup(pFunction){

__SYS_Startup_Funcs.push(pFunction);

}

//替换�pȝ��的onload函数以达到加载启动的目的�?

window.onload = function (){

for(var i in __SYS_Startup_Funcs){

i.call();

}

�U�色的这�D�代码是郁闷我很久的�Ҏ(gu��)��Q�按照常理，每次循环��׃��“__SYS_Startup_Funcs”中取��Z��个函敎ͼ��q�调用这个函数的call�Ҏ(gu��)��来执行它�?

但是在执行时发生错误�Q?#8220;对象不支持此�Ҏ(gu��)��或属�?#8221;�?

�q�是人很�q�h��Q�因为call�Ҏ(gu��)��是属于Function�q�个对象的，而每一个函数都是��承自Function的。�ؓ(f��)什么��生这��L(f��ng)��错误呢？

于是开始排错，首先用alert(i)来打印。对话框中显�C�的正好是我传进�ȝ��函数名。于是换另外一�U�方式alert(typeof(i))来打印。对话框中显�C�的�?#8220;string”�?

�q�次的结果出乎我意料�Q�但是却直接指出了这�D�代码的错误所在�?

在查阅资料后�Q�见到这样一�D�话�Q?

Javascript 提供了一�U�特别的循环方式来遍历一个对象的所有用户定义的属性或者一个数�l�的所有元素。for...in 循环中的循环计数�?是一个字�W�串�Q��?不是数字。它包含了当前属性的名称或者表�C�当前数�l�元素的下标�?

�Ҏ(gu��)��q�个�Ҏ(gu��)��，我们取出来的�q�不是集合中的一个元素，而是�q�个元素的名字！

�q�样的错误显然是受了c#和java�q�样面向对象语言的媄响�?/div>

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