分类目录归档：jQuery

不少人都已经在用CSS3中的动画了， 但很多仅仅用在 某个元素的 hover上 其实，配合脚本的话，可以做到更多的动画效果， 并且可以在很大程度上抛弃各种动画库。 先前一博客《用HTML5代替PPT》中， 我的各种动画效果就完全使用了CSS3的动画效果而不再使用jQuery的动画了。 点击查看展示 我在最开始设置了CSS *{     -webkit-transition-duration:.15s;     -moz-transition-duration:.15s;     transition-duration:.15s;     -webkit-transition-timing-function:ease-out;     -moz-transition-timing-function:ease-out;     transition-timing-function:ease-out; } 也就是设置了所有动画效果的持续时间为150毫秒，以及动画效果的样式为ease-out。 关于时间 根据我自己亲身实践，我能接受的动画效果时间是在150毫秒附近， 再短觉得一闪而过，再长我就觉得拖沓冗余。 这个150毫秒仅仅是经验参数，没有任何科学依据 仅供各位参考。 但是这个也有例外，比如例子中幻灯片的翻页过程， 由于幻灯片比较大，翻页过程如果时间太短，效果也不好 所以对于这种几乎整个页面变化的情况，我设置了动画时长为300毫秒 比通常的翻了一倍。甚至到400毫秒也没觉得冗长。 … 继续阅读 →

我博客浏览量靠前的一直是《打造自己的reset.css》， 然而，我对此的观点也已经有所改变， 所以，我觉得是时候写一篇博客阐述一下目前我的理解了。 注意，这是篇激进的博文，其观点并不客观中立，仅仅表示出我目前的想法。 是否使用*{margin:0;padding:0} 实际上，我现在根本不避讳*{margin:0;padding:0}这种写法了。 我从未看到过真正有关于这个对性能有影响的报告 也不觉得下面Eric的重置样式比起这玩意有多高明之处 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, … 继续阅读 →

如果你是前端，如果你要分享。 是不是觉得PPT很难用？ 是不是觉得用PPT很不能体现你的身份价值？ 本人虽然不是全职前端，但也算半个前端， 也有这样的想法，最近就自己弄了一个。 实现了如下功能： 空格翻页（展示的时候空格是最容易按，也最不容易按错、多按，虚按的。） 滚轮翻页（分享给网上朋友的时候，滚轮才是最方便的） 目录（因为我课件展示的屏幕是宽屏，太长，所以边上留有目录） 点击目录可以跳转（同样是给网上看网页的朋友准备的） 页数（展示时候用） 点开带hash的url可以直接跳转到某一页（便于分享特定页） 尚未实现的功能和bug： 自适应用户分辨率 一页之内逐步显示内容 当前页在目录上高亮 目录暂时有点顺序问题，待解决。 由于我的这个展示屏幕比较大，1920×1080的，所以一般访问请用 ctrl + – 来缩小网页。 Chrome下缩小后有bug，Chrome的问题，Firefox下一切正常。 而Chrome下动画效果比较好，Firefox下有点卡。 推荐用这两个浏览器查看： 展示页面 制作的时候正巧玉伯分享了他的分享， 这个是源自于 google 推广的 HTML5Rocks(需翻墙，项目地址不需要翻墙) 我也借势参考了一些想法，比如url的hash定位，以及部分CSS写法。 当然，我自认为应该比那个好看一点吧，呵呵。 (后来我想想，这个风格应该是潜意识中受到了Flex的影响吧)

今天晚上没事，花了两三个小时时间写了一个基于 SQLite 的短网址工具。 有这个想法很久了，之前网上找的一堆短网址工具基本都要求mysql， 而我又很不喜欢mysql，动用mysql很麻烦，总是要建账号之类的。 所以就自己写了一个基于SQLite的，想必会有一些朋友更我一样喜欢的东西吧。。 完成了核心内容，美化什么的懒得弄了。自己用用不管漂亮与否了。 这一刻我完全不是做前端~ SQL防注入什么的也懒得弄，大家随意就好。 可以缩短网址，可以列出缩短的网址有哪些，还可以通过书签栏缩短网址。 简单的统计访问人数等。 项目我放在bitbucket上，点击查看SQLito 可以直接下载最新镜像 SQLito 这个需要服务器支持sqlite3，第一使用的时候会提示创建数据库。 所有文件扔到服务器上后，可以先修改config.php文件，不改也没关系 可以改动的是路径，如果自动获得的路径不对的话，就自己填一个，要以/结尾。 还有就是数据库名，也可以自己改。 然后修改.htaccess文件，增加下面的规则。 或者直接用附带的.htacess即可。 RewriteEngine On RewriteRule ^([0-9a-z]+\-?)$ ?q=$1 [L] 之后就可以通过 add.php 来缩短地址 add.php 里边还有一个可以拖到书签栏的小工具，平时我就用他啦。 如果你不想让人使用缩短功能，那就自己改一下add.php文件好了。 通过 list.php 来查看有哪些被缩短过（现在我翻页都还没做呢~） 点击时间可以查看详细信息。 另外，在短地址后面加上一个减号可以预览地址。 测试地址： http://g.shawphy.com/ 这个地址有效期至 … 继续阅读 →

