前端观察 » javascript http://www.qianduan.net 专注于网站前端设计与前端开发 Wed, 08 Feb 2012 05:05:28 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 用In.js颗粒化管理、加载你的Javascript模块 http://www.qianduan.net/particles-with-in-js-management-load-your-javascript-module.html http://www.qianduan.net/particles-with-in-js-management-load-your-javascript-module.html#comments Mon, 18 Jul 2011 11:27:13 +0000 郭凯 http://www.qianduan.net/?p=12562 近一年来，国内外都十分热衷于异步加载的研究，为了加快页面的载入速度，无阻塞加载Javascript的方法和框架成为了前端开发的焦点和亮点之一。

In.js Logo

国外的像基于jQuery的RequireJs，YUI Loader，LabJs，RunJs，国内也有淘宝的SeaJs，豆瓣的DoJs等，这些都是一些十分优秀的模块加载器。但是本文将会向大家介绍一个新的开源的轻量级“多线程”异步模块加载器In.js，In的开发借鉴了Do的一些思路和使用习惯，在此期间感谢@kejun同我的耐心交流，In.js压缩后只有4.77k，不仅小巧而且十分好用。

优点：

  • 按需加载
  • 无阻塞加载
  • 依赖关系管理
  • 颗粒化模块管理

如何使用？

A.引入In.js

1

<script type="text/javascript" src="in.js" autoload="true" core="jquery.min.js"></script>

只需要在页面顶部引入in.js即可，这里有两个参数需要注意：

autoload: 是否在加载in.js的时候加载底层核心库 – {可选参数 – true|false}
core: 底层核心库的路径 – {可选参数 – url}

如果同时设置了core，并且autoload=true，则在引入In.js的同时加载core到页面中。

B.声明各个模块的地址和依赖关系In.add(name,{config})

1
2
3

In.add('mod-a',{path:'mods/a.js',type:'js',charset:'utf-8'});
In.add('mod-b',{path:'mods/b.js',type:'js',charset:'utf-8',rely:['mod-b-css']});
In.add('mod-b-css',{path:'mods/b.css',type:'css',charset:'utf-8',rely:['mod-a']});

上述代码声明了三个模块的依赖关系和模块的地址，并将它们加入到队列中去（仅仅是加入队列，并没有加载到页面中去）。

C.加载队列In(queue)

1
2
3
4
5
6

var demo=In('mod-b',function() {
	//do something
},function() {
	//do something
	return false;
});

加载mod-b模块，加载完后执行functionA和functionB，在此假设引入in.js时设置了autoload=true，那么队列中的加载顺序依次为：

1

jquery.min.js >>> mod-a >>> mod-b-css >>> mod-b >>> functionA() >>> functionB()

队列全部加载完成后，demo会被赋值为一个数组，其中存放的是每个function的返回值：

1

demo={returns:[undefined,false],complete:true}

D.在domReady之后加载队列In.ready(queue)

1
2
3

In.ready('mod-b',function() {
	//do something
});

队列加载顺序：

1

jquery.min.js >>> {domReady} >>> mod-a >>> mod-b-css >>> mod-b >>> function()

In.ready()和In()的区别在于两点：

  1. In.ready()中的队列只有在domReady之后才会执行
  2. In.ready()没有返回值

E.监听变量变化，值改变则执行回调In.watch(object,property,function(prop,old,new) {})

由于In加载的队列均为异步非阻塞式加载，所以有时候为了特殊需求（比如后续的操作依赖队列中function的返回值），我们需要在确保队列执行完成后，再执行后续操作。这种情况下，可以用In.watch()监听return.complete变量，当return.complete==true的时候执行回调函数，代码如下：

1
2
3
4
5
6
7
8
9
10

var model=In('model',function() {
	//do something
	return 123;
});
In.watch(model,'complete',function(prop,old,new) {
	if(model[prop]==true) {
		console.log(model.returns[0]);//print 123
		In.unwatch(model,prop);//destroy the watch event of model.complete
	}
});

————————-华丽的分割线————————-

