http://www.imalex.net/index.php zh-cn http://www.imalex.net/read.php?43 Alex <admin@yourname.com> Sat, 26 Mar 2011 18:44:51 +0000 http://www.imalex.net/read.php?43 if !IE] 除IE外都可识别 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
另有网友解释：
gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于
最后有来自http://msdn2.microsoft.com/en-us/library/ms537512.aspx （英文）
来自MSDN的参考。。。。 ]]> http://www.imalex.net/read.php?40 Alex <admin@yourname.com> Tue, 25 Jan 2011 02:52:43 +0000 http://www.imalex.net/read.php?40
   1.属性(property，可以比作形容词)。这个汽车是红色的。

   2.方法(method，像一个句子里的东西)。启动汽车的方法可能是转动车钥匙。

   3.事件(event)。转动车钥匙导致了汽车启动——过程 + 结果 = 事件

   面向对象编程(OOP)试图通过对现实世界中的对象建模来使编程更加统一。让我们来创建一个汽车的模拟程序。首先，我们会创建一个汽车对象，给它一些属性，如颜色和当前速度。接着我们需要创建方法：可能一个start方法来启动汽车，一个break方法来给汽车减速，在其中我们需要传递刹车力度信息来决定减速的效果。最后，我们需要一些事件，例如，汽油过低事件提醒我们给汽车加油。

   面向对象编程就是要试用这些概念。这种设计软件的方式现在在许多编程领域都非常通用和流行，但对我们最重要的就是，它是JavaScript和Web浏览器编程的核心。

   我们试用的一些对象是JavaScript这种语言规范提供的一部分，例如String对象、Date对象以及Math对象。同样的JavaScript对象会在一个PDF文件或者一个Web服务器中提供。这些对象提供了许多有用的功能，可以节省大量的变成事件。

   举例来说，Date对象允许您从客户端获取当前的日期和时间。它保存日期，还提供了许多与日期相关的有用的函数，例如，把一个失去的日期/时间转换成为另一个失去的。这些对象通常称作为核心对象(core object)，因为他们是独立于现实的。浏览器通关一些获取它的相关信息和改变应用程序界面外观的对象，使我们可以再JavaScript中使用这个对象来为浏览器用户查看的页面添加新的HTML元素。

   如果你曾在不同的主机中使用JavaScript，假设使用一个Windows服务器，你会发现存在JavaScript的服务器提供了一组非常不同的主机对象，他们的功能与你想在Web服务器上做的事情是相关的。

   JavaScript允许我们创建自己的对象。这是一个非常强大的特性，它允许我们试用JavaScript为现实世界的问题进行建模。要创建一个新的对象，我们需要使用一个叫做类(class)的模板来制定它的属性和方法。类与建筑师的图纸有点类似，它指定了什么东西应该到什么地方去做什么事情，但是他实际上并没有创建对象。

   PS：JavaScript是基于对象的语言还是面向对象的语言，这个问题存在一些争论。不同之处在于基于对象的语言使用对象来编程但是不允许程序员在他们的代码设计中使用面向对象编程。面向对象的语言不只使用对象，也允许使用面向对象的设计方法来简化开发和代码设计。JavaScript允许我们创建自己的对象，但是与Java、C#等基于类的语言实现方式不同无论如何，我们在这里不要太计较面向对象是什么或不是什么，而是应该关注JavaScript对象如何实际应用。

此文摘自网络！
Tags - javascript对象 ]]> http://www.imalex.net/read.php?39 Alex <admin@yourname.com> Wed, 19 Jan 2011 10:29:27 +0000 http://www.imalex.net/read.php?39
基本概念:
px就是表示pixel，像素，是屏幕上显示数据的最基本的点，最小单位；

pt就是point，是印刷行业常用单位，等于1/72英寸。

em，其实就是％，从这个概念上看，em才是真正的“相对单位”。

px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率低”。所以，“点”的大小是会“变”的，也称为“相对长度”。

pt全称为point，但中文不叫“点”，确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。所以它是一个自然界标准的长度单位，也称为“绝对长度”。

px会随显示器的分辨率而改变，pt会随Windows系统字体大小设置而改变。

设置Windows系统字体大小：桌面上右键 > 属性 > 设置 > 高级 > 常规 > DPI 设置，默认的是“正常尺寸96DPI”，你可以自定义修改。

px和pt的使用区别，只有当用户改变默认的96DPI下才会产生：使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。

