帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:JAVA  HOME  Javascript  


介绍

这是一个使用 CSS 。JavaScript 。雅虎和谷歌api创建的简单的HTML主页。 这个想法是测试一些我可以以在它的他项目中使用的JavaScript和 api 。

Background

如果主页是一个 static 页面,并且避免了设置服务器的任何问题,那么使用CSS创建一个简单站点。 雅虎和谷歌api允许我简化相当多的工作。 网站清单为我提供了大量的灵感和优秀的信息,在理解和使用CSS和JavaScript方面。

使用代码

代码可以像下面这样运行。 站点已经在 Firefox 。IE 和 Chrome 上进行了测试,并在 Firefox 。IE 和 Chrome 中显示为 below 。 Firefox 允许使用不在 IE 中出现的CSS圆角边缘。

Homepage_in_Firefox.gif

Homepage_in_IE.gif

Homepage_on_Chrome.gif

我还决定添加一个滚动RSS提要( 从mioplanet滚动新闻 ticker ),利用 google API的提要。 要添加其他提要,通过添加链接修改 var rssURL,用逗号分隔每个链接。

var rssURL = new Array
 (http://www.channelnewsasia.com/rss/latest_cna_frontpage_rss.xml, http://www.channelnewsasia.com/rss/latest_cna_sg_rss.xml, http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml,"http://www.nytimes.com/services/xml/rss/nyt/World.xml");

代码还利用 Alen Grakalic的图像预览脚本,使用jquery来允许图像预览( below ):

Homepage_Image_preview.gif

要创建缩略图库,请更改以下部分,其中 fileDir 是将保存图片的目录 NAME:

var fileDir = 
 "file:///C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/"; 

要添加要显示的图片,通过添加以逗号分隔的图片名称来更改以下部分。 如果给定了必要权限或者使用 FileSystemObject,则可以修改这里部分以允许直接从目录读取。

var fileName = new Array("Blue hills.jpg","Sunset.jpg","Water lilies.jpg","Winter.jpg");

一个简单的日历是用雅虎日历和警报设置的。 如果需要保留大量的日期和描述,请相应地更改以下部分,考虑使用XML文件保存所有必要的信息。

var evtdates = "1/15/2009,1/19/2009,2/16/2009"var evtdate = new Array("1/15/2009","1/19/2009","2/16/2009"); //insert evt dates here//insert evt desc herevar evtdesc = new Array("Party Time! between 2.00pm-5.00pm",
 "Meeting with Colleague @ 9am","Filming @ Studio between 2.00pm-3.00pm") 

如果设置正确,当用户单击日历中的日期时,Yahoo alert将显示事件信息,如下所示:

Homepage_Yahoo_Alert.gif

我也利用了 Thang Q的文章。 将雅虎信使合并到你的网站上。

As ( 感谢 denisloto ) 在 Google Chrome 中显示的位置和date的位置似乎不一样,在呈现之后,RSS ticker太接近日期设置了,

Homepage_on_Chrome.gif

在这里,通过一个附加的CSS元素来解决RSS索引器的问题,从而解决了这一点:

html*#RSSContainer {
 [position:absolute; MARGIN: 0px auto; WIDTH: 850px; 
 HEIGHT:20px; border: 0px solid #222;TEXT-ALIGN: right; 
 PADDING: 0px; -moz-border-radius: 8px; border-radius: 8px; 
 Z-INDEX: 1; LEFT:110px; TOP:34px;]
}

看来,通过在 [] 中封装样式,它可以解决这个问题 ! 对于雅虎日历,在点击事件日期之后,问题就消失了 !

Points of Interest

有许多优秀的文章和信息可以使我们通过使用现有的api来创建一个简单的主页。 如果你所需要的是一个简单的HTML页面来显示事件,但不知道设置服务器的知识。 不同的浏览器似乎在使用CSS时出现挑战,但是通过使用一些可以用的黑客来呈现页面。

历史记录

  • 第一个版本
  • 第二个版本( 23 2009年月 ): 包含了一个新的CSS元素来解决 Chrome 中的显示问题。


文章标签:JAVA  Javascript  HOME  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语