Archive for the ‘我的作品’ Category

在百度编辑器【uEditor】中扩展粘贴按钮

星期一, 九月 3rd, 2012

为什么会有这个需求呢。。。。说实话,我们网站的用户年龄端都比较大,使用者有很多都是电脑初级水平,他们设置只会用鼠标,不会用Ctrl+v来粘贴,所以只能给他们一个点击的按钮了。

前提:您需要了解如何在百度编辑器【uEditor】中添加一个新的功能按钮,详细方法: http://ueditor.baidu.com/website/document.html 这个地址中的二次开发会教你如何添加。

这里我重点描述一下实现功能的思路:

首先,我们需要获取剪切板的HTML代码,获取的方法有:clipboardData.getData("text") 和 document.execCommand('paste') 。 这两个方法的详细参数大家搜索一下吧,这里不细说了。关键是这里两个方法直接console.log或者直接innerHTML出来的都是不带HTML文本内容,这里要注意,我们需要将它们的值直接放在拥有contentEditable属性的iframe或者其他节点中,推荐用iframe,因为IE6认识他,这样IE就可以得到完整的剪切板中HTML代码了,这些方法非IE不支持,他们安全级别太高,搜索到的资料暂时突破不了;

IE获取剪切板内同的不同:ie6可以直接获取,IE7及以上需要授权提示,这样就会产生没有授权的状态;

针对非IE和IE没有授权进行处理,这两者可视为一个状态,我们只能让用户使用邮件或者快捷键来实现,这是我们弹出一个拥有contentEditable属性的节点,让用户可以用右键或者快捷键将内容放进节点内,得到内容后交给编辑器,大功告成。

以上思路是CKEditor的做法,本人只是参考模仿。

(更多…)

一个前端对设计师的诉求

星期二, 二月 14th, 2012
首先声明,这是一篇和谐帖。。。目的在于提高设计与制作的合作效率,帮助设计师了解制作的想法,提高团队战斗力。如其中有用词不当的,请设计师承让,其他制作也可将自己的心得回复出来。另外,也请制作的同学们反省自己的不足。
 
 
对于不确定性因素考虑周全问题:
        例1:评论模块,显示评论的文字,显示多了怎么办,显示评论的条数,显示评论者的昵称长度问题等等。  假设现在有现在有300×200的一个模块,你应该怎么设计评论内容呢?
 
        例2:一个互动的操作是否需要登录,登录框要在页面显示还是在弹出层中,还是跳转?显示的样式是什么?登录成功后显示什么。这些都应该考虑一下。。。
 
        例3:链接:hover的效果,按钮鼠标滑过的效果,这些是否需要,不设计出来将默认为不需要,建议,至少链接要有hover。。。如果您已经设计了hover状态的样式,请确保别人看了可以知道那个是正常样式,那个是hover样式【例如:在hover样式上面放个小手】
        例3反例:曾经见过一个TAB模块有三个页签,搞了红、绿、灰三个颜色并且没有任何注释,苍天哪,我要不问需求方哪里还知道这是一个TAB页签啊,红绿灰三个颜色鬼知道是干什么用的
 
重用性的考虑:
        模块装饰的通用性和统一性,例如一个模块的标题背景或者边框可以延伸使用到多个模块中【重用性越高,效率越高】
 
        相同模块的大小统一、间距统一,极力推荐:相信科学,切莫完全依赖肉眼。。。请实用工具【重用性的分支】
 
        相同可循环模块或者边框的颜色尽可能的统一
 
        大型渐变背景请保持颜色的一致性【例如:做了纵向的线性渐变,可最终的效果左边开始和右边结束的颜色有差异,亲!这样的背景无法被循环,咱们还达不到韩国的网速,请尽可能使用可循环背景】
 
        在使用“变亮、叠加、差值”等图层效果的时候请考虑一下是否会影响到页面其他地方的效果,上述背景左右不同很多都是因为这样的原因造成的,还有使用半透明蒙版、大面积羽化等等都需要注意是否影响其他地方
 
        您在平铺背景的时候请保留一份单元图出来,前端的小朋友们也需要用

(更多…)

网站速度优化–个人总结

星期日, 二月 12th, 2012
网站速度优化–个人总结:
 
静态化【必须的,可以大大提交响应速度】
 
看看那些活动的时间消耗最大,最有优化前景【布局、渲染、HTML、调度、DOM、格式化、JScript、其他】
注释:《高性能网站建设进阶指南》是这样讲的,个人认为也是合理的,但还没有找到合适的工具来检测具体活动的开销。目前只能靠经验和浏览器开发者工具来判断哪些活动开销较大来具体优化。
 
 
减少HTTP request【合并图片、css、js等】
启用CDN技术【运维部门负责】
启用GZIP压缩【服务器实现】
启用多域名【除主域名外再启用1至多个顶级域名用于下载资源文件,这样可以增加网站的并行加载数,以及避免主域名的cookie来回传递】
启用缓存机制【不变的文件长期缓存等等,根据变更率设置缓存级别】

(更多…)

一个焦点图效果

星期四, 十二月 1st, 2011
前段时间在google+溜达,看见了下面这个效果,于是乎,哈哈!就模仿了一下,唉!自己没有创意,只能模仿。
 
 
飞翔的焦点图
 
 

拼图游戏–JavaScript小游戏