In的魅力远远不止上述这些，它的可靠性也已经在几个大项目中得到了印证，除此之外，In也有智能的提示，比如如果用In()加载一个事先未声明的模块，就会提示你检查模块名。真心的希望有更多的前端朋友关注In，使用In，甚至投入到In的后续开发中来。

下图是In.js的英文版使用图册：

In.js Manual

在哪下载？

In.js是一个开源的项目，你可以在下边的地址找到它的源代码或者下载它使用。

http://project.benben.cc/In
http://github.com/PaulGuo/In

关于作者

Author: Guokai （腾讯微博 / Twitter / Google+ / Blog）
Email/Gtalk: badkaikai@gmail.com

]]> http://www.qianduan.net/particles-with-in-js-management-load-your-javascript-module.html/feed 23 JavaScript的私有成员 http://www.qianduan.net/javascript-private-members.html http://www.qianduan.net/javascript-private-members.html#comments Mon, 23 Mar 2009 13:49:43 +0000 糖伴西红柿 http://www.qianduan.net/?p=6580 糖伴西红柿说：

好久没露面，本来就没人记得我，这次更无名了。最近从高丽迁移回了天朝，嗯。而且正在为了工作进行最后的充电活动。生活中同时也遭遇到电视剧情节，还是高丽... ]]> 对象

Javascript 根本上是和对象相关的。数组是对象。函数是对象。对象是对象。那什么是对象呢？对象是名-值对的集合。名是字符串，值可以是字符串，数字，布尔值或者对象(包括数组和函数)。通常对象是像哈希表一样执行地，这样便于值地快速检索。

如果值是函数，我们可以认为这是一个方法。当一个对象地方法被调用的时候，this 变量就设置为这个对象。方法就可以通过 this 变量来访问实例变量。

对象可以由用来初始化对象的构造函数生成。构造函数提供了其他语言中类所提供的特性，包括静态变量和方法。

公共

对象的成员全部是公共成员。任何函数都可以访问、修改或者删除这些成员，或者增加新成员。有两种向新对象中添加成员的方法：

在构造函数中添加

这个技术通常用于初始化公共实例变量。使用构造函数的 this 变量向对象中添加成员。

function Container(param){
	this.member = param;
}

这样，如果我们创建一个新对象：

	var myContainer = new Container('abc');

这样 myContainer.member 就包含 ‘abc’ 了。

在原型中添加

这个技术通常用于添加公共方法。当一个成员被检索并且没能在对象本身里面找到时，就要从对象的构造函数的原型成员里面寻找。原型机制是用于继承的。也用于节省内存。向一个构造函数生成的所有对象中添加一个方法，只需要向构造函数原型中添加一个函数：

	Container.prototype.stamp = function(string){
		return this.member + string;
	}

因此，我们可以调用这个方法：

	myContainer.stamp('def')

结果为 ‘abcdef’。

私有

私有成员是由构造函数生成的。一般构造函数的变量和参数都是私有成员。

	function Container(param){
		this.member = param;
		var secret = 3;
		var that = this;
	}

这个构造函数生成了3个私有实例变量：param,secret 和 that。它们和对象相关联，但是它们不仅在函数外边不可访问，而且对对象自身的公共方法来说也是不可访问的。它们只可以被私有方法访问。私有方法是构造函数的内部函数。

function Container(param) {
 
    function dec() {
        if (secret > 0) {
            secret -= 1;
            return true;
        } else {
            return false;
        }
    }
 
    this.member = param;
    var secret = 3;
    var that = this;
}

私有方法 dec 检查 secret 实例变量。如果它大于零，将其减一并返回 true。否则返回 false。它可以用作限定对象使用3次。

按照习惯，我们设置了一个私有的 that 参数。它使得这个对象对于私有方法使可见的。在 ECMAScript 语言规范中，这是一个可行的错误，它使得 this 对于内部函数被不正确地设置。(This is a workaround for an error in the ECMAScript Language Specification which causes this to be set incorrectly for inner functions.)

私有方法不能被公共方法调用。要想使得私有方法有用，需要介绍一下特权方法。

