博客园_stone .!

火狐代理fanqian访问youtube等和谐网站

2012-01-16T06:44:00Z

通过空间的管理面板看到很多人来到这个空间是通过搜索引擎被这篇文章的标题吸引过来的,为了一篇过期的不能再使用的技术劳烦大家,很过意不去.为了让大家不乘兴而来,败兴而归,我向大家介绍目前我在用的方法:

1) 申请一个google账号,如果已经有了则跳过此步骤.推荐创建一个Gmail账号http://mail.google.com,界面右下角选择"创建账户"
2) 登录google后,访问https://reader.google.com,中文账户默认状态下在google产品大全中是看不到这个的,需手工录入,切记是https不是http
3) 进入Google阅读器后,左上角"Google 阅读器"图标下放有"添加订阅"按钮,点击,在输入框中录入"GFW Blog",点击"添加"按钮,在出现的列表中第一个就应该是它的订阅链接,在我写这篇文章的时候,订阅数是7896,点击"订阅"按钮即可.
4) GFW Blog中有很多fanqian的教程和工具,自行搜索,注意在阅读页面(右半部分)上方有"N个新条目"和"所有条目"的链接,如果新条目中找不到你需要的信息,请切换至"所有条目".

转自：

http://apps.hi.baidu.com/share/detail/368383

本文链接

DatePicker - 日期选择插件

2011-10-27T08:21:00Z

在一些WEB系统中，日期选择插件必不可少的功能，今天为大家分享几个不错的日期选择插件。希望对大家有所帮助。

1)My97DatePicker是一个更全面，更人性化，并且速度一流的日期选择控件。具有强大的日期范围限制功能；自定义事件和丰富的API库；多语言支持和自定义皮肤支持；跨无限级框架显示和自动选择显示位置。

主页:

http://www.my97.net/dp/index.asp

演示地址:

http://www.my97.net/dp/demo/index.htm

2)Date Range Picker基于jQuery UI1.6与jQuery UI CSS框架开发的日期选择控件。

主页:

http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

3)Zebra_DatepickerZebra_Datepicker是一个轻量（11KB左右），结构紧凑(只有一个文件)，高度可配置的jQuery日期选择器插件。外观可以通过CSS样式表进行自定义。

主页:

http://stefangabos.ro/jquery/zebra-datepicker/

4)glDatePicker是一个简单，可以定义，轻量级jQuery日期选择插件。压缩后只有4KB左右。它提供的一些功能包括：向前和向后导航，默认当天日期高亮选中，显示当前选中的日期，限制日期选择范围（如：将日期限制在开始日期后的N天内），设置每一个日期选择器的样式。

主页:

http://code.gautamlad.com/glDatePicker/

5)wdDatepicker是一个日期选择控件，还支持月份和年份下拉列表选择。

主页:

http://www.web-delicious.com/jquery-plugins/

演示地址:

http://www.web-delicious.com/jquery-plugins-demo/wdDatePicker/sample.htm

6)jsDatePick是一个不依赖任何JavaScript框架开发的日期选择控件。

主页:

http://javascriptcalendar.org/javascript-date-picker.php

http://www.cnblogs.com/xuanye/archive/2009/10/27/1590992.html

本文链接

视觉灵感：30个漂亮的的网站设计

2011-10-27T08:20:00Z

QuoteRobot

MailChimp

SkyLedger

Ballpark

PeepNote

Campaign Monitor

Mint

Blinksale

CheddarGetter

Xero

Proposable

Carbonmade

Product Planner

Iceberg

Pulse

Notable

Gist

Image Spark

monassoc

SolidShops

The Invoice Machine

Icebrrg

LemonStand

Get Signoff

eWedding.com

SUBERNOVA

PlaylistNow

Evernote

Recurse

英文原稿：Visual Inspiration: 30 Beautiful Web App Site Designs
本文链接

Notify - 消息通知插件

2011-10-27T08:19:00Z

1) Sticky是一个简单的页面消息提醒jQuery插件。可以设置让消息在页面的四个角落出现，也可以设置在页面中央出现。可以手动关闭消息，也可以设置成自动关闭。

http://thrivingkings.com/sticky/

2)JNotify是一个JQuery插件，基于JQuery UI实现，用于创建页面消息提醒和状态提示条。

http://jnotify.codeplex.com/ 演示地址:http://www.fabiofranzini.com/jNotify/Demo.html

3)Humane JS是一个不依赖任何框架的轻巧的信息提示插件。

