摘要：
这个BUG发生的背景有点复杂。大概就是一个Form表单，要用Validation Plugin验证，Ajax提交。结果发现在Webkit浏览器下无论怎样都阻止这个form在提交的时候刷新整个页面。最后总算抓到元凶是checkbox上的-webkit-appearance:none属性。-webkit-appearance会将webkit浏览器中的元素默认样式去除。checkbox在这个属性下就直接隐藏掉了。然后用JS获取checkbox值时Webkit浏览器会报很奇怪的错误。给这个元素重新赋上-webkit-appearance:checkbox就不会报错了。其他的的表单元素以及其他的情况并未 阅读全文
摘要：
最近做的一个页面需要播放大量大尺寸高质量的图片。由于设计要求和限制一千多张图片必须放在同一个页面中切换，在这个过程中发现了许多关于Image对象和浏览器的内存问题，然而网上讨论该问题的文章并不多。希望我这篇东西能给读者一些参考。使用Javascript创建new Image()对象的最主要作用就是实现图片预加载。预加载的实现很简单，百度谷歌一下会有很多相关的文章。其核心说到底也就两句话：var img = new Image();
img.src = "my_image.jpg";废话不多说，我们来做几个实验。用IE 9、Firefox 14、Chrome 21这三大主流引 阅读全文
摘要：
最近在搞一个很复杂的页面，搞得脑子有点疲劳。。。抽空把前段时间用jQuery UI写的一个非常简单的九宫格拼图重新分析一下，转换一下心情。Github URL: https://github.com/JennieJi/jquery-jigsawjQuery UI提供了许多非常有用的工具，如draggable、droppable等。这可以让我们用很少的代码实现复杂的功能，并且做到多浏览器兼容。这个九宫格拼图根据需求的不同，我做了两个版本。由于两个版本的JS代码变化还是比较大的，所以我准备分开来讲。先讲最初也是最简单的版本。一步步来。首先建好HTML文件，把你的9张切割好的图片都扔进去： ... 阅读全文
摘要：
网页安全字体这个概念前端们应该都清楚，那遇到非网页安全字体为了保证网页在用户电脑中显示不破坏页面整体的设计，通常少量的文字可以用图片来代替，也可以用Javascript的Cufon来画出这个字体。那实际上这些字体都是付费使用的，这两种做法都有可能引发一些侵权的问题，也会在一定程度上拖慢网页的浏览速度。所以现在推荐使用@font-face，通过将字体文件上传到服务器端来保证客户端的显示一致。@font-face使用方法购买Web版权字体，可以从商家手上获取到.eot和.woff两种扩展名的字体文件。将之放到服务器的网站文件夹中任一位置。在CSS中加入@font-face申明（以下路径可以使用相对 阅读全文
摘要：
如上图，Colorbox(version:1.3.19 + jQuery 1.7.2 )在iPhone浏览器中未能屏幕居中显示。查了半天，发现是由于页面设置了viewport，而Colorbox中使用了$window.width()/$window.height()来获取计算弹出窗口的位置所致。为了适应移动设备，一般我们会设置Viewport（可视区纠正）。即在<head>头中添加如下设置：<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable 阅读全文
摘要：
传统上，在ASP.NET页面中实现AJAX的方法是拖放一个ScriptManager控件，并进行一系列的设置和相关编程。但事实上，这并不是理想的解决方案。使用jQuery来调用ASP.NET后台的方法来实现AJAX可以节省至少三次的服务器与客户端之间的通讯连接。要实现通过jQuery的AJAX来调用ASP.NET后台的方法并不复杂，可以通过一个简单的例子来说明。首先，在ASP.NET项目中添加一个Web服务（asmx）文件，假设命名为WebService.asmx，可以看到它后台自动生成以下代码：[WebService(Namespace ="http://tempuri.org/& 阅读全文
摘要：
写这篇文是因为原来我一直觉得这个图标是个很高级的东西啊。。。真的接触了才知道原来只是那么简单。不过这个小小的细节会给网站增色不少哦！ICO图标的制作第一步，简单的ICO图标只需要一张图片，JPG、PNG、GIF都可以。可以用GIF就意味着你还可以做个有动画效果的高级图标O(∩_∩)O，不过不推荐这么做，因为GIF动画文件比较大，会延迟页面加载速度。【注意】图片必须为16px * 16px大小。第二步，使用网上在线图标转换的服务，将图片文件转换为ICO图标。比如：http://free.logomaker.cn/tools/icoMaker.aspxhttp://free.logomaker.c 阅读全文
摘要：
Magento是个很强大的php网店建站系统。它将模块与结构皮肤分离得相当清晰，为建站提供很大的灵活性和定制性。但是这点也造成了它上手困难的缺陷。可以说不看相关文档会觉得一头雾水，除了CSS根本不知道上哪里去改HTML结构和修改模块的位置。我使用的是1.6.2.0版。我在此系列第一篇文章中介绍了Magento的文件夹结构。文中强调base文件夹不能够删除，这是为什么呢？下面就来探讨这个问题。Package和SkinPackage\app\design\frontend和\skin\frontend直属这两个文件夹下的子文件夹称为Package包。如：default文件夹。Skin皮肤，我指的是 阅读全文
摘要：
Magento是个很强大的php网店建站系统。它将模块与结构皮肤分离得相当清晰，为建站提供很大的灵活性和定制性。但是这点也造成了它上手困难的缺陷。可以说不看相关文档会觉得一头雾水，除了CSS根本不知道上哪里去改HTML结构和修改模块的位置。我使用的是1.6.2.0版。一个需要让用户更迅速地访问其网站的系统，必须使用缓存。但是缓存对开发时期特别是前端开发的时候，并不全部需要，而且会造成一些不便。在Magento前端页面调试的时候需要做以下设置，否则看不到更新后的页面。进入后台管理系统 System -> Cache Management如图，勾选Layouts,Blocks HTML ou 阅读全文
摘要：
Magento是个很强大的php网店建站系统。它将模块与结构皮肤分离得相当清晰，为建站提供很大的灵活性和定制性。但是这点也造成了它上手困难的缺陷。可以说不看相关文档会觉得一头雾水，除了CSS根本不知道上哪里去改HTML结构和修改模块的位置。我使用的是1.6.2.0版。了解文件夹结构之后，我们还需要做一些准备工作。Magento对主题定制方面没有很好的图形界面支持，为了弥补这点，它设计了一个便于前端工作者制作主题的Debug模式。让前端工作者可以在浏览页面的时候轻松找到它的HTML结构文件和布局用名。下面我就来介绍一下如何开启Magento自带的Debug模式。进入你的Magento后台系统。（ 阅读全文