特权

特权方法可以访问私有变量和方法，并且其自身对于公共方法和对象外部都是可访问地。可以删除或者替换一个特权方法，但是不能改变它，或者强迫它泄密。

特权方法是在构造函数内使用 this 指定地。

function Container(param) {
 
    function dec() {
        if (secret > 0) {
            secret -= 1;
            return true;
        } else {
            return false;
        }
    }
 
    this.member = param;
    var secret = 3;
    var that = this;
 
    this.service = function () {
        if (dec()) {
            return that.member;
        } else {
            return null;
        }
    };
}

service 就是特权方法。前三次调用 myContainer.service() 时会返回 ‘abc’。之后返回空(null)。service 调用了可访问私有变量 secret 的私有方法 dec。service 对其他对象和方法都是可见的，但是不能直接访问私有成员。

闭包

由于 Javascript 有闭包，因此这种公共，私有和特权成员模型时可以的。这意味着内部函数总是可以访问它外部函数的变量和参数，甚至在外部函数返回后也可以。这是这个语言一个非常有用的特性。目前没有任何关于 Javascript 编程的书描述了如何利用它。大部分甚至都不提及它。(糖伴西红柿说，这是2001年的文章，当时估计还没有这方面的研究文章。现在来说，犀牛书等都有涉及，javascript 的难点之一啊。)

私有和特权成员只在对象被创建时生成。公共成员可以随时添加。

模式

公共

function Constructor(...) {
 
    this.membername = value;
 
}
Constructor.prototype.membername = value;

私有

function Constructor(...) {
 
        var that = this;
        var membername = value;
 
        function membername(...) {...}
 
    }

注意：函数语句

function membername(...) {...}

是

var membername = function membername(...) {...};

的缩写。

特权

function Constructor(...) {
 
        this.membername = function (...) {...};
 
    }

糖伴西红柿说：

好久没露面，本来就没人记得我，这次更无名了。最近从高丽迁移回了天朝，嗯。而且正在为了工作进行最后的充电活动。生活中同时也遭遇到电视剧情节，还是高丽电视剧。这两天在主攻 Javascript 中几个比较难的知识点，闭包算是其中之一。两天看了好多关于闭包的文章，才有点开窍，这篇文章属于其中之一。算是个额外的参考资料，主要的是另一篇英文文章，有打算全篇翻译。

原文地址：http://www.crockford.com/javascript/private.html
译文地址：http://www.qianduan.net/?p=6580

]]> http://www.qianduan.net/javascript-private-members.html/feed 1 10个最好的免费Javascript图表生成方案 http://www.qianduan.net/10-best-free-javascript-program-to-generate-charts.html http://www.qianduan.net/10-best-free-javascript-program-to-generate-charts.html#comments Fri, 20 Feb 2009 12:50:08 +0000 糖伴西红柿 http://www.qianduan.net/?p=5306 这篇文章收集了用 Javascript 生成图表的一些有趣的库及脚本。

Flot

Flot 是 针对 jQuery 的一个纯 Javascript 的图表库。它在客户端生成任意数据集的图形图表。优点是使用简单（所有设定都可选），优雅的样式以及类似缩放和鼠标追踪等的交互特性。

Flotr JavaScript Plotting Library

Float r是一个受到 Flot（作者为 Ole Laursen）启发并且基于 Prototype（目前版本是1.6.0.2）Javascript 框架的 Javascrip t图表库。使用Floatr可以用易于学习的语法在大多数现代浏览器中画出漂亮的图形。它具有图标支持，负值支持，鼠标追踪，选区支持，缩放支持，事件挂钩，css样式支持等多种特性。

JS charts

JS Charts 是一个无需编码或只需少量编码的基于 Javascript 的图表生成器。使用 JS Charts 生成图标是非常简单而容易的事情，因为只需要使用客户端脚本就可以了（例如，浏览器实现）。无需额外的插件或服务器模块。

HTML-Graphs