http://wavded.github.com/humane-js/

4)jQuery.UI MessengerOutlook like message notification Widget,这个jQuery.UI控件类似于MessengerOutlook消息弹出提醒框。

http://mosesofegypt.net/post/2008/07/17/jQueryui-Messenger-Outlook-like-message-notification-Widget.aspx

演示地址:

http://mosesofegypt.net/samples00/jQueryNotificationMessage/

5)Roar是一个可以在屏幕右下角弹出消息提醒的Mootools插件。类似于QQ或MSN右下角弹出消息提示。

http://digitarald.de/project/roar/

演示地址:

http://digitarald.de/project/roar/1-0/showcase/ad-infinitum/

6)jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac　OSX系统中Growl事件通知框架。

http://stanlemon.net/projects/jgrowl.html

出处：http://www.cnblogs.com/xiaoyao2011/

本文链接

分享几个jquery Dialog弹出窗插件

2011-10-27T08:18:00Z

分享几个jquery Dialog弹出窗插件

1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件，大小只有4KB，要求jQuery 1.5.2+支持。可用于替换JavaScript原始的“alert” 和“confirmation”对话框。这个插件使用jQuery Plugin Boilerplate构建。

http://stefangabos.ro/jquery/zebra-dialog/

2)LeanModal是一个用于创建模式对话框的超级简单JQuery插件。可以展示隐藏的页面内容，整个插件大小只有780bytes，可灵活变化高度和宽度，没有用到任何图片，支持在一个页面中创建多个实例，非常适合于创建：登录框，注册框，警告对话框等。

http://leanmodal.finelysliced.com.au/

3)jQuery.AysncBox是一款基于 jQuery 的弹窗插件。能够实现网站的整体风格效果，给用户一个新的视觉享受。主要模拟常用的 alert、confirm、prompt、open 和扩展了一些对话框。它通过回调函数触发事件动作并执行，使操作区域更加明了、统一。而且能够在主流浏览器中灵活运用。

http://www.nnhuashi.com/asyncbox/index.html

演示地址:

http://www.nnhuashi.com/asyncbox/demo.html

4)FBModal是一个基于jquery,类似 Facebook 风格的对话框插件。

http://www.rrpowered.com/tuts/2010/12/fbmodal/

演示地址:

http://www.rrpowered.com/demo/fbmodal/

5)jDownloadjDownload是一款基于jquery的组件,它可以提供给下载者更详细的下载信息.

http://jdownloadplugin.com/

本文链接

js Grid - 列表插件

2011-10-27T03:37:00Z

1）Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件。点击后，缩略图会翻转，然后显示更多信息。

主页:

http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

演示地址:

http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/demo.php

2）TableTree4J 是一个开源的基于javascript的树状菜单和表格控件，实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单。

支持以下功能：

1.多种模式切换，样式更改
2.cookies保存树状状态
3.节点自定义排序
4.全浏览器支持
5.支持所有树状控件的基本功能
6.丰富的API文档和多种展示例子，中英文语言选择

主页:

http://sourceforge.net/projects/tabletree4j/

3）ExtJs4/Secha Magic GridCombo是一款基于jquery简单易于使用的datagrid插件，支持多行表头(multi headers)，行展开(expandable)，固定列(fixed column)

主页:

http://www.boarsoft.com/javascript/gridCombo/

4）JQuery MagicGrid是一款基于jquery简单易于使用的datagrid插件，支持多行表头(multi headers)，行展开(expandable)，固定列(fixed column)

主页:

http://www.boarsoft.com/javascript/grid

5）jQuery.sorted是一个超级简单的jQuery排序工具。可以按照按照文本值排序，反序排序，或者按照自定义的属性值排序。

主页:

https://github.com/razorjack/jquery.sorted

6）ayGrid是一个基于jQuery的表格插件，可实现在表格上在线修改、增加、删除、保存数据！其中，单元格的编辑可以实现CheckBox、ComboBox、Input的输入方式。表格数据传输基于JSON。

主页:

http://www.54kao.com/aygrid/

7）Tablecloth是轻量级的，易于使用，不引人注目的方式风格化您的HTML表格元素。只需加入2行代码到您的HTML页面，你将有积极的表式和访客喜欢的表格功能。绝对不需要编码或ID，tables.Tablecloth能自动调整。

主页:

http://cssglobe.com/lab/tablecloth/

8）Compass DatagridCompass Datagrid是一个拥有好看UI设计的数据表格控件。采用Ajax驱动从服务器端读取JSON格式的数据进展示。

