top

Prototype.js的一些简便用法(一)

Sam StephensonPrototype JavaScript framework 库,的确是博大精深,不过似乎这位达人没有什么时间写应用文档,然后你拿到这个代码,只能自己扎进去尝试研究。
我先介绍几个我目前了解的简单方法把。

1. $()方法 --按ID查找元素

$()的功能就是等同于 document.getElementById() ,不过更简便(很短 :)),更强大。它可以传入多个id作为参数然后 $() 返回一个带有所有要求的元素的一个 Array 对象。

一个简单的使用效果可以看这里

2. $F()方法 --返回任何输入表单控件的值

$F()方法又是一个非常方便的缩写。它可以返回任何输入表单控件的值,如文本框或下拉框。 这个方法可以传入元素的id或者元素自己。

<script src="Prototype.js"></script>
<script>
function test3()
{
alert( $F('userName') );
}
</script>

<input type="text" id="userName" value="名字">
<input type="button" value=Test3 onclick="test3();">

3. Ajax

prototype.js的ajax对象

类似flash的图片Rollover效果

最近一直很忙,可以说是喘不过气来,没什么时间更新blog。五一也不知道有什么安排,希望能好好休息一下。虽然挺辛苦,但是还是有很多收获的。

比如这次介绍的这个图片Rollover效果,很酷。

图片Rollover效果:在线预览 | 下载(包括图片PSD)

里面的js库好像是很久之前国外一个达人制作的(2001年...)

最近也开始尝试在工作中使用 达人 Sam StephensonPrototype JavaScript framework js库,目前版本是1.4.0,具体可以看这里。一个简单的使用效果可以看这里
用到了Ajax的效果,另外还有Thomas Fuchseffects.js的 Fade、Appear效果,详细看这里

的确大大简化了写js的工作量,对这几位达人表示由衷的敬佩。

Lightbox and Hoverbox

早就发现Lokesh Dhakarlightbox的效果很酷,今天又发现另一个国外达人NathanHoverbox,纯CSS的技巧,酷。

把两个东西简单结合一下,其实花不了什么技巧,不过东西更酷了一点。

Lightbox and Hoverbox: 看效果演示 | 下载 (338kb)

Nathan向我们解释了Hoverbox的实现:

The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. In good browsers, it is positioned according to the containing li, which is set to display: relative, but in Internet Explorer 6, a series of * html hacks place the positioning on the containing a href.

h1h2h3h4h5h6标签的使用

最近渐渐的开始使用“标题标签”,其实这个标准的HTML标签是很酷的。

以前你这样定义你的blog名称

<div class="title">fireyy blog</div>

然后写css样式

.title {
font-size:20px;
font-weight:bold;
}

这种方式其实很不直观,(有虚荣心的人总是想让搜索机器人很简单的认出你的代码 :))

你可以尝试使用h1

<h1>fireyy blog</h1>

然后写css样式

h1 {
font-size:20px;
font-weight:bold;
margin:0px; /*h1-h6默认有空白,设定外补丁的值为零,以便自己细调。*/
}

另外你可以看看H1-H6和其他尺寸的对照表

IE条件注释方式

由于本站的天气预报的图片是png格式的,png在IE7.0之前的版本里不会显示透明,所以只能加了一个js来实现png透明,于是就用到了IE条件注释。(具体可以看本页面源代码 ;))

条件注释只能在windows Internet Explorer(以下简称IE)下使用,因此我们可以通过条件注释来为IE添加特别的指令。

<!--[if IE]>这是Internet Explorer< ![endif]-->
<!--[if IE 5]>这是Internet Explorer 5< ![endif]-->

<!--[if IE 7]>这是Internet Explorer 7< ![endif]-->
<!--[if gte IE 5]>这是Internet Explorer 5 或者更高< ![endif]-->
<!--[if lt IE 6]>这是版小于6的Internet Explorer< ![endif]-->
<!--[if lte IE 5.5]>这是Internet Explorer 5.5或更低< ![endif]-->

注意两个特殊的语法:
gt: 大于
lte: 小于或等于
!IE 感叹号的使用
← Previous  1 … 13 14 15 16 17