文章标签 ‘前端’

3 条评论[原创]简单的模板替换机制-jquery实现了局部

2010年9月7日

今天帮同事修改一个Tip提示的效果 提示中 需要用到当前元素的几个属性，就帮忙改了改之前的demo
这里是一个局部实现 可以参考
查看临时Demo
实际应用的案例：http://www.iamued.com/demo/simpletip/template/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>一个jquery的小模板机制-我是UED</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<a id="test" price="110" name="iphone" onmouseover="test();" href="#">这是一个A元素 有2个属性 鼠标放上来看看</a>

临时Demo的部分代码：
<script type="text/javascript">
	function test(){
		var testString="价格为{price}元，我是{name}"
		alert(testString.replace(/{([^{}]+)}/g,function(word){
			var _attr=word.replace(/({|})+/g,"");
			return $("#test").attr(_attr);
		}));

	}
</script>
</body>
</html>

查看临时Demo
实际应用的案例：http://www.iamued.com/demo/simpletip/template/

分类: JavaScript脚本 标签: , , , ,

2 条评论昨天参加了Google组织的DevFest2010

2010年9月3日

http://www.google.com/intl/zh-CN/events/devfests/2010/

还是收获不少的，google还赠送了一些小礼品 T-shirt、包包、笔记本、钥匙链等

几个主题主要围绕的还是HTML5+CSS3 还有一些chrome的深入讲解

相关PPT目前还没有得到，请持续关注，之后如果拿到PPT会持续更新的：）

顺便问下：谁知道昨天最后讲解的那个测试兼容性的 extensions 叫什么？

分类: JavaScript脚本, 前端开发, 页面实现 标签: ,

没有评论精品学习网诚聘视觉设计师，前端制作工程师

2010年8月24日

精品学习网（北京）诚招视觉设计师

招聘要求：
1.有大型门户网站or 电子商务网站设计经验
2.有扎实美术功底，设计理论知识，对流行趋势拥有敏锐的洞察力，对各种设计趋势有灵敏触觉和领悟能力；
3.熟练使用photoshop，掌握illustrator或者freehand等矢量图形软件，有手绘能力优先；
4.有flash设计能力
5.了解html、Dreamweaver等制作工具，手绘能力优秀者优先；了解网页制作流程；
6.有高度的责任心、具备良好合作态度，沟通能力及团队精神，并富有工作激情，创造力和责任感，能承受高强度的工作压力。
7.美术、设计或相关专业本科以上学历
8.三年以上工作经验
工作职责：
1.公司各类产品的视觉风格设定以及界面，图标设计；
2.各重点频道网站整体风格设计
3.品牌建设
应聘材料要求：
1.个人简历
2.相关作品及链接

精品学习网（北京）诚招WEB前端制作工程师

岗位职责：
1、使用Javascript熟练、准确地进行代码构建，实现产品所需的动画效果以及交互效果
2、使用HTML/CSS/XML熟练地进行页面制作及维护,熟悉W3C标准 了解语义化
3、了解所有常用浏览器，利用自己的经验有效地解决浏览器兼容问题
4、保持高效的前端性能
5、与产品、编辑、页面设计人员保持良好沟通，能快速理解、消化各方需求，并落实为具体的开发工作
6、了解服务器端的技术实施细节，有针对性的协助服务器端开发人员开展业务逻辑开发工作
7、时刻保持对当前互联网的各种流行应用的了解，在交互体验、产品设计等方面有自己的见解，并在适当的时候表达自己的意见
8、文档撰写，在前期期间设计交付：URL设计文档、公用模板数据描述文档、模板结构设计文档，在编码期间能撰写清晰明了的注释
9、严格遵守团队的代码格式、结构的规定，编写易读、易维护、高质量、高效率的代码
10、具备良好的前端架构分析能力与设计能力，积极参与前期设计
任职资格：
1、三年以上工作经验，有大型互联网公司任职经历为最佳
2、对javascript语言有十分深入的了解
3、熟练掌握HTML/CSS/XML
4、对互联网产品有着良好的感觉，对交互体验有较为深入的了解
5、思路清晰，具备良好的沟通能力和理解能力

