上面说的 伪异步加载 是咋一看的推测，感觉像是滚动到那里的时候 整一个ajax请求，将下面内容加载进来。
后来在不经意之间看了下源代码发现的。
看下面是商城的源码截图。

从图中可以看出，源码中有很多 textarea 的标签，里面的值就是即将要加载的html，然后就恍然大悟，原来所谓异步加载也可以这样来实现。

分析实现流程

首先是将要加载的html代码 丢进textarea 里，因为此时html 在 textarea 是一直val形式，不会被浏览器解析渲染，所以页面在刚加载的时候只显示第一屏。然后通过计算滚动条的相对偏移(数学问题)，将textarea的val 值添加到html 的dom里 ，因为浏览器是即时解析的，新添加的dom 会被重新渲染，这样新加的html 就显示出来了。这个就是所谓的lazy load ：伪异步加载。

为什么要用textarea ?

其实这个东西估计是 因为html 标签的限制，这个方法的设计之初，设计师想将 硕大的html数据 缓存在一个不会被解析标签里，然后就发现textarea 刚好符合期望。

为什么不用ajax ?

因为数据不需要验证，不是时变性的数据，再者使用ajax 会增加http请求，并且维护性不好。
目前淘宝的 TMS 后台系统 都是模版化引擎，使用ajax 会对 模版化 引擎 产生冲突 以及 维护成本高等。

如何实现？

从实现流程来讲，这个功能实现起来没什么难度，唯一有难度的是，怎样把这个功能做成一个通用的模块，简易添加 class 以及配置就可以实现等来提高重用特性。

有合弊端

优点那么多，缺点又怎样呢·？
SEO：存在textarea 里的数据 能不能被 搜索引擎抓取呢？ 这个我最近在自己blog里研究一下。
web标准： 这样的做符合web标准么？将html代码放在textarea来实现 飞鱼：只是一个标准而已。

好了 打完收工~~~

您可能还对这些日志感兴趣

• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 乱翻乱教-使用JS输出HTML串最快的方法
• 菜鸟级: 标签切换效果 – JQuery实现

Div &Class=<div>|</div>

下面[Toolbar] 是 在工具栏上显示的一些快捷按钮。(明显有很多是多余的，可以手动删除掉一些)

8=h4.bmp

可以看到，这里面有很多常用的标签自动完成，但是发现有一些是没有的(如：img br 等)，也有些是多余的，如h4，h5 因为用的比较少。那么我们尝试着去掉没用的快捷按钮，然后新建一些标签。
我新建了如下的宏：还是挺实用的。最后行是等号的自动完成，发现等号加引号输入比较麻烦^_^

Br=<br />|
Class= class="|"
Id= id="|"
Img=<img src="|" alt="" />
O=="|"

添加完后不要忘了保存 ，然后重新打开NP就生效了。

然后是设置快捷键。
点击设置 – 管理快捷键 – Plugin commands
下拉 就可以看到 WebEdit 的快捷键设置区。
我设置的快捷键如下，用Alt 加快捷键比较银荡，按起来也比较顺。

A -------------- Alt+Q
Div Class ------- Alt+A
Strong --------- Alt+B
Br ------------- Alt+Enter
Class ---------- Alt+S
Id ------------- Alt+D
Img -----------  Alt+W
O(等号) ------------- Alt+=

好了，这个插件的分享就到此为止了，下次分享一下其他插件。····

PS：顺便分享个快捷键 Ctrl + D 复制当前行，这个快捷键某些时候非常实用

您可能还对这些日志感兴趣 - 随意

• 区别不同浏览器，CSS hack写法
• 钞票滚滚向东
• 截图小强FastStone Capture v6.2 汉化版
• 不色不计
• 探索 firefox 的放大原理 (一)

从这次的改版发现淘宝开始走视觉体验路线了，从原来满足用户功能，到后来满足用户需求，再到满足用户功能体验的，到现在开始走用户视觉体验的路线。
不过想想也是100多号的人难免会迸发出一些强大的灵感。

