ice-cream 一切的成功源于自身的努力 http://ice-cream.javaeye.com UTF-8 Copyright 2003-2008, JavaEye.com http://blogs.law.harvard.edu/tech/rss JavaEye - 做最棒的软件开发交流社区 我的自画像 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/210107  发表时间: 2008年07月01日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

我的自画像，附件

 


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Tue, 01 Jul 2008 12:10:03 +0800 http://ice-cream.javaeye.com/blog/210107 http://ice-cream.javaeye.com/blog/210107 ADOBE AIR 技术 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/208192  发表时间: 2008年06月26日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

初次接触AIR


AIR是一项自2007年来备受推崇的新型技术，它又可以说是对新老技术的结合体。通过这样的结合，我们发现，确实让客户感受得到了很好的改善，比如说：客户更愿意多进行一些操作、更愿意去体验一下新的功能。因为它实在太迷人了。

AIR发展空间与背景

互联网WEB2.0时代的到来、微软VISTA的发布，大势所趋，这一切都正在改变着客户的观念和习惯。是的，人们不希望在自己所努力打造并开始自以为美的事物上运行原先死气沉沉、毫无创意的东西。而AIR技术的到来将带给用户全新的体验。

就在AIR技术刚刚进入测试期间的时候，GOOGLE、EBAY、YAHOO...等等这些国际巨头的互联网企业都已经开始紧锣密鼓地部署自己AIR产品，可见它的市场是备受大家看好的。而在国内，AIRIA(www.AIRIA.cn )也在第一时间从国外引进了AIR的核心技术，正在为国内企业服务着。

AIR到底是什么？

那么看完这些，你是否想急于AIR到底是一个什么样的东西？
简单的说，对于不懂得专业计算机技术的人们，你可以这样理解它：AIR=FLASH。对，从某些概念或表现方式上说，AIR的出现就好比很多年前 人们不满足死气沉沉的网页并推出FLASH产品一样。1998年，FLASH的推出在市场上引起了巨大的轰动，从那时起，几乎所有的网站都开始制作 FLASH，FLASH在短短的一年内就在全世界普及开来。

但FLASH事实上是存在着很多缺陷的。在AIR没有推出前，FLASH只是一个“动画”而已，人们要阅读这个动画必须等到它完全加载、阅读的时候不可以复制其中的文字或图片、FLASH里的信息是完全封闭的并不与外界交流等等...而AIR将改变这一切。

在AIR的构建下，FLASH得以升华。我们可以想象一下，整个网站、软件皆是类似“FLASH动态效果”的界面会是什么样？这种情况在很多电视 剧、电影里都曾表现出来过，人们看了以后觉得不可思议，但足以暴露人们真实的想法：如果真的可以这样，我非常喜欢并乐意接受。AIR正将这一切变为现实。

AIR的新特性

1.与现有技术完美结合和兼容，例如 HTML AJAX（包含CSS\Javascript) ActionScript
2.与现有网站一样，可以与外界（包括搜索引擎在内）交流
3.加载速度比现有的网站快很多。因为AIR产品均是在本地运行的，它只存在一个数据库连接的问题。想象一下，当把大幅的图片、网站FALSH、大量的AJAX代码均在用户本地打包待调用的话......速度如何？ 用户只需要在第一次登陆你的网站时自动下载这些即可。

总结：AIR让客户感受更好、运行更高速度、表现的更炫目



AIR是Apollo Intergeted Runtime。AIR程序都是跑在AIR这个Runtime之上的。这就好比SWF文件在Flashplayer中运行一样。

AIR的组成和发布过程：一个描述应用的XML+一个根节点资源+一个打包工具。

在使用Flex Builder3 建立AIR项目的时候，一般都会自动产生一个MXML和个XML。用Flex编译SWF，作为这个AIR的默认根节点，然后通过Flex Builder3 发布成为air安装包。（当然这并不是唯一开发AIR的方式，Flex开发成本相对较高）我们只要有swf，并且把这个swf描述成为AIR应用的根节点 资源，就可以使用Flex Builder3带有打包工具发布air安装包了。

利用Flash CS3开发AIR安装包的几个步骤的截图，看了这些图片后，相信你会对Flex、MXML、Flash CS3、AIR这些概念有一个更为深入的理解！


AIR中文开发指南 ：http://www.airia.cn/index.php?showtopic=29
参考资料：http://www.airia.cn

本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Thu, 26 Jun 2008 12:46:33 +0800 http://ice-cream.javaeye.com/blog/208192 http://ice-cream.javaeye.com/blog/208192 HTML 基本语法 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/202240  发表时间: 2008年06月11日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

1.标记

　　1.1一般标记
 　　一般标记是由一个起始标记(Opening Tag)和一个结束标记(Ending Tag)所组成，其语法为：<x>受控文字</x>
　 　其中，x代表标记名称。<x>和</x>就如同一组开关：起始标记<x>为开启(ON)的某种功能，而结束标记 </x>(通常为起始标记加上一个斜线/)为关(OFF)功能，受控制的文字信息便放在两标记之间。例如：<i>这是斜体字 </i>。
　　标记之中还可以附加一些属性(Attribute)，用来完成某些特殊效果或功能。例如：<x a1="v1",a2="v2",...,an="vn">受控文字</x>
　　其中，a1,a2,...,an为属性名称，而v1,v2,...,vn则是其所对应的属性值，属性值加不加引号，目前所使用的浏览器都可接受，但依据W3C的新标准，属性值是要加引号的，所以最好养成加引号得习惯。
　　1.2 空标记
 　　虽然大部分的标记是成双成对出现的，但也有一些是单独存在的。这些单独存在的标记称为空标记(Empty Tags)。其与法为：<x>
　　同样，空标记也可以附加一些属性(Attribute)，用来完成某些特殊效果或功能。如：<x a1="v1",a2="v2",...,an="vn">，例如：<hr>,<br>等。
　　W3C定义的新标准(XHTML1.0/HTML4.0)建议：空标记应以/结尾，即：<X />
　　如果附加属性则为：<x a1="v1",a2="v2",...,an="vn" />
　　目前所使用的浏览器对于空标记后面是否要加/并没有严格要求，即在空标记最后在/和没有加/，不影响其功能。但是如果希望你的文件能满足最新标准，那么最好加上/。

　　2. HTML标记分类
　　2.1文件结构标记(Document Structure Tags)
 　　此类标记的目的是用来标示出文件的结构，主要的有：
　　<html>...</html>:标示html文件的起始和终止。
　　<head>...</head>:标示出文件标题区。
　　<body>...</body>:标示出文件主体区
　　2.2区段格式标记(Block Formatting Tags)
 　　此类标记的主要用途是将HTML文件中得某个区段文字,以特定格式显示，增加文件的可看度。主要的有：
　　<title>...</title>:文件题目。
　　<hi>...</hi>:i=1,2,...,6,网页标题。
　　<hr>:产生水平线。
　　<br>:强迫换行。
　　<p>...</p>:文件段落。
　　<pre>...</pre>:以原始格式显示。
　　<address>...</address>：标注联络人姓名、电话、地址等信息。
　　<blockquote>...</blockquote>:区段引用标记。
　　2.3字符格式标记(Character Formatting Tags)
 　　用来改变HTML文件文字的外观，增加文件的美观程度。主要有：
