随笔分类 - 前端技术
摘要：在项目开发环境下，我们会把 JS代码尽可能模块化，方便管理和修改，这就避免不了会出现一个项目自身 JS 文件数量达到 10 个或者更多。 而项目上线后，会要求将所有 JS 文件合并为 1 个或者几个，手动的操作虽然也不是问题，但每次修改更新都要手动操作合并一遍，这就肯定是个噩梦了。 这种情况下，一些工具也就随之产生，比如在线合并，一些网站提供js文件上传，然后合并，但这还是很麻烦，如果开发环境没有网络呢？ 这会我就想到了 windows 系统下的 cmd 里的 copy命令，它虽然是个复制的功能，但实则也是可以实现合并文件的需求，下面就看下这句代码：copy a.js+b.js+c....
阅读全文
摘要：这个算法我在上篇博文《jQuery 模拟 ubuntu 3D desktop 的 Dodge Effect 效果》中有提到过。 但那时想法过于简单，当时的解决思路是只要层的一个角的坐标处于另一个层的所在区域，则窗口就会有覆盖。这一点没有错，但还有一些特殊情况。比如：// _______ _______ _____// ___| | | |___ _| |___// | | | | | | | | | |// |___| | | |_...
阅读全文
摘要：昨天在微博上看到一个 ubuntu 3D desktop 的演示视频，就是上面那个，大家可以看看。我对其中一个效果非常感兴趣，查了下资料，应该是叫 Dodge Effect。心血来潮当晚就做了一个demo来实现这种效果。看下面的demo，你可以分别点击每个色块，就当作是不同窗口切换就行。 下面我就简单把我开发时的思路给大家介绍一下。因为这不是单纯的修改某个 div 的 z-index 值就能实现，加上动画效果，所以我们第一步一定要先理清思路。 首先我们先做个最简单的，也就是不带动画效果的。这一步没什么好说的，也没技术含量，直接看演示吧。 做好这一步后，我们回过头想一想动画效果是怎样的...
阅读全文
摘要：placeholder 就不用多介绍了，先来看下下面两个input控件，他们均是密码输入框，一个有placeholder 属性，一个则没有： 如果你用360chrome浏览，就会出现这样的效果：位置不对但是当鼠标触发焦点的时候，又正常了最后就是，如果加过placeholder 属性的输入框，输入的内容在没有到控件长度那就自动截断了，而没有placeholder 属性的控件则正常 这2个问题目前只在 360chrome 上发现，虽然 360chrome 用的是 chrome24 的内核，但是我用原生 chrome24 内核测试，并未发现同样的问题，所以这个 bug 应该是 360chro...
阅读全文
摘要：Jquery Pagination 插件原版地址：https://github.com/gbirke/jquery_pagination 因为目前项目里已全面引用 Bootstrap 做为 UI 样式标准，所以稍微修改了下 Jquery Pagination 的代码。 本修改版本基于 2.2.1，在使用上和 1.2 稍微有点差异，插件参数请去官网了解。 修改版地址：http://hooray.github.com/jquery.pagination/ 里面有2个我写的 demo，主要是演示的 2 种方式的分页，分别是传统的分页，也就是跳转刷新，还有一种就是 ajax 分页。 源码...
阅读全文
摘要：只是在无聊的时候翻了几个无聊的网站然后就发现了这个无聊的插件——jRumble 好吧，其实我第一眼看到这个插件就觉得它就应该用在这…… EOF
阅读全文
摘要：大家都知道，鼠标点击的整个事件的执行流程是：mousedown -> mouseup -> click ，而拖放的整个流程是：mousedown -> mousemove -> mouseup -> click 可以来看一个正常 demo，可以分别测试点击和拖放动作 我们试着给 #box 加上title属性再来分别试试点击事件和拖放事件 可以发现点击也会触发 mousemove 事件，原因就在于 title。 并且 title 属性有个特性，就是在你鼠标按下的时候，提示文字会隐藏，鼠标抬起则又显示，所以你可以尝试下双击，会发现第 2 次点击会触发 click 事件
阅读全文
摘要：最近了解了一下第三方登入的API，包括新浪微博、腾讯微博、人人网，因为QQ的API暂时还没成功实现，所以在这里还希望有成功实现的人能给我点拨下，或者提供demo参考。 下面废话不多说，先上一张流程图，经过我的实验，大致所有的流程都是如此： 有人会问为什么第三方登入成功后还要绑定账号，其实也可以不绑定。 如果你的站点本身就没有会员功能，你可以把验证成功后返回的UID当作用户账号，返回回来后判断该UID是否已存在于数据库内，如果有则自动登入，如果没有后台会帮你创建好一条记录并自动登入，这样就实现了一个无需注册，完全使用某第三方网站账号登入的功能。 上图因为考虑到现有的站点已经有会员功能...
阅读全文
摘要：这套UI样式是从chrome浏览器中提取出来的，是不是很眼熟？ 我稍微对样式进行了点修改，button按钮增加了reset按钮的支持，当ui设置为disabled，修改鼠标默认样式为禁止点击，最后对样式进行了压缩，完整代码如下：/* Copyright (c) 2012 The Chromium Authors. All rights reserved. * Use of this source code is governed by a BSD-style license that can be * found in the LICENSE file. */button:not(.cust.
阅读全文
摘要：情况描述 当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click。在实际测试中发现，当dblclick的时候，总会出现1次click。下文将要解决的就是这个问题。情况分析 首先我们要清楚click和dblclick的执行顺序，测试过程略，下面是测试结果： click：mousedown -- mouseup -- click dblclick：mousedown -- mouseup -- click --mousedown -- mouseup...
阅读全文
摘要：话不多说，直接上demo，你可以点击下面的图片看效果。 插件代码(function(){ var fullScreenApi = { supportsFullScreen: false, isFullScreen: function() { return false; }, requestFullScreen: function() {}, cancelFullScreen: function() {}, fullScreenEventName: '', ...
阅读全文
摘要：整体效果展示 这类新手提示的插件还真是少，无奈之下自己写了一个，不带任何图片，完全css实现。因为考虑到功能比较特殊，使用不会太频繁，就没写成插件的模式，所有都是写死的，可以看下HTML代码结构<div class="help"> <a href="###" class="close" title="关闭新手帮助">×</a> <div id="step1" class="step" step="1" s
阅读全文
摘要：淘宝网的语音搜索也有了一阵子了，但似乎都没看到相关的博客或帖子在说这个如何实现，今天查了点资料，发现原来实现是如此简单，可能是因为太简单了，也就没有人讨论了吧。 其实实现只需一句代码即可：x-webkit-speech 一看到这句代码，想到了什么？对，这说明语音搜索只支持webkit内核浏览器，那么这段代码具体要放在哪呢？<input type="text" class="text" name="value_2" id="value_2" x-webkit-speech> 放在文本输入框内就行了，其他的
阅读全文
摘要：因为标题写的是实例，所以本次就不做讲解了，因为这个实例我也算是东拼西凑整出来的，参考了大概5、6款拖拽上传的插件和demo，然后把其中好的地方挑出来，最后就成了这么一个实例，一起来看下吧（地址不能保证长久有效，如果失效请在文章最后点击demo下载）：http://hoorayos.caifutang.com/dropupload.html 界面样式我是参考了一个国外的相册网站，改动不大，只是把鸟语转换成中文，以及上传时的样式也进行了改动，之所以选这个的原因就是，我很容易做扩展，它支持3种方式添加图片，一种拖拽上传，一种常规的选择文件上传，另外的就是添加网络图片。它很巧妙的把三种上传模式整...
阅读全文
摘要：只要有会员系统的网站就会涉及到密码，如果处理不好就会造成前阵子那种事。下面我就说说我在开发时是如何处理密码这块功能的。 首先，密码必须加密，但简单的MD5加密已经没有太大意义，为了防止字典破解，我会给密码加盐后在MD5，我一般是用用户自己的密码当盐。 这一步操作后基本上就不怕数据库暴露了，接下来要做的就是前端的了。我们知道，HTTP传输协议是明文的，也就是可能用户密码还没有到后端，在传输途中就可能泄露了，那要怎么解决呢？ 其实我们完全可以把加密这一步骤放到前端来，密码加密好后再进行传输，这样传输数据如果被抓取，也是加密过的密码。 既然要在前台加密，那就需要一个用来实现加密的js，我...
阅读全文
摘要：因为我们无法通过任何方法获取整个页面的大小和当前加载了多少，所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢？ 我们知道，页面是从上往下执行的，也就是说我们可以大致估算出在页面的某个位置加载了多少，而后用jq模拟出一个进度条来显示。 首先我们先画一个进度条的样子，也就是上图图中的样...
阅读全文
摘要：判断浏览器是否缩放 这是一个困扰我一周的问题了，不过现在终于在@Mr.L的协助下解决了，下面先描述下问题吧。大家在浏览QQ空间的时候，通过浏览器，或者按住ctrl+鼠标滚轮进行页面缩放，页面上会有个很友好的提示，如： 开始，我以为是通过判断窗口宽高，但发现缩放后的宽高和原先的宽高是一样的。失败。 然后，通过别人提供的资料《How to detect page zoom level in all modern browsers?》，发现如果高度定死，缩放后获取的高度是不变的，所以高度必须让他自适应，这样获取的高度是实际高度。之后的操作就简单了，domReady后，记录当前高度，当缩放时，也...
阅读全文
摘要：拖动实现的思路已经更新，为防止大家步入误区，本文建议不用阅读太细，实现思路请参考：http://www.cnblogs.com/hooray/archive/2012/03/23/2414410.html图标拖动排序 最近加了一个人，给我提了不少意见，也帮了测了一些bug，这次要说的更新就是图标拖动排序的功能。开始我以为实现会很难，当动手开始做的时候，发现也不过如此。下面我就一点点把我的思路告诉大家。 首先，图标拖动和窗口拖动的实现代码是几乎一样的，如果你对这个不清楚，可以看下我之前写的文章《EonerCMS——做一个仿桌面系统的CMS（四）》，关于拖动时的样式效果，我都是以win7做...
阅读全文
摘要：此篇文章发布于2011年，当时的想法与现在已有不同，不建议继续阅读。 如果你还不知道LESS CSS是什么东西，可以看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》 不可否认，LESS CSS是个强大的工具，它弥补了css没有变量、无法运算等一些“先天缺陷”，但它似乎给我一种错觉...
阅读全文
摘要：插件我就不多介绍了，在我整理的《常用JQuery插件整理》里介绍，也有示例。但在实际运用中，我发现一个插件无法达到的效果，语言比较难描述，看图说话吧 发现什么问题没有，我做了个demo，虽然已经达到放大镜的效果了，但是大图的显示位置不是我想要的效果，我想要的效果就是，大图的位置和左边图的外框平行，并且始终保持在那个位置。可能有人会说，插件不是提供了xy轴偏移的设置么。是，但是如果图片切换了，尺寸和原先的不一样，xy轴的偏移量要怎么重新设置？最终可能就会出现这样的效果 所以，为了实现我的需求，我就要对插件进行修改，好在插件提供了未压缩的代码，而且中文注释完整，所以我大致看了下源码，就修改...
阅读全文