artTxtCount是一个基于jQuery的简单输入字符统计与限制的插件，可以实现类似twitter、新浪微博、腾讯微博等字符统计的效果。

虽然网上已经有好几个同类型的插件了，但是封装过度，实际应用中总是有那么一丝牵绊，因为它们不能指定提示消息的容器。其实我们只需要一个简单的效果就可以了：

预览：http://www.planeart.cn/downs/artTxtCount/
全文 »

前不久有个正要毕业的网友给我发邮件，他毕业设计需要实现锁屏的效果，他问能不能把之前我写的对话框组件的锁屏代码原理说明下，我当时说过两天就发。由于最近比较忙，我现在才想起来，但愿现在此文还来得及。

步入正题：

现在全屏的半透明遮罩层在web2.0网站应用非常广泛了，绝大多数遮罩是通过计算页面大小，然后覆盖一个与页面同等大小的层实现，如腾讯qzone, wordpress后台。这种方式本来无可非议，但是在页面很长的时候在IE8下会失效（国外资料的解释是与机器显卡相关），有些完美情节的同学遇到这个问题后就抓破了头，无奈之下甚至想让IE8强制使用IE7的方式解析他的作品。其实我们有一个更好的方法，咱们用CSS去解决它！

还记得“position:fixed”吗？它是css2的一个新增的属性，他可以让一个元素静止在页面上，拖动滚动条也不会动，如Qzone顶部固定的导航栏就是这样实现的。同样我们也可以用一个100%高宽的层覆盖浏览器视口，这样就可以实现全屏遮罩了。不用再计算页面的大小，调整浏览器大小的时候也不要去动态修改尺寸了。

查看示例一

可是有一个头疼的问题，IE6不支持“position:fixed”，咱们只能通过js动态的修改它的TOP值以模拟静止定位，拖动滚动条的时候遮罩成肯定会抖动，因为每改变一次IE会重新渲染一次。但是微软却给我们提供了一个非常有趣的特性，如果给html或者body标签设置一个静止定位的背景图片，层在拖动滚动条的时候就不会抖动了，几乎完美的模拟了“position:fixed”。我在实际项目中发现这个特性他还能触发其他的特异功能，以后再说明。

为了省事，咱们针对IE6用万恶expression在CSS中写点脚本，拖动滚动条的时候重新定位我们的遮罩层。传说中expression是非常耗性能的，可是咱们的expression几乎没有损耗，有兴趣的同学可以深入研究下expression。

查看示例二

好了，兼容IE6这个大头娃娃后，咱们的锁屏遮罩已经通杀主流浏览器了，但是呢用js写效果的同学们总是非常的蛋疼，总想折腾点什么来，咱们就再添加一点脚本，让锁屏的时候后可以中断用户操作，把滚动条、滚轮、tab键、全选、刷新、右键统统禁止掉，模拟真正的‘锁屏’：

查看示例三

artDialog是一个轻巧且高度兼容的javascript对话框组件，可让你的网页交互拥有桌面软件般的用户体验。

演示地址:artDialog猛击前往

项目主页:http://code.google.com/p/artdialog/

artDialog2采用全新的UI

功能： 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、拖动、鼠标调节窗口大小、换肤……

优点

1. 兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari
2. 自适应内容: 无需预设高宽, 对话框自适应消息内容的大小 (包括按钮)，并且支持消息框大小拖动调节
3. 智能消息对齐: 如果设置了对话框宽度，文本会自动居中或者居左对齐
4. 容错: 如果定义的宽度高度小于内容大小不会出现错位,
5. 智能定位: 使用自定义坐标的时候智能修正位置，确保其在可视范围 (适用于弹出菜单)
6. 拖动流畅: 不会粘住鼠标也不会拖出浏览器视口导致无法控制
7. 轻巧: js压缩后不到8KB (在js内嵌了核心兼容布局CSS的情况下)
8. 制订皮肤: 九宫格布局, 钩子完善,制作皮肤相当简易, 内置IE6 png 32透明和定位解决方案。
9. IE6无抖动静止定位: 在IE6下可实现与现代浏览器一样完美静止定位效果
10. IE6遮盖下拉控件支持: 支持 IE6 下覆盖下拉控件 (注:半透明皮肤不支持)

(本文示例脚本于2010-05-28更新)

如果说09年是SNS年，那10年肯定微博年，各大网站都推出或者准备推出自己的微博。我这几天都在看新浪微博，对新浪微博的用户体验很欣赏，有些细节我自己也琢磨了下，据我所知其界面是大名鼎鼎的eico设计的，其前端架构很非常不错。

步入正题。
我点击新浪微博缩略图的时候会快速的置换一张大图，并且鼠标会显示放大或者缩小的指针，新浪前端工程师吧视口的大图片都预加载了，所以点击缩略图后替换大图的过程很爽快（PS：大家都知道点击Qzone的缩略图会出现什么）。

这种简约的效果非常适合插在内容区域单幅图片显示，放大后也不会干预用户操作，难怪很多微博客都采用（如：聚友旗下的911微博）。

其中有一个令我很惊讶的功能，图片可以自由旋转，这功能如何实现？

• CSS属性？貌似只有IE可以用CSS私有滤镜
• javascript？还没有听说过有这个内置方法
• 服务端处理？极度消耗服务器资源，而且响应会很迟钝

最用用firebug查看才知道是canvas实现的，它是未来的WEB标准的新产物，目前只有IE浏览器不支持它，但IE有个私有滤镜可以实现图片旋转。

图片展示用jQuery做是最轻松不过的是事情，一个预加载图片，一个动画基本上就可以搞定，而canvas图片旋转有个jQuery插件支持，于是我的”artZoom”就踏在前人的肩膀上出来了。

写完最后检测的时候发现IE8对其私有滤镜处理与IE6，IE7不一样，图片旋转后不会替换原来高度，结果把下面的元素盖住了。而新浪微博在IE8下这个BUG也没有修复。

我尝试用js对IE8置换图片长宽处理，仍然无法实现，最后动态改变图片外包元素高度来修复了这个问题。

查看文件：
artZoom [需要jQuery库支持，artZoom.js 4kb多一点]

一遍学习一边记录。陆续加入常用功能，语法沿用jQuery。压缩后尽量控制在5KB之内
CSS选择器引擎部分我使用了(mini)Selector Engine，据测试效率比jQuery高一点
全文 »

全文 »

网上的对话框类多得不得了，“art.dialog”有什么优势？

1. 身材娇小：js压缩后只有4KB多，一张背景图229字节，css文件4KB多。
2. 兼容性强：兼容主流浏览器，视觉效果完全一致（包括IE6无抖动静止）。
3. 自适应内容：对话框可自适应内容大小，无需设置高度与宽度；智能文本对齐。
4. 灵活：CSS钩子机制可任意写入类；对话框弹出位置完全可控。
5. 不错的用户体验：可拖动，不会拖出可视范围；有锁屏功能，防止误操作；ESC键可关闭对话框。

还等什么？赶快预览：http://www.planeart.cn/downs/artDialog/

半夜三更抱着电脑在床上写这篇文章，起因是我之前下载了很多网上的javascript弹出层类，几乎没有一个让我满意。要么就功能不完善，无法满足基本应用；要么就是设计过度，无法二次开发（连编写风格都困难）。

弹出层大多运用在交互比较频繁的网站中，如FaceBook，校内，开心，163Mail等，它取代了浏览器自带的警告提示和模态窗口，具有更好的易用性。它让web如桌面软件一样易用。

全文 »