　　<b>...</b>:粗体字。
　　<i>...</i>:斜体字。
　　<tt>...</tt>:打字体。
　　<font>...</font>:改变字体设置。
　　<center>...</center>:居中对齐。
　　<blink>...</blink>:文字闪烁。
　　<big>...</big>:加大字号。
　　<small>...</small>:缩小字号。
　　<cite>...</cite>:参照。
　　2.4列表标记(List Tags)
　　<ul>...</ul>:无编号列表。
　　<ol>...</ol:有编号列表。
　　<li>...</li>:列表项目。
　　<dl>...</dl>:定义式列表。
　　<dd>...</dd>:定义项目。
　　<dt>...</dt>:定义项目。
　　<dir>...</dir>:目录式列表。
　　<menu>...</menu>:菜单式列表。
　　2.5链接标记(Anchor Tag)
 　　链接可以说是html超文本文件的命脉，html通过链接标记来整合分散在世界各地的图、文、影、音等信息。此类标记的主要用途为标示超文本文件链接(Hypertext Link)，主要有：
<a>...</a>:建立超级链接。
　　2.6多媒体标记(Multimedia Tag)
 　　此类标记用来显示图像数据。主要有：
　　<img>:嵌入图像。
　　<embed>:嵌入多媒体对象。
　　<bgsound>:背景音乐。
　　2.7表格标记(Table Tags)
　　此类标记用制作表格。主要有：
　　<table>...</table>:定义表格区段。
　　<caption>...</caption>:表格标题。
　　<th>...</th>:表头。
　　<tr>...</tr>:表格列。
　　<td>...</td>:表格单元格。
　　2.8表单标记(Form Tags)
　　此类标记用来制作交互式表单，主要的有：
　　<Form>...</form>:表明表单区段的开始与结束。
　　<input>:产生单行文本框、单选按钮、复选框等。
　　<textarea>...</textarea>:产生多行输入文本框。
　　<select>...</select>:标明下拉列表的开始与结束。
　　<option>...</option>:在下拉列表中产生一个选择项目。
　　HTML标记并没有大小写之分，即<BODY>和<body>是相同的。以下来分别介绍这些标记。

　　3. 文件结构标记
 　　一个html文件的结构基本上可以分为两部分，一部分称为标题区(Head Section)；另一部分称为主体区(Body Section)。文件结构标记就是用来标示出何处属于标题，何处属于主体。
　　3.1<html>：标示整份文件
 　　用途：标示整篇html文件
　　说明：一个标准的html文件是一篇以<html>开头，而以</html>结束的文件。即：
　　<html>
　　... html文件全文
　　</html>
　　3.2<head>:标示出文件标题区
　　说明：html文件中，由<head>和</head>所夹住的区域称为文件的标题区。通常head区段都内含在html区段之中，即：
　　<html>
　　<head>
　　...... html文件标题区
　　</head>
　　.....
　　</html>
　　3.3<title>:网页标题
 　 　<title>.....</title>是html文件标题区中最重要也是最常用的标记。其他标题区的标记还包括< base>、<isindex>、<link>、<nextid>、<meta>等。
　 　<title>标记的用途是设置网页标题，这个标题会显示在浏览器窗口的标题栏上，不会出现在浏览器的页面(page)文字中。而大部分浏 览器的收藏(My Favorites)、书签(BookMark)或历史记录列表(History List)功能，也都是以这个文件的标题作为名称的。
　　由<title>...</title>所标注的文字并无长度的限制，不过太长的标题，有时可能会被截掉，并且也不容易记忆。
　　3.4<body>:标示出文件主体区
　　说明：在html文件中，由<body>...</body>所夹住的区域称为文件的主体区，通常是在<head>区段之后。
　　3.5<body>标记的属性
 backgroud属性：
这个属性可以指定一个图形文件(一般为gif或jpeg)，作为背景图案。该图形会像拼瓷砖一样铺成整个网页的底图。


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Wed, 11 Jun 2008 17:21:25 +0800 http://ice-cream.javaeye.com/blog/202240 http://ice-cream.javaeye.com/blog/202240 关于背景图片的定位(background-position) ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/201365  发表时间: 2008年06月08日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

    最近仔细研究了一下关于css 背景图片的定位问题，也许有的朋友会认为这是个简单的问题，以至于在网上很难搜到关于background-position的详细解释，能搜到的帖子基本上都是千篇一律的把概念复制一下贴出来的。
    不过在这里我还是先要把概念再罗嗦一遍(不想看的朋友可以直接跳过这个部分)

语法：
    background-position : length || length
    background-position : position || position

取值：
    length : 百分数 | 由浮点数字和单位标识符组成的长度值。
    position : top | center | bottom | left | center | right

说明：
    设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。
    默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
    如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
    如果设置值为 right center，因为 right 作为横坐标值将会覆盖 center 值，所以背景图片将被居右定位。
对应的脚本特性为 backgroundPosition 。

background-position -- 定义背景图片的位置

取值:
[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ] ] 
 * 水平
 left: 左
 center: 中
 right: 右
 * 垂直
 top: 上
 center: 中
 bottom: 下
* 垂直与水平的组合
 x-% y-%
 x-pos y-pos

 初始值: 0% 0%
 继承性: 否
 适用于: 所有元素
 background:背景.position:位置.

以下就是我要重点讲解的地方：

<!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" lang="UTF-8">
<head>
<title>background-position定位问题</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
} 

body {
text-align:center;
background:#000;
}

#container{
width:1000px;
margin:0 auto;
background:#fff url(images/bg.jpg) no-repeat left top;
height:500px;
}
-->
</style>
</head>
<body>
<div id="container"> </div>
</body>
</html>

 

1.

background-position:left top;(见图1).

背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。

等同于 background-position:0,0;

也等同于background-position:0%,0%;

2.

background-position:right bottom;(见图2)。

背景图片的右下角和容器(container)的右下角对齐，超出的部分隐藏。

等同于background-positon:100%,100%;

也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

3.

background-position:500px 15px；(见图3)。

背景图片从容器(container)左上角的地方向右移500px,向下移15px，超出的部分隐藏。

4.

background-position:-500px -15px;(见图4)。

背景图片从容器(container)左上角的地方向左移500px，向上移15px，超出的部分隐藏。

5.

background-position:50% 50%;(见图5)。

等同于left：{容器(container)的宽度—背景图片的宽度}*left百分比，超出的部分隐藏。

等同于right：{容器(container)的高度—背景图片的高度}*right百分比，超出的部分隐藏。

例如：background-position:50% 50%;就是background-position:(1000-2000)*50%px,(500-30)*50%px;即background-position:-500px,235px;也就是背景图片从容器(container)的左上角向左移500px，向下移235px；

6.（这种情况背景图片应该用bg2.jpg才能看出效果,bg.jpg的高度太小效果不明显）

background-position:-50% -50%;(见图6)。

等同于left：-{{容器(container)的宽度—背景图片的宽度}*left百分比（百分比都取正值）}，超出的部分隐藏。

等同于right：-{{容器(container)的高度—背景图片的高度}*right百分比（百分比都取正值）}，超出的部分隐藏。

例如：background-position:-50% -50%;就是background-position:-{(1000-500)*50%}px,-{(500-360)*50%}px;即background- position:-250px,-70px;也就是背景图片从容器(container)的左上角向左移250px，向上移70px；


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Sun, 08 Jun 2008 16:37:03 +0800 http://ice-cream.javaeye.com/blog/201365 http://ice-cream.javaeye.com/blog/201365 《无懈可击》读后筛选 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/199225  发表时间: 2008年06月01日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

1.

a：通常ie5/win中字的现实结果总是要比其他浏览器整整大一号，为了让所有浏览器兼容，我们需要利用CSS hack。

body{
         font-size:x-small;/* for IE5/Win */
         voice-family:"\"}\"";
         voice-family:inherit;
         font-size:small;/for compliant  browsers */
}

html>body{/* be nice to Opera */
          font-size:small;
}

只有IE5/Win能识别出