主页:

http://www.compasswebpublisher.com/jquery/compass-datagrid

出处：http://www.cnblogs.com/xiaoyao2011/

本文链接

各大网站架构总结笔记（转）

2011-08-17T02:38:00Z

记得在大学里不止一次关注网站架构方面的东西了，但每次都是泛泛了解，也没有着重记录，一段时间后对各种架构的思想也就模糊了。这几天不知怎么的又心血来潮（可能是快毕业了冲动了）想深入了解一下网站架构方面的知识，并想通过这次来总结一下网站架构，记录一点东西供自己以后翻阅，也给那些希望了解这方面知识的朋友提供一点点有用的信息，下面是我这次学习的总结笔记，有什么写得不妥的地方还请大家指出，还有希望这篇随笔能抛砖引玉，大家各抒己见。

1、MySpace架构

回顾了MySpace的成长史，真是让人惊叹，他的架构基本经历了五个里程碑，每个阶段都是显得那么仓促，那么无奈，那么坎坷，又是那么的精彩，网站为了生存只能想尽一切办法去优化系统架构，让用户满意。他给我们后人的启示是要尽早发现系统的瓶颈，设计师在设计时要有前瞻思想，否则今后有可能也要这样仓促的升级你的产品。
这里是“五个里程碑”的具体介绍。

2、Flickr网站架构总结

Flickr.com 是网上最受欢迎的照片共享网站之一，还记得那位给Windows Vista拍摄壁纸的Hamad Darwish吗？他就是将照片上传到Flickr，后而被微软看中成为Vista壁纸御用摄影师。

--Pair of ServerIron's做负载均衡

--Squid做html和照片的缓存

--Memcached做数据缓存

--尤其是mysql数据库采用master-slave和shards技术实现了mysql数据库的负载均衡，解决了数据库的瓶颈，达到了数据库横向扩展的目标。

这里是他详细的架构描述

3、YouTube架构总结

这个貌似在国内是被和谐的，要fan qiang才能访问（不知到底何故）。看看他的架构：
--NetScaler用于负载均衡和静态内容缓存

--使用lighttpd作为Web服务器来提供视频服务

--CDN在多个地方备份内容，这样内容离用户更近的机会就会更高

--使用Google的BigTable，一个分布式数据存储、数据库分成shards，不同的用户指定到不同的shards、使用BigTable将图片备份到不同的数据中心，代码查看谁是最近的

这里是YouTube详细架构描述

4、PlentyOfFish架构总结

这个我觉的最神奇了，一个人每天花2个小时，可以维护一个每天3000W PV的，而且是基于.NET的（呵呵，终于给我们.net程序员一个好榜样了）。简述他的架构：
--用Microsoft Windows操作系统作为服务器

--使用ASP.NET技术

--使用IIS作为Web容器

--用Akamai CDN来缓存网页

--用Foundry ServerIron 来做负载均衡

--sqlserver采用master-slave架构，两台负责read操作，master那台负责写操作

--所有的request数据都使用了gzip压缩

PlentyOfFish详细架构描述

5、WikiPedia架构总结

维基百科（Wikipedia）是一个基于Wiki技术的全球性多语言百科全书协作计划，同时也是一部在网际网路上呈现的网路百科全书，其目标及宗旨是为全人类提供自由的百科全书──用他们所选择的语言来书写而成的，是一个动态的、可自由和的全球知识体。

--GeoDNS让用户能够访问离他地域最近的Web服务器

--用LVS实现负载均衡

--用Lighttpd做图片服务器

--使用MediaWiki软件

--大量缓存（Cache），Squid 作为反向代理，Memcached做数据缓存

--用Mysql数据库集群

WikiPedia架构详细介绍

前面给大家介绍过（MySpace、Flickr、YouTube、PlentyOfFish、WikiPedia），喜欢架构的朋友可以去看看。这两天，我又陆续从互联网上整理了几个优秀网站的架构信息，并将部分文章整理到了自己的另一个博客，今天把它们拿出来分享给大家，希望能给大家带来一点启发，另外，欢迎一起讨论，有比较好的架构信息大家也可以拿出来一起分享一下：）

1、Google架构

老大当然要放第一位，Google的架构非我们这些平凡之辈一两天能够了解的，这里也只是大概地整理一下：

--GFS，Google的强有力的面向大规模数据密集型应用的、可伸缩的分布式文件系统