公司介绍：http://www.51edu.com/aboutus/

工作地点：北京海淀魏公村

投递信箱：liug@51edu.com

QQ:76373

分类: 前端开发, 视觉设计 标签: , , ,

1 条评论太NB了：Google Docs Ctrl + C 技术浅析

2010年7月27日

从玉伯那里转来的，Goole非常NB
用 google docs 打开 pdf 文件，选中文本：

表面上没有任何有趣的地方。但仔细一看，会发现选区的颜色是浅蓝色，而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性，立马 firebug:

不看不知道，一看真蹊跷。selection-highlight 是选区，选区下面是一张图片 page-image!
于是立刻发现一个非常牛逼的特性：Ctrl + C 可以复制图片中的文字！

google 太强悍了，好在前端代码都是开源的，下面简单分析下。

首先数据在哪呢，这个比较容易找到，在 firebug 里有一个请求返回的数据如下：

<?xml version="1.0" encoding="UTF-8"?>

<pdf2xml>
<meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/>
<meta name="Producer" content="Adobe Acrobat 8.1"/>
<meta name="CreationDate" content="20100316080708-04'00'"/>
<page t="0" l="0" w="612" h="773">
 <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7">
Please post comments or corrections to the Author Online forum at</text>
...

有了这份数据，就可以根据选区得到对应的文本。

接下来的问题是，如何将文本放到剪贴板里？第一反应是用 flash 实现，但感觉 google 不会这么做。禁用掉 flash 插件后，功能正常，这说明是用 js 实现的。

通过 Profile 工具 + Fiddler + 肉眼识别 + 运气，终于定位到了关键代码：

n.am = function(a) {
    if (! (!this.k.Ca && Mr(this, a))) {
        ac && this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};

只要注释掉上面的代码，Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索，在 HTML 里，发现了秘密：

到此真相大白：当用户按下 Ctrl + C 时，js 会注入事件，首先根据坐标从数据里取出对应文本，然后将文本赋值给 textarea, 并将其激活和选中。这样，就和用户选中 textarea 的内容，再按下 Ctrl + C 的效果是一样了。

强悍的 google, 技术创新无处不在！

注意：利用 textarea 只能复制纯文本，如果想复制富文本，可以借鉴 google docs 编辑 Word 文档时的处理方式：采用 iframe 充当临时容器，有兴趣的可以进一步研究。

简单演示：goog-docs-copy-demo.html

发现这个秘密后，最近在疯狂搞编辑的牛人承玉（欢迎搞编辑器的其他牛人加盟）立刻想到了各大站长们非常喜爱的功能：附带警告信息的禁止copy. 据说，能成功复制的，都不是“人”。

我的尝试是：点击按钮，复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去，但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制，对于触发的异步 Ctrl + C, 浏览器会限制其功能。

Google 的产品里有很多秘密，真诱人，创意无限！

分类: JavaScript脚本, 前端开发 标签: , , ,

没有评论判断 iframe 是否加载完成的完美方法

2010年6月22日

今天正好需要判断iframe加载完成 正好找到怿飞同学的这篇文章 方法很完美

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (!/*@cc_on!@*/0) { //if not IE
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
} else {
    iframe.onreadystatechange = function(){
        if (iframe.readyState == "complete"){
            alert("Local iframe is now loaded.");
        }
    };
}

document.body.appendChild(iframe);

最近， Nicholas C. Zakas 文章《Iframes, onload, and document.domain》的评论中 Christopher 提供了一个新的判断方法（很完美）：

var iframe = document.createElement("iframe");
iframe.src = "http://www.planabc.net";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        alert("Local iframe is now loaded.");
    });
} else {
    iframe.onload = function(){
        alert("Local iframe is now loaded.");
    };
}

document.body.appendChild(iframe);

几点补充说明：

  1. IE 支持 iframe 的 onload 事件，不过是隐形的，需要通过 attachEvent 来注册。
  2. 第二种方法比第一种方法更完美，因为 readystatechange 事件相对于 load 事件有一些潜在的问题。
分类: JavaScript脚本, 前端开发 标签: , ,