voice-family:"\"}\"";

这个结束的大括号,于是它会认为CSS规则已经结束。 Firefox、Opera等浏览器支持子选择器（>），而IE不识别（包括IE7）。

对于其他所有兼容浏览器，我们在后面用small覆盖了x-small。上面的第二个声明，我们称这个规则为“对Opera”友好的规则，因为它能防止Opera浏览器（以及某些其他浏览器）潜在地忽略掉hack代码之后的规则。

如果使用了Box Model Hack，这句声明就应该也要用上，它本质上确保了所有浏览器都能完整读取样式表中的下一条声明。

b：如果使用SBMH，那么我们前面的例子解决起来就更简单更明了一些

body{
         font-size:small;
}
*html body{
          font-size:x-small;/* for IE5/Win */
          f\ont-size:small;/* for other IE versions */
}

 *html 选择器来提供专门用于IE浏览器的声明。IE5/Win会忽略font-size属性中的反斜杠。

2.清浮动(:after伪类)

div:after{
              content:".";
              display:block;
              height:0;
              clear:both;
              visibility:hidden;
}
 
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Sun, 01 Jun 2008 22:04:39 +0800 http://ice-cream.javaeye.com/blog/199225 http://ice-cream.javaeye.com/blog/199225 相对定位和绝对定位 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/198580  发表时间: 2008年05月30日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

http://www.blueidea.com/tech/web/2007/4601.asp


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Fri, 30 May 2008 11:03:36 +0800 http://ice-cream.javaeye.com/blog/198580 http://ice-cream.javaeye.com/blog/198580 博客模板设计比赛 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/189492  发表时间: 2008年05月04日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

http://webmaster.javaeye.com/blog/188415

昨天晚上我做了一个版本，时间仓促，自己都觉得很一般，有好建议大家帮忙提哦，然后我抽时间再做一个版本


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Sun, 04 May 2008 19:38:46 +0800 http://ice-cream.javaeye.com/blog/189492 http://ice-cream.javaeye.com/blog/189492 jQuery插件 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/187770  发表时间: 2008年04月28日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

文件上传(File upload)

Ajax File Upload .
jQUploader .
Multiple File Upload plugin .
jQuery File Style .
Styling an input type file .
Progress Bar Plugin .

表单验证(Form Validation)

jQuery Validation .
Auto Help .
Simple jQuery form validation .
jQuery XAV - form validations .
jQuery AlphaNumeric .
Masked Input .
TypeWatch Plugin .
Text limiter for form fields .
Ajax Username Check with jQuery .

表单－选取框(Form - Select Box stuff)

jQuery Combobox .
jQuery controlled dependent (or Cascadign) Select List .
Multiple Selects .
Select box manipulation .
Select Combo Plugin .
jQuery - LinkedSelect
Auto-populate multiple select boxes .
Choose Plugin (Select Replacement) .

表单基本、输入框、选择框等(Form Basics, Input Fields, Checkboxes etc.)

jQuery Form Plugin .
jQuery-Form .
jLook Nice Forms .
jNice .
Ping Plugin .
Toggle Form Text .
ToggleVal .
jQuery Field Plugin .
jQuery Form’n Field plugin .
jQuery Checkbox manipulation .
jTagging .
jQuery labelcheck .
Overlabel .
3 state radio buttons .
ShiftCheckbox jQuery Plugin .
Watermark Input .
jQuery Checkbox (checkboxes with imags) .
jQuery SpinButton Control .
jQuery Ajax Form Builder .
jQuery Focus Fields .
jQuery Time Entry .

时间、日期和颜色选取(Time, Date and Color Picker)

jQuery UI Datepicker .
jQuery date picker plugin .
jQuery Time Picker .
Time Picker .
ClickPick .
TimePicker .
Farbtastic jQuery Color Picker Plugin .
Color Picker by intelliance.fr .

投票插件(Rating Plugins)

jQuery Star Rating Plugin .
jQuery Star Rater .
Content rater with asp.net, ajax and jQuery .
Half-Star Rating Plugin .

搜索插件(Search Plugins)

jQuery Suggest .
jQuery Autocomplete .
jQuery Autocomplete Mod .
jQuery Autocomplete by AjaxDaddy .
jQuery Autocomplete Plugin with HTML formatting .
jQuery Autocompleter .
AutoCompleter (Tutorial with PHP&MySQL) .
quick Search jQuery Plugin .

编辑器(Inline Edit & Editors)

jTagEditor .
WYMeditor .
jQuery jFrame .
Jeditable - edit in place plugin for jQuery .
jQuery editable .
jQuery Disable Text Select Plugin .
Edit in Place with Ajax using jQuery .
jQuery Plugin - Another In-Place Editor .
TableEditor .
tEditable - in place table editing for jQuery .

多媒体、视频、Flash等(Audio, Video, Flash, SVG, etc)

jMedia - accessible multi-media embedding .
JBEdit - Ajax online Video Editor .
jQuery MP3 Plugin .
jQuery Media Plugin .
jQuery Flash Plugin .
Embed QuickTime .
SVG Integration .

图片(Photos/Images/Galleries)

ThickBox .
jQuery lightBox plugin .
jQuery Image Strip .
jQuery slideViewer .
jQuery jqGalScroll 2.0 .
jQuery - jqGalViewII .
jQuery - jqGalViewIII .
jQuery Photo Slider .
jQuery Thumbs - easily create thumbnails .
jQuery jQIR Image Replacement .
jCarousel Lite .
jQPanView .
jCarousel .
Interface Imagebox .
Image Gallery using jQuery, Interface & Reflactions .
simple jQuery Gallery .
jQuery Gallery Module .
EO Gallery .
jQuery ScrollShow .
jQuery Cycle Plugin .
jQuery Flickr .
jQuery Lazy Load Images Plugin .
Zoomi - Zoomable Thumbnails .
jQuery Crop - crop any image on the fly .
Image Reflection .

Google地图（Google Map）

jQuery Plugin googlemaps .
jMaps jQuery Maps Framework .
jQmaps .
jQuery & Google Maps .
jQuery Maps Interface forr Google and Yahoo maps .
jQuery J Maps - by Tane Piper .

游戏(Games)

Tetris with jQuery .
jQuery Chess .
Mad Libs Word Game .
jQuery Puzzle .
jQuery Solar System (not a game but awesome jQuery Stuff) .

表格等(Tables, Grids etc.)

UI/Tablesorter .
jQuery ingrid .
jQuery Grid Plugin .
Table Filter - awesome! .
TableEditor .
jQuery Tree Tables .
Expandable “Detail” Table Rows .
Sortable Table ColdFusion Costum Tag with jQuery UI .
jQuery Bubble .
TableSorter .
Scrollable HTML Table .
jQuery column Manager Plugin .
jQuery tableHover Plugin .
jQuery columnHover Plugin .
jQuery Grid .
TableSorter plugin for jQuery .
tEditable - in place table editing for jQuery .
jQuery charToTable Plugin .
jQuery Grid Column Sizing .
jQuery Grid Row Sizing .

统计图(Charts, Presentation etc.)

jQuery Wizard Plugin .
jQuery Chart Plugin .
Bar Chart .

边框、圆角、背景(Border, Corners, Background)

jQuery Corner .
jQuery Curvy Corner .
Nifty jQuery Corner .
Transparent Corners .
jQuery Corner Gallery .
Gradient Plugin .

文字和超链接(Text and Links)

jQuery Spoiler plugin .
Text Highlighting .
Disable Text Select Plugin .
jQuery Newsticker .
Auto line-height Plugin .
Textgrad - a text gradient plugin .
LinkLook - a link thumbnail preview .
pager jQuery Plugin .
shortKeys jQuery Plugin .
jQuery Biggerlink .
jQuery Ajax Link Checker .

