cow-man

去除虚线框[转]

今天用微软的Menu控件做了一个菜单，点击链接，光标离开后，UL标签上会出现虚线框，查到下面资料，利用方法四问题得到解决。在这里分享一下。

在常规情况下，该虚线框是作为一种提示让用户明确当前关注的东西，然而如果我们把链接的4种状态样式设置比较完整的话，就不是特别需要虚线框的存 在，因为它很有可能影响页面的美观。尤其是在做应用系统界面的时候，总给人一种浏览网页的感觉，显得不够专业。

    当然，如果全盘否定掉链接虚线框，对使用键盘的用户体验可能又是个大弊端，但这是另外一个话题了。

    下面介绍几种去掉链接点击时虚线框的方法：

    方法一：利用javascript的onfocus事件，实现如下：

Html 代码  收藏代码
  1. <a href="#" onfocus="this.blur();">链 接</a>  
<a href="#" onfocus="this.blur();">链接</a>

    如果引入了jQuery框架则可以利用它的事件绑定机制：

Js 代码  收藏代码
  1. $('a').bind('focus', function(){   
  2.     if(this.blur){ //如果支持 this.blur   
  3.         this.blur();   
  4.     }   
  5. });  
$('a').bind('focus', function(){ 
    if(this.blur){ //如果支持 this.blur 
        this.blur(); 
    } 
});

    方法二：利用css样式，实现如下：

Css 代码  收藏代码
  1. a{  
  2.     blr: expression(this.onFocus=this.close());  
  3. } /* 只 支持IE，过多使用效率低 */  
  4. a{  
  5.     blr: expression(this.onFocus=this.blur());  
  6. } /* 只 支持IE，过多使用效率低 */  
  7. a:focus {   
  8.     -moz-outline-style: none;   
  9. } /* IE 不支持 */  
  10. :focus {   
  11.     outline: none;   
  12. } /* for Firefox */   
a{
    blr: expression(this.onFocus=this.close());
} /* 只支持IE，过多使用效率低 */
a{
    blr: expression(this.onFocus=this.blur());
} /* 只支持IE，过多使用效率低 */
a:focus { 
    -moz-outline-style: none; 
} /* IE不支持 */
:focus { 
    outline: none; 
} /* for Firefox */

    方法三：利用标签属性，仅支持IE，实现如下：

Html 代码  收藏代码
  1. <a href="#" hidefocus="true">链 接</a>  
<a href="#" hidefocus="true">链接</a>

    方法四：利用Web行为

    IE从5.5版本开始支持Web行为的概念。这些行为是由后缀名为.htc的脚本文件描述的，它们定义了一套方法和属性，程序员几乎可以把这些方法和属性 应用到HTML页面上的任何元素上去。Web行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制 文件（例如ActiveX控件）来完成这个功能。Web行为还是推荐的扩展IE对象模型和控件集的方法。微软在它的开发者站点上的DHTML行为库栏目里 提供了几个定制的Web行为：WebService行为。

    讲一下代码保存为.htc后缀的文件

Js 代码  收藏代码
  1. <public:attach event="onfocus" onevent="quit()" />   
  2. <script language="javascript">   
  3.     function quit(){   
  4.         this.blur();   
  5.     }   
  6. </script>  
<public:attach event="onfocus" onevent="quit()" /> 
<script language="javascript"> 
    function quit(){ 
        this.blur(); 
    } 
</script>

    然后，在需要去除超链虚框的页面的<head>和</head>之间加入：

Html 代码  收藏代码
  1. <style type="text/css">   
  2.     a {behavior:url("htc 文件")}   
  3. </style>  
<style type="text/css"> 
    a {behavior:url("htc文件")} 
</style>

    如果页面已经有了style标签，只需要将 a {behavior:url("htc文件")} 一句插入里面即可。



posted on 2011-03-23 15:09  cow-man  阅读(511)  评论(0)  编辑  收藏  举报

导航