很早之前就想写这个了，总是在amaon直接挑书再查豆瓣，而且每次都觉得不方便，憋到现在才处理。 其实这个在豆瓣日记也写过了，但是不在博客记录下感觉不舒服。写js的过程还是很不舒服的，虽然整个脚本只有65行，但是花了有近2天。。。还寻求了wong2的帮助，js功底可见一斑╮(￣▽￣”)╭…其实现在回想起来，就是基本功不扎实。而很多其他东西，也是如此。像js里，什么东西可以appendChild什么不可以都查了好久，原生js不写确实没什么好处。算了，总是吐槽自己也没什么意思，来张效果图吧： 因为很简易所以就不要来吐槽什么的了吧。。。有需要就用吧~ 脚本安装地址：http://userscripts.org/scripts/show/126632 （chrome直接安装即可， firefox需要先安装伟大的油猴 https://addons.mozilla.org/zh-CN/firefox/addon/greasemonkey/ 再安装脚本~） 了却一个小心愿，如是甚好~ 目标继续推进~~
Category Archives: javascript/jQuery
Javascript资源汇集【持续更新 欢迎补充】
2011年11月27日 – 7:33 下午
这里将是我们收集的javascript的学习资源，并且会在发现好的资源的时候随时更新~ ———————————————— 1.推荐的书 … 2.在线资源 - JS源码 - JavaScript 秘密花园（语言基础） - Core JavaScript 1.5 Guide （MDN）（语言基础） 闭包 – 我对JAVASCRIPT闭包的一点点理解- rapheal – 学习Javascript闭包（Closure）- 阮一峰 … 3.前沿相关 http://www.nczonline.net/blog/ javascriptweblog.wordpress.com/ http://dailyjs.com/ http://functionsource.com/ reddit.com/r/javasc… …
Firefox — Personas & Theme 的组合？
2011年08月8日 – 10:10 上午
终于在amule的速度可以达到160+的时候，说服自己把Win放着一边让它自己玩。 打开chrome，说实话这ubuntu的原生GUI一点也不好看，好在chrome自己可以选择经典主题，GTK+的效果真是不堪入目。。再来是Firefox，同样原生的GTK很是难看，可是它又没有傻瓜式的让我直接修改的地方，比如经典？没有。虽然我还是用Personas把看惯了的皮肤覆盖上去，但是看着这写别扭的icon，总是很不爽。于是不知道为什么想到了去找主题。。。 好不容易找到一款，除了配色，整体和Win下的FF4.0+如出一辙。这让我顿时一振，心想这有戏啊。 这是那个主题Simple White (win下的效果啦 ubuntu你可以想到，外框什么的不一样罢了) 可是问题来了，这个theme就像标题那样，纯粹就是白色的，虽然外形神似但是这颜色。。。配合Personas怎么样？果断把原来的皮肤拿来应用，发现试穿的时候确实是可以的，效果也很好，但是真的wear之后，它提示要重启来达到更换theme的目的。重启，Personas应用上了，但是变成默认theme了。。又回到了GTK的怀抱 T T 后来查了些资料，发现Personas在FF3.6+开始是默认集成到内部了的，而它的皮肤，开始成为theme性质了，也就是说，如果不作任何修改，Personas默认只支持FF的默认主题。这样原来就明白了，是程序规定。 但是不能就这么罢休吧？想到如果安装个Personas的额外的扩展，兴许可行（3.6之前貌似很多第三方的主题同时支持Personas）于是装扩展，显示与FF5.0不兼容。没事，去修改扩展的install.rdf即可（~/.mozilla/firefox/XXX/extension/…(XXX可能是个人代号 一串字符串)）把限制修改掉就可用了。 貌似有个personas plus可以直接用？确实。。其实就不用改限制了 = = || 这样的话呢？发现由于Personas内嵌了之后它的皮肤只能作为theme存在了，原来的方法可能不行。。。折腾了很久 真无奈啊 …… 再找，无果。心想要不看看他们的内部实现机制自己改？以下一些是修改FF浏览器的资料（也就是修改userChrome.css 话说FF使用类似xml的xul来组织界面的，大部分都是css来装饰的 ！！ 不过很可惜，这次没有继续研究下去，因为只是为了可用，后来的方法更方便，如果感兴趣 你可以去深入啦~） Mozilla官方存档 略谈userChrome.css(自己动手设置Firefox的外观)转载 还有官方论坛 MDN（文档库，很好很强大) 第三方hacking? 等等都可以去看看的… 研究依然无果，主要是没敢尝试。。然后是修改主题 = = 同样要修改它的css，似乎是找到了，但是真的不知道FF里的css什么id对应哪块，改起来不确定（真的要是找到了，加两个背景图倒是太简单了）这么以来让我想到了，可以看看Personas是怎么来改默认主题的呢？看Personas的文件目录，貌似是在某个js下？找了好久，无果。。。我好废柴啊 = = 总结下，关键是我不知道FF的界面究竟是怎么构成的，哪块的id是什么，不然很容易改是真的。。。可以看看xul？再说吧 那么，后来我又是怎么弄得呢。。。说实话这个不是什么技术活了，算是一种hack吧。。。老外先发现的 其实台湾那边有人看到后就用过了，翻译一下就是： 1.先到扩充套件里启用想用的Personas面板，然后重新启动firefox。 2.再一次到扩充套件，启用想使用的主題，然后重新启动firefox。 3.在地址栏打上about:config。 进入设定页面后找到lightweightThemes.isThemeSelected 把设定值从false切换成true，再重启firefox。 4. 若可行的话就会看見Personas面版已经套用在刚刚设置的主题上面了。 反之看到的就是主题原本的样子。 就是这么简单这么傻乎乎的hack。。。貌似是个漏洞？最终结果是FF的外观设置里你会发现两个主题（另外一个是Personas的皮肤）同时生效中。。。 效果图如下：（除了左上角的哪快不是win下的黄色，但是如果你看明白了上面的修改ff或者修改主题，这快也很容易的） 无论怎样，总算好了 哈哈 [...]
todos — Backbone案例浅析
2011年08月3日 – 2:28 下午
Backbone的官方例子中的第一个也是最简单的，便是这个todos。 *<Backbone — 一个可以在前端组织MVC架构的javascript框架 了解更多> ——– 从功能上来讲，todos就是个to do list（典型的GTD手段之一），我们可以把要做的事情一一罗列，完成后删去即可。这次的这个app完全是个webApp而且不涉及后端。虽然从原理来讲不涉及后端的主要原因是运用到了HTML5的Local Storage特性，直接将信息本地存储而不需要用后端语言来存储信息（DB etc.），但是当完整地看待这个app时，从来没有接触过webApp的同学（像我）还是会惊叹于app整个代码的架构形式，往往写过js的都大概体会过js代码的松散和全局规划的难度，像我这样的菜鸟，如果要做个app，肯定是无数个函数。。。（以下省略） 好吧，言归正传，既然是Backbone让一个WebApp组织得如此井井有条，那我们就不妨来看看，它到底是怎么做的。 ——- —— ——– ——- —–*<todos源码>—— ——— —— ——- ——– 如果直接看源码的话，新手一下子看明白还是有一点点难度的吧（老鸟拜鄙视我），因为我们都压根不知道Backbone的基本形式啊。这里我就不去讲解Backbone了，要我说估计也不准确更不全面吧。。 附上个自己看过几遍的好文 1*<Backbone JS框架指南> 2*<从豆瓣说和Backbone.js说开去> ——– —————- 这样一来，我们大概了解了Backbone了吧，下面开始正式的介绍，介绍完之后，我想大家对它的Model，Collection以及View这三个最基本的要素会有更深的印象。 window.Todo = Backbone.Model.extend({ window.TodoList = Backbone.Collection.extend({ window.TodoView = Backbone.View.extend({ window.AppView = Backbone.View.extend({ 上面这4个声明，便是源码的全貌了，也就是说，这个App，一共包括了1个Model，1个Collection和2个View。为什么是2个View？其实稍微仔细看就会明白，第一个view是list里的每个item的view，而第二个view，是整个app的view，如果要合并，并非不可以，只是这样，整体来说更为清晰，代码的的目的性更强，更规整。 那么，我们首先来看这个Model （Models 用来创建数据，校验数据，存储数据到服务器端；Models 还可以绑定事件。比如用户动作变化触发 models 的 change 事件，所有展示此model 数据的 views 都会接收到 [...]
模拟post的快感与js跨域的无力
2011年03月13日 – 6:43 下午
自己的执行力从最近的几件事来看，完全是。。。用日语就是ぜんぜん不行。。。 先就刚完成的一个脚本来讲（后台是个还算简单的脚本，但整体的话也算是麻雀虽小，五脏俱全了–这里~~~~~~~~~~~） 先上图。。。（非商业网站，图片非原创 = =） 这个其实是个填词游戏的辅助查词工具，从表单就可以大概看出来~ 项目本身是某学长嘱托的，给了个国外的查词页面，但页面很凌乱，而且我们需要自己的。但是问题也很明显，这个查词系统和词库没那么好弄，那么怎么办呢？在把盗用数据库和自己实现算法推倒后，我们最终还是选择了比较方便的类似代理的形式，就是我们建个自己的页面（也就是这个），将参数投递到那个网站，再把结果抓回。 好了，项目大体就很清晰了。于是我和流氓有正对性地去找办法解决。其实我们也没有做过这种东西，只能去各处碰了。。。 第一个想法是用一个服务器脚本（Jsp或PHP）来填单传值，但是没怎么展开就想到第二个方案，纯JS（事后证明利弊都有。。。） 想用JS是因为起初我们对脚本操作表单确实一知半解，也没有什么容易下手的地方，然后恰好在查阅的时候看到JS自动填表提交的例子，于是一下子就心动了（诶。。。）最近其实就在看javascript和ajax来着（没怎么实践呢），于是毅然决然地做了。 这个方案初定的计划是用隐藏iframe来放国外额原始页面。然后给他参数并抓回结果。刚开始我们确实想得就是这么容易的，还准备一晚上就搞定来着。。然后我们开工。。。把form1的target指向form2，然后填完form1后，原始网页在form2里出现，结果就在那里，我们眼看就要到手了哇，这鸭子来得。。。hiahiahia（form2是个iframe） 诶！！！js操作iframe不能！！！！！怎么不能啊？？？明明这么顺理成章的事情诶。。。 “流氓”也同时抑郁了。。。 后来再深入探讨的过程中我们发现，这个就是最典型的js跨域问题。。。囧 大囧哇。。。果然是js新手。。。所谓跨域，上图= = 所以，很明显，我真的是最最最最最最最典型的跨域了 = =
Blog更新一则 = =
2011年01月29日 – 8:54 下午
很早的时候想着自己做个wp的主题，只是从来不去实现，现在越来越往后了，实际其实一直都有= = 但是感觉做之前的博客各方面都调试一下也许更好，所以尽量把插件这块配好。。。于是由此想到了博客图片的灯箱效果，也就是点击图片之后淡出放大并显示在整个页面之上。 然后还是经过搜索找到了自己想要的东西。一般大家都是通过安装plugin实现类似功能，而提供功能的插件也很多，比较之下在thickbox和slimbox时间选择了后者，原因是它的敏捷性–它只有我需要的一个功能。当然还有直接在主题内挂载jQuery库借助wp自身的一些设置自己实现类似的效果，自己还有待学习，先送上教程~ 忘了应该给出效果图的，这样，你点击这张图，试试吧~ ——————————————————————————- 除此之外呢，还有一个更新就是图片的异步载入，说白了就是当你打开一个页面的时候，页面上的图片并不是一下子全部下载下来显示的，而是根据你的滑动条的位置来判断自己是否显示。而且，图片显示的时候带有淡入淡出的效果，很流畅。 其实这同样是有强大的jQuery驱动的，只是这次我们并不去安装神恶魔plugin，因为它本身的设置很简单。 具体实现如下： 1.下载lazyload.js并上传到主题相应的目录中 2.在header.php文件</head>标签前（最好在<?php wp_head(); ?>语句前）添加如下代码： <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script> <script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/js/jquery.lazyload.js”></script> <script type=”text/javascript”> $(function() { $(“img”).lazyload({ placeholder : “<?php bloginfo(‘template_directory’);?>/images/grey.gif”, effect : “fadeIn” }); }); </script> 第1行是说明调用jQuery库 第2行是说明lazyload.js文件的载入位置，<?php bloginfo(‘template_directory’);?>是调用相应主题路径的语句。 第5行img是延迟加载所有图片，可根据实际情况更改，有时候我们并不想将侧边栏的留言者的头像延迟加载，而只是要实现文章中的图片使用该效果，则根据实际情况修改相应的img语句即可，比如#post img 第6行语句是在图片加载前先用一个透明的灰色1×1像素的图片进行占位。 第7行是实现图片“淡入”的效果 当然上述只是我目前网页中的实现效果，它其他可用的效果还有很多，我就简略说一下： 1.当图片没有看到之前先把图片载入200像素（不设置的话，默认载入像素是零） 2.在图片加载前先用一个透明的灰色1×1像素的图片进行占位 $(“img”).lazyload({ placeholder : “img/grey.gif” }); 3.自定义触发事件进行载入：比如“click”（鼠标点击）和”mouseover”(鼠标滑过)等事件触发加载图片，使用自定义的事件, 如: sporty 和 foobar；默认情况下处于等待状态, [...]