鼠标提示（Tooltips）

jQuery Plugin - Tooltip .
jTip - The jQuery Tool Tip .
clueTip .
BetterTip .
Flash Tooltips using jQuery .
ToolTip .

菜单和导航(Menus, Navigations)

jQuery Tabs Plugin - awesome! . [demo nested tabs .]
another jQuery nested Tab Set example (based on jQuery Tabs Plugin) .
jQuery idTabs .
jdMenu - Hierarchical Menu Plugin for jQuery .
jQuery SuckerFish Style .
jQuery Plugin Treeview .
treeView Basic .
FastFind Menu .
Sliding Menu .
Lava Lamp jQuery Menu .
jQuery iconDock .
jVariations Control Panel .
ContextMenu plugin .
clickMenu .
CSS Dock Menu .
jQuery Pop-up Menu Tutorial .
Sliding Menu .

http://stilbuero.de/jquery/tabs_3/

幻灯、翻转等(Accordions, Slide and Toggle stuff)

jQuery Plugin Accordion .
jQuery Accordion Plugin Horizontal Way .
haccordion - a simple horizontal accordion plugin for jQuery .
Horizontal Accordion by portalzine.de .
HoverAccordion .
Accordion Example from fmarcia.info .
jQuery Accordion Example .
jQuery Demo - Expandable Sidebar Menu .
Sliding Panels for jQuery .
jQuery ToggleElements .
Coda Slider .
jCarousel .
Accesible News Slider Plugin .
Showing and Hiding code Examples .
jQuery Easing Plugin .
jQuery Portlets .
AutoScroll .
Innerfade .

拖放插件(Drag and Drop)

UI/Draggables .
EasyDrag jQuery Plugin .
jQuery Portlets .
jqDnR - drag, drop resize .
Drag Demos .

XML XSL JSON Feeds

XSLT Plugin .
jQuery Ajax call and result XML parsing .
xmlObjectifier - Converts XML DOM to JSON .
jQuery XSL Transform .
jQuery Taconite - multiple Dom updates .
RSS/ATOM Feed Parser Plugin .
jQuery Google Feed Plugin .

浏览器(Browserstuff)

Wresize - IE Resize event Fix Plugin .
jQuery ifixpng .
jQuery pngFix .
Link Scrubber - removes the dotted line onfocus from links .
jQuery Perciformes - the entire suckerfish familly under one roof .
Background Iframe .
QinIE - for proper display of Q tags in IE .
jQuery Accessibility Plugin .
jQuery MouseWheel Plugin .

对话框、确认窗口(Alert, Prompt, Confirm Windows)

jQuery Impromptu .
jQuery Confirm Plugin .
jqModal .
SimpleModal .

CSS

jQuery Style Switcher .
JSS - Javascript StyleSheets .
jQuery Rule - creation/manipulation of CSS Rules .
jPrintArea .

DOM、AJAX和其它JQuery插件（DOM, Ajax and other jQuery plugins）

FlyDOM .
jQuery Dimenion Plugin .
jQuery Loggin .
Metadata - extract metadata from classes, attributes, elements .
Super-tiny Client-Side Include Javascript jQuery Plugin .
Undo Made Easy with Ajax .
JHeartbeat - periodically poll the server .
Lazy Load Plugin .
Live Query .
jQuery Timers .
jQuery Share it - display social bookmarking icons .
jQuery serverCookieJar .
jQuery autoSave .
jQuery Puffer .
jQuery iFrame Plugin .
Cookie Plugin for jQuery .
jQuery Spy - awesome plugin .
Effect Delay Trick .
jQuick - a quick tag creator for jQuery .
Metaobjects .
elementReady .


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Mon, 28 Apr 2008 21:29:43 +0800 http://ice-cream.javaeye.com/blog/187770 http://ice-cream.javaeye.com/blog/187770 javaScript DOM特性/方法 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/187246  发表时间: 2008年04月27日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

❑ DOM的核心： Node
由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象：
Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：

Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点
Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode
Node.ENTITY_REFERENCE_NODE (5) 
Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点
Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点
Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>
Node.DOCUMENT_FRAGMENT_NODE (11)
Node.NOTATION_NODE (12) //DTD中的Nation定义

❑ Node接口包含的特性/方法
节点的属性
nodeName 属性将返回一个字符串，其内容是给定节点的名字。如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text 的字符串；

nodeType 属性将返回一个整数，这个数值代表给定节点的类型
nodeValue 属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容；

ownerDocument 指向这个节点所属的文档
attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点

childNodes 所有子节点的列表
firstChild 指向在childNodes列表中的第一个节点
lastChild 指向在childNodes列表中的最后一个节点
nextSibling 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null
previousSibling 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null
parentNode 返回一个给定节点的父节点

❑ hasChildNodes() 当childNodes包含一个或多个节点时，返回真
❑ appendChild(node) 将node添加到childNodes的末尾
❑ removeChild(node) 将node从childNodes中删除

❑ insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

  ❑ replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

 ❑ 获得Node：

/* 通过document对象 */
var oHtml = document.documentElement;


/* 得到<head />和<body /> */
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
/* 可以用这种方式 */
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
/* 也可以使用方法获取数组的索引值 */
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
/* 使用document.body来得到<body /> */
var oBody = document.body;

❑ createElement(element)
创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。
eg) var para = document.createElement("p");
document.body.appendChild(para);

❑ createTextNode()
创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针：
reference = document.createTextNode()
参数为新建文本节点所包含的文本字符串

var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);

 ❑ cloneNode()
reference = node.cloneNode(deep)
为给定节点创建一个副本，参数为 true 或者 false，true 表示同时复制该节点的子节点，false 则不复制任何子节点。

var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.body.appendChild(para);
var newpara = para.cloneNode(true);
document.body.appendChild(newpara);


❑ 检测节点类型
通过使用nodeType特性检验节点类型：
alert(document.nodeType); //outputs "9"
alert(document.documentElement.nodeType); //outputs "1"
这个例子中，document.nodeType返回9，等于Node.DOCUMENT_NODE；同时document. documentElement.nodeType返回1，等于Node.ELEMENT_NODE。

也可以用Node常量来匹配这些值：
alert(document.nodeType == Node.DOCUMENT_NODE); //true
alert(document.documentElement.nodeType == Node.ELEMENT_NODE); //true

这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari 1.0+上正常运行。但是IE不支持这些常量，所以这些代码在IE上会产生错误。


❑ 处理特性
即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。
Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法：
getNamedItem(name) 返回nodeName属性值等于name的节点；
removeNamedItem(name) 删除nodeName属性值等于name的节点；
setNamedItem(node) 将node添加到列表中，按其nodeName属性进行索引；
item(pos)  像NodeList一样，返回在位置pos的节点；

请记住这些方法都是返回一个Attr节点，而非特性值。
NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。

当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，它的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。
例如，假设有这样一个元素：
<p id="p1" style="color:red">hello world!</p>

假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值：
var sId = oP.attributes.getNamedItem("id").nodeValue; //p1
或者
var sId = oP.attributes.item(0).nodeValue;

还可以通过给nodeValue属性赋新值来改变id特性：
oP.attributes.getNamedItem("id").nodeValue = "newId";

Attr节点也有一个完全等同于（同时也完全同步于）nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。

因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性：
getAttribute(name) 等于attributes.getNamedItem(name).value；
setAttribute(name, newvalue) 等于attribute.getNamedItem(name).value = newvalue；
removeAttribute(name) 等于attributes.removeNamedItem(name)

