浆抱罗斯&飞鱼’s blog

隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)

飞鱼 — Sat, 06 Mar 2010 01:49:44 +0800

上一篇说的trigger()触发事件的解释，因为写着写着发现有点长，所以就拆成2篇，多牛逼~~~ 咩哈哈·~~
这篇我介绍一下 trigger() & bind() 配合使用的 隔山打牛招式，真的是隔山打牛，不是观音坐莲，表想歪。=，=

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中 trigger() & bind() 使用心得 (一)

飞鱼 — Sat, 06 Mar 2010 00:03:07 +0800

年前一个项目做下来，全程js 交互写了我半辈子的js代码，重构了N便~~ 不过做项目这东西很锻炼人，强迫你去接触一些没有接触过的东西，收获还是蛮大的。其中收获最大的还是对jQuery 的全新认识了，之前接触jquery一直都是表现类的，如show，hide，hover，等方法，这次项目，接触了许多事件类代码。

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","您好，请点击按钮");
});

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

乱翻乱教 – 小鸡快跑 – Photoshop 超级可爱小鸡

飞鱼 — Wed, 03 Mar 2010 23:15:38 +0800

Photoshop 超级可爱小鸡

作者：Vaclav 此人的blog 很帅气··· 膜拜ing
制作工具：Adobe Photoshop cs3
原文地址：猛击此链接 (英文强悍的可以参考原文)
发现工作后就没有好好的干过自己爱干的事情(不想说做爱做的事)，reader上的tutorial 堆积如山，不过有人说的好，时间挤挤还是有的。
想到不知不觉订阅快200了，还是多写写吧，就当自己前进的动力，最近还是有挺多东西要写的，听飞鱼娓娓道来 ^___^

今天更新的东西是tutorial 上一个小鸡的制作，总体比较简单，有点小技巧，简单不简单。相信对初学者会有很大的帮助，像我这样的菜鸟也就做做小教程吧，谁让我爱分享，咩哈哈哈·~

最终效果

步骤1

新建一个文档，多大无所谓，够大就行，我用的是500×400，用形状工具画两个圈(按住shift 可以在同一个图层画两个圆)。用钢笔工具按住ctrl点击下图中的节点适当修一下形状。这个应该很简单吧，不用我教，什么？钢笔怎么修不会？ =，= 往下看
效果如下：

钢笔工具(P) 在使用的时候可以配合ctrl，shift，alt 可以完成很多好玩的东东，你可以自己试试看，自己总结。

步骤2

接下来用选择工具(A)选中头部的圈，按住shift 选中另外一个圈，(或者直接在界面拖动选中两个也可以)，点击上面 “组合” 就可以把两个圈圈合并，当然是不能分开的，所以要细心 接下来要使用钢笔工具将接口部分变得平滑。
如下图，钢笔工具在线上的3钟状态如下图中右侧的样子，分别是添加节点，删除节点，和重置平滑 (重置平滑，是按住alt在线上出现的，单击就是不平滑(角)，可以拖动重新拉平滑度，这个东西在调整曲线的时候非常有用。)

调整后的效果如下：

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

整得连妈都不认识了 – M8 新固件9.6.X 试用体验

飞鱼 — Thu, 11 Feb 2010 13:56:54 +0800

前几天看扒饭网上更新了新的官方固件9.6.9 ，好奇之，就下了刷之，结果让人吐血。
感觉新的UI固件变化有点大，短时间内适应不了。

说说是官方固件，试用了1日，结果如下：

喷之：