当然这么推荐是有理由的，当淘宝的产品以及用户群达到如此大的量的时候，一定会进化出一些高质量的产品，以及一些高质量的用户群，为了满足这些用户群，商城便诞生。

再放一张 名鞋馆的截图，也相当有感觉的。

最后再唠叨一句：淘宝首页又将 导航给放出来了，之前的那种 太前卫的多平面设计拿下来，看来一是用户吃不消这样的表现形式啊，现在的表现形式好些了，但是似乎用色少了好多，应该是为了节省流量吧，毕竟淘宝首页是个流量大头。

您可能还对这些日志感兴趣

• 丫 越来越年轻 – 阿里巴巴2010新版首页
• 有一种美叫洁白– iriver改版好久
• 大步向前走-YOHO改版

原因在哪里~~~~?

因为它历史悠久~~~，当初设计这个系统的时候，架构师没想到它以后会成为一个庞大的系统，也不曾想过以后还有那么多蛋疼的前端会加入进来，更没想过，页面上的交互会越变越多，只是单纯的想解决燃眉之急的一个小交互。
于是乎，很多规则，命名方式，功能架构都没有一个清晰的解释型的图表出来。

得扯远了··· 唠叨了一下，^_^

对于一个新的系统，命名冲突问题如何解决？

我就单单说说我最近做的这个系统中关于js 部分的函数命名的一个方法吧。
先看一下如下图：

智商高的童鞋相信看了这图就知道啥意思，这个东东可是我哥写了那么多js以及 OOP思想的一些结晶，我觉得很强大，至少我这么觉得，因为很好用。飞鱼端了端眼睛：看不懂的话，继续往下看^_^

首先是减少全局参量
全局这个东西 应该是越少越好，就像jquery 用个美元$号一样（虽然经常被其他js 库抢），所以如果要让一个系统有一个简洁的js 系统架构，最好给它起个全局变量，这样的好处是，你的系统只占一个全局变量(当然jquery等$是必须的，因为你得依赖它)。这样从命名上就避开了全局变量冲突的问题。

让你的js 系统函数 都分组升级成类
然后根据系统的功能的类型 进行划分，比如web中系统应用，无外乎 layout 初始化，然后是Effect效果，然后是通用模块，等等。这样做的好处是当你有需求要添加什么功能的时候就可以对症下药，而不会出现要加什么功能就往系统里的js 部分最下方添加，导致页面上的js 代码 像狗皮膏药一样，那样会让你的代码很没有深度以及层次(此句话，很有深度，借用我哥的话)
可能上面说的全局变量，功能分类说了懂了，但不知道咋实现。这一步开始将它实体化。
新建一个js文件my.js，写入如下面的代码:

var My = {}

然后给你的系统添加一个启动函数，就像机器的开关一样，我们将其命名为run()多么直观^_^

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！')
    }
};

上面的代码其实就是一个类，和它的一个方法，完全的OOP 思想。
那么怎么启动它呢，很简单在它的下面加个动作来开动它。就是标准的jquery 语法。

$(function() {
    My.run();
});

这样我们的系统就起来了。
然后我们给系统增加一些功能，先从layout模块 来。
My 类下添加一个新的子类 My.Layout。

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！');
         My.Layout.run();
    }
};
My.Layout = {
    run: function() {
         alert('您又便秘啦？');
    }
};

这里有个小技巧就是子类命名方式是首字母大写，用2个英文单词构成，来提高识别度。
看起来，这样来访问My.Layout.run(); 这个方法还是挺长，但是它用点号分隔开，让其命名方式变成了三维。而不是MyLayoutrun()这样的一维命名方式。这样层次一目了然。让我们再增加一个子类，就会了解这其中的奥秘了。