--MapReduce，Google的分布式并行计算系统，GFS存储数据，而MapReduce则是以最快最可靠的方式处理数据。

--BigTable，Google基于GFS和MapReduce之上的用来存储结构化数据的解决方案，有了它，不仅可以存储结构化的数据，而且可以更好的管理和做出负载均衡决策。

Google架构的详细信息

2、优酷网架构

在国内，上不了YouTube，只能看看优酷了，说实在优酷在国内算是做的不错了，视频加载速度明显比土豆什么的要快，那就看看他的架构吧：

--自建的一个模块化的CMS系统，前端十分灵活

--mysql数据库从单台MySQL服务器（Just Running）到简单的MySQL主从复制、SSD优化、垂直分库、水平sharding分库，解决数据库服务器的灵活横向扩展。

--为了避免内存拷贝和内存锁，没有（很少）用内容缓存。

--最核心的是构建了比较完善的CDN网络，就近原则，让你看视频时从离你最近的服务器上获取视频信息，所以我们看优酷比土豆要快，原因就在这里。

优酷网架构的详细信息

3、Twitter架构

twitter，怎么说呢，说他简单么还真简单，但又是那么复杂，真是纠结。话说这140个字的鼻祖让国内的某某某非常风骚，算了不跑题了，说说他的架构吧：

--平台比较广泛：

Ruby on Rails：web应用程序的框架
Erlang：通用的面向并发的编程语言，开源项目地址：http://www.erlang.org/
AWStats：实时日志分析系统：开源项目地址：http://awstats.sourceforge.net/
Memcached：分布式内存缓存组建
Starling：Ruby开发的轻量级消息队列
Varnish：高性能开源HTTP加速器
Kestrel：scala编写的消息中间件，开源项目地址：http://github.com/robey/kestrel
Comet Server：Comet是一种ajax长连接技术，利用Comet可以实现服务器主动向web浏览器推送数据，从而避免客户端的轮询带来的性能损失。
libmemcached：一个memcached客户端
使用mysql数据库服务器
Mongrel：Ruby的http服务器，专门应用于rails，开源项目地址：http://rubyforge.org/projects/mongrel/
Munin：服务端监控程序，项目地址：http://munin-monitoring.org/
Nagios：网络监控系统，项目地址：http://www.nagios.org/

--细化memcached，同时建立向量缓存Vector Cache、行缓存Row Cache、碎片缓存Fragmeng Cache、缓存池Page Cache

--给力的消息队列，用Ruby写的一个分布式队列 Starling

Twitter架构的详细信息

4、Yupoo网站架构

一个试图做国内最好的图片服务提供商，虽然和Flickr还有点差距，但也不错了，话说搞图片和视频的是很烧服务器和带宽的，在国内这么贵的带宽也挺不容易的，好了，一起看看他的架构吧：

--Squid，这个貌似做图片缓存挺好使的，而且还是分布式的，可以硬盘命中和内存命中，速度都还不错。

--MogileFS图片存储

--mysql分库设计，垂直分库，水平sharding，跨库关联查询

--透明的缓存设计

Yupoo架构的详细信息

5、Amazon网站架构

这个Amazon从小书店开始现在成了全球商品品种最多的网上零售商和全球第2大互联网公司，貌似很风光嘛，那架构一定很犀利的，下面一起来看看：

--平台，Linux、oracle、C++、Perl、Mason、Java、Jboss、Servlets

--Dynamo Key-Value存储架构，有关Dynamo的更多信息请参看：http://baike.baidu.com/view/2982765.html?fromTaglist

Amazon架构详细信息

转自：http://www.cnblogs.com/sxwgf/archive/2011/03/08/1977589.html

本文链接

200佳优秀的国外创意设计网站推荐【全集】转

2011-08-16T08:15:00Z

这个系列将向大家200佳非常棒的国外创意设计网站，包括网页设计、名片设计、LOGO设计和包装设计等等，设计师可通过这些创意设计网站收集的优秀设计作品来获取灵感，进而设计出更具有创意的作品，设计师也可以把自己得意的作品提交到这些网站，分享给其它的设计师朋友。

寻找网页设计灵感的200佳网站推荐（系列一）

寻找网页设计灵感的200佳网站推荐（系列二）

寻找网页设计灵感的200佳网站推荐（系列三）

收藏精美网页设计作品的200佳网站推荐（系列四）

收藏精美网页设计作品的200佳网站推荐（系列五）

优秀网页设计欣赏的200佳网站推荐（系列六）