要获取前面用的<p/>的id特性，只需这样做：
var sId = oP.getAttribute("id");
更改ID:
oP.setAttribute("id", "newId");


❑ setAttribute()
element.setAttribute(attributeName,attributeValue);
为给定元素节点添加一个新的属性值或是改变它的现有属性

❑ getAttribute
attributeValue = element.getAttribute(attributeName)
返回一个给定元素的一个给定属性节点的值。

❑ getElementById()
element = document.getElementById(ID)
寻找一个有着给定 id 属性值的元素，返回一个元素节点

❑ getElementsByName()
用来获取所有name特性等于指定值的元素：
elements = document.getElementsByName(tagName)
返回一个节点集合。

❑ getElementsByTagName()
用于寻找有着给定标签名的所有元素：
elements = document.getElementsByTagName(tagName)
返回一个节点集合。

❑ 生成与操作Node
createAttribute(name) ：创建一个名为name的属性节点。
createCDATASection(text) ：创建一个子节点为text的CDATA区。
createComment(text) ：创建一个注释内容为text的注释节点。
createDocumentFragment() ：创建一个文档片断（fragment）节点。
createElement(tagName) ：创建一个名为tagName的元素节点。
createEntityReference(name) ：Creates an entity reference node with the given name。
createProcessingInstruction(target, data) ：Creates a PI node with the given target and data。
createTextNode(text) ：创建一个包含text的文本节点。
其中最重要的方法是createElement(),createDocumentFragment(), create TextNode()。

/*使用createElement(),createTextNode(),appendChild()动态添加节点*/
function createMessage(){
 var op = document.createElement("p");
 var oText = document.createTextNode("hello world!");
 op.appendChild(oText);
 document.body.appendChild(op);
}

❑ 使用createDocumentFragment()

//通常做法
var arrText = ['first', 'second', 'third'];
for(var i=0; i<arrText.length; i++){
	var op = document.createElement('p');
	var oText = document.createTextNode(arrText[i]);
	op.appendChild(oText);
	document.body.appendChild(op);
}

//使用documentFragment
var arrText = ['first', 'second', 'third'];
var oFragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++){
	var op = document.createElement('p');
	var oText = document.createTextNode(arrText[i]);
	op.appendChild(oText);
	oFragment.appendChild(op);
}
document.body.appendChild(oFragment);

  通过DocumentFragment的方式效率更高。

❑ HTML DOM：
使用DOM的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如
使用DOM core：oImg.setAttribute("src", "picture.gif");
使用HTML DOM：oImg.src = "picture.jpg";

 

附件是javascript dom 手册，可以方便查阅


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Sun, 27 Apr 2008 12:28:51 +0800 http://ice-cream.javaeye.com/blog/187246 http://ice-cream.javaeye.com/blog/187246 分页效果 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/183869  发表时间: 2008年04月17日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

还不错的分页效果，暂时用不上，收藏一下,见附件
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Thu, 17 Apr 2008 18:40:53 +0800 http://ice-cream.javaeye.com/blog/183869 http://ice-cream.javaeye.com/blog/183869 动画效果打开关闭图层 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/183359  发表时间: 2008年04月16日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>move</title>
<style type="text/css">
body{
font-size:12px;
color:#849BCA;
}

#btn{
float:left;
}

#move{
width:500px;
height:200px;
background:#EDF1F8;
border: 2px solid #849BCA;
float:left;
overflow:hidden;
position:absolute;
left:80px;
top:50px;
cursor:move;
}

.content{
padding:10px;
}
</style>
</head>
<body>
<div id="btn">
<input type="button" value="打开" onclick="sw(this,'move');"/>
</div>
<div id="move" style="display:none;filter:alpha(opacity=100);opacity:1;">
<div class="content">移动层</div>
</div>

<script type="text/javascript">
var prox;
var proy;
var proxc;
var proyc;

function sw(o,id){
if (o.value=="打开"){
o.value="关闭";
show(id)
}
else{
o.value="打开"
close(id)
}
}

function show(id){/*--打开--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
o.style.display = "block";
o.style.width = "1px";
o.style.height = "1px";
prox = setInterval(function(){openx(o,500)},10);
}

function openx(o,x){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx < x){
o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
}
else{
clearInterval(prox);
proy = setInterval(function(){openy(o,200)},10);
}
}

function openy(o,y){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy < y){
o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
}
else{
clearInterval(proy);
}
}

function close(id){/*--关闭--*/
clearInterval(prox);
clearInterval(proy);
clearInterval(proxc);
clearInterval(proyc);
var o = document.getElementById(id);
if(o.style.display == "block"){
proyc = setInterval(function(){closey(o)},10);
}
}

function closey(o){/*--打开y--*/
var cy = parseInt(o.style.height);
if(cy > 0){
o.style.height = (cy - Math.ceil(cy/5)) +"px";
}
else{
clearInterval(proyc);
proxc = setInterval(function(){closex(o)},10);
}
}

function closex(o){/*--打开x--*/
var cx = parseInt(o.style.width);
if(cx > 0){
o.style.width = (cx - Math.ceil(cx/5)) +"px";
}
else{
clearInterval(proxc);
o.style.display = "none";
}
}
/*-------------------------鼠标拖动---------------------*/
var od = document.getElementById("move");
var dx,dy,mx,my,mouseD;
var odrag;
var isIE = document.all ? true : false;
document.onmousedown = function(e){
var e = e ? e : event;
mouseD = true;
}
document.onmouseup = function(){
mouseD = false;
odrag = "";
if(isIE)
{

od.filters.alpha.opacity = 100;
}
else
{

od.style.opacity = 1;
}
}

od.onmousedown = function(e){
odrag = this;
var e = e ? e : event;
mx = e.clientX;
my = e.clientY;
od.style.left = od.offsetLeft + "px";
od.style.top = od.offsetTop + "px";
if(isIE){
od.filters.alpha.opacity = 50;
}
else{
od.style.opacity = 0.5;
}
}
document.onmousemove = function(e){
var e = e ? e : event;
if(odrag){
var mrx = e.clientX - mx;
var mry = e.clientY - my;
od.style.left = parseInt(od.style.left) +mrx + "px";
od.style.top = parseInt(od.style.top) + mry + "px";
mx = e.clientX;
my = e.clientY;
}
}
</script>
</body>
</html>
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Wed, 16 Apr 2008 13:45:51 +0800 http://ice-cream.javaeye.com/blog/183359 http://ice-cream.javaeye.com/blog/183359 很炫的图片循环效果 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/183237  发表时间: 2008年04月16日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/Strict.dtd">

<html lang="en">
<head>
<style>
<!--
body{ margin:1% 0 0 1%; font-family:Arial,Verdana,Helvetica,sans-serif;font-size:75%;}

img{ border:0; }

