Ruby's Louvre

摘要： 如果浏览器支持CSS3 transform 3D的话，我们可以玩许多东西，比如flip，即电子书软件的那种翻页效果。不过，像transform3D的高级东西，不是一般浏览器能玩转，更别提IE9了。因此这时轮到JS出马了。jQuery上素以插件多出名，在上面找了几个相关插件研究一翻，搞出了自己的flip插件。总共170行。$.define("flip", "fx", function(){ var flip = { begin: function() { var hyaline = (!"1"[0] ? "#123456&qu 阅读全文

摘要： 由于基础库已大体完成，从今天隔三差四就开发一个插件出来。今天给大家介绍的placeholder插件。由于jQuery已有几个这样的插件，下回来研究一下，很快就搞出自己的插件。目前jQuery中最好的jQuery当属 danielstocks的jQuery-Placeholder，但细看还是有许多改进。它的思路是这样，如果浏览器已经原生支持HTML5的placeholder就立即返回jQuery实例，不做任何修改，要用户自行设置placeholder。如果不支持，分两种情况。如果不是密码框，它就会在这input或textarea控件添加一个类名placeholder，目的是让输入字体变淡，当然这 阅读全文

摘要： 像百度与google，当我们往搜索框输入东西时就会出现一排列表提示用户有什么热门或适合的候选词，这种效果就叫suggest。本文将一步步教你如何设计它。首先，用到的框架当然是我的框架mass Framework，当然你用其他框架也可以，如jQuery，没有什么复杂的东西。只要弄懂原理，一下子就能搞出来。想必，以后你们工作也遇到做搜索框的活儿。由于本人没有后端，因此取用一个对象作为本地数据库。而我现在要做的，其实远远比suggest高级，类似IDE的语法提示的东西。当前成品已放到github上。好了，我们动手吧。首先是结构层，装了FF的同学可以在百度首页查看源码，当输入几个字母时，会动态生成了那 阅读全文

摘要： 群里有个出了一道有趣的题目，分享出来让大家看看。function add(x) {________}; alert(add(2)(3)(4)); //填空，使结果为9解法一，//貘大function add(x) { var c = 0; return function(x) { c = c + x ; arguments.callee.toString = function(){ return c; }; return arguments.callee; }(x);}; alert(add(2)(3)(4)... 阅读全文

摘要： http://www.hemin.cn/test/现在图片网与商城流行一种叫“瀑布流”的布局，我们公司也不小心得了“流行性感冒”，要搞这个。于是我就写了一个，现在再用我的框架mass重写一下，发布出来，顺便宣传一下我的框架。瀑布流其实没什么东西，就是列布局与无限拖的结合。由于要支持IE6就没有CSS3，直接对列进行绝对定位。列就是一个DIV。然后就是列中每个板块的添加问题，我管它为砖头。每添加一块砖头前，比较一下哪列最短，就往哪里塞。最后就是无限拖，太easy了。加之，我的框架对样式，事件等设置非常简单，比jQuery更方便。下面就是源码，用到了并行加载技术，预设时加载了random,read 阅读全文

摘要： 注：提 HTML5 只是说明他是一项新的东西，至于浏览器的 JavaScript API 应不应是 HTML5 的一个配套？我们不纠结。不如看这个接口能给我带来什么，思考可以如何给网页做个体验上的增强应用吧。一、说在前面的其实只是一个新的 JavaScript API，让 HTML 元素可以实现全屏显示。不过，这已经足够让我们兴奋。具体是怎样呢？其实这个从 iOS 和 Safari 5.0 就已经可以用在 <video> 上。看一下这个，在 iPhone 上访问 youku 上的一个视频：我们可以点击中间这个大大的放映按钮，这里 iOS 里的 safari 会把影片全屏显示，使用的 阅读全文

摘要： 我在移动设备上测试前面教程的图表实例时发现，当手指点击图表出现ToolTip时，图表容器的会出现一个半透明的高亮背景。设备浏览器不一样，颜色也不一样，很是影响交互效果。试了一下用Javascript来移除，花了一天时间也没弄出来，最后不得不Google了，又花了几个小时，终于用CSS3搞定了。代码如下：-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;新加了禁止选择文本的功能。其中，前二句对WebKi 阅读全文

摘要： 在safari5, firefox6, opera1.60, chrome10？支持CustomEvent事件。 document.addEventListener('ping', function(ev) { alert(ev.detail[0]); }, false); var evt = document.createEvent('CustomEvent'); evt.initCustomEvent('ping', false, f... 阅读全文

摘要： 今天在群里遇到一道很有意思的题目，大家发挥所能，给出的答案五花八门。特意整理成博文发表出来：//原题目：window.alert = function(){};______;alert(1); 填空，使后面的alert(1)能正确弹出，至少列举两种不同思路。解法一，创建新的执行环境，使用iframe沙箱window.alert = function(){};window.alert=function(obj){ var iframe=document.createElement("iframe"); iframe.src="javascript:void(0);& 阅读全文

摘要： 这是统一进行各种特征检测的模块。这些检测的值，如果存在对应DOM API并且其行为与大多数标准浏览器的行为一致为true，否则为false。false值越多说明该浏览器越落后，在我的测试列表中，FF9是做得最好的，全部为true，最差的不用说是哪个吧。就算是IE9也不尽人意，我还是需要为它做N多兼容代码。webkit系的也没有想象中的好。标准化之路任重道远啊。本版本的改进:发现boxModel，inlineBlock，keepSize，cssPercentedMargin这些特征必须等到domReady后才能检测，因此做了迟时处理。一些特征进行了改名，cloneAll更名为cloneNode， 阅读全文