var My = {
    run: function() {
         //just do something....
         alert('你好，死猪！');
         My.Layout.run();
         My.Panel.run();
    }
};
My.Layout = {
    run: function() {
         alert('您又便秘啦？');
    }
};
My.Panel = {
    run: function() {
         alert('死了算了=，=');
    }
};

这个感觉就像是一台机器一样，显示我打开的开关，机器开始启动，初始化了一些初始操作触发了显示模块，然后再做通用模块的操作。 一切都是有秩序的在执行着。很有感觉吧？^_^ 继续

var My = {
    run: function() {
         this.root = {};
         this.root.head = $('#head');
         this.root.main = $('#main');
         var root= this.root;
         My.Layout.run(root);
         My.Panel.run(root);
    }
};
My.Layout = {
    run: function(root) {
         this.root = root;
         thit._init_resize()
    },
    _init_resize: function() {
         alert('您又便秘啦？' + this.root.main.text());
    }
};
My.Panel = {
    run: function() {
         alert('死了算了=，=');
    }
};

这一步是亮点，我将一些需要全局用到的对象打包成一个root之类，然后带入到每个其他子类中，这样就可以访问到这些对象，而不需要另外再申明，(我不知道这样子做能够节省内存开销，还是会浪费，但感觉应该是前者)
这样子的写法，让整个js 系统被一些关系连接在一起，但是又很容易切开，(比如：注释掉My.Panel.run(root) 就能关闭整个Panel 功能，就像一个一个小插件一样)。

扯得优点离题了，其实也不离题啦，这样子写本来就很难产生命名冲突，并且命名规则可以很有秩序，并且不会出现非常长的纠结的名称。

您可能还对这些日志感兴趣

• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)
• 老汉推车 – jQuery中 trigger() & bind() 使用心得 (一)
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版
• 乱翻乱教- jQuery 制作N级导航菜单 – 插件版

.target{
    position:absolute; top:10px; left:10px;
}

然后我却发现wave 里的外层布局 div配了 4个

.target{
    position:absolute; top:10px; left:10px; bottom:10px; right:10px;
}

然后像发现新大陆一样去尝试了一下，果然如描述的一样，是一个自适应的div 绝对定位，效果杠杠的。
经过尝试 就是IE6 这个万恶的版本 不吃，其他都吃。
然后再给上面加点属性类似 min-height 就能实现类试软件界面一样的自适应效果。
当然同样IE6 也是不吃的。可以用js 来弥补。
有空我放个demo 上来。
^_^

就这样了， 发篇文章通知一下飞鱼还活着。

您可能还对这些日志感兴趣

• 发现 图片上的map的链接 不能是target=”_blank”
• DivCSS经验：三种实用CSS清除浮动的方法
• 异变: input的背景background
• 怨念体 – 不同的字体有不同的line-height
• 此学校在退化

bind() 绑定事件

if 你看过jquery里bind 绑定事件的解释，那基本不用看这篇文章了。 return false
else go on

称为绑定事件，字面意思应该是 绑定在其他事件上的事件。

$(function() {
	var div = $("#mybutton"); //你的按钮。
	div.click(function(e,text) {
		var text = text || '你是猪啊，~让你点，你就点？';
		alert(text);
	});

        div.bind('click', function() {
            alert("兄弟，没事不要乱点; ");
        });
});

上面的代码就是给div的click事件绑定了一个事件。猜猜看哪个先执行？
当按钮被点击的时候，先执行完click事件后，再执行绑定的事件。

bind() 绑定 自定义事件

说绑定自定义事件的时候先说一下 什么是自定义事件？
trigger()方法是用来触发一些事件型方法，如：

div.trigger('click', [text]);

上面的click 是不是一定要规定的 click，focus等事件型方法嘞？答案是可以触发任何事件。如：

div.trigger('my_action', [text]);

你可以尝试一下，发现firebug 没有报错，说明没有问题，只是这个my_action 事件什么都没做而已。为什么不报错，这个我还在研究，谁知道的告诉我 -，-
从这一点看trigger 方法一定是在找 my_action 事件。突然有个idea，既然bind 是绑定事件，既然 my_action 事件什么事情都没做，那我就给它bind 绑定个事件上去不就可以了。于是乎····竟然可以~~