转换计算公式：px = pt * DPI / 72

在网页设计中，面向用户的屏幕的基本单位是px，因此使用px作为单位是最简单也最容易理解的，而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示，算是绕了个圈子。参考大部分大型网站，包括Adobe和Microsoft，都是使用px作为单位，而且在HTML中，默认的单位就是px。

但在Word或Photoshop中，使用pt就相当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。又或者在Photoshop中，设置一个图片中的某个艺术效果的字体是72pt大小，然后分别将这张图片设为300DPI和72DPI，再打印出来，就可以看出，这2个字体大小完全一样，只是“清晰度”不同，300DPI更清晰。这是毫无疑问的结果。
]]> http://www.imalex.net/read.php?38 Alex <admin@yourname.com> Sat, 08 Jan 2011 17:27:01 +0000 http://www.imalex.net/read.php?38
Knowledge Prepare - 知识准备
在JavaScript中, 当你定义了一个新的函数, 你实际上声明了一个新的类, 而这个函数本身就相当于类的构造函数。 下面的代码向你展示了两种不同的方式来创建一个新的Person类, 而Person.prototype的定义也紧跟在函数定义之后。
var Person = function(name) {// 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类   this.name = name; } function Person(name) {// 直接定义一个叫做Person的函数表示Person类   this.name = name; } Person.prototype = {// 定义Person的prototype域   printName: function() {// 定义一个print函数     alert(this.name);   } }
当你通过函数的方式声明了一个类之后, 你就可以通过new操作符来实例化这个类。这样, 你就可以调用类的成员函数来完成你的逻辑。
var person = new Person("Joe Smith"); // 使用new操作符来新建一个Person的实例, 并赋给变量person person.printName(); // person就可以看作是一个实例的引用(reference), 所以可以通过这个引用来调用Person类中的成员函数
我们来总结一下创建一个新的类的实例的整个流程和步骤：
1. 通过定义一个函数的方式(匿名或者实名)来声明一个新的类.
2. 如果有必要, 定义这个新的类的prototype域.
3. 使用new操作符紧跟你所定义的函数来创建一个新的类的实例. 一旦JavaScript编译器碰到了new操作符, 它实际上创建了一个空的类实例变量.
4. 将所有这个类的prototype域中的属性与方法复制到这个新的实例中, 并将其成员函数中所有的this指针指向这个新创建的实例.
5. 接下来, 执行紧跟在new操作符后面的那个函数.
6. 当你执行这个函数时, 如果你试图对一个不存在的属性进行赋值, JavaScript编译器将自动为你在这个实例范围内新创建这个属性.
7. 函数执行完毕后, 将这个初始化完成的实例返回.
在Prototype中, 使用Class对象, 你可以以一个比较简单的方式来声明一个新的对象。通过使用Class.create(), prototype为你创建了一个默认的构造函数initialize(), 一旦你实现这一函数, 就可以以一个类似Java中构造函数的方式来创建一个新的类的实例。
Source View - 源码解析
var Class = {  // 全局静态类, 用于声明一个新的类并提供构造函数支持   create: function() {         return function() { // 返回一个函数, 代表着这个新声明的类的构造函数 // 一个命名为initialize的函数将被这个类实现作为类的构造函数       this.initialize.apply(this, arguments);// initialize函数将在你实例化一个变量的时候被调用执行(即上面7个步骤中的第5步)     }   } }
Field & Function Reference - 属性方法一览
Class ( 静态 )
Method / Property Kind Arguments Description
create() 静态方法  / 用于声明一个新的类并提供了一个名为initialize构造函数支持
Analysis & Usage - 分析与使用
通过Class类, 你可以很容易地使用构造函数的方式创建一个新的类, 这对于Java程序员来说或许更加容易被接受。下面我们列出了Java和JavaScript各自声明和创建一个新的类的代码对比, 我们可以看到, 他们是如此相似：
var Person = Class.create(); // 类的声明 |public class Person { // 类的声明 Person.prototype = {   |    private String name;    initialize: function(name) {  // 构造函数|    public Person(String name){ // 构造函数      this.name = name;    |       this.name = name;    }       |    }    printName: function() {  // 成员函数 |    public void printName(){  // 成员函数      alert(this.name);   |       System.out.println(name);    }    |    } }       |} var person = new Person("Joe Smith");// 创建实例  |Person person = new Person("Joe Smith");// 创建实例 person.printName(); // 函数调用 |person.printName(); // 函数调用 ]]> http://www.imalex.net/read.php?37 Alex <admin@yourname.com> Mon, 06 Dec 2010 11:05:14 +0000 http://www.imalex.net/read.php?37 窗口A弹出窗口B,如果窗口B是模态的，在窗口B关闭前就不可能切换到窗口A;如果B是非模态的，那可以在这两个窗口之间任意切换。

它一般用来显示提示信息和接受用户的输入。对话框不能独立存在。目前有两种对话框，分别为：模态对话框 和 非模态对话框。
模态对话框在显示之后，就不能对同一个程序中的其它窗口进行操作。
非模态对话框在显示之后，还可以对同一个程序的其它窗口进行操作。

非模态
CMyDlg*   pMainWnd   =   new   CMyDlg;  
pMainWnd->Create();  
模态
CMyDlg   dlg；  
dlg.Domdal；

showModalDialog和showModelessDialog使用心得

一、showModalDialog和showModelessDialog有什么不同？
　　showModalDialog：被打开后就会始终保持输入焦点。除非对话框被关闭，否则用户无法切换到主窗口。类似alert的运行效果。
　　showModelessDialog：被打开后，用户可以随机切换输入焦点。对主窗口没有任何影响(最多是被挡住一下而以。:P)

二、怎样才让在showModalDialog和showModelessDialog的超连接不弹出新窗口？
　　在被打开的网页里加上就可以了。这句话一般是放在和之间的。

三、怎样才刷新showModalDialog和showModelessDialog里的内容？
　　在showModalDialog和showModelessDialog里是不能按F5刷新的，又不能弹出菜单。这个只能依靠javascript了，以下是相关代码：

[body   onkeydown="if (event.keyCode==116){reload.click()}">
reload...

　　将filename.htm替换成网页的名字然后将它放到你打开的网页里，按F5就可以刷新了，注意，这个要配合使用，不然你按下F5会弹出新窗口的。

四、如何用javascript关掉showModalDialog(或showModelessDialog)打开的窗口。
　　[input type="button" value="关闭" onclick="window.close()">
　　也要配合，不然会打开一个新的IE窗口，然后再关掉的。

五、showModalDialog和showModelessDialog数据传递技巧。
　　例子：
　　　　现在需要在一个showModalDialog(或showModelessDialog)里读取或设置一个变量var_name

　　　　　　一般的传递方式：
　　　　　　　　window.showModalDialog("filename.htm",var_name)
　　　　　　　　//传递var_name变量
　　　　　　在showModalDialog(或showModelessDialog)读取和设置时：
　　　　　　　　alert(window.dialogArguments)//读取var_name变量
　　　　　　　　window.dialogArguments="oyiboy"//设置var_name变量
　　　　这种方式是可以满足的，但是当你想在操作var_name同时再操作第二个变理var_id时呢？就无法再进行操作了。这就是这种传递方式的局限性。
　　　　
　　　　　　以下是我建议使用的传递方式：
　　　　　　　　window.showModalDialog("filename.htm",window)
　　　　　　　　//不管要操作什么变量，只直传递主窗口的window对象
　　　　　　在showModalDialog(或showModelessDialog)读取和设置时：
　　　　　　　　alert(window.dialogArguments.var_name)//读取var_name变量
　　　　　　　　window.dialogArguments.var_name="oyiboy"//设置var_name变量

　　　　　　　　同时我也可以操作var_id变量
　　　　　　　　alert(window.dialogArguments.var_id)//读取var_id变量
　　　　　　　　window.dialogArguments.var_id="001"//设置var_id变量

　　　　　　　　同样还可以对主窗口的任何对象进行操作，如form对象里的元素。
　　　　　　　　window.dialogArguments.form1.index1.value="这是在设置index1元素的值"

六、多个showModelessDialog的相互操作。
    以下代码的主要作用是在一个showModelessDialog里移动别一个showModelessDialog的位置。

　　主文件的部份js代码。
　　var s1=showModelessDialog(''控制.htm'',window,"dialogTop:1px;dialogLeft:1px"） //打开控制窗口
　　var s2=showModelessDialog(''about:blank'',window,"dialogTop:200px;dialogLeft:300px"）　　//打开被控制窗口

　　控制.htm的部份代码。
　　<script> 　　　　//操作位置数据，因为窗口的位置数据是"xxxpx"方式的，所以需要这样的一个特殊操作函数。 function countNumber(A_strNumber,A_strWhatdo) {   A_strNumber=A_strNumber.replace(''px'','''')   A_strNumber-=0   switch(A_strWhatdo)   {   case "-":A_strNumber-=10;break;   case "+":A_strNumber+=10;break;   }   return A_strNumber + "px" } 　　</script> 　　[input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,''-'')" value="上移"> 　　[input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,''-'')" value="左移"> 　　[input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,''+'')" value="右移"> 　　[input type="button" onclick="window.dialogArguments.s2.dialogTop=countNumber(window.dialogArguments.s2.dialogTop,''+'')" value="下移">
　　以上关键部份是：
　　　　窗口命名方式：var s1=showModelessDialog(''控制.htm'',window,"dialogTop:1px;dialogLeft:1px"）
　　　　变量访问方式：window.dialogArguments.s2.dialogTop

　　这个例子只是现实showModelessDialog与showModelessDialog之间的位置操作功能，通过这个原理，在showModelessDialog之间相互控制各自的显示页面，传递变量和数据等。这要看你的发挥了。
Tags - javasript , 模态 , 非模态 ]]> http://www.imalex.net/read.php?36 Alex <admin@yourname.com> Mon, 11 Oct 2010 08:20:49 +0000 http://www.imalex.net/read.php?36
基本上一说起ajax，大家都感觉到比较神秘，我以前也是这样，总觉得这个和荷兰一家足球俱乐部同名的玩意儿是个高深莫测的东西。其实ajax之所以看上去那么蛋疼主要是为了解决各浏览器对js的兼容性问题而写了太多的代码，以至于一看见就头昏。强大简易的jquery扭转了这个局面。

首先说下个人对ajax的简单理解：html、css、js(jQuery等)是给浏览器看的，PHP是给服务器看的，js可以和php对话，而php可以生成html、css和js，以前我们浏览网页的时候，总是通过操作html，通过php告诉服务器我们需要什么内容，然后服务器会在一个新的页面将你请求的信息展示给你；而ajax，即是我们操作html时告诉js，然后js告诉php，php得到命令以后到服务器去取了你要的信息交给js，js再将此信息展示给你。这么看来ajax貌似更复杂一点，但是他带来几个好处：1. 你不需要进入一个新的页面就可以看到你所请求的信息；2.php只需要提取出产生了变化的有限信息即可，减少了重复。

简单扼要的说就是ajax模拟了提交表单的行为，但是把刷新页面这件事交由js在后台偷偷完成了。

由此可见ajax其实是一个很容易理解的过程，下面用例子来说明。首先写一个html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ajax test</title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function(){   $('button').click(function(){     $name = $(this).attr('name');     $('#out').empty().load('test1.php',{ name : $name });   }); }); </script> <style type="text/css"></style> </head> <body> <button id="btn-1" name="1">1</button> <button id="btn-2" name="2">2</button> <button id="btn-3" name="3">3</button> <div id="out"></div> </body> </html>
有一点html基础的童鞋可以看出，这里做了三个按钮，一个id为out的div，三个按钮是用来点击的，#out的div用来接收数据，每次点击button时先把#out清空，然后插入信息。

然后来写php：

<?php switch($_POST['name']){   case 1:     echo '1 哈哈';     break;   case 2:     echo '2 呵呵';     break;   case 3:     echo '3 活活';     break; } ?>
这段代码使用了php的switch语句，意思就说根据post中name的值来替换输出的内容，这里只是个简单的例子，你也可以通过这个原理让php进行更复杂的运算或输出更复杂的内容。

js我直接写在html里面了，没有单独用一个文件，用纯js写估计得写不少，用jQuery就2句搞定，其实一句都行，只是我这儿还是写成两句比较好理解一点。
第一句是吧button按钮中的name值存在一个变量里面，第二句是使用了jQuery的load函数，告诉php需要哪些信息，然后取回这些信息插入到#out中。

这个ajax就这么完成了，简单吗？
]]> http://www.imalex.net/read.php?35 Alex <admin@yourname.com> Fri, 24 Sep 2010 16:08:03 +0000 http://www.imalex.net/read.php?35 方法一：
跨浏览器的网页设计一直是让人很头疼的问题，这不只是因为浏览器的版本众多，还有一个重要的原因是相同浏览器的不同时期的 版本也会有差异， 甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多，具体可以查看：
本文据说的主要是通过“.”，“>”，“*”，“_”来区分。以下是本人对这四种符号的测 试结果：
———————IE6——     IE7——IE8——FF2——FF3—     Opera9.5
>property——     Y——     Y——     Y——     N——     N——     N
.property——     Y——     Y——     Y——     N——     N——     N
*property——     Y——     Y——     Y——     N——     N——     N
_property——     Y——     N——     N——     N——     N——     N
我 们可以看到>property、.property、*property在各浏览器中的表现是一致的，只有_property在IE6和IE7、 IE8中有所区别。另外还要注意的，IE6是不支持!important的，而其他几款浏览器都识别。
举例：
要对想同的文字在不 同浏览器中显示不同的颜色可以使用：
color :brown !important ;   /*用于Opera、Firefox2、Firefox3等现代浏览器*/   > color : green !important ;     /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/   color : red ;   /*所有浏览器都可以识 别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/
方法二：
其实主要是浏览器：IE6/IE7/firefox下，各个对CSS代码的解释有区别，下边转载一篇HACK的文章，相当实用。
区别IE6 与FF ：           background:orange ;* background:blue ;
区别IE6 与IE7 ：          background:green !important ;background:blue ;
区别IE7 与 FF：           background:orange ; * background:green ;
区别FF /IE7 /IE6 ：       background:orange ;* background:green !important ;* background:blue ;
注：IE都能识别* 标准浏览器(如FF)不能识别*
IE6 能识别* ，但不能识别 !important
IE7能识别* ，也能 识别!important
FF不能识别* ，但能 识别!important
另外再补充一个，下划线"_ ",
IE6支持下划线，IE7和firefox均不支持下划 线。(推荐.我这只有这个有效！)
于是大家还可以这样来区分IE6 、IE7 、firefox
: background:orange ;* background:green ;_ background:blue ;
* html   p {color:#f00;}          支持 IE6        不支持FF IE7 IE8b
*+html p {color:#f00;}          支持 IE7 IE8b        不支持FF IE6
p {*color:#f00;}          支持 IE7 IE6        不支持FF IE8
注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中 间，IE6的写在后面。
1.区别IE和非IE浏览器
#tip { background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ }
2.区别IE6,IE7,IE8,FF
【区别符号】：「\9」、「*」、「_」
【示例】：
#tip { background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }
【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏 览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
3.区别IE6、IE7、Firefox (方法 1)
【区别符号】：「*」、「_」
【示例】：
#tip { background:blue; /*Firefox背景变蓝色*/ *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }[codes] 【说明】：IE7和IE6可读「*」(米字号)，IE6又可以读「_」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全 无法辨识「*」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox 4.区别IE6、IE7、Firefox (方法 2) 【区别符号】：「*」、「!important」 【示例】： [codes=css]#tip { background:blue; /*Firefox 背景变蓝色*/ *background:green !important; /*IE7 背景变绿色*/ *background:orange; /*IE6 背景变橘色*/ }
【说明】：IE7可以辨识「*」和「!important」，但是IE6只可以辨识「*」，却无法辨识「!important」，至于Firefox可以 读取「!important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5.区别IE7、Firefox
【区别符号】：「*」、「!important」
【示例】：
#tip { background:blue; /*Firefox 背景变蓝色*/ *background:green !important; /*IE7 背景变绿色*/ }
【说明】：因为Firefox可以辨识「!important」但却无法辨识「*」，而IE7则可以同时看懂「*」、「!important」，因此可以 两个辨识符号来区隔IE7和Firefox。
6.区别IE6、IE7 (方法 1)
【区别符号】：「*」、「_」
【示例】：
#tip { *background:black; /*IE7 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }
【说明】：IE7和IE6都可以辨识「*」(米字号)，但IE6可以辨识「_」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔 IE6和IE7之间的差异。

7.区别IE6、IE7 (方法 2)
【区别符号】：「!important」
【示例】：
#tip { background:black !important; /*IE7 背景变黑色*/ background:orange; /*IE6 背景变橘色*/ }
【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识 「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。

8.区别IE6、Firefox
【区别符号】：「_」
【示例】：
#tip { background:black; /*Firefox 背景变黑色*/ _background:orange; /*IE6 背景变橘色*/ }
【说明】：因为IE6可以辨识「_」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。

Tags - ie6 , 7 , 8 , ff ]]> http://www.imalex.net/read.php?34 Alex <admin@yourname.com> Fri, 24 Sep 2010 15:42:18 +0000 http://www.imalex.net/read.php?34 可浏览器使用率占最高的ie6偏偏不支持，虽然后来出场的ie7已经开始支持此属性。不过就用户体验的角度来说多浏览器支持也是很重要的，更何况就目前来说ie6的占有率还是最高的。
特别是在流动布局的使用下，特别会用到min-width、min-height、max-width、max-height这些属性，以下是一种非常方便就可以实现在ie6显示min-width、min-height、max-width、max-height同等效果的方法，在此与大家一同分享。
<style type="text/css"> .ie6-out{ _margin-left:900px; _zoom:1; } .ie6-in{ _position:relative; _float:left; _margin-left:-900px; } #min-width{ min-width:900px; background:#ccc; line-height:200px; _zoom:1; } </style> <div class="ie6-out"> <div class="ie6-in"> <div id="min-width">ie6-下，容器实现模拟min-width效果。请任意改变浏览器窗口大小，再点击按钮“查看宽度”。</div> </div> </div>
案例下载点击这里下载文件
Tags - css , min-width ]]> http://www.imalex.net/read.php?33 Alex <admin@yourname.com> Sat, 11 Sep 2010 01:14:17 +0000 http://www.imalex.net/read.php?33 　　虽然我们平时在开发中遇到这样情况的时候并不多，但还是有必要了解一下，JS中提供了一个DocumentFragment的机制，相信大家对这个并不陌生，它可以提供一个缓冲的机制，将DOM节点先放到内存中，当节点都构造完成后，再将DocumentFragment对象添加到页面中，这时所有的节点都会一次渲染出来，这样就能减少浏览器很多的负担，明显的提高页面渲染速度。例如下面的代码：