使用这个脚本可以生成水平/垂直条形图，进度条以及调谐波形图。可以生成简单的图表或者有图标的分组条形图，添加标签，改变颜色等。无需额外图形和图形库。

Canvas 3D Graph

Canvas 3D Graph 是一个以 3D 形式标识数字的特殊条形图。

fgCharting Plugin for jQuery


fgCharting Plugin for jQuery 是一个图形数据的易用方案。它将 Html 中表格数据动态地转换为图标，支持非传统浏览者（例，屏幕阅读器使用者）使用 Html 表格。基本使用需要引用一行代码来初始化插件。

TableDiagram


这个脚本将表格种的数据生成图标形式。表格中的数据必须是非负值（大于或等于0），整数，小数均可。

Pie Graph


这是一个纯基于 DHML/CSS 的饼型图脚本。加载迅速并且和页面其他部分相溶合。可以使用透明图片作为背景。

JavaScript Chart

Magnus Lundahl 写的另一个可以添加图表样式到网页的轻量级脚本。

JavaScript Diagram Builder

Javascript Digram Builder v3.3 是一个对象和函数的库。它可以帮助你在页面中用简单的方法展示坐标图（分别为图表或者图形）。

原文地址：http://www.ajaxline.com/10-best-free-javascript-charts-solutions

]]> http://www.qianduan.net/10-best-free-javascript-program-to-generate-charts.html/feed 1 用NiceForms创建漂亮的表单 http://www.qianduan.net/used-to-create-beautiful-form-niceforms.html http://www.qianduan.net/used-to-create-beautiful-form-niceforms.html#comments Fri, 26 Dec 2008 17:57:35 +0000 神飞 http://www.qianduan.net/?p=2281 Niceforms是一个脚本，它用个性设计的内容替代最常用的表单元素。您可以使用Niceforms提供的默认的主题，你也可以以最小的工作量来开发自己的界面。

Niceforms将从本质上改变古板的表... ]]> Niceforms是一个脚本，它用个性设计的内容替代最常用的表单元素。您可以使用Niceforms提供的默认的主题，你也可以以最小的工作量来开发自己的界面。

Niceforms将从本质上改变古板的表单样式：

 

regular form

regular form

变成这样:

niceforms result

niceforms

NiceForms是怎么工作的?

原理很简单: 因为普通的输入栏（包括单选按钮，复选框，文本区域等）只能用样式控制一点点，所以他们必须被隐藏，而且它们的视觉表现要被类似的全新的完全个性化的结构替换。从理论上讲，这看起来并不复杂。但是，从理论到实践还有很长的路要走。

从基本的XHTML代码的网页表单开始， Niceforms分析DOM树，得到所有的输入栏，隐藏他们，在相应的位置替换他们的新的图形表现。所有这一切都在保持数据转换和正常表单的选择属性的情况下完成。而这一切都是通过JavaScript实现的。

你可以查看一下 demo | 中文版演示。

要了解更多，请查看Niceforms主页 ，当然，你可以查看NiceForms中文版发布说明。

你也可以到这里下载中文版源文件。

]]> http://www.qianduan.net/used-to-create-beautiful-form-niceforms.html/feed 0 【转】JavaScript 函数库的未来 http://www.qianduan.net/javascript-library-to-the-future.html http://www.qianduan.net/javascript-library-to-the-future.html#comments Wed, 05 Nov 2008 06:10:01 +0000 神飞 http://www.qianduan.net/?p=288 过去的几年里，函数库为JavaScript的突然风靡做出了巨大的贡献。JavaScript开发者因此而解决了难题，而且开发者在为感兴趣的问题开发解决方案的同时，又可以将这些应用到商业领域。

我一直在思考JavaScript函数库的未来是怎样的，其中我很希望引擎从API中分离出来。

选择器引擎(Selector Engine)的轻便性

函数库选择引擎的速度问题引来的争论实在不少，但前提是得看你怎么用它。所以我所谓的选择器引擎的轻便性指的是根据我的应用来自定义：可以根据从事的项目不断地更改选择器引擎。