$(function() {
	var div = $("#mybutton"); //你的按钮。
	div.bind('my_action', function(e, text) {
            var text = text || ' oh yah, 观 音 坐 莲';
            alert(text);
        });
	div.trigger('my_action');
}); 

隔山打牛

那么何为隔山打牛呢？
听我慢慢银荡过来~~~
比如我们有两个盒子，希望点击按钮让 第二个盒子显示第一个盒子里的内容。
平常我们会这样写：

$(function() {
	var div = $("#mybutton"); //你的按钮。
	var box1= $("#mybox1");
	var box2= $("#mybox2");
	div.click(function() {
             var text = box2.val();
             box1.val(text);
        });
}); 

利用bind 和 trigger 我们可以这样写。

$(function() {
	var div = $("#mybutton"); //你的按钮。
	var box1= $("#mybox1");
	var box2= $("#mybox2");

	div.bind('my_action', function(e, text) {
             var text = box1.val();
             box2.val(text);
        });

	div.click(function() {
	    $(this).trigger('my_action');
        });

}); 

这样写的好处，在以后会慢慢体现，比如你想双击的时候也想 有这样的动作的时候 ：只需要在后面加：

	div.dblclick(function() {
	    $(this).trigger('my_action');
        });

甚至你想在点击后想把第一个盒子消失，只需要在后面再加上

	div.bind('my_action', function(e, text) {
             box1.hide();
        });

这样的好处是，当click事件要处理的事情变多的时候，能将处理的事情进行分类，让代码更加有层次。而不是臃肿的click function。
更神奇的是这样写 bind 事件甚至可以分开存在不同的js 文件 在需要的时候调用，让它变成一个组件形式。
是不是有一种隔山打牛的感觉？

您可能还对这些日志感兴趣

• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 老汉推车 – jQuery中 trigger() & bind() 使用心得 (一)
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版
• 乱翻乱教- jQuery 制作N级导航菜单 – 插件版

trigger() 触发事件

这个方法是jQuery 1.3中新增的一个引起触发事件的函数。具体解释可以去这里下载 最新的jquery 手册查一下，里面解释的很清楚，就是字有点多。
如果你比较懒那么我稍微解释一下这个东东。我也是挂羊头卖狗肉 =，=
触发事件就是 类似于点击click, mouseover, keydown 等有动作的js事件，简单的说就是一个动作，可能有人会问，那show, hide 是不是? 不是，show 这 效果，手册里刚打开的速查页面里的事件类目就是上面所说的触发事件
说了这么多，还没切到主题，=，=我就这样 ，容易跑题，大伙看习惯了就好。

为什么要用 trigger() ？

比如：你给一个按钮添加了一个click点击事件，弹出提示框，代码如下。

var div = $("#mybutton"); //你的按钮。
div.click(function() {
    alert('你是猪啊，~让你点，你就点？');
});

上面的代码就是一个按钮的click事件。这个时候你有个非分的要求，就是希望页面刷新的时候就点一下这个按钮。如果不用trigger()你可以在后面这样写：

div.click();

如果用trigger()，你就要写成这样：效果跟上面这句是一样，就是稍微长点。

div.trigger("click");

然后有人说：你是猪啊·~~ 上面这个短一点，你还教我用下面这个 =，=
表急着揍我么~· 继续往下看。

你用手册 里的索引搜一下click 可以看到 两条 结果 click() 和，click(fn)，然后 搜一下trigger 发现只有一个 trigger(type, [data]) 。
然后你知道我的意思了吧。— trigger 可以传参数进去。
我们看看 手册里的trigger 例子：

$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

了解了吧？如果用click 的话，它不吃参数，用trigger的话，就能吃了。
练习一下吧：黏贴到你的页面上试试看，记得把jquery载进来。