新UI质感太强烈，不精致，个人设计修养问题吧，觉得M8 什么东西都感觉大大的，我喜欢精致点的东西，那种让你觉得“麻雀虽小，五脏俱全”的联想。
拖动解锁没有了，这个让我很崩溃，其实我还是很喜欢原先那种解锁方式，有一种M8独有的用户体验，新的解锁方式，难免有些被其他系统(android)影响。这个让人很郁闷，久久不能平静，少了份乐趣。
感觉卡了许多，似乎是为了让过渡效果做得更华丽，做了模糊效果(类似M8官方QQ的打开效果)，但是，有的时候，cpu 满的时候这个过程让人很蛋疼，还有平滑桌面的时候有的时候会很神奇的卡得让你蛋非常疼(像是黑客帝国里的慢镜头=，=)
电话本功能很脑残，这么一改电话本分组木有了=。= ，大不了重新整理一下，还可以发现许久没有联系的MM，但是发现木有批量改分组的功能，当时就雷在那里了，(也许我没找到) ，手机的4大功能，电话，短信，上网，电话本，是我评判一个手机好坏的关键，尤其是电话本功能，当你有个几百个朋友的电话本的时候，你就会很需要一个好的电话本功能的手机了。
短信界面仿IP ? 新的短信功能有点山寨，有点仿iphone，且不说仿，丫，有点失去了M8 UI固件的设计风格，感觉很突兀。蛋很疼 =。=
拍照功能阉割 ，只剩个自动对焦，一开始以为会加个类似数字变焦的功能呢，结果啥也木有 0-0 ，杯具了··· ，而且有的时候还出现拍照失败，就是 拍出来是乱码 – - ，百思不得其解
那条缝(修改桌面)，有些人说挺好的，感觉很酷~~· ，我觉得很脑残，花那么大心思在修改桌面图标上了，(按住底栏的那条缝，弹开后，就可以修改桌面图标) 用句俗画是，谁没事了整天在调整桌面图标 0 0 ，监听这个功能一定很耗资源，还是喜欢，原先的按住图标几秒，进入修改模式，或者改成按桌面2秒弹出个菜单也好的，何必整得那么花哨 =。= 不实用，(犯职业病了=，=)
划出来的任务管理器，改进过的任务管理器，总的来说还是不错的，不过有点不太舒服的是，因为我经常是单手(大拇指)玩的，从上面划出任务管理器这个功能对我来说，有点画蛇添足，因为大拇指够不到 =，= ，杯具了。双击任务M键可以弹出任务管理器，但不知道M键能捏几次，捏爆了就挂了 – - ，电话都接不了。
天气只支持cmnet ，还以为有个天气插件了呢，结果是cmnet才能用，我是cmwap无限，一阵冷风吹过。=，=

总的来说，改进是蛮多的，但是觉得，没有自己想象的那么好，于是乎，第二天又刷回9.3.X 了。

做为魅油的一份子，当然是支持小M越来越强大了，偶尔喷喷，希望它能变得越来越好。

PS：最近在猛啃 SDK，但愿自己也整个hello world 出来。哈。··

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

M8 到手内牛满面

丫越来越年轻 – 阿里巴巴2010新版首页

飞鱼 — Sun, 31 Jan 2010 22:04:18 +0800

最近阿里系的网站纷纷改版，先是神奇的看到国际站的新版，然后是淘宝的新版，今天又发现中文站也不甘示弱紧急挂上了新版的皮(貌似26号就上来了)。不禁蠢蠢欲动，真想把日本站也重新设计一遍啊~，8过这东西貌似很难实现，努力让自己的影响力在日本站更大点吧 = =。

就像标题说的，中文站这次改版越来越年轻化了，也可以说是被淘宝同化了。呆呆的看了5分钟写下些体会，如下：

简洁了很多，咋一看以为是淘宝，因为色彩用的是淘宝的那种很活泼的橙色，用色很简洁，导航用像素渐变取代了原先的平滑渐变，去掉了很多复杂的东西，页面看上去像个脱胎换骨的全新网站，没有原先的那般浓厚繁杂，不知道是不是寓意着新公司新形象。
更年轻化了，不知道是不是因为淘宝改版的影响，新版中增加了很多标签式的浏览，个人觉得这样的浏览方式更加省空间，并且很时尚，也将页面从原来的平面型转化成跟富有层次的多平面型，这样的效果，最早是从yahoo新版开始的(我比较后知后觉，一向很崇拜yahoo而已，嘎嘎~) 。好处是很多，但是不知道是适不适合刚接触网络的那些 土老板 当时在国际站的时候是怎么称咱们的中文站用户的。这样的设计可以告诉我一个很大的信息可能是：中文站的用户群也越来越年轻化了。
像淘宝，第二次乍一看看是觉得好像淘宝，一直以来中文站的视觉冲击带给我的是：繁华，热闹，商务气息，但新版似乎摒弃了这3个元素，简洁的界面让它看起来很冷静，活泼的淘宝一样的视觉冲击更像是一个B2C的网站，商务气息不是那么浓厚，看来淘宝太深入人心了，给设计师也带来不少的困惑。当然我只是个非专业滴
补充用色亮了好多，发现除了导航用色比较鲜亮外，其他的如边框的颜色用的灰阶都很淡，怀疑可能在某些早起的液晶屏上看不到那边框，小灰狼都被扼杀了，觉得这个问题需要重视，不然页面看起来会很囧rz