星期一, 五月 16th, 2011
请用FireFox4.0[及以上版本]Chrome11[及以上版本]打开。
别的,没什么可说的,就是做着玩。看演示吧

拼图游戏--JavaScript小游戏

看演示吧

限制表单输入长度 汉字为两个字符

星期三, 三月 23rd, 2011

 

该效果是继 检测表单输入长度 显示剩余可输入字数 之后,在他的基础上整合的小有差别的一个效果,希望方便朋友们使用。

 

将该效果整合成了一个函数,此函数接受3个参数:

第一个为textarea或其他text表单的ID;

第二个为显示输入内容的ID,可留空;

第三个为最多输入的字符,一个汉字为2个字符。

 

这只是一个基础效果,欢迎同学们进行优化和改进。

 

要获取代码请查看demo的源文件

 

 

 

检测表单输入长度 显示剩余可输入字数

星期六, 三月 12th, 2011
 
要实现这个效果必须做到两点:
第一、为表单添加即时监测事件
第二、判断获取到的内容长度【关系到中英文】
 
我们先来看看事件的监听:
IE用 onpropertychange
其他浏览器用 oninput
要了解这两处的内容请看以前写的一篇博文 监听输入框值的即时变化onpropertychange、oninput
 
再来看看判断字符串长度:
一个汉字 = 2个字符, 一个英文 = 1个字符
下面这个函数可以返回字符串长度
function getTextLength(str){// 获取字符串的长度 一个汉字为2个字符
 return str.replace(/[^\x00-\xff]/g,"xx").length;
};
 
下面是主体函数:
里面的注释应该已经很清楚了

(更多…)

图片放大缩小功能

星期四, 十二月 23rd, 2010

很早以前写的一个效果,今天有时间了整理出来

通过 Math.pow(x,y) 的“幂”运算来计算大小图片放大缩小的尺寸

看JS源码:

// 放大缩小控制
var PhotoSize = {
  zoom: 0, // 缩放率
  count: 0, // 缩放次数
  cpu: 0, // 当前缩放倍数值
  elem: "", // 图片节点
  photoWidth: 0, // 图片初始宽度记录
  photoHeight: 0, // 图片初始高度记录
 
  init: function(){
    this.elem = document.getElementById("focusphoto");
    this.photoWidth = this.elem.scrollWidth;
    this.photoHeight = this.elem.scrollHeight;
   
    this.zoom = 1.2; // 设置基本参数
    this.count = 0;
    this.cpu = 1;
  },
 
  action: function(x){
    if(x === 0){
      this.cpu = 1;
      this.count = 0;
    }else{
      this.count += x; // 添加记录
      this.cpu = Math.pow(this.zoom, this.count); // 任意次幂运算
    };
    this.elem.style.width = this.photoWidth * this.cpu +"px";
    this.elem.style.height = this.photoHeight * this.cpu +"px";
  }
};
// 启动放大缩小效果  用onload方式加载,防止第一次点击获取不到图片的宽高
window.onload = function(){PhotoSize.init()};

(更多…)

216种WEB安全色选择器【JS颜色选择器】

星期五, 十月 22nd, 2010

本颜色选择器进筛选出了216种WEB安全色,简单实用、方便快捷。

查看示例:http://www.imf7.com/code/getColor.html

 

使用方法:

js引用:将下面的JS源码存入您的JS文件或者网页的<head><script>JS代码</script></head>标签中

HTML要求:页面的HTML代码中必须包含三个元素,即:触发手柄、显示选中颜色的节点、显示筛选出来的216种颜色的节点
例:
触发手柄 <input type="button" value="按钮选取颜色" id="myhand" />
显示选中颜色的节点 <input type="button" value="#FFFFFF" id="showColor" style="width:120px; background:#fff; border:1px solid #ccc; height:22px;" />
显示筛选出来的216种颜色的节点 <div id="color" style="display:none;"></div>

CSS要求:
然后再将CSS源码放在头部的<head>标签中

引用:满足JS、HTML、CSS的要求后就只剩下引用来让效果生效了
window.onload = function(){
  var Fcolor = new getColor(F$("myhand"), F$("showColor"), F$("color"), "click");
  Fcolor.init();
};
引用解说:
将这段JS与前面说过的JS源码引用之后就可以。
onload函数是起待页面加载完成后执行
getColor()该函数就是取色效果的核心函数,其接受4个参数,依次是:触发手柄节点、显示选中颜色的节点、显示筛选出来的216种颜色的节点、鼠标触发方式『click表示点击弹出颜色选择框』
F$()该函数相当于document.getElementById(); 只是一个辅助函数

(更多…)

星星打分效果整理

星期五, 八月 13th, 2010

项目预览演示地址:http://www.imf7.com/code/star/

星星打分效果:[不支持半颗星星]
支持初始值显示;
支持一个页面多次引用;
每个投票模块可以任意安排投票项目,不限个数;
支持form向后台提交数据。
使用方法:
首先在页面中引入JS部分;
然后编写相应的HTML代码[下面代码结构中有讲HTML的要求];
然后引用效果:starGrade(“grade”, “gradeInput”);
上面这个引用中包含两个变量,第一个变量”grade”代表包含星星显示的节点ID,第二个变量”gradeInput”代表包含隐藏表单的节点ID.

(更多…)