例如：1，构建一个完全的桌面web应用——我想使用尽可能全的选择器引擎；2，为iPhone构建一个site版本——那我仅需要querySelectorAll因为它可以被支持；3，构建一个移动设备可以连接的轻便版本，我会通过ID将JavaScript局限到目标元素以保持其紧凑性。

现在选择器引擎有越来越多的选择，尤其是当你知道如何自定义你的应用的时候。我想看到的情况是：1，我们是否能写出将新引擎导入库（如jQuery, Prototype, Mootools）的插件；2，未来主流的函数库版本是否能支持可插型查询引擎（query engine）。总之，开发者能够根据应用的具体需求而选择选择器引擎。

API的选择

一旦API与选择器引擎分离，函数库的选择就只是个人爱好的问题了。而且这种分离使得更多的公司能够创建基于现有引擎或APIs的个性函数库。例如，BBC创建Glow——他们自己的JavaScript函数库，是因为jQuery不支持Safari 1。

挑战

是否能有主流函数库的插件，能够让我们在函数库中接入新的选择器引擎？这是个挑战。我不是Prototype 和Mootools，所以我不清楚这是否可行。但这确实很有意义不是么？

]]> http://www.qianduan.net/javascript-library-to-the-future.html/feed 0 十个最佳Ajax/Javascript实例与演示网站 http://www.qianduan.net/10-best-ajax-javascript-examples-and-demonstration-site.html http://www.qianduan.net/10-best-ajax-javascript-examples-and-demonstration-site.html#comments Mon, 03 Nov 2008 09:41:59 +0000 神飞 http://www.qianduan.net/?p=232 在这篇资源收集中，你将会找到十个提供高质量Ajax和Javascript实例与教程的网站或博客.

1. Ajax Rain

Ajax Examples

AjaxRain有一些有插图的漂亮的网页效果，这些可以通过组合AJAX、CSS、DHTML或JavaScript 实现。一些演示是绝对值得一看，即使你不是网页设计师/程序员。

Ajax/Javascript 实例

2. Ajax Daddy

Ajax Examples

一个大型的漂亮的web 2.0工具收集。一个很灵活的特性是在你决定把例子放到你的网站上之前，你可以在线调试这些实例。

Ajax/Javascript 实例

3. Mini Ajax

Ajax Examples

MiniAJAX是一个很棒的小巧的DHTML和AJAX脚本的收集，这些片段非常有用，你可以在任何地方使用它们。

Ajax/Javascript 实例

4. Ajaxian

Ajax Examples

许多关于Ajax的信息，包括例子、博客、论坛、讨论和教程。常常更新。

Ajax/Javascript 实例

5. DHTML Goodies

Ajax Examples

一个包括DHTML和ajax脚本、演示和教程的仓库。脚本包括菜单、窗口、 日历到相册和Ajax。

Ajax/Javascript 实例

6. Javascript Kit

Ajax Examples

JavaScript 教程和脚本的综合资源. 同样以DHTML,CSS,和网站设计教程为特色，还有一个强大的开发者帮助社区。

Ajax/Javascript 实例

7. Dynamic Drive

Ajax Examples

我最喜欢的在线浏览的javascript和css网站之一。 所有种类的DHTML/Javascript/客户端脚本的一个大参考，而且为初学者提供了详细的容易理解的进阶教程。

Ajax/Javascript 实例

8. DHTML Site

Ajax Examples

你将发现一个很有用的AJAX/DHTML脚本和教程的目录。脚本分类从页面特效、工具提示、拖拽到日历窗口效果和图片相册

Ajax/Javascript 实例

9. Solutoire

Ajax Examples

一个很广泛的收集展示了一些很棒的Javascript示例和ajax演示和教程。包括不同的javascript库和他们的实例: jQuery, Scriptaculous, mootools 和更多。

Ajax/Javascript 实例

10. DevSnippets

Ajax Examples

DevSnippets的终极目标是分类收集网络中的巨量的代码片段(Ajax, JavaScript 和 CSS)整理为整洁和方便的导航页面。 用户可以提交他们收藏的ajax和javascript实例并可以对别人的代码片段进行评级。