$(function() {
	var div = $("#mybutton"); //你的按钮。
	div.click(function(e,text) {
		var text = text || '你是猪啊，~让你点，你就点？';
		alert(text);
	});
	div.trigger("click","您好，请点击按钮");
});

您可能还对这些日志感兴趣

• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版
• 乱翻乱教- jQuery 制作N级导航菜单 – 插件版

昨天看了james的一篇关于“pretty date”的文章，这片文章纠结了我一个晚上，后来在我哥的帮助下，顺利吃下这代码。

代码如下：

var niceTime = (function() {

    var ints = {
        second: 1,
        minute: 60,
        hour: 3600,
        day: 86400,
        week: 604800,
        month: 2592000,
        year: 31536000
    };

    return function(time) {

        time = +new Date(time);

        var gap = ((+new Date()) - time) / 1000,
            amount, measure;

        for (var i in ints) {
            if (gap > ints[i]) { measure = i; }
        }

        amount = gap / ints[measure];
        amount = gap > ints.day ? (Math.round(amount * 100) / 100) : Math.round(amount);
        amount += ' ' + measure + (amount > 1 ? 's' : '') + ' ago';

        return amount;
    };

})();

额，我稍微解释一下(懂英文的可以去原文看^_^)，这代码主要是将时间格式转换成 相距当前时间多少时间的一个函数。
用法如下：应该不用解释到底什么用吧？看了就知道

niceTime( 1 );     // => "39.57 years ago"
niceTime( "Sun Mar 01 20:20:02 +0000 2009" );// => "4.65 months ago"
niceTime( "July 19, 2009 12:06:00" );     // => "26 seconds ago"

代码写得非常帅气，又邪恶。其中我就是卡在了下面这跳代码上了···

 time = +new Date(time);

这条代码纠结了· 我一个晚上···，一开始怎么也想不通怎么会有这样的写法，后来我哥帮看了下，茅厕顿开···

上面的代码 完整写法如下···· 看了都想跳楼··

 time = 0 + new Date(time);

这下懂了吧·？= =，其实只是 少了个 0 还有 个空格··· 还以为“+new” 是什么新语法呢。
这段代码是作用是把 时间变量time 的 数据从 “July 19, 2009 12:06:00″ 转换成 毫秒(跟php里的date函数不一样，php里的是 秒数，不是 毫秒)

8月21日更新
=============================
后来发现 +new Date(time) 是个 一元加法的一种用法，受益匪浅。^__^

好了，今天就到这了···

好好学习，天天放假

您可能还对这些日志感兴趣 - 随意

• 看看外国人拍的中国文化–让中国导演惭愧的强
• 乱翻乱教 – 小鸡快跑 – Photoshop 超级可爱小鸡
• 从一个专题入手(一)-产品设计师
• 明年更坚挺 – D2 要来杭州
• openCanvas 4.5.0

于是乎，向笨笨先生(我哥)讨教了几番，得出了这么一个jquery menu 插件。代码依然很简单，稍微复杂点，可以在按钮放上去的时候触发一个动画效果，离开也可以触发一个动画效果，还添加了延迟释放效果(鼠标移开后有个缓冲，再消失)

代码如下：

(function($) { //N级导航插件
  $.fn.menu = function(options) {
    options = $.extend({
      delay: false
    }, options);

    this.find('li:has(ul)').hover(
      function() {
        var t = $(this);
        t.data('hide_menu', false);
        t.find('>ul').css('display', 'block'); // 可以换成动画效果
      },

      function() {
        var t = $(this);
        t.data('hide_menu', true);
        var hide_menu = function() {
          if (t.data('hide_menu')) {
            t.find('>ul').css('display', 'none'); // 可以换成动画效果
          }
        };
        options.delay ? setTimeout(hide_menu, options.delay)
            : hide_menu();
      }
    );
  };
})(jQuery);

代码非常简练，可以根据实际需求增加其他效果。
使用方法如下：

