随笔分类 - 前端技术
摘要：前几天写了篇文章，就是用css来实现三角箭头，虽然达到需要的效果了，但还是有一些问题，比如依旧需要靠position来定位箭头的位置。而且目前也只能实现三角箭头，若想用一些其他的字符，还是得用图片。于是最近一直在寻找更好的办法，最终被我找到了…… 首先，我们去C盘Fonts文件夹里找到WEBDINGS.TTF字体，复制到桌面。接下来，我们需要一个软件，就是“fontforge”，它可以实现制作自定义字体的功能，我们后面就要用它来做一个适用于我们自己的字体库。 下载好后解压，把WEBDINGS.TTF字体复制到里面，运行fontforge.bat并选择字体文件，然后出现这个界面： 很多...
阅读全文
摘要：通常，我们实现盒阴影都是通过这段代码来实现的 -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; 但是，IE6、7、8不认识这段样式，所以我们会考虑用滤镜来实现这功能 /* For IE 8 */ -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* F...
阅读全文
摘要：随着jq1.7的发布，事件绑定有了统一的API：on()、off()，我的EonerCMS也做了相应的更新，因为改动部分不很多，所以就一笔带过了。 因为仿os界面框架已经做的差不多了，要准备开始做实际性的功能了，比如CMS必须有的分类管理，新闻管理等，所以要准备制作这几个栏目需要的页面。为了用户体验的友好，我打算是列表页和编辑页是在同一个页面里，用滑动切换的模式操作，如：查看demo 我现在只做了这一个demo页面，效果自认为还不错，但在IE6下一看，兼容性就一塌糊涂了，所以现在正在考虑是放弃IE6，还是换种操作模式。当然，如果你有好的界面，并且操作上很友好，希望你能提供给我参考下。如...
阅读全文
摘要：通常，我们做上图那个三角形，一般都是做张图，而且需要两张，因为一般都是下拉菜单的效果，需要有个hover的样式，箭头是反的。那是不是有更好的办法呢，毕竟要用两张图片来解决这么一个小问题太浪费资源了，于是，下面我要用一个剑走偏锋的方法来解决这一问题，用到的只需css的一个属性，就是border-width 我们先来看个样式，如果设置元素边框，会怎么样：test 似乎看不出什么，让我给四个边框加上不同的颜色吧再看看吧：test 是不是发现了些什么？对，让我们把中间的文字去掉吧： 这样，就出现4个三角形了，然后我们如果需要顶部那个三角形，只需要将border的left、right、bot...
阅读全文
摘要：废话不多说，继上次遗留的问题——内存泄漏。 趁周末，查了好多资料，也问了好多JS高手，大致是这么个情况。因为我每打开一个窗口，就绑定了一个永久性的dom元素，而dom元素的回收是靠计数器，计数器是会累加的，如果没有清零，即便删掉了节点，其实还是驻留在内存中。 既然大致明白了原理，处理起来就相对比较简单了，就一句话，首先先看下原先的关闭窗口的代码 //关闭 $('.task-window li[window="'+obj.attr('window')+'"]').remove(); obj.fadeOut("500&q
阅读全文
摘要：首先说明，上面图片和文章无关，只是我随便弄的一张配图，因为我刚才在想4个DIV能不能摆成那种造型，当然最终是以失败告终。 恢复正题，这次更新变动不大，增加了一个效果和一个方法，也发现了一个bug，但还没有解决。 一、图标窗口移动动画 这个不用介绍太多，自己试下就知道了，演示地址：http://saw.caifutang.com/eonercms 当我们改变浏览器大小的时候，图标以及打开的窗口会以动画的效果移动。 二、刷新桌面 这个功能是考虑到以后做CMS里栏目模块权限设置上的问题，因为一个图标就是一个功能模块，有的需要开启，有的则不需要，当原先某个模块默认是开启，设置成关闭后，...
阅读全文
摘要：最近老有人问我升到皇冠需要多少时间，我就回“你查下皇冠的活跃天数，减去你当前天数不就行了”，但是后来我发现，除了大家熟知的QQ会员能加速外，还有超级QQ、QQ拼音、QQ电脑管家和腾讯微博，都能进行加速，而且根据不同规则，加速天数也各不相同。本想网上找找看有没有现成的相关软件，结果只发现1个，而且版本特别老，是08年的产物，功能上完全不能达到现在的需求，于是，我就自己做了个。 因为不是搞设计的，界面上就这样了，自我感觉还不错，简洁即美嘛。 其实做这个并不难，只要把思路理清就行，需求在腾讯各个增值业务的相关页面都能找到，下面我就稍微点一下： 1、会员：会员一共6级，一级增加0.1天，二级...
阅读全文
摘要：因为工作上的一些缘故，这个私人的小东西需要暂停开发，要等到明年再继续开动了。 这段时间我进行了一些小部分的更新，下面稍微记录下。 一、每个图标从原先js数组统一换成json数组 数据格式如下：{"data":[ {"id":0,"iconName":"小睿的博客","iconUrl":"img/shortcut/news.png","url":"http://www.cnblogs.com/hooray","width&quo
阅读全文
摘要：一个连衣服都穿不整齐的人，代码也肯定写不整齐。 今天我想和大家讨论的话题就是关于代码缩进的问题，再说之前，我想先给大家看两段代码： 代码片段一：<div id="titleinfo"><div></div></div><div id="header"> <ul id="navigationMenu"> <li><a href="#" onclick="tixing()" class="normal
阅读全文
摘要：如果你知道或者已经在用这个插件了，可以拉到文章结尾处点“推荐”按钮，然后再按Ctrl+W了，哈哈。 正文开始 我的FF一直只装了firebug和一个鼠标手势插件，一是懒得去APP中心淘，二是觉得firebug用着还凑合。 但今天偶尔机会认识了Web Developer，发现它的功能简直碉堡了。 因为功能实在太多了，而且都很实用，我无法一一介绍过来，所以下面我就挑几个我觉得不错的功能进行简单介绍，更多功能就让你们自己去挖掘吧。 查看源码 通常在FF里查看源码都是右键选择查看源代码，如果要查看处理后的源码，只能用firebug来弥补，但是阅读起来着实不便，Web Developer...
阅读全文
摘要：2015年6月29日更新：本文章发布时间较早，不建议继续阅读，并且该插件后续已经修复此问题，大家可以放心使用。 2015年9月9日更新：文章有毒，别看！ 百度搜索“图片分屏加载”，映入眼帘的就是jquery.lazyload，相信很多人用过，或许现在还在用，今天我就来说说这个插件的严重BUG...
阅读全文
摘要：终于可以拿出来给大家测试了，测试地址http://saw.caifutang.com/EonerCMS，东西就不用再介绍了吧，之前做过一个简单的介绍视频，这次再拿出来晒下，就当作作品介绍吧。 开发记录： 关于CMS后台展示/操作方式的个人拙见——最早的一个想法，当时仅仅有这个想法，但未开动 EonerCMS——做一个仿桌面系统的CMS（一）——开篇，因为我是个行动派，所以马上就开动了，后来想了想，应该会遇到很多问题，于是就打算把问题都记录下来。于是第一篇博文算是引言了 EonerCMS——做一个仿桌面系统的CMS（二）——因为界面是仿新版115应用中心的，所以做起来速度还算OK。本...
阅读全文
摘要：智能修改窗口的位置 在测试的时候，我发现调整浏览器尺寸后，原先靠近浏览器边缘的窗口就直接被隐藏掉了，如下图： 出现这问题的原因也很简单，因为窗口的top、left的值是写死的，当浏览器的宽高小于窗口top、left时，必然会被隐藏掉。解决办法就是在调整浏览器尺寸的同时，把窗口的top、left也一起修改，但是具体要修改成多少呢？ 经过自己的考虑和他人的指点，最终的解决办法就是按比例修改，也就是按当时窗口离左/右、上/下的距离与整个窗口大小的比例进行缩放，说的可能有点迷糊，不如看下修改公式吧： top = 浏览器缩放前窗口上边距 / ( 浏览器缩放前高度 - 浏览器缩放前窗口高度 ) *...
阅读全文
摘要：事件冒泡 事件冒泡是个很常见的问题，不过我之前没听说过，所以这里只是做个笔记，如果了解事件冒泡，并清楚如何处理的，可以直接跳过这篇文章。下面我们看下这面这demo，点击红色区域，会弹出1，点击灰色，会弹出2。alert(2);alert(1); $("#div1").click(function(){ alert(1); }); $("#div2").click(function(){ alert(2); }); 处理办法其实很简单，有两种，一种就是“e.stopPropagation();”，另外一种就是“return false;”。alert(2)
阅读全文
摘要：这次主要讲一下js模板和鼠标右键功能，东西比较简单，我就没有做demo，简单说下原理吧。js模板 为什么要使用js模板？因为在这个系统里，我经常要打开一个或多个窗口，但实际上这些窗口的HTML代码都是一样的，只是其中的参数稍微有点变化。既然如此，何不写成模板，把参数定义成指定格式的标签，然后用正则批量替换，生成真正的HTML代码，再插入页面中。这样不仅阅读方便，而且修改也方面。 说改就改，改之前我考虑了另一个问题，就是要不要使用网上现有的js模板引擎，这方面因为之前完全没了解过，所以搜了几个，有的似乎很有名，比如JST，但也非常大，所以我没有考虑；有的很小，也就是一些JSer自己写的插...
阅读全文
摘要：按住我拖动 一晃又过去一个多星期了，途中出了个差，进度上略有耽误，不过还好，上次有个话题没说完，这次继续，就是窗口拖动以及改变窗口尺寸。窗口拖动&改变窗口尺寸 因为这功能可能很多人都做过，所以我只是提供一种我的方法，当然如果有考虑不全的地方，希望大家能提出来，因为拖动层的功能我是第一次做，没太多经验，也请教了很多人。接下来就先看demo吧： HTML代码如下：<div id="movedemo"> <div class="titledemo">按住我拖动</div> <div style="po
阅读全文
摘要：这是一款腾讯UED设计的提示插件，看着肯定很眼熟吧，闲话不多说，直接上demo吧。 显示ZENG.msgbox.show(提示信息,图标类型); 隐藏：ZENG.msgbox._hide(); 几秒后自动隐藏：ZENG.msgbox.show(提示信息,图标类型,显示时长); 用法很简单，分别引用对应的css和js文件就行了，就像这样：<link rel="stylesheet" href="msgbox.css" /><script type="text/javascript" src="msgbox.j
阅读全文
摘要：经常会遇到这样的情况，当页面展示内容过长时，想点导航切换栏目，就得把滚动条拉回到顶上，这样操作总不太人性化，能不能让导航超出显示范围外时自动贴在屏幕最顶上呢？答案肯定是能的。如果不太明白，把滚动条拉到下面点，看下我博客是效果就明白了。 其实实现起来并不难，我们先把实现流程大致想一下，首先，如果导航在显示范围内，就不用做修改。当导航超出显示范围，也就是导航距离屏幕顶部的距离小于0的时候，我们要让它浮动在屏幕顶上，然后大于0的时候，进行一个复原操作，原理就是这么简单，大致看下效果图吧$().ready(function(){ //导航距离屏幕顶部距离 var _defautlTop = $(...
阅读全文
摘要：下面我要用到的插件是我自己写的，关于插件地址是：jquery.HooRay——自己做的一个jquery常用工具插件。关于分享插件的制作流程我也写了篇文章，有兴趣的可以看下：自己写的一个分享按钮的插件（可扩展，内附开发制作流程） 闲话不多说，进入正题吧，大家可以看下文章最后是不是有一排分享的按钮，那个就是最终的效果了，当然不止那一种效果，一共有以下几种效果，分别是： 完整的代码就是这样<link rel="stylesheet" href="http://saw.caifutang.com/jquery.hooray/jquery.HooRay/jquery.
阅读全文
摘要：转眼似乎半个多月过去了，最近忙了点其他的事，所以这个CMS做的进度也慢了，不过昨天和今天稍微加了点班，把最大的一块制作OK了，也就是下面我要说的——窗口 先看下窗口大致构成图吧： 窗口很简单，顶部的标题区域、中间的展示区域和底部的功能区域。首先，窗口肯定是通过图标点击后才生成的，也就是窗口不是事先加载并隐藏好，是点击某个图标后再通过jquery写入到页面里来，那我们要做的就是给图标绑定一个创建窗口的事件，我们看下代码：//创建窗体Core.create = function(obj){ var sc = obj.attr('shortcut'); var window_warp
阅读全文