Ajax/Javascript 实例

本文翻译自：

http://devsnippets.com/article/10-best-sources-of-ajaxjavascript-examples-and-demos.html
大致翻译了一下，有些地方没有翻译，其实很多地方，比如演示页面，基本是不用翻译的，看英文更容易理解点儿。

]]> http://www.qianduan.net/10-best-ajax-javascript-examples-and-demonstration-site.html/feed 0 用Javascript修正12个常见的浏览器问题 http://www.qianduan.net/javascript-amended-with-12-common-browser-issues.html http://www.qianduan.net/javascript-amended-with-12-common-browser-issues.html#comments Fri, 17 Oct 2008 07:46:25 +0000 神飞 http://www.qianduan.net/?p=52 我们提倡尽可能使用CSS，而且我们常常能做到这一点。现代浏览器有很好的CSS支持-这无疑足够好让你使用CSS来控制布局和版面设计。但是有时候，某些网页元素在不同的浏览器会出现不同。

如果你不知道原因，不要过于担心，请研究CSS规则并查看这篇文章：使用CSS来修正一切： 20 +常见错误和修复。

如果这些也无效，您可以通过下面列出的12个javascript解决方案修复它，这样您的网页看起来就能跨越所有浏览器了！

在本文中，我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。

1. 自动匹配高度

jQuery Plugins

自从我们抛弃了基于Table的页面布局后，创建同等高度栏目或内容盒子的视觉效果已然是一个挑战。

1.1 用jQuery设置匹配高度

这个jQuery插件在同一个容器里“平衡”盒子的高度并创造一个简介的网格——几乎从可用性和性能的角度使用简单的JavaScript替代： equalHeights()函数测定一个容器里的所有同级元素同容器的高度，然后设置每个元素的最低高度为最高的元素的高度。

如何工作

equalHeights()通过循环测定指定元素的最高级别的子节点，然后设置他们的最小高度值为最高的元素的高度。

1.2 用jQuery匹配栏目高度

