关于 Patrick Haney

Patrick Haney 不是香肠。他是一位用户界面设计师,在哈佛大学的 iCommons 小组工作,专注于前端设计、Web 标准和以第三人称谈论自己。

ThickBox 2.0,基于 jQuery 运行

发布日期: 作者:

ThickBox 是一个类似 Lightbox 的浏览器模式窗口框架,由 Cody Lindley 编写,基于 jQuery 库 运行,它已经进行了升级。新版的 2.0 添加了灰盒功能(iframe 内容),图像集支持(类似于 Lightbox 2.0 的功能),并且现在运行在 jQuery 1.0 上,等等。

你可能会问自己

“如果 ThickBox 2.0 做同样的事情,为什么我不直接使用 Lightbox 2.0?”

答案很简单。未压缩时,jQuery 库和 ThickBox 附加脚本的大小仅为 51kb(如果 jQuery 压缩,则仅为 27kb),而 Lightbox Javascript 文件的大小则超过 100kb。想想节省的带宽和最终用户加载时间提高了多少。

难道没有人为孩子们最终用户

考虑一下吗?

ThickBox 比 Lightbox 另一个优势是,如果浏览器窗口太小,无法在不滚动的情况下全尺寸显示图像,则图像会自动调整大小。此外,在 ThickBox 中,点击模式窗口外部会关闭它,而在 Lightbox 中,则必须点击“关闭”按钮才能从屏幕上移除它。

访问 ThickBox 演示网站,了解有关安装、不同技术的演示(包括 iframe 内容和 AJAX 内容)以及支持信息的说明。它支持并测试了 Internet Explorer 6 和 7、OS X 和 Windows 上的 Firefox 1.5+、Opera 9+ 和 Safari 1.3.2 和 2.0.3 等浏览器,尽管它应该可以在任何现代浏览器上运行。ThickBox 受 MIT 许可证 保护。

jQuery 颜色选择器

发布日期: 作者:

来自 Drupal 的 Steven Wittens 发布了他自己的一个非常棒的 jQuery 插件,名为 Farbtastic。你可能会问它有什么用呢?

Farbtastic 使用分层的透明 PNG 在色调圆圈内渲染饱和度/亮度渐变。没有 Flash,没有像素大小的 div。

使用 Farbtastic,一个简单的表单输入框会变成一个自动更新的十六进制代码,其背景颜色会根据可点击的颜色轮盘和由 8kb Javascript 文件添加的块而发生相应的变化。点击颜色、拖动选择器或手动输入十六进制代码。

只需包含 farbtastic.js 文件以及 farbtastic.css 样式表,然后创建一个占位符 div 和一个用于十六进制代码的表单元素,如下所示:

<form>
    <input type="text" ... />
</form>
<div id="colorpicker"></div>

然后包含一行 jQuery 代码:

$('#colorpicker').farbtastic('#colorpickerinput');

这就是所有操作!现在你应该在页面上有一个颜色选择器小部件了。

要查看工作演示以及有关使用插件的更深入说明,请访问 Farbtastic 页面。Farbtastic 受 GPL 保护。