Web开发 | 酷壳 - CoolShell

Web中的省略号

2009年12月15日陈皓评论 8 条评论 9,720 人阅读

在Web开发中，对于一种情况很常见。那就是，文本太长，而放置文本的容器不够长，而我们又不想让文本换行，所以，我们想使用省略号来解决这个问题。但是，在今天HTML的标准中并没有相关的标识或属性让你可以简单地完成这个事。但是我们可以使用CSS样式表来完成这个事，在IE，Safari，Chrome，Opera中都可以。但在Firefox中却不行，但我们可以使用jQuery来解决Firefox不兼容的问题。下面是相关的代码示例。

使用CSS设置省略号

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;

…

阅读全文 Read More

(7 人打了分，平均分： 2.86 )

哥是玩程序的

2009年12月14日陈皓评论 37 条评论 43,673 人阅读

下面一组有趣的Web示例，这些示例使用Web的一些很“土”控件做出一些很有趣的玩意儿。原来，编程是可以用来玩的，看看这些玩程序的人搞出的这些有意思的玩意，简直是玩得太有意思了。不过，请注意，这些东西只能使用Chrome打开，不然，你看不到相关的效果。

用滚动条做的时间

http://toki-woki.net/p/scroll-clock/，下面的抓图只显示了时和分，后面还有不停跳动的秒。可以在IE，Fireforx和Chrome中查看。

用滚动条做的时间

用CheckBox做成一个水滴效果

http://the389.com/works/drops/，这个示例的整个页面由Checkbox构成，你用鼠标点一下其中一个CheckBox，你会看到一个巨大的水滴滴了下去。Chrome中效果更好。

用checkbox做的雨滴效果

…

阅读全文 Read More

(15 人打了分，平均分： 3.60 )

Javascript 曲线表作图库

2009年12月11日陈皓评论 4 条评论 8,252 人阅读

dygraphs 是一个开源的Javascript库，它可以产生一个可交互式的，可缩放的的曲线表。其可以用来显示大密度的数据集（比如股票，气温，等等），并且可以让用户来浏览和解释这个曲线图。在它的主页（http://www.danvk.org/dygraphs/），你可以看到一些示例和用法。

要使用这个库，很简单，只需要包括dygraph-combined.js文件，其文件尺寸很经济，也就45K。

<script type="text/javascript"
  src="dygraph-combined.js"></script>

下面两个示例，你可以把数据写在javascript中，也可以设置一个csv文件。

…

阅读全文 Read More

(5 人打了分，平均分： 2.40 )

9个最常见IE的Bug及其fix

2009年11月17日陈皓评论 22 条评论 12,099 人阅读

9个最常见IE的Bug及其fix

Internet Explorer – Web程序员的毒药。在IE上开发时间中有超过60%的时间是花在和IE的bug进行搏斗，让你的开发生产率严重下降。下面是一个教程，告诉你9个IE上最常见的BUG以及如何解决它们。

1. 居中布局

创建一个CSS定义把一个元素放到中间的位置，可能是每一个Web开发人员都会做的事情。最简单的做法是为你的元素增加一个margin: auto; ，然而 IE 6.0 会出现很多奇怪的行为。让我们来看一个例子。

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

下面是我们所期望的输出：

…

阅读全文 Read More

(17 人打了分，平均分： 4.29 )

13个不错的Javascript和CSS的菜单

2009年11月04日陈皓评论 12 条评论 8,673 人阅读

以前发布过两篇文章——“30种时尚的CSS网站导航条”和“20个优秀的Javascript导航技术”，今天向大家介绍一下，13个不错的Javascript和CSS的菜单。

1) 性感的滑动型菜单

演示： Mootols Version
演示：Script.aculo.usVersion

…

阅读全文 Read More

(13 人打了分，平均分： 3.77 )

Ajax开发利器UIzard

2009年10月22日陈皓评论 4 条评论 8,427 人阅读

正如UIzard这个名字所暗示的，这是一个User Interface 的Wizard，从字面上理解，这是一个做界面的向导。这有什么奇怪的，Dreamwave之流已经是相当的成熟了，还能好得过它？是的，这个开源的项目，也许并没有那些商业软件那么成熟，不过，我想告诉你的是，这个开源软件绝对是值得我们重点关注的一个软件。

你可以理解为这是一个Web开发的IDE，不过其集成了Ajax方面的东西。这并不仅仅简单的是那种“所见即所得”的编辑器。而且，它也不信仅可以让那些非程序员非常简单地创建一个从前端到后端的Web应用，而且，他还可以让你连接数据库，创建非常复杂的布局和时间线，甚至于一些套件（白板，在线的类Word，Excel，PPT等功能），所有这些，你只需要简单的点几下按钮就可以了。真是相当的强大。（下面是个抓图）

UIzard

…

阅读全文 Read More

(8 人打了分，平均分： 2.00 )

Google Maps API用法教程

2009年10月13日陈皓评论 6 条评论 14,441 人阅读

在过去的一年中，在线地图的发展是相当巨大，我们可以看到在线地图的极有价值的信息和其能力。这其中，最有名气的自然是Google Maps。. Google Maps由一个相当强大的开发引擎并也有一个很大的社区提示支持。

Google 允许各种web masters 通过Google Maps API来增加或自定义他们站点特定的地图，你可能从这里取得Google API key 。一个地图 API key只对一个“目录”或域有效。key绑定了你的域名，你要在网站上放地图，需要有对应的key，否则拒绝读取地图数据，在本地测试可以不用key。当然，你可以申请多个API key。

创建一个简单的地图

在你的站点上引入Google Maps 是一件很简单的事情，你只需要加入：

…

阅读全文 Read More

(18 人打了分，平均分： 3.56 )

图片搜索引擎优化Checklist

2009年10月11日陈皓评论没有评论 4,259 人阅读

今天，专业的搜索引擎优化SEO（Search Engine Optimizers）会让你的网页或文章能更多得被搜索并访问到。而图片的搜索优化则是这项技术中非常特别的一部分，它可以让你的图片更容易地被人搜索到，比如：艺术图片，服务设计，或是家具等等。相信大家都知道图片远比文字更有吸引力，这是因为我们都知道——“一图胜千言”。