function CreateNodes(){     for(var i = 0;i < 10000;i++){         var tmpNode = document.createElement("div");         tmpNode.innerHTML = "test" + i + " ";         document.body.appendChild(tmpNode);     } } function CreateFragments(){     var fragment = document.createDocumentFragment();     for(var i = 0;i < 10000;i++){         var tmpNode = document.createElement("div");         tmpNode.innerHTML = "test" + i + "";         fragment.appendChild(tmpNode);     }     document.body.appendChild(fragment); }
　　上面的代码给出了两个函数，分别是用普通的DOM方法和DocumentFragement两种方式向页面添加一万个div节点，大家可以自己实验一下，使用第二种方式要比第一种快很多。这里只是简单的div标签的平铺添加，如果是更加复杂的HTML标签或是多层的嵌套标签，那么性能的差距就会更加明显。
　　通过上面的例子，大家在开发JavaScript应用的时候，如果遇到这种大量节点的情况，不妨将DocumentFragment作为一个备选的方案。

Tags - javascript ]]> http://www.imalex.net/read.php?32 Alex <admin@yourname.com> Tue, 17 Aug 2010 06:23:52 +0000 http://www.imalex.net/read.php?32 首先，栖霞是音译，原字为：七侠。鉴于不崇洋媚外，取交之为有文化特色名字：栖霞。栖霞文明其实就是美好文明的形象表述。
其次，栖霞原字七侠，缘由是由七个人组成的团队；但此团队名字不同于我们所说的CDD或者YFYB。从CDD到YFYB，人类交流融合碰撞的目力始终指向栖霞。纯澈蓝天，茫茫瀚宇，一个来自神盾家庭的传说与七侠的栖霞文明的对接，注定我们要找到组织——这种诗意的境界来作为我们的主题。
　　再次，船是人类文明交流碰撞的符号性文化代表，从“歌德堡”号到“南海一号”，古代的海上丝绸之路是以船来联系的。从大型商船到到宇宙飞船，船始终是人类文明交流与融合的载体，因而具有线索性意义和标志性意义。
　　另外，船还是团队精神的象征。在怒海狂涛当中拼搏，惟有船员是最团结之群体，而这种众人划桨开大船的团队精神，也构成了广东文化所特有的强烈的团队意识。
　　最后，船说与传说谐音，暗示我们将由一个传说来结构整个晚会，这个故事由一艘船带来，并将随着另一艘船的出水而得到传唱，随着宇宙飞船的升空而得到升华。

]]>