a:link, a:visited, a:active{ text-decoration:none;color:#0a84c1;font-size:1em;font-weight:bold; }

a:hover{ text-decoration:none;color:#f59000;font-size:1em;font-weight:bold; }

#hotel_display{ background:#fff; width:269px; padding:10px;}

.title_top{ background:url(http://www.javaeye.com/upload/picture/pic/12025/b5e42408-d9d1-3c50-9cad-b719476e9c4d.gif?1208313629) no-repeat;padding:8px 0 8px 25px; }

.title_btm{ background:url(http://www.javaeye.com/upload/picture/pic/12023/7f74e0a9-e25d-3a08-beb5-33179fd4f058.gif?1208313628) no-repeat;padding:8px 0 8px 25px;color:#f59000;font-weight:bold; }
-->
</style>
<script type="text/javascript">
<!--
var idxCurrentPromo = 0;
var blnRotation = false;
var numOpenPromoHeight = 190;
var numSlideFactor = .25;
var numRotationTime = 5000;

function initPromos() {
    switchPromos(idxCurrentPromo, blnRotation);
}

function QSinfo(link, strIDs, MoreQS) {
    var strHREF = "";

    if (strIDs && strIDs != "")    strHREF = strIDs;
   
    if (MoreQS && MoreQS != ""){
        strHREF = (strHREF!="")? strHREF + "&" + MoreQS : MoreQS;
    }
   
    if ((strHREF != "") && (link.href.indexOf(".") > 0)) {
        if (link.href.indexOf("?") < 0) link.href += "?" + strHREF;
           else link.href += "&" + strHREF;
    }
    return(0);
}numRotationTime

function checkTravelYear(vYear){
var intYear = parseInt("0" + String(vYear),10);
if(intYear < 100) {intYear += 2000;}
return(intYear);
}
function lpad(n, len, ch) {
var s = new String(n);
while (s.length < len) s = ch + s;
return s;
}

function switchPromosByProduct(productForm, keepRotating) {
    for (var i=0; i<promoCount; i++) {
        var strThisForm = "search_" + arrPromoProducts[i];
        if (productForm == strThisForm) {
            switchPromos(i, keepRotating);
            i=promoCount;
        }
    }
}

function switchPromos(promoNumber, keepRotating) {
    var endRotationHack = true;
    var idxOldPromo = idxCurrentPromo;
    idxCurrentPromo = new Number(promoNumber);
   
    if (blnRotation) {
        if (!keepRotating) {
            blnRotation = false;
        } else {
            var idxNextPromoR = (idxCurrentPromo + 1) % promoCount;
            setTimeout('switchPromos(' +idxNextPromoR + ',true)',numRotationTime);
        }
    } else {
        if (keepRotating) {
            endRotationHack = false;
        }
    }

    if(endRotationHack) {
        for (var i=0; i<promoCount; i++) {
            if (i == idxOldPromo) {
                document.getElementById("promo" +i+ "_on").style.height = "190px";
                document.getElementById("promo" +i+ "_on").style.display = "block";
                document.getElementById("promo" +i+ "_on_img").style.height = "190px";
                document.getElementById("promo" +i+ "_on_img").style.display = "block";
            } else {
                document.getElementById("promo" +i+ "_on").style.height = "0px";
                document.getElementById("promo" +i+ "_on").style.display = "none";
                document.getElementById("promo" +i+ "_on_img").style.height = "0px";
                document.getElementById("promo" +i+ "_on_img").style.display = "none";
            }
            if (i == idxCurrentPromo) {
                document.getElementById("promo" +i).style.display = "none";
                document.getElementById("promo" +i + "_exp").style.display = "block";
            } else {
                document.getElementById("promo" +i).style.display = "block";
                document.getElementById("promo" +i + "_exp").style.display = "none";
            }
        }
       
        if (parseInt(idxCurrentPromo) != parseInt(idxOldPromo)) {
            animatePromos(idxOldPromo, idxCurrentPromo);
        }
    }
}

function animatePromos(numOldPromo, numNewPromo) {
    var objNewPromoOpen = document.getElementById("promo" + numNewPromo.toString() + "_on");
    var objNewPromoOpenImg = document.getElementById("promo" + numNewPromo.toString() + "_on_img");
    objNewPromoOpen.style.display = "block";
    objNewPromoOpenImg.style.display = "block";

    startPromoAnimation = setInterval("playAccordian(" +numOldPromo +"," +numNewPromo + ")",5);
}

function playAccordian(numOldPromo, numNewPromo) {
    var objOldPromoOpen = document.getElementById("promo" + numOldPromo.toString() + "_on");
    var objOldPromoOpenImg = document.getElementById("promo" + numOldPromo.toString() + "_on_img");
    var objNewPromoOpen = document.getElementById("promo" + numNewPromo.toString() + "_on");
    var objNewPromoOpenImg = document.getElementById("promo" + numNewPromo.toString() + "_on_img");
   
    if ((parseInt(objOldPromoOpen.style.height) > 3) && (parseInt(objOldPromoOpenImg.style.height) > 3) && (parseInt(objNewPromoOpen.style.height) < numOpenPromoHeight-2) && (parseInt(objNewPromoOpenImg.style.height) < numOpenPromoHeight-2)) {
        objOldPromoOpen.style.height = (parseInt(objOldPromoOpen.style.height) - parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
        objOldPromoOpenImg.style.height = (parseInt(objOldPromoOpenImg.style.height) - parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
        objNewPromoOpen.style.height = (parseInt(objNewPromoOpen.style.height) + parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
        objNewPromoOpenImg.style.height = (parseInt(objNewPromoOpenImg.style.height) + parseInt(numOpenPromoHeight*numSlideFactor)).toString() + "px";
    } else {
        objOldPromoOpen.style.height = "0px";
        objOldPromoOpen.style.display = "none";
        objOldPromoOpenImg.style.height = "0px";
        objOldPromoOpenImg.style.display = "none";
        objNewPromoOpen.style.height = numOpenPromoHeight+"px";
        objNewPromoOpenImg.style.height = numOpenPromoHeight+"px";
        clearInterval(startPromoAnimation);
    }
}
-->
</script>
</head>
<body style="background:#a5a5a5;">
<script language="JavaScript" type="text/javascript">
<!--
blnRotation = true;
promoCount = 3;
var arrPromoProducts = ["htl","air","vac"];
-->
</script>
<div id="hotel_display">
    <div style="display: none;" id="promo0" class="title_top"><a href="javascript:switchPromos(0, false);">hotels - up to half off</a></div>
    <div style="display: block;" id="promo0_exp" class="title_btm"><span>hotels - up to half off</span></div>
    <div style="height: 190px; display: block;" id="promo0_on" class="openpromo">
        <a onclick="switchPromos(0, false);QSinfo(this, 'irefid=HPDEALS1&irefclickid=nyop_hotels');" href="#"><img style="height: 190px; display: block;" id="promo0_on_img" src="images/img1.jpg" alt="title1" height="190" width="267"></a>
    </div>

    <div style="display: block;" id="promo1" class="title_top"><a href="javascript:switchPromos(1, false);">spring deals on air + car</a></div>
    <div style="display: none;" id="promo1_exp" class="title_btm"><span>spring deals on air + car</span></div>
    <div style="height: 0px; display: none;" id="promo1_on" class="openpromo">
        <a onclick="switchPromos(1, false);QSinfo(this, 'irefid=HPDEALS2&irefclickid=air+car_spring');" href="#"><img style="height: 0px; display: none;" id="promo1_on_img" src="images/img2.jpg" alt="title2" height="190" width="267"></a>
    </div>

    <div style="display: block;" id="promo2" class="title_top"><a href="javascript:switchPromos(2, false);">save up to $150 instantly</a></div>
    <div style="display: none;" id="promo2_exp" class="title_btm"><span>save up to $150 instantly</span></div>
    <div style="height: 0px; display: none;" id="promo2_on" class="openpromo">
        <a onclick="switchPromos(2, false);QSinfo(this, 'irefid=HPDEALS3&irefclickid=oneweek_vpsale');" href="#"><img style="height: 0px; display: none;" id="promo2_on_img" src="images/img3.jpg" alt="title3" height="190" width="267"></a>
    </div>
</div>
<script type="text/javascript" language="JavaScript">
<!--
    initPromos();
// -->
</script>
</body>
</html>


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Wed, 16 Apr 2008 10:49:58 +0800 http://ice-cream.javaeye.com/blog/183237 http://ice-cream.javaeye.com/blog/183237 用条件注释为IE隔离CSS ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/179924  发表时间: 2008年04月06日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

用条件注释让你指定把样式应用给哪个IE版本，如
<!-- [if Ite IE 6] >
<link href="IE_styles.css" rel="stylesheet" type="text/css" />
<!-- [endif] -->
或者，利用@import方法：
<!-- [if Ite IE 6]>
<style type="text/css">
@import url(IE_styles.css)
</style>
<! [endif] -->
这个Ite代表“less than or equal to (小于或等于)”，因此if Ite IE 6意思是“如果这个浏览器是IE6或者更早版本"
再如，把所有浏览器，IE6，IE5或者更早版本的样式表分别指定：
<link href="global_styles.css" rel="stylesheet" type="text/css" />
<!-- [if IE 6] >
<link href="IE6_styles.css" rel="stylesheet" type="text/css" />
<!-- [endif] -->
<!-- [if Ite IE 5] >
<link href="IE5_styles.css" rel="stylesheet" type="text/css" />
<!-- [endif] -->
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Sun, 06 Apr 2008 23:04:54 +0800 http://ice-cream.javaeye.com/blog/179924 http://ice-cream.javaeye.com/blog/179924 实用的js动画 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/179323  发表时间: 2008年04月03日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！ 

<!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>
<script type="text/javascript">
<!--
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != 'function'){
		window.onload = func;
	}
	else{
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

function moveElement(elementID,final_x,final_y,interval){
	if(!document.getElementById) return false;
	if(!document.getElementById(elementID)) return false;
	var elem = document.getElementById(elementID);
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if(xpos == final_x && ypos == final_y){
		return true;
	}
	if(xpos < final_x){
		xpos++;
	}
	if(xpos > final_x){
		xpos--;
	}
	if(ypos < final_y){
		ypos++;
	}
	if(ypos > final_y){
		ypos--;
	}
	elem.style.left = xpos + "px";
	elem.style.top = ypos + "px";
	var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	movement = setTimeout(repeat,interval);
}

function positionMessage(){
	if(!document.getElementById) return false;
	if(!document.getElementById("message")) return false;
	var elem = document.getElementById("message");
	elem.style.position = "absolute";
	elem.style.left = "50px";
	elem.style.top = "100px";
	moveElement("message",125,25,20);
	if(!document.getElementById("message2")) return false;
	var elem = document.getElementById("message2");
	elem.style.position = "absolute";
	elem.style.left = "50px";
	elem.style.top = "50px";
	moveElement("message2",125,75,20);
}

addLoadEvent(positionMessage);

-->
</script>
</head>

<body>
<p id="message">Whee!</p>
<p id="message2">Whoa!</p>
</body>
</html>
 
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Thu, 03 Apr 2008 17:06:23 +0800 http://ice-cream.javaeye.com/blog/179323 http://ice-cream.javaeye.com/blog/179323 几种漂亮边框制作教程 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/178951  发表时间: 2008年04月02日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

今天有空就画了几种类型的边框，还不错，我把教程一同附上。
描述：喷溅撕边边框
图片：

步骤：

1.打开需要做边框的图片，双点图片，确定，解锁。

2.用选择矩形框画一个比原图小一圈的选区。

3.按Q（进入快速蒙板）

4.滤镜——画笔描边——喷溅，半径10，平滑度2（按个人需求随便调整）

5.按Q（退出蒙板）

6.CTRL+SHIFT+I（反选），DEL（删除）

7.CTRL+SHIFT+I（反选），编辑——描边，颜色，半径随个人要求随意调整

8.CRTL+D（取消选择），另存为，GIF格式，完成。

描述：层叠效果边框
图片：

步骤：

1.打开需要做边框的图片，双点图片，确定，解锁。

2.用选择矩形框画一个比原图稍小的矩形选区。

3.按Q（进入快速蒙板）

4.滤镜——模糊——径向模糊，数量10（可按个人需求随意调整）

5.编辑——消退模糊，不透明度50％

6.滤镜——锐化——锐化，4—6次

7.按Q（退出快速蒙板）

8.CTRL+SHIFT+I（反选），DEL（删除）

9.CTRL+SHIFT+I（反选），编辑——描边，蓝色，象素1（按个人爱好调整）

10.CTRL+D（取消选择），保存为GIF格式，完成。

 

描述：碎碎边框
图片： 

步骤：

1.打开需要制作的图片，并新建一层

2.在新层上，用选择矩形画一个比原图稍小的矩形

3.CTRL+SHIFT+I（反选），油漆桶工具，颜色填充，颜色自定义按个人喜好

4.滤镜——象素化——碎片，多做几次，越宽做越多

5滤镜——锐化——锐化，同样多做几次，做到能看清层层边框为止。完成

 

描述：条纹边框
图片：

 

步骤：

1.打开需要制作的图片，双点解锁，并复制一层

2.在副本层上，用选择矩形画一个比原图稍小的矩形

3.按Q（进入快速蒙板）

4.滤镜——风格化——浮雕效果（45.26.100）

5.滤镜——风格化——照亮边缘（2.20.15）

6.滤镜——象素化——碎片

7.滤镜——锐化——锐化（反复多次）

8.按Q（退出快速蒙板）

9.编辑——描边，1象素，颜色随意

10.CTRL+SHIFT+I（反选），DEL（删除）

11.CTRL+D（取消选区），用魔术棒点选边框外部

12.激活图层0（即原图），DEL（删除）

13.CTRL+D（取消选区），另存为GIF格式，完成。

 

 

 


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Wed, 02 Apr 2008 18:56:11 +0800 http://ice-cream.javaeye.com/blog/178951 http://ice-cream.javaeye.com/blog/178951 《css实战手册》读书笔记——管理多种样式公式 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/177479  发表时间: 2008年03月28日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

   最近正在看《CSS实战手册》这本书，发现第五章管理多种样式中的样式优先级公式挺实用的。

   有时候我们给同样一个属性用多种方式去定义样式，来自最具体的样式的属性会胜出，但不知道到底哪种样式最具体，好在css还提供了一个公式，他根据指派给样式选择器的值决定样式的特性——标签选择器、类选择器、ID选择器，等等。这个系统是这样进行的：

   1.一个标签选择器值1分。

   2.一个类选择器值10。

   3.一个ID选择器值100分。

   4.一个行内样式（如：style）值1000分。  

数字越大。特性就越大。（如图）

 

当不止一个样式应用给一个标签是，一旦样式属性有冲突，网页浏览器必须决定哪个样式要“胜出”。在css中一个样式的重要性称作特征。它取决于创建这个样式时所用的选择器类型。每种选择器类型有一个不同的值，并且当多个选择器类型出现在一个样式中时——例如派生选择器#banner p——所用的所有选择器的值要加在一起。

注意：伪元素（例如像：first-child）被当作标签选择器对待时值1分。伪类（例如：link）被当作类对待时值10分。

 

    


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Fri, 28 Mar 2008 23:16:42 +0800 http://ice-cream.javaeye.com/blog/177479 http://ice-cream.javaeye.com/blog/177479 用js给input传值 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/177005  发表时间: 2008年03月27日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！ 

<style>
#name{ float:left; height:25px;*height:24px;margin-right:10px;}
#btn{ cursor:pointer; background:#a5a5a5; border:1px solid #666666;padding:1px 3px 3px 3px;float:left;}
#box{ border:1px solid #a5a5a5; background:#a5a5a5; width:144px; color:#000;*margin-top:-15px;*width:146px;}
#box ul{ list-style:none; padding:0;margin:0;}
#box li{ cursor: pointer;}
</style>
<script language="javascript">
function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
		window.onload = func;
	}
	else {
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

function text(value_text) {
    var get_value = "";
    value_text = value_text.childNodes;
    for ( var j = 0; j < value_text.length; j++ ) {
        get_value += value_text[j].nodeType != 1 ? value_text[j].nodeValue : text(value_text[j].childNodes);
    }
    return get_value;
}

function init(){
	var name=document.getElementById("name");
	var btn=document.getElementById("btn");
	var box=document.getElementById("box");
    btn.onclick=function(){
		box.style.display=box.style.display=="none"?"block":"none";
    }
    var data=box.getElementsByTagName("li");
    for(var i=0;i<data.length;i++){
    var currentObj=data[i];
    currentObj.onclick=function(){
        name.value=text(this);
    }
  }
}
addLoadEvent(init);
</script>

<input id="name" type="text"/> <div id="btn">click me</div>
<div style="clear:both"></div>
<div id="box" style="display:none">
	<ul>
		<li>one</li>
		<li>two</li>
		<li>three</li>
		<li>four</li>
		<li>five</li>
		<li>six</li>
	</ul>
</div>
 同样的效果用jquery来写就简单一些（这里你要先下载jquery库才能实现效果，附件中有提供）：
<style>
#name{ float:left; height:25px;*height:24px;margin-right:10px;}
#btn{ cursor:pointer; background:#a5a5a5; border:1px solid #666666;padding:1px 3px 3px 3px;float:left;}
#box{ border:1px solid #a5a5a5; background:#a5a5a5; width:144px; color:#000;*margin-top:-15px;*width:146px;}
#box ul{ list-style:none; padding:0;margin:0;}
#box li{ cursor: pointer;}
</style>
<script type="text/javascript" src="scripts/jquery-1.2.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(
       function(){
              $("#box").toggle();              
              $("#box li").each(
              function(i){
                            $(this).click(
                            function(){
                            $("#name").val(($(this).text()));
                            })
                            }
              )
       }
)
})
</script>

<input id="name" type="text"/> <div id="btn">click me</div>
<div style="clear:both"></div>
<div id="box" style="display:none">
	<ul>
		<li>one</li>
		<li>two</li>
		<li>three</li>
		<li>four</li>
		<li>five</li>
		<li>six</li>
	</ul>
</div>
 
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Thu, 27 Mar 2008 18:06:04 +0800 http://ice-cream.javaeye.com/blog/177005 http://ice-cream.javaeye.com/blog/177005 以前做的一些项目首页（三） ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/173438  发表时间: 2008年03月18日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Tue, 18 Mar 2008 16:20:26 +0800 http://ice-cream.javaeye.com/blog/173438 http://ice-cream.javaeye.com/blog/173438 以前做的一些项目首页（二） ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/173437  发表时间: 2008年03月18日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Tue, 18 Mar 2008 16:18:43 +0800 http://ice-cream.javaeye.com/blog/173437 http://ice-cream.javaeye.com/blog/173437 以前做的一些项目首页（一） ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/173435  发表时间: 2008年03月18日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Tue, 18 Mar 2008 16:17:55 +0800 http://ice-cream.javaeye.com/blog/173435 http://ice-cream.javaeye.com/blog/173435 刚做好的新项目brookshire ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/173428  发表时间: 2008年03月18日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

这个项目还没上线，估计过一阵子就能在线看了，先把地址告诉大家：http://brookshire.eprize.net/recipecontest/
本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Tue, 18 Mar 2008 15:55:57 +0800 http://ice-cream.javaeye.com/blog/173428 http://ice-cream.javaeye.com/blog/173428 用css写出三角形 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/172777  发表时间: 2008年03月16日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！ 

<!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>
<title>三角形的写法</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
*{margin:0;padding:0;font-size:12px;font-family:Verdana, "宋体", Arial; line-height:1.8;list-style:none;}
#info{ margin:50px; border:1px dashed #FF3300; background:#FFFFCC; padding:50px;}
#info div{width:0px; height:0px; overflow:hidden; margin-bottom:5px;}
#box_a{ border-top:5px solid #FFFFCC;border-left:5px solid #FF3300;border-bottom:5px solid #FFFFCC;}
#box_b{ border-top:5px solid #FFFFCC;border-right:5px solid #FF3300;border-bottom:5px solid #FFFFCC;}
</style>
</head>
<body>
<div id="info">
<h1>一些三角形的写法</h1>
 <div id="box_a"></div>
 <div id="box_b"></div>
</div>
</body>
</html>

其实就是用border控制边框的大小和颜色，下面我们来看看一个div的边框上下左右是如何分配的：

<div style="width:0px;height:0px;border:100px solid blue;border-top:100px solid red;border-bottom:100px solid yellow;"></div>
 border

 


本文的讨论也很精彩，浏览讨论>>


JavaEye推荐



]]> Sun, 16 Mar 2008 21:36:10 +0800 http://ice-cream.javaeye.com/blog/172777 http://ice-cream.javaeye.com/blog/172777 常用js语句——大全 ice-cream 作者: ice-cream  链接：http://ice-cream.javaeye.com/blog/172362  发表时间: 2008年03月16日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

1.document.write(""); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:
document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:
window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:
document.getElementById("表单中元素的ID号").name(或value)
6.一个小写转大写的JS:
document.getElementById("output").value=document.getElementById("input").value.toUpperCase();
7.JS中的值类型:
String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:
parseInt(),parseFloat()
9.JS中的数字转换成字符型:
("" 变量)
10.JS中的取字符串长度是:
(length)
11.JS中的字符与字符相连接使用 号.
12.JS中的比较操作符有:
==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:
var来进行声明
14.JS中的判断语句结构:
if(condition){}else{}
15.JS中的循环结构:
for([initial e­xpression];[condition];[upadte e­xpression]) {inside loop}
16.循环中止的命令是:
break
17.JS中的函数定义:
function functionName([parameter],...){statement[s]}
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:
打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:
window.status="字符";
21.弹出提示信息:
window.alert("字符");
22.弹出确认框:
window.confirm();
23.弹出输入提示框:
window.prompt();
24.指定当前显示链接的位置:
window.location.href="http://www.bc-cn.netURL"
25.取出窗体中的所有表单的数量:
document.forms.length
26.关闭文档的输出流:
document.close();
27.字符串追加连接符: =
28.创建一个文档元素:
document.createElement(),document.createTextNode()
29.得到元素的方法:
document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i<form.elements.length;i ){
if (form.elements.type == "text"){
form.elements.value = "";
}
}
31.复选按钮在JS中判断是否选中:
document.forms[0].checkThis.checked
(checked属性代表为是否选中返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):
取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:
document.forms[0].selectName.options[n].value
(n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)
35.字符串的定义:
var myString = new String("This is lightsword");
36.字符串转成大写:
string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:
String1.indexOf("String2")!=-1则说明没找到.
38.取字符串中指定位置的一个字符:
StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:
stringA.substring(2,6);
40.数学函数:
Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的
最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,
Math.floor(Math.random()*(n 1))返回随机数
41.定义日期型变量:
var today = new Date();
42.日期函数列表:
dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,
dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,
dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,
dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,
dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,
dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,
dateObj.setSeconds(val)设置秒 [注意:此日期时间从0开始计]
43.FRAME的表示方式:
[window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名
48.在老的浏览器中不执行此JS:<!-- //-->
49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"></script>
50.指定在不支持脚本的浏览器显示的HTML:<noscript></noscript>
51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.
例:<a href="http://www.bc-cn.neta.html" onclick="location.href='b.html'return false">dfsadf</a>
52.JS的内建对象有:
Array,Boolean,Date,Error,EvalError,
Function,Math,Number,Object,RangeError,ReferenceError,
RegExp,