创意网页欣赏的200佳网站推荐（系列七）

200佳优秀的精美网页欣赏网站推荐（系列八）

优秀网站设计欣赏的200佳网站推荐（系列九）

国外创意网站设计欣赏的200佳网站推荐（系列十）

国外精美网站设计欣赏的200佳网站推荐（系列十一）

优秀国外网页设计欣赏的200佳网站推荐（系列十二）

国外创意名片设计欣赏的200佳网站推荐（系列十三）

精美LOGO设计欣赏的200佳网站推荐（系列十四）

国外LOGO设计欣赏的200佳网站推荐（系列十五）

200佳很棒的创意设计网站推荐（系列十六）

200佳优秀的国外创意设计作品网站推荐（系列十七）

200佳国外创意设计网站推荐（系列十八）

200佳优秀的国外创意网站推荐（系列十九）

200佳优秀的国外设计网站推荐（系列二十）

转自：http://www.cnblogs.com/lhb25/archive/2011/08/15/design-gallery-websites.html

本文链接

XML与DataSet的相互转换类

2011-08-16T05:49:00Z

送给大家一个XML与DataSet的相互转换的类:
XmlDatasetConvert 该类提供了四种方法：
1、将xml对象内容字符串转换为DataSet
2、将xml文件转换为DataSet
3、将DataSet转换为xml对象字符串
4、将DataSet转换为xml文件

XmlDatasetConvert.cs
using System;
using System.Collections.Generic;
using System.Text;
using System.Data;
using System.IO;
using System.Xml;

namespace XmlDesign
{
    class XmlDatasetConvert
    {
        //将xml对象内容字符串转换为DataSet
        public static DataSet ConvertXMLToDataSet(string xmlData)
        {
            StringReader stream = null;
            XmlTextReader reader = null;
            try
            {
                DataSet xmlDS = new DataSet();
                stream = new StringReader(xmlData);
                //从stream装载到XmlTextReader
                reader = new XmlTextReader(stream);
                xmlDS.ReadXml(reader);
                return xmlDS;
            }
            catch (System.Exception ex)
            {
                throw ex;
            }
            finally
            {
                if (reader != null) reader.Close();
            }
        }

//将xml文件转换为DataSet
        public static DataSet ConvertXMLFileToDataSet(string xmlFile)
        {
            StringReader stream = null;
            XmlTextReader reader = null;
            try
            {
                XmlDocument xmld = new XmlDocument();
                xmld.Load(xmlFile);

DataSet xmlDS = new DataSet();
                stream = new StringReader(xmld.InnerXml);
                //从stream装载到XmlTextReader
                reader = new XmlTextReader(stream);
                xmlDS.ReadXml(reader);
                //xmlDS.ReadXml(xmlFile);
                return xmlDS;
            }
            catch (System.Exception ex)
            {
                throw ex;
            }
            finally
            {
                if (reader != null) reader.Close();
            }
        }

//将DataSet转换为xml对象字符串
        public static string ConvertDataSetToXML(DataSet xmlDS)
        {
            MemoryStream stream = null;
            XmlTextWriter writer = null;

try
            {
                stream = new MemoryStream();
                //从stream装载到XmlTextReader
                writer = new XmlTextWriter(stream, Encoding.Unicode);

//用WriteXml方法写入文件.
                xmlDS.WriteXml(writer);
                int count = (int)stream.Length;
                byte[] arr = new byte[count];
                stream.Seek(0, SeekOrigin.Begin);
                stream.Read(arr, 0, count);

UnicodeEncoding utf = new UnicodeEncoding();
                return utf.GetString(arr).Trim();
            }
            catch (System.Exception ex)
            {
                throw ex;
            }
            finally
            {
                if (writer != null) writer.Close();
            }
        }

//将DataSet转换为xml文件
        public static void ConvertDataSetToXMLFile(DataSet xmlDS,string xmlFile)
        {
            MemoryStream stream = null;
            XmlTextWriter writer = null;

try
            {
                stream = new MemoryStream();
                //从stream装载到XmlTextReader
                writer = new XmlTextWriter(stream, Encoding.Unicode);

//返回Unicode编码的文本
                UnicodeEncoding utf = new UnicodeEncoding();
                StreamWriter sw = new StreamWriter(xmlFile);
                sw.WriteLine("<?xml version=/"1.0/" encoding=/"utf-8/"?>");
                sw.WriteLine(utf.GetString(arr).Trim());
                sw.Close();
            }
            catch( System.Exception ex )
            {
                throw ex;
            }
            finally
            {
                if (writer != null) writer.Close();
            }
        }

}
}

使用示例
using System;
using System.Collections.Generic;
using System.Text;
using System.Xml;
using System.Data;

namespace XmlDesign
{
    class Program
    {
        static void Main(string[] args)
        {
            DataSet ds = new DataSet();

转换一个XML文件(本地/网络均可)为一个DataSet#region 转换一个XML文件(本地/网络均可)为一个DataSet
            //http://news.baidu.com/n?cmd=1&class=sportnews&tn=rss
            //F:/study/001CSharp_Study/002Source/XmlDesign/XmlDesign/Save_Plan.xml
            ds = XmlDatasetConvert.ConvertXMLFileToDataSet(@"http://www.bjcan.com/hengxing/%22http://news.baidu.com/n?cmd=1&class=sportnews&tn=rss%22");
            Console.WriteLine("数据集名为/"{0}/",包含{1}个表", ds.DataSetName, ds.Tables.Count);
            foreach(DataTable dt in ds.Tables)
            {
                PrintTableName(dt.TableName);
            };
            #endregion

构造一个DataSet,并转换为XML字符串#region 构造一个DataSet,并转换为XML字符串
            DataSet ds1 = new DataSet();
            DataTable dt1 = new DataTable();
            dt1.TableName = "test";
            dt1.Columns.Add("id");
            dt1.Columns.Add("name");
            dt1.Rows.Add("i001", "hekui");
            dt1.Rows.Add("i002", "liyang");

DataTable dt2 = new DataTable();
            dt2.TableName = "test1";
            dt2.Columns.Add("bookid");
            dt2.Columns.Add("bookname");
            dt2.Rows.Add("b001", "书本1");
            dt2.Rows.Add("b002", "书本2");

ds1.Tables.Add(dt1);
            ds1.Tables.Add(dt2);
            ds1.DataSetName = "方案";
            string xmlOut = XmlDatasetConvert.ConvertDataSetToXML(ds1);
            #endregion

转换一个XML字符串为一个DataSet#region 转换一个XML字符串为一个DataSet
            DataSet ds2 = new DataSet();
            ds2 = XmlDatasetConvert.ConvertXMLToDataSet(xmlOut);
            Console.WriteLine("数据集名为/"{0}/",包含{1}个表", ds2.DataSetName, ds2.Tables.Count);
            foreach (DataTable dt in ds2.Tables)
            {
                PrintTableName(dt.TableName);
            };
            #endregion

转换一个Dataset为一个XML文件#region 转换一个Dataset为一个XML文件
            XmlDatasetConvert.ConvertDataSetToXMLFile(ds2, "c://adadsda1.xml");
            #endregion

            Console.ReadLine();
        }

private static void PrintTableName(string tableName)
        {
            Console.WriteLine(tableName);
        }
    }
}

本文链接

javascript document.compatMode兼容性应用方法

2011-07-27T07:28:00Z

IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。

document.compatMode正好派上用场，它有两种可能的返回值：BackCompat和CSS1Compat。

BackCompat：标准兼容模式关闭。浏览器客户区宽度是document.body.clientWidth；
CSS1Compat：标准兼容模式开启。浏览器客户区宽度是document.documentElement.clientWidth。

那么写了个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码：

if (document.compatMode == "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

//get page height
function pageHeight(){
    if($.browser.msie){
        return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight :
        document.body.clientHeight;
    }else{
        return self.innerHeight;
    }
};

//get page width
function pageWidth(){
    if($.browser.msie){
        return document.compatMode == "CSS1Compat"? document.documentElement.clientWidth :
        document.body.clientWidth;
    }else{
        return self.innerWidth;
    }
};

本文链接

博客园_stone .!

火狐代理fanqian访问youtube等和谐网站

DatePicker - 日期选择插件

视觉灵感：30个漂亮的的网站设计

Recurse 英文原稿：Visual Inspiration: 30 Beautiful Web App Site Designs本文链接

Notify - 消息通知插件

分享几个jquery Dialog弹出窗插件

js Grid - 列表插件

各大网站架构总结笔记（转）

200佳优秀的国外创意设计网站推荐【全集】 转

XML与DataSet的相互转换类

javascript document.compatMode兼容性应用方法

Recurse

英文原稿：Visual Inspiration: 30 Beautiful Web App Site Designs
本文链接

200佳优秀的国外创意设计网站推荐【全集】转