我使用的是PuTTY客户端，所以这里介绍PuTTY的设置。 首先下载工具，访问PuTTY的下载页面，下载PuTTY和PuTTYgen这两个工具。 如果你使用TortoiseGit的话，其bin目录中已经有这个工具了，可以直接使用。 打开后会出现如图所示: 点击其中的Generate，然后按照文字提示， 在空白处随机移动鼠标以生成随机数（真是天才的想法）。 生成后如图所示： 随后的Key comment一栏爱改不改，我简单改了一下。 然后点 Save private key 按钮保存密钥，他会问你是否不设置密码短语保护私钥， 点yes，就可以了。我保存到了D:\id_rsa.ppk 接下来需要通过普通的SSH方法登陆你的服务器， 把 Public key for pasting into OpenSSH authorized_keys file 栏中的内容 放到 ~/.ssh/authorized_keys 文件中 据说设置权限比较好： chmod 600 authorized_keys 接下来是设置PuTTY。先填好Host Name，我这里设置了shawphy.com 然后到Connection -> Data 里的 Auto-login … 继续阅读 →

今天收到读者来信，询问如何选择如下的元素 <div class=”good list Card”></div> 这里有个特征，就是需要选择同时带有这几个class的元素。 或者也被误认为选择一个带有空格的class。 经过测试，使用选择特殊的转义符号来做 $(“.good\\ list\\ Card”) 这个只有IE6下能成功。(我仅测试了IE6，Firefox 3.6.8和Chrome 6 dev) 推测原因是因为先进的浏览器中jQuery是直接调用getElementsByClassName， 而这个浏览器方法是不支持带空格的class的，他会认为是多个class。 而IE6之所以成功，是因为本身就不支持getElementsByClassName， 所以jQuery内部是遍历了所有元素， 得到class属性值是“good list Card”的元素。 解决方案有两种： 逐个过滤，先找到带有good的元素， 然后从中筛选出带有list的元素，最后筛选出带有Card的元素： $(“.good”).filter(“.list”).filter(“.Card”) 或者让先进的浏览器也跟IE6一样，直接通过属性选择器： $(“[class='good list Card']“) 测试了一下性能，根据多class测试显示，后者的性能显著的好于前者。 因此推荐使用后者，不论从易读性还是性能上都高于前者。但Cloudream在评论中指出，后者的问题是class的顺序不能变。 附： 要选择其他带有特殊字符元素，参考用jQuery 选择器选取包含特殊字符的元素 经Cloudream提醒，直接用 $(“.good.list.Card”) 即可。 测试下来，除了IE6中，其余两个浏览器中这种方法都小胜第二种方法。

略据有规模的网站都会有合并js/css文件的需求。 这里推荐PPTV同学做的一个合并js和css文件的方案：Merpressor。 项目代码托管在google code。 Merpressor的作用很简单，如果你本地开发的时候有一堆js文件，比如 yui.js selector.js dom.js user.js my.js …. 然后最终自动合并成一个你想要的文件，比如test.js 页面中只需要引入这个test.js就可以了。 本地为了方便调试，test.js里通过document.write来引入其他js文件， 而远端服务器上则直接就是合并压缩后的单个文件了。 我看下来感觉还不错。只是觉得服务器端必须部署java服务器有点要求比较高。 对于有分布式版本控制工具，如hg/git等，在本地测试完成后push到服务器端， 并让服务器端执行一个hook程序，pull 并 update 后执行压缩，这样对系统的部署要求可以低一些。 不过对本身版本控制工具的要求就会高一点了。所谓各有优势。

上回说到，可以设置好编辑器，让编辑器保存的时候自动生成文件。 对于firefox已经有一个扩展了，而对于ie则没这么容易了。 庆幸的是，我测试IE6通常是在虚拟机里的。这就带来了极大的便利。具体方法是： 虚拟机中共享一个文件夹 让编辑器在保存时在那个文件夹中写入文件 在虚拟机中允许一段脚本来检测文件 如果检测到文件，则刷新浏览器，并删除文件 具体的脚本如下，保存成vbs文件即可。 var WshShell = WScript.CreateObject("WScript.Shell"),     fso = new ActiveXObject("Scripting.FileSystemObject"); while(!(fso.FileExists("c:\\tmp\\stop"))){     WScript.Sleep(100);     if (fso.FileExists("c:\\tmp\\refresh.ie6")) {         try {              fso.DeleteFile("c:\\tmp\\refresh.ie6");       … 继续阅读 →

今天看到这个EasyUI for jQuery，感觉还行。比jQuery UI看上去舒服点。有兴趣的可以试试。文档也比较齐全。 http://jquery-easyui.wikidot.com/