jQuery(function($) {  //调用插件
  //$('.menu').menu() //默认调用语法;
  $('.menu').menu({delay: 500}); //延迟500ms释放
})

PS：演示地址

您可能还对这些日志感兴趣

• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)
• 老汉推车 – jQuery中 trigger() & bind() 使用心得 (一)
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版

jQuery 制作仿DNF首页导航菜单效果

作者：飞鱼原创
飞鱼: 偶然发现这个东东很实用，就手把手写了个。
DNF首页的那只导航，似乎纯手写的。我这次要写的是用jquery来制作，制作代码非常极其简单，看了就知道怎么做(老鸟可以绕过哈，谁让咱们都是菜鸟 = =)

最终效果图

支持N级导航(添加子导航无需另外添加代码)。

html代码

首先当然是html啦，代码如下，没有什么技术含量，

<div class="menu" >
    <ul>
      <li>
        <a href="#">游戏介绍</a>
        <ul>
          <li><a href="#">升级体验</a></li>
          <li class="sub">
            <a href="#">游戏2</a>
            <ul>
              <li><a href="#">天赋系统</a></li>
              <li><a href="#">升级体验</a></li>
            </ul>
          </li>
          <li><a href="#">故事背景</a></li>
          <li><a href="#">职业介绍</a></li>
        </ul>
      </li>
      <li><a href="#">天赋系统</a></li>
    </ul>
  </div>

css代码

因为是仿dnf官方首页导航，所以样式也多少参考了一下它的样式，(图片我也给扣过来了 嘎嘎)

.menu{
  height:27px;
  float:left;
  background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  border:2px solid #000;
}
.menu ul{
    border:1px solid #3f3f37;
    height:25px;
    float:left;
}
.menu li{
  float:left;
  position:relative;
  text-align:center;
  width:70px;
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -480px 9px;
}
.menu li .sub{
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -420px 9px;
}
.menu li a{
  color:#b29056;
  display:block;
  height:25px;
  line-height:25px;
}
  .menu li a:hover{
    color:#fff;
    text-decoration:none;
  }
  .menu li ul{
    position:absolute;
    top:25px;
    left:-1px;
    display:none;
    width:68px;
    height:auto;
    float:none;
    border-bottom:none;
    background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  }
  .menu li ul a{
    display:block;
    height:25px;
    line-height:25px;
  }
    .menu li ul a:hover{
      background:#070707 url(http://ossweb-img.qq.com/images/dnf/web200812/r_linkbg.gif) repeat;
    }
  .menu li ul li{
    position:relative;
    width:68px;
    border-bottom:1px solid #3f3f37;
    background:none;
  }
  .menu li li ul{
    position:absolute;
    top:-1px;
    left:68px;
  }

js代码

这个代码，可以说是相当滴简单，只用了一只语法(.hover)。
说明一下代码的用处细节：(菜鸟专用，老鸟请跨过去 = =)

$(document).ready(function(){
  $('.menu li').hover(  //给menu 下的所有li 添加 hover 动作
    function () {   //鼠标在li 上时让 li 下的ul 显示出来
      $(this).children('ul:first').css('display', 'block');
    },
    function () {  //鼠标在离开li 上时让 li 下的ul 隐藏掉
      $(this).children('ul:first').css('display', 'none');
    }
  );
});

上面代码中我用:first 来只取第一个来提高效率(不知道我这样做对不对，感觉上应该是对的 – -)。

PS：代码演示，因为最近用的都不是自个儿的电脑，FTP上不去，就委曲下自己 尝试一下呢，效果还是不错的。

PS2：可以在这基础上增加其他功能：比如鼠标离开后，过半秒中导航才消失，这个需要用到setTimeout 函数来解决。有空我写个。^_^

您可能还对这些日志感兴趣

• 菜鸟级: 标签切换效果 – JQuery实现
• 滚动新闻 – jquery 扩展插件
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad