2008-04-09

利用css里expression来实现界面对象的批量控制

利用css里expression来实现界面对象的批量控制
问题说明:
用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
解决方法:
使用css的expression方法,
具体实现要看看.css的写法:
/*替换图片CSS*/
#imgScript {   /*这里使用对象ID来通配样式, 也可以定义一个css函数*/
 star:expression(
    onmouseover = function()
    { 
        /*替换图片*/
        if(this.hover != null){
          this.name = this.src;
          this.src = this.src.replace('.jpg', '_over.jpg'); 
          this.HasChg = 1;
       }
   },
   onmouseout = function()
  {  
       /*还原本来的图片*/
     if(this.HasChg != null){
        this.src = this.name;
        this.HasChg = null;
    }
 }
)

}/*end imgScript*/
应用样式的img:
<img src="a.jpg">
请将鼠标放在a.jpg上看看效果

 

 

 

 

 

CSS巧用expression来区分只读文本框

 
    对于文本框,只读状态下和普通状态下,浏览器对其并没有做什么特殊的标记,表面看来,效果是一样的,这样,对用户来说,易用性并不是很高.
    当然,我们可以改变只读文本框的背景颜色来加以区分,这个时候就需要程序员自己判断这个文本框是不是只读,然后再引入相应的css,无疑加大了工作量.
    这里,使用expression来提供一种解决方案,只需要每个页面引入这个css即可,其它的都由程序自己判断,如下:
<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#f0f0f0":"")}
</style>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly>

评论
发表评论

您还没有登录，请登录后发表评论

joerong666
搜索本博客
存档
最新评论