刘钢的博客 – 我是UED

记得前几天看了D2的视频 kejun兄讲的库时代和框架时代 让我感同身受 因为我所做的项目用的是Jq库 不知不觉的一个个插件让页面的已经一大排了~
所带来的另一个问题 是库的升级问题 公司目前的项目貌似有用jquery1.2.6的 有用jquery1.3.2的 还没有完全的更新到新版
这不是Jquery1.4又出来了么 看了一下新版的API还是不错的 New or Changed in 1.4 部分 点击查看

vfresh兄弟已经写了一个新版的概述 我就直接转载过来了
阅读全文…

相信每个前端工程师都有自己喜爱的javascript框架，说情感也好，道信仰也罢，javascript框架带给人的不仅仅是便捷的开发，更有一种纯粹的逻辑美感，不管是jquery曼妙的简洁，还是yui魔术般的沙箱，都使我们产生无穷的想象。然而，js框架却又必然无法做到面面俱到的完美无瑕，比如jquery在OO方面做出的让步，以及yui在性能上做的牺牲，无不给人传达一种缺憾美、一种理想的现实主义。今天，我们来看看yui3在框架设计中的这些牺牲和让步，以便让我们更加深刻的理解yui3的全貌，并将其优势发挥至最佳。

1，种子的一步到位 or 颗粒化
所谓种子一步到位是指只要在页面引入一个种子文件的script标签，比如prototype和jquery，只要引入一个prototype.js或jquery.js就可以了，他们将各自对dom操作和event的封装等等都囊括进一个文件中，并尽力将其做到最小，这样做的好处是显而易见的，使用框架非常简单。然而yui将这些功能做了级别划分和颗粒化设计，从概念上抽象出来“核心”、“工具”和“组件”，每个小功能放在一个文件当中，需要的时候则要自行去引用，yui文档中给出的大量demo都采用这种方法，这种设计显然不像jquery那样对初学者友好，而且使用起来不够傻瓜，为了实现一个小功能，甚至要引入三四个js文件。yui这样做的原因有两个，一是yui实在太大，把所有功能都搞进一个文件中确实有点不靠谱，二是为其动态加载的框架设计做铺垫。
阅读全文…

公司项目由于一些历史原因 所以采用Jquery的库
一直没有用jquery的插件机制写过代码,于是就趁热打铁研究了一下jq的插件机制
非常简单的一个效果 暂且命名为jQuery SimpleTip Plugin1.0吧
[查看DEMO] [下载源码]
新增了 template的机制 Demo -2010/9/7
插件功能很简单：见下图

就是一个鼠标提示的tip效果 可以自定义宽度

使用方法：
在需要使用该插件的页面插入如下依赖 具体路径请自行修改
分别是：JQuery1.32 本插件核心代码 和本插件的css样式

<script src="jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="simpletip/jquery.tip-min.js" type="text/javascript"></script>
<link href="simpletip/SimpleTip.css" rel="stylesheet"/>

插件使用：

$(document).ready(function(){//jq的页面载入事件
    $("#tip2").tip({ //获取目标元素
    width: 100,//自定义宽度 也可以不设定此项
    text: "<span class='icon01'></span>宽度：100px 是自定义的"//提示内容 可以包含html代码
    });
})

核心代码分析：
阅读全文…

感谢高手的翻译工作

做个记录 有时间好好学习一下

下载 Jquery1.2.6中文注释版

//获取元素的样式值。
function getStyle(elem,name){
if(elem.style[name]){
return elem.style[name];
}else if(elem.currentStyle){
return elem.currentStyle[name];
}else if(document.defaultView&&document.defaultView.getComputedStyle){
name=name.replace(/([A-Z])/g,”-$1″);
name=name.toLowerCase();
var s=document.defaultView.getComputedStyle(elem,”");
return s&&s.getPropertyValue(name);
}else{
return null
}
}

//获取元素相对于这个页面的x和y坐标。
function pageX(elem){
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
function pageY(elem){
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}

阅读全文…