浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2010, January 19, 11:18 AM
找来找去，这个应该是最全的解决方案列表了。。突然间想找这个是因为，网易评论的“分页列表”用的是链接，但没有虚框，很好看，所以想找找这样的资料。。。
以下就属于原文了。。
如何隐藏掉点击链接时周围出现的虚线框呢？
在常规情况下，该虚线框是作为一种提示让用户明确当前关注的东西，然而如果我们把链接的4种状态样式设置比较完整的话，就不是特别需要虚线框的存 在，因为它很有可能影响页面的美观。尤其是在做应用系统界面的时候，总给人一种浏览网页的感觉，显得不够专业。我就遇到过这种情况，有次做一个WEB应用 项目，那用户以前使用桌面软件的，突然转到B/S软件下操作，老是觉得点击链接或按钮出现的虚线框让他很不爽。后来我们挨个把所有会出现虚线框的链接都改 过一遍，这客户高兴坏了，后来还说这系统功能性这么一改好用多了。可见，这么一个小小的东西，对用户体验是多么的重要。
当然，如果全盘否定掉链接虚线框，对使用键盘的用户体验可能又是个大弊端。但这就是另外一个话题了，这里就不说了，不然就扯出UI设计和用户体验这个大话题了，我这小小的地方可说不清楚呢。
以下是解决方案：
方法一：
在IE下是使用html属性：hideFoucs，在HTML标签中加上hidefocus=”true” 属性即可，但这个属性是IE私有的，Firefox是不认的。
XML/HTML代码
- <a href="#" hidefocus="true" title="加了hidefocus" >欢迎来到博客园（加了hidefocus属性）</a>
Firefox的处理方法比较符合标准，只需要在样式里设置a:focus{outline:none}皆可：
CSS代码
- .xzw_test a.setFocus:focus{outline:none}
方法二：
通过javascript方法让其点击后失去焦点从而达到没有虚线框，也不失为一种曲线救国的方案：
JavaScript代码
-
- if(j(this).attr("id")=="jsControl")
- j(this).blur();
--EOF--
作者最后说：Opera也是很WEB标准的浏览器哦，大伙不妨多用用。
不过我现在已经不用了。中文版的opera太难看了。不知道UI是怎么设计的。又或者是我的字体有问题？还是我看惯FF或者safari?唉。。人被养刁了也不好。
由于我的页面不能提供测试样例，所以，想看测试样例的朋友还请移步到：http://www.cnblogs.com/miqi2214/archive/2008/12/25/1361996.html，里面有关于图片和链接的样例
Tags: outline, 虚框, 链接
Javascript | 评论:0
| 阅读:17456
Submitted by gouki on 2010, January 15, 4:05 PM
每天看CB，总有新发现。这不，jQuery 1.4发布又是从他们网上看来的。每天多看评论总会找到一些新的乐趣。
比如，百度的一些关键词之类的。偶尔也能让自己为新奇的SEO方法找到一点窍门。
乱弹，乱弹，上主菜：
在jQuery的4岁生日之时，jQuery开发团队很高兴地发布最新的jQuery1.4版本！其他的代码演示、测试、文档的更新也会陆续进行更 新发 布。对于jQuery发烧友来说，jQuery1.4的发布也是一个大新闻！下面是来自于jQuery的官方网站翻译（英语高手请勿拍砖！）： 在jQuery的4岁生日之时，jQuery开发团队很高兴地发布最新的jQuery1.4版本！其他的代码演示、测试、文档的更新也会陆续进行更新发 布。
jQuery Minified (23kb Gzipped)
jQuery Regular (154kb)
此外，谷歌已经提供了jQuery1.4副本，jquery团队上传到了Google服务器托管服务中。这jQuery1.4的版本是自动minified和gzip 的，地址为：
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
jquery1.4所有的变化和功能添加到jQuery1.4文档中。
--EOF--
看到jQuery又添加了这么多的新功能，实在为自己的行为感到惭愧，一直在用它，却从未为他做过贡献。
新闻来源：http://www.cnbeta.com/articles/102208.htm
Javascript | 评论:0
| 阅读:14205
Submitted by gouki on 2010, January 13, 10:12 AM
应该来说，本文对于了解JS命名表达式有着非常重要的作用。就象文中说的：
XML/HTML代码
- 简单来讲，命名函数表达式只有一个用处——在调试器或性能分析程序中描述函数的名称。没错，也可以使用函数名实现递归，但你很快就会知道，目前来看这通常是不切实际的。当然，如果你不关注调试，那就没什么可担心的。否则，就应该往下看一看，看看在跨浏览器开发中都会出现哪些小毛病（glitch），也看看应该怎样解决它们
所以，了解一下也算是挺不错的。再加上为之漫笔的翻译功底。。
不过，由于页面过长，我这里还是只贴一下列表就完事了。详细的内容请直接到为之漫笔的网上去看。当然，我是建议下载下来，毕竟就一个HTML文件。时不时的看看还是不错的啦 。
目录如下：
- 前言
- 函数表达式与函数声明
- 函数语句
- 命名函数表达式
- 调试器中的函数名
- JScript的bug
- JScript的内存管理
- 测试
- Safari中存在的bug
- SpiderMonkey的怪癖
- 解决方案
- 替代方案
- WebKit的displayName
- 对未来的思考
- 致谢
来源：http://www.cn-cuckoo.com/wordpress/wp-content/uploads/2009/12/named-function-expressions-demystified.html
Tags: 为之漫笔, 函数表达式
Javascript | 评论:0
| 阅读:16511
Submitted by gouki on 2010, January 2, 9:44 PM
designMode，这个被我遗忘三年的变量。连名都忘了。想了好久好久才想起来。。。
OK，设置这个变量为ON，那么页面上的元素就全可以编辑了，功能是用来干嘛的呢？好象有点忘了。当初是想用来直接COPY文章的。如今想起来，却不知道用来干嘛 了。
参考：
1、http://www.mozilla.org/editor/ie2midas.html
2、http://www.nirsoft.net/utils/ie_design_mode.html
Javascript | 评论:2
| 阅读:16833
Submitted by gouki on 2009, December 24, 4:14 PM
同事需要，就写了个插件 。。。。
原来我也写过两个，但这次是正式为jQuery写的插件。。。
JavaScript代码
- $(document).ready(function(){
- $('div').autoResize({height:50});
- });
-
- jQuery.fn.autoResize = function(options)
- {
- var opts = {
- 'width' : 400,
- 'height': 300
- }
- var opt = $.extend(true, {},opts,options || {});
- width = opt.width;
- height = opt.height;
- $('img',this).each(function(){
- var image = new Image();
- image.src = $(this).attr('src');
-
- if(image.width > 0 && image.height > 0 ){
- var image_rate = 1;
- if( (width / image.width) < (height / image.height)){
- image_rate = width / image.width ;
- }else{
- image_rate = height / image.height ;
- }
- if ( image_rate <= 1){
- $(this).width(image.width * image_rate);
- $(this).height(image.height * image_rate);
- }
- }
- });
- }
原来的两篇在这里：
Javascript | 评论:0
| 阅读:15997