jQuery的另一个可以使盒子的高度相等的插件

  1. $(“#col1, #col2″).equalizeCols();

将如你所想的那样匹配高度

  1. $(“#col1, #col2″).equalizeCols(“p,p”); 
匹配这两卷，并在#col1或#col2(短的那个)里的P标签后面添加空白.

2. IE6 PNG透明支持

IE6以下的版本不支持png透明。使用hack，IE 5.5和6也已经可以支持，但hack并不理想的且难以使用。让我们来看看我们能做些什么来支持IE6用户 ，同时为网站的大多数访客带来最佳的透明效果。

2.1 强制IE6支持透明

IE7的是一个Dean Edwards建立的JavaScript库，以强迫MSIE(IE6,IE5)表现的像一个兼容标准的浏览器。它修复许多CSS问题并使透明PNG在IE6和IE5下正常工作，它还允许高级的CSS选择器。

2.2. 改良iFixPng

png fix

修正IE6及以下的PNG图片的问题，IMG标签和CSS背景图片都可以。这个插件是对原始iFixPng插件的一种改进。特点包括：图像或有背景图片的标签，现在支持background-position，其中包括IE浏览器的绝对定位的修正。(bottom: -1px || bottom: 0px)

3. 用Javascript改变class

javascript to fix css issues

这是一个方便的JavaScript函数，可以在当前的文件的任何元素的class由oldClass改为newClass。这是特别有用的快速的利用CSS而不是用编码改变风格。

  1. function changeClass(oldClass, newClass) {
  2. var elements = document.getElementsByTagName(“*”);
  3. for( i = 0; i < elements.length; i++ ) {
  4. if( elements[i].className == oldClass ) elements[i].className = newClass;
  5. }
  6. }

4. CSS浏览器选择器

如果您可以只需键入一个特殊选择器，在这里您可以写一些JavaScript ，设置一个Class在基于当前的浏览器的名字的标签会怎么样？

javascript to fix css issues

4.1 CSS Browser

这是一个非常小的javascript只有一行，而且不到1kb，它允许CSS选择器。它让您可以为每个操作系统和每个浏览器写具体的CSS代码。你可以写一些JavaScript ，设置Class的名字，也就是说，内容根据当前的浏览器。

jQuery 浏览器选择器

这里有另外一个基于jQuery的非常简单的处理浏览器选择器的方法，你需要做的只是加载jQuery库文件，并添加下面的一块儿代码。

  1. $(document).ready(function(){
  2. $(‘html’).addClass($.browser);
  3. });

现在你可以准备你的样式，如.msie,.mozilla, .opera, .safari 或其它目标浏览器。

5. 最小/最大 高度/宽度支持

针对CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 属性，这里有一些很好的jQuery修正。

5.1 jQMinMax

这是一个为没有原声的支持min-width, max-width,min-height和max-height的地方添加支持的jQuery插件。

5.2 JSizes

这个小jQuery插件为CSS min-width, min-height, max-width, max-height, border-*-width, margin, 和padding 属性添加支持。特别是他提供一种方法来确定一个元素在那里可见。由于所有的型号的方法返回数值，所以这些也可以安全的使用在严格的DOM元素方面

  1. jQuery(function($) {
  2. var myDiv = $(‘#myDiv’);
  4. // set margin-top to 100px and margin-bottom to 10em
  5. myDiv.margin({top: 100, bottom: ’10em’});
  7. // displays the size of the top border in pixels
  8. alert(myDiv.border().top);
  10. // displays true if the element is visible, false otherwise
  11. alert(myDiv.isVisible());
  13. // set padding-right to 10px and margin-left to 15px using chaining
  14. myDiv.padding({right: 10}).margin({left: 15});
  15. });

6. 元素垂直/水平居中

你可能之前遇到过这个问题：水平或垂直居中某个元素。垂直居中在CSS里面相当麻烦，特别是你想支持所有主流浏览器。

Center Elements Vertically and Horizontally

6.1 Center element plugin

这个插件可以使页面中的所有元素居中，垂直和水平居中采用css负margin的方法。

  1. $(“element”).center(); //vertical and horizontal
  2. $(“element”).center({
  3. horizontal: false // only vertical
  4. });
6.2 我是怎么把一个元素垂直居中的?

在这个视频教程里， Jeffrey Jordan Way将为你展示如何使用jQuery的力量结合CSS在你的浏览器里面使一个图片垂直居中.

7. 在IE里使用Q标签

人们期望使用的Q标签而不是blockquote标签来显示引号。然而IE/Win不支持Q标签，因为这一点，大部分网站的作者选择不使用Q标签。

7.1 QinIE

当你在你的文件的头部添加这个脚本在IE浏览器里自动扫描的网页Q的标记，并正确的显示它们（包括嵌套引用） 。当(如果)IE浏览器将来支持Q标签，这个插件将会添加浏览器版本检查。

  • 下载源文件here

8. 增加点击目标的大小和获得更多的响应转换

jQuery Plugins

通过把你的所有内容放到一个可点击的标签来和单调的“read more…”链接说拜拜吧。

  • 下载源文件here

9. Lazy loader

Lazy loader 是一个jQuery。它可以延迟加载页面里面的图片. 在用户浏览视界(页面中可见部分)以外的图片之前，它将不会被加载。这和image preloading的作用正好相反.

10. bgiframe

轻松的解决IE下的z-index的问题。

IE z-index

11. ieFixButtons

ieFixButtons 是一个修正IE6和7的<button>标签的bug的jquery插件。

12. 溢出(overflow)修正

修正ie下的水平溢出。IE在溢出的元素里面显示一个滚动条，特别是如果元素里面只有一行，滚动条就会遮住这行内容。这个插件通过修改padding来修正这个问题。

IE z-index

本文翻译自：http://www.noupe.com/css/using-javascript-to-fix-12-common-browser-headaches.html
转载请注明来源，谢谢。

]]> http://www.qianduan.net/javascript-amended-with-12-common-browser-issues.html/feed 2