其实这仨改版都有一个共同的特点就是都向简洁靠拢，能不渐变就不渐变，能方的就不用圆角的理念。

让我想起设计的3句真言：

看山是山，看水是水。
看山不是山，看水不是水。
看山还是山，看水还是水。

从简单到复杂，然后又回归简单，但其实不简单。

= 。=得扯远了。

拍个照留念~ 点击可查看大图

改版后~

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

杯具时常有 – 巴士特别多 – 丫破相了

飞鱼 — Sun, 24 Jan 2010 23:57:07 +0800

看图不说话，偶然间发现的，对于ie这个容错率那么高的浏览器来说，不影响，因为看不到嘎嘎。
可惜webkit 发现了，都不知道说浏览器不好呢，还是那小程序员不好。毕竟咱是有空就上来喵的，用搜狗浏览器的webkit核看到破相了。发出来晒晒，也算是职业病哈。希望那个前端早早发现 hoho~~~~

写毕睡觉贴个地址

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

从昨天开始，喜新厌旧 – 搜狗浏览器

飞鱼 — Sun, 24 Jan 2010 23:45:42 +0800

周末抽空试用了下新的搜狗浏览器2.0，然后就萌发了这样的冲动。
原先一直都是世窗控(世界之窗)，从搜狗浏览器1.0版出来的时候就有这样的感觉，这东西速度真是很快，快赶上chrome了，由于用个的是IE的核心，速度再快也快不到哪里去，于是呼，2.0版打算抛弃IE核改用chrome一样的webkit核。
这下我可以名正言顺的抛弃的世窗了，=.= 我真是个喜新厌旧的家伙。
当初喜欢世界之窗(TW)的原因是它的超级拖拽和手势，然后有人会说马桶(TM傲游)不是也有的么，傲游当时死机死得厉害，所以就一直用TW了。差不多3年了，世界之窗走得很辛苦，没有强大的资金砸下去，所以走得灰常慢。
也不知道咋的，搜狗浏览器一出来都很大手笔，浏览器是Rokey的团队 eico设计的，我是Rokey控然后我就喜欢上了，当时以为这东西是TW的商业版呢，后来才发现不太一样。
好了现在2.0出来了，有chrome一样的速度，TW的手势，还有超级拖拽，UI又是我的size，能不喜欢么。

还有就是打开速度，也是为什么我一直都不想用Firefox 来上网的原因了。

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

有道阅读试用手札

飞鱼 — Mon, 04 Jan 2010 23:11:06 +0800

在公司里上班，最大的精神餐莫过于google reader了，50%的空闲时间都是花在这上面的。无奈，咱们伟大的妈，因为大姨妈的迟迟不来，缕缕关闭了那门。于是乎，发现了有道reader，上网搜了下，似乎对这个感兴趣的不多，月光哥哥写过一篇(汗死我了，他一年前就玩过这东西了，我真够out的)
用了2天，发现很多 google reader的影子(咱不能说抄袭，毕竟也是个好产品，有它的独特之处)。
只能说需要改进的地方比较多吧，很多用户体验的东西都没做到位(一开始找不到批量导入的入口)，然后是发现侧边栏点开了，再点不会收回，然后又发现同时有展开/折叠2个链接(正常情况下应该只有一种情况)，
幸好发现有个反馈入口，一时兴起就写了个bug过去，想不到半小时不到就有反馈，真实太令我震精啦····· 0 0.
于是对有道reader有了很大的兴趣，慢慢去适应它，不断的反馈 – -，上瘾了嘎嘎。

有图有真相，如果感兴趣也帮忙一起整嘎嘎···

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

Google Chrome浏览器真邪恶

M8 到手内牛满面

飞鱼 — Mon, 04 Jan 2010 22:44:47 +0800

在这银弹的2010年的第一天，哦不是第二天，终于出手买M8了，虽然花花说等等，等M9，等android。8过我还是买了，就当是给自己10年的礼物好了，让自己有一个好的开始，嘎嘎。
废话就到此啦，说点使用感想吧。
说实话，优点很多，缺点更多，
首先是：买了半天我还不知道咋用， =。= (想说我土就喷我吧。)
总算上手了，发现不会装软件 -，-

