• 做网站用UTF-8还是GB2312？[转]

    calendar Apr 2, 2010   ---   · 1 min read · web utf-8 gb2312  ·
    Share on: linkedin copy
    经常我们打开外国网站的时候出现乱码，又或者打开很多非英语的外国网站的时候，显示的都是口口口口口的字符，

    　　WordPress程序是用的UTF-8，很多cms用的是GB2312。

    　　● 为什么有这么多编码？

    　　● UTF-8和GB2312有什么区别？

    　　● 我们在国内做网站是用UTF-8编码格式还是GB2312编码格式好？ 

    　　一. 各种编码的来历


    　　可能很多同学一直对字符的各种编码方式懵懵懂懂，根本搞不清为什么他们有这么多编码。 Read More

  • 你应该知道的几个CSS3技巧(请用 FireFox3.6浏览可看到所有效果)

    calendar Apr 2, 2010   ---   · 1 min read · css web  ·
    Share on: linkedin copy
    你们中有许多人可能已经听到过有关CSS3的不少传言，但是我们现在能真正用到的CSS3技巧又有哪些呢？本文，我将向你展示一些与众不同的 CSS3技巧，这些技巧在一些主要的浏览器中表现良好（如Firefox，Chrome，Safari，Opera浏览器）。这些效果会在不支持的浏览器中降级渲染（如IE浏览器）。使用浏览器特定的声明，许多提议的CSS3样式都可以马上拿来使用。




    如果你不知道浏览器的特定声明是什么，你只需要记住它们都是CSS样式属性前与内核提供商有关的特定前缀。因为CSS3目前还没得到全面的支持，所以我们需要使用这些特定声明。具体的形式如下：

    • Mozilla/Firefox/Gecko浏览器的前缀: -moz-
    • Webkit (Safari/Chrome)浏览器的前缀: -webkit- （注意：一些Wbkit的前缀只能在Safari下使用，Chrome不支持。）

    你可能已经看到了，使用这些声明的有一个缺点，那就是如果我们想在Firefox，Safari和Chrome中都得到CSS3的效果，我们需要使用到上面所有这些前缀。也不用惊讶，IE浏览器不支持CSS3，因此也就不像其他主要浏览器有一个特定的前缀声明。

    好了，我们已经讲的够多了，我们马上尝试一下。注意：样式声明去掉这些前缀就是W3标准的实际规范提议。

    关于这个页面的Demo（实例）说明

    所有这些例子都是在这个页面里面，如果你不能正常查看实例的效果（或者只能查看部分），那说明你正在使用的浏览器并不支持这些CSS3效果

    阴影效果

    阴影效果接受多个参数值。第一个是阴影的颜色，它还接受另外四个长度（lenght）值，前两的长度值分辨是X（水平）偏移量和Y（垂直）偏移量。接下一个参数是反映模糊度的数值。第四也是最后一个值是用来定义模糊的散布程度。

    box-shadow: #333 3px 3px 4px;
    -moz-box-shadow: #333 3px 3px 4px;
    -webkit-box-shadow: #333 3px 3px 4px;

    阴影效果演示


    渐变效果

    CSS3的渐变样式刚开始很容易让人混淆，尤其-moz 和-webkit的渐变之间还存在不同。在-moz中，你首先需要定义渐变的方向，然后定义起始和终止的颜色。而-webkit的渐变则稍稍复杂一些，首先你需要定义渐变的类型，然后接下来两个值定义方向，最后两个值定义了渐变的起始颜色和终止颜色。

    -moz-linear-gradient(-90deg,#1aa6de,#022147);
    -webkit-gradient(linear, left top, left bottom, from(#1aa6de), to(#022147));

    :渐变效果演示实例


    RGBA颜色模式

    RGBA的颜色定义实际用起来没有给人的感觉那么复杂，它接受四个参数值，以此是：红色值，绿色值，蓝色值，以及透明度。我们不用hex（#）16 进制值的颜色，我们以RGB的模式来设置颜色，其中，透明度可以设置颜色的透明效果。透明度的取值范围在0到1之间，0是完全不透明，1是颜色完全透明。下面这些演示例子的透明度都是0.5，元素的透明度是50%，rgba不需要附加任何特定的浏览器前缀声明。

    background-color: rgba(0, 54, 105, .5);

    HSL色彩模式（色调H，饱和度S ，亮度L）


    除了RGBA，CSS3也支持HSL颜色模式。这给我们在颜色和色调的选择上提供了充足的余地。在HSL这种色彩模式中的H代表色调，S代表色度，L代表亮度。色调是色盘上角度值  ，而保饱和度和亮度则是颜色的百分比值。

    background-color: hsl(209,41.2%, 20.6%);

    HSL演示实例


    边框颜色

    要使用这一CSS样式，你需要分别定义border-top, border-right, border-bottom, 和border-left 才能获得下面的效果。你注意到定义一个8像素的边框，然后边框又定义了8种不同的颜色。这因为边框的颜色数量必须与边框的像素宽度值相对应。

    border: 8px solid #000;
    -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
    -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

    边框颜色演示


    文本选择颜色设置

    我不得不要说文本选择颜色的定义是一个相当激动人心的新功能。当我第一次在CSS技巧上看到这个是，我在觉得它非常贴心。有了::selection这对伪对象（pseudo- element），你可以在用户选一段文本元素时改变颜色和背景。如果你问的看法，我会觉得这非常漂亮。虽然::selection已经从目前的CSS3草案中移除鸟，但是我们希望稍后它在添加进来。

    ::selection {background: #3C0; /* Safari */color: #90C;}::-moz-selection {background: #3C0; /* Firefox */color: #90C;}

    文本选择颜色演示

    变形

    有了变形样式，你可以让元素的外观在鼠标悬停时变大。给Scale（比例）值设置一个大于1的数值，元素就会便打。反过来或，如果值小于1，元素的大小就会缩小。除了Scale比例，它还有其他许多不同的变形方式可用。你可以访问Firefox的开发者页面，查看它们所能实现的效果

    -moz-transform: scale(1.15);-webkit-transform: scale(1.15);

    变形效果演示

     

    多栏布局

    有了这个新的多栏布局样式，你可以给文本呈现类似”报纸“排版的效果。跟在CSS2中的实现方法相比，CSS3中，我们实现这类效果要简单的多。下面，我指定鸟所需要的列数量，以及分离的规则类型，栏与栏之间的空隙有多大。用起来很简单是吧

    -moz-column-count:3;-moz-column-rule: solid 1px black;-moz-column-gap: 20px;

    多栏布局演示

     

    总结

    我希望跟我一样，对CSS3的这些特性感到激动。他给网页设计师和开发者更多的力量，并且让许多方面都简化不少。现在，我们只需等待所有浏览器支持它。当然，我这里演示的知识CSS3新功能的冰山一角。如果你想了解更多信息，技巧和帮助，我建议你访问下面这些网站学习。

    摘自：http://www.dongxi.net/b00kC

  • 各大浏览器 CSS3 和 HTML5 兼容速查表[转]

    calendar Apr 1, 2010   ---   · 1 min read · css html css3 html5  ·
    Share on: linkedin copy
    支持 CSS3 和 HTML5 的浏览器越来越多，甚至包括最新版的 IE，当然，所谓支持仅仅是部分支持，因为 CSS3 和 HTML5 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点，至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。

    需要指出的是，即使同一个浏览器的同一个版本，在 Mac 和 Windows 两个平台，它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome， Safari， Firefox， Opera， IE 5 大浏览器，在 Mac 和 Windows 两个平台，对 CSS3 和 HTML5 各种功能的详细支持情况清单。 Read More

  • 关于jQuery 不同选择器的性能比较[翻译]

    calendar Nov 24, 2009   ---   · 1 min read · jQuery web  ·
    Share on: linkedin copy

    原文：101 on jQuery Selector Performance by Andreas Grabner, Nov 09, 09

    上周我认真分析了一个 Web 页面，它在 onLoad 事件中处理一段定制脚本文件用了 4.8 秒。结果是其中 2.8 秒消耗在动态菜单库上(将会在博客中单独记录)，剩下的 2 秒花费在 jQuery 的选择器上。分析显示多数选择器不返回任何对象，而那些会返回对象的选择器可考虑用不同的选择器来改善性能。

    关于 jQuery 选择器

    有大量的日志文章论述了 jQuery 选择器及它们的性能影响。正如你所知，可以通过 ID, TagName 或 ClassName 选择元素。依赖于不同的选择器， jQuery 会使用浏览器本地方法，如 通过 ID 或标签来选择元素，或者在使用类名选择时须手工从 DOM 中遍历获得元素(因为在 IE 中不存在相应的 getElementsByClssName).

    分析我的页面时间中这 2 秒

    在 onLoad 处理器中对页面中某些特定的元素使用 jQuery 设置为隐藏，显示或改变样式表...。这里是一个代码片断： Read More

  • Web开发工具大集合——每个浏览器都有份的！[转]

    calendar Sep 26, 2009   ---   · 2 min read · web tools  ·
    Share on: linkedin copy
    作者：Klaus Komenda ， 翻译：butwho
    英文原文：Collection of Web Developer Tools, per Browser
    原文发现：译言-Collection of Web Developer Tools for major browsers
    中文译文：Web开发工具大集合——每个浏览器都有份的！


    网站开发者的一大苦恼，就是有太多的浏览器要应付。幸亏世界上有一些聪明的人，能够研究出一大些方便编辑和调试网页代码的好工具。不过，要从不计其数的小工具里面找出合适的可真不容易。这篇文章列出了几个最好用的web开发工具，并指导你快速地激活、安装、使用他们。 下面是工具列表： Read More

  • Ext.data.Record 的基本法及其 API 帮助的一个 Bug

    calendar Jul 23, 2009   ---   · 2 min read · javascript ExtJs  ·
    Share on: linkedin copy
    基本用法(不涉及其他相关类)：

    Ext.data.Record 实例就是对应一条记录，记录通常会放在数据集 Store 中，其中包含了数据的定义信息(字段名等) 和数据的值信息。这里不涉及与它相关的 Proxy、DataReader 和 Store，只单纯的用 Record 的方法。通常是两步，先调用 Record 的 create() 方法，返回一个类，然而 new 前面方法返回的类，代码过程如下：
     1//第一步，create() 返回一个 Record 的子类(定义了数据表现，有点像泛型)
 2var Person = Ext.data.Record.create([ //用对象数组指定每个字段名
 3	{name:'name'},{name:'email'} //name 属性指定每个字段名
 4]);
 5
 6//通过前面 create() 返回的 Person 类创建 record 实例
 7var record = new Person({//传入一个对象作为第一个参数，注意属性名对应
 8	name:'Unmi',
 9	email:'fantasia@sina.com'
10},2009); //第二个参数指定记录的标识 ID，未指定 ID 则为你用整数进行编号
11
12//验证效果，只取 id 和其中的 email 属性，可试下前面无 {id:'name'}的情况
13alert('id:' + record.id +", email:" + record.get('email'));
    代码说明： Read More

  • ExtJs 中使用 TaskRunner 和 DelayedTask 如何传参数到 run() 方法

    calendar Jul 21, 2009   ---   · 2 min read · javascript ExtJs  ·
    Share on: linkedin copy
    在 ExtJs 中支持多线程的类有 Ext.util.TaskRunner 和 Ext.util.DelayedTask。TaskRunner 提供了多线程的定时服务，DelayedTask 允许你延时多久在新建线程中执行一个任务。Ext.TaskMgr 是一个 TaskRunner 实例，在 TaskMgr.js 源码中可以看到最后一行是：


    Ext.TaskMgr = new Ext.util.TaskRunner();

    实质上不管是 TaskRunner 还是 DelayedTask，它们都是通过 setInterval() 来执行任务的，TaskRunner 能多次重复的执行一个方法，而 DelayedTask 是延时执行完一次任务后就会调用 clearInterval() 来保证只执行一次。所以这里所说如何向任务的 run() 方法传递参数，本质上就是向 setInterval() 中方法传递参数。 Read More

  • ExtJs 中 xtype 与组件类的对应表

    calendar Jul 16, 2009   ---   · 4 min read · javascript ExtJs xtype  ·
    Share on: linkedin copy
    我们在使用 ExtJs 创建组件时最容易理解的当然是用
     
    new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120})；

    我们还可以直接用 xtype(比如 TextField 对应的 xtype 是 textfield) 的对象形式来创建组件，比如在面板的 items 属性中，尤其是多个组件或需要写许多的 ExtJs 相关代码时就更值得推荐。我们来对照如下形式就知道了：
     1items[
 2    new Ext.form.TextField({fieldLabel:'姓名', id:'name', width:120}),
 3	new Ext.form.TextField({fieldLabel:'密码', id:'passwd', inputType:'password', width:120}),
 4	new Ext.form.DateField({fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120})
 5]
 6//替换成用 xtype 写法就如下(似乎只是免去了很多的 new ...)
 7items[
 8    {xtype:'textfield', fieldLabel:'姓名', id:'name', width:120},
 9	{xtype:'textfield', fieldLabel:'密码', id:'passwd', inputType:'password', width:120},
10	{xtype:'datefield', fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120}
11]
    Read More

  • 创建兼容 IE/FireFox 的 event 及 event 的 srcElement、fromElement、toElement 属性

    calendar Jul 10, 2009   ---   · 2 min read · javascript IE FireFox  ·
    Share on: linkedin copy
    自然，我们都习惯了 IE，在 IE 中要在函数中获得各事件对象很容易，直接用 event、event.srcElemtn、event.fromElement、event.toElement 就行了。在 FireFox 中获得触发事件的元素可以用 event.target，但其他两个 fromElement 和 toElement 就要费些周折。

    所以，为了保持一致的使用方式，也为了保持原有的使用习惯，我们加入以下 JS 代码(代码有些紧凑，未加注释，应该很好理解)： Read More

  • 创建兼容 IE/FireFox 的 insertAdjacentHTML 方法

    calendar Jul 8, 2009   ---   · 2 min read · javascript ExtJs  ·
    Share on: linkedin copy
    在 IE 中我们可以用 insertAdjacentHTML 往元素的 beforeBegin,beforeEnd,afterBegin,afterEnd 处理插入新元素。而在非 IE 中没有该方法，因而我们要创造一个兼容的 insertHtml 方法来。

    本方法从 Ext 2 中剥离出来的，在 ext-all-debug.js 中有以下方法：

    Ext.DomHelper.insertHtml( String where, HTMLElement el, String html ) : HTMLElement

    参数介绍：

    where：插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
    el：用于参照插入位置的html元素对象
    html：要插入的html代码 Read More