给自己的留言窗口添加提示功能

| 评论(1) | 暂无引用通告

检索窗口,留言窗口等输入的地方,给要输入文字的读者一个小小的提示,即美观,又可向导留言时需要注意的事项。tooltip for forms这里虽然有介绍,我将我安装在MT上的一些心得和小改动整理了一下,方便大家使用。

ikias020.JPG

1.首先下载Tooltip for forms zip文件,解冻。

2.做一个叫formtooltips的文件夹。将上面解冻了的文件中的css,images,js三个文件夹放到formtooltips里面。最终具体的构成将是这个样子(以我的网站为例)

http://www.ikias.com/
 └─formtooltips/
   ├─css/
   │   form-field-tooltip.css
   │
   ├─images/
   │  green-arrow-right.gif
   │  green-arrow.gif
   │
   └─js/
      form-field-tooltip.js
      rounded-corners.js

3.修改js文件夹里面的form-field-tooltip.js文件:

修改前
this.imagePath = 'images/';

修改后
this.imagePath = 'http://www.ikias.com/formtooltips/images/';

4.将formtooltips文件夹传放到服务器上,和首页在一起的位置。然后对要追加上述功能的网页进行修改,比如在单篇日记归档中,需要修改下面3个地方。

1)在<head>~</head>之间添加下面代码

<script type="text/javascript" src="<$MTBlogURL$>formtooltips/js/form-field-tooltip.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>formtooltips/js/rounded-corners.js"></script>

2)在留言的窗口等<input>地方,做以下修改

修改前
<input id="comment-author" name="author" tabindex="10" accesskey="n" value="" />

修改后
<input id="comment-author" name="author" tabindex="10" accesskey="n" value="" tooltiptext="请输入您的网址(任意)。"/>

3)在</body>的前面追加下面代码

<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.initFormFieldTooltip();
</script>

以上就追加完毕了。

因为我比较喜欢清淡的背景,所以我将images文件夹里的green-arrow-right.gif和green-arrow.gif两个图片换为了下面的颜色。

green-arrow-right.gif

green-arrow-right.gif

如果选择了上面两个图像的话,需要对js文件夹内的form-field-tooltip.js里进行背景颜色的修改

this.pageBgColor = '#FFFFFF';

暂无引用通告

发送引用通告网址: http://www.ikias.com/mt-tb.cgi/125
如果您想引用这篇日记到您的Blog,请复制上面的链接,放置到您发表文章时的相应界面中。

评论(1)

发表评论

关于此日记

此日记由 ikias 发表于 2006年10月24日 00:10

此Blog上的上一篇日记Yahoo! + Google=Yahoogle!

此Blog上的下一篇日记FLASH MP3 PLAYER

首页归档页可以看到最新的日记和所有日记。