优点如下：

1. 界面稀饭 – 这个不用多说Rokey的风格
2. 屏幕很华丽 – 看了一天的屏幕睡前玩小p的时候发现都是一颗颗液晶粒
3. 速度还行 – 至少没有发现什么不流畅的感觉。当然我还没装N多软件。
4. 音质 – MEIZU 是吃这个起家的，应该是芯片用的好。
5. gprs 链接快 – 感觉啊，可能之前一直用傻瓜机E1，所以感觉打开页面很快。
6. 字体 – 这个字体很舒服，可能是分辨率高的原因吧，平滑做得很好，(不过发现有些wap网站固定字体大小了，有锯齿)
7. 关灯键 – 我超级喜欢这个按钮，可以为你节省好多电，还有就是打电话的时候脸碰到屏幕就关灯，也很人性化。之前一直有这样的想法

缺点如下：

1. 这个是碰到的第一个问题，usb充电的时候，有些软件开不了。- – 这个最怨念，不过觉得可以通过软件避免。
2. 拍照速度，估计在拍静物上有优势，我拍了10张差不多，都晃了，防抖系统不够稳定，觉得可以用重力传感器来弥补。期待~
3. 电话本功能，现在我买手机最大的功能就是注重电话本了，觉得一些用户体验还不够。比如批量修改分组功能。
4. 滑动门 – 这个是个很炫的功能做到了滑动，并且碰到尽头还能弹一下，当内容多的时候 ok，但是没有做好一些尽头处的细节处理做得不够好，(只有一个项目的时候还能滑动，真不应该)，还有就是滑动判定太灵敏，(这个有利有弊) 有的时候想打开一个东西，老是变成滑动 – -
5. 任务管理器 – 这个东西还是第二天才发现，按M键2次，发出尖叫声= = ，当有2个以上软件的时候底部导航会显示，不是说它不好，总觉得怪怪的从设计上将似乎风格不太一样，反正很怪。
6. 裸体bug – 这个问题应该归结于软件开发者，程序员都这样，做出来的东西太可怕，把CE的默认界面显示出来，太丑陋，真不忍心 – -
7. 万恶的震动 – 竟然木有情景模式，震动只有一种形式，9 9 ，好像有个软件有的，没试过 – -
8. 软件体系 – 处于成本的考虑吧，官方出的软件比较少，比如一些常用的功能，像我要求不高，可以上网，QQ，gsoft，map 就够了。

好了，就显摆那么多了，送张壁纸(480*720) – - 有点糊，但是很喜欢，我还有张 张柏芝的很哈皮的我都不敢用 – -
想要的留言我打包给你邮寄

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

整得连妈都不认识了 – M8 新固件9.6.X 试用体验

世界之窗皮肤：Janblus【 beta 1.1版】

飞鱼 — Tue, 22 Dec 2009 23:44:45 +0800

发这篇文章告诉大家，哥哥我还活着，飞鱼还木有熟。
这个皮肤很早前就做好了，放到官方论坛上面放了几天又彻下来了。
因为还算个半成品。

年末了，公司忙 – - ，都不知道在忙什么，只知道一直在接需求，一直开会，一直总结。
总之，换产品线之后，就木有停下来过。果然跟当初想象的一样。

好了绘画少说。
喜欢这个皮点这里下载。
Janblus

还有大图

浆抱罗斯&飞鱼’s blog

隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)

bind() 绑定事件

bind() 绑定 自定义事件

隔山打牛

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

老汉推车 – jQuery中 trigger() & bind() 使用心得 (一)

trigger() 触发事件

为什么要用 trigger() ？

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

乱翻乱教 – 小鸡快跑 – Photoshop 超级可爱小鸡

Photoshop 超级可爱小鸡

最终效果

步骤1

步骤2

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

整得连妈都不认识了 – M8 新固件9.6.X 试用体验

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

丫 越来越年轻 – 阿里巴巴2010新版首页

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

杯具时常有 – 巴士特别多 – 丫破相了

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

从昨天开始，喜新厌旧 – 搜狗浏览器

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

有道阅读 试用手札

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

M8 到手 内牛满面

优点如下：

缺点如下：

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

世界之窗皮肤：Janblus【 beta 1.1版】

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

bind() 绑定自定义事件

丫越来越年轻 – 阿里巴巴2010新版首页

有道阅读试用手札

M8 到手内牛满面