github的历史前进后退无刷新实现
今天google了下,了解了解。
Github的源码浏览在点击浏览器前进或后退时,会呈现滑动特效,并且地址栏url真实改变,整个页面无刷新,与传统的加#url的实现完全不一样了。
这得益于HTML5的history api加强。其他人已经分析写的很好了,再此贴上参考资料:
有空可以玩玩。
今天google了下,了解了解。
Github的源码浏览在点击浏览器前进或后退时,会呈现滑动特效,并且地址栏url真实改变,整个页面无刷新,与传统的加#url的实现完全不一样了。
这得益于HTML5的history api加强。其他人已经分析写的很好了,再此贴上参考资料:
有空可以玩玩。
css3的background-color支持rgba值以支持透明背景,具体使用方法可以看手册或google。
注意不同于css2的opacity属性,opacity 透明会使该元素的子孙元素和文字都变的透明。
标准浏览器如FF,Opera,Safari,Chrome等最新版都支持了rgba的背景透明 ,而仍然使用广泛的IE6,7,8是不支持的。但是今天研究了下about.me,搞清楚了ie下的滤镜实现方式,这样通过一些额外代码就可以使IE也完美表现。
IE下有个背景渐变滤镜:Gradient Filter。如同Photoshop中的渐变一样。就是这个滤镜可以实现背景透明。
来源于 http://www.iteye.com/news/21773, 不过见其提供的下载有些是需要积分的csdn地址,故自己根据书名google了下其他的下载地址。这里的书籍不是全部,只列了我感兴趣并下载了的几本。
Getting Real是37signals(一家私人控股的网络应用公司,总部位于美国伊利诺斯州芝加哥市,其开发的软件在70个国家的企业中超过1亿人使用)出版的关于商业、设计、编程和营销理念的书,这本书从方方面面讲述如何开始并成功地运维一个互联网产品。对于曾在或是正在从事互联网工作的人来说,会更能感受到这本书的魅力。
本书是一本关于CSS、HTML、AJAX、Web编程、MooTools、Scriptaculous和关于网页设计其他方面的免费电子书。
如果你了解HTML、CSS和JavaScript,你就可以开发自己的iPhone应用程序。有了这本书,你将学习如何使用这些开源的Web技术,以便设计和创建iPhone、iPod Touch应用程序。
这本书回答了两个问题。第一个问题是“为什么要使我的网站更具亲和力?”如果你没有网站,这本书是不适合你的。第二个问题是“如何使我的网站更具亲和力?”如果你不相信第一个答案,你也不会对第二个问题感兴趣的。
本指南主要介绍你可能要马上使用的HTML5的主要元素。
建设一个网站最具挑战性的部分是开发的基本要点、网站的规划和构想。在任何实际的设计和开发之前,你需要定义你的网站的主要目的、你想去传达的信息,以及如何传达这一信息。
本书已经是第三版了,包含各种Web开发知识和技巧,为无数的Web开发者提供了帮助。
来自于: http://webdevel.blogspot.com/2009/07/jquery-quick-tip-extract-css-background.html
一个方法函数:
function extractUrl(input) { // remove quotes and wrapping url() return input.replace(/"/g,"").replace(/url\(|\)$/ig, ""); }
然后使用 extractUrl($(“#myelement”).css(“background-image”))
TortoiseSVN 是 Windows 平台上版本控制程序 Subversion 的前端客户端,而 RabbitVCS 就是 Linux 平台下 TortoiseSVN 的最佳替代者。
RabbitVCS 是一款 Linux 平台上的版本控制前端程序,使用 Python 技术构建。可以与文件管理器 Nautilus 紧密整合,支持 Subversion (SVN) , Git 版本控制系统,未来还将支持 Mercurial 。
项目主页: http://rabbitvcs.org/
# Ubuntu 用户安装(与 Nautilus 整合), 其它发行版请到这里下载。
sudo add-apt-repository ppa:rabbitvcs/ppa
sudo apt-get update
sudo apt-get install rabbitvcs-core rabbitvcs-nautilus rabbitvcs-cli
附加: 安装 RabbitVCS Gedit 扩展
sudo apt-get install rabbitvcs-gedit
修复无法显示图标的问题
gconftool-2 –set /desktop/gnome/interface/menus_have_icons –type bool true
最后输入以下命令重启 Nautilus 就可以使用 RabbitVCS 了。
nautilus -q
PS. 据使用的同事说用起来会卡, 我先试试再说了。
不同于jquery plugin的实现方式,这两款以事件为机制实现的drag,drop,提供更强大的功能,实现更多效果。
1、http://jupiterjs.com/news/delegate-able-drag-drop-events-for-jquery
2、http://threedubmedia.com/code/event/drag
看看demo就知道,甚至可以实现resize效果。
命名空间简单易懂的说就是为了避免混淆,恰似人类的姓+名。专业解释请看 http://zh.wikipedia.org/wiki/命名空间。
命名就是取名,比如两个人都叫做小明,空间就是区分命名的,比如一个小明姓王,一个小明姓张。王,张的姓就是空间,命名+空间(姓,名合体:王+小明,张+小明),你就不会混淆到底在说哪个小明。
jquery的事件命名空间,就是为了区分同一个jquery元素绑定的多个同名事件,使用方法就是: $.bind(“事件名.区分后缀”, function),$.trigger(“事件名.区分后缀”)。下面仅以unbind举例说明,trigger也是同样道理:
<script type="text/javascript"> $(function(){ $("body").bind('click', function(){ console.info('第一次单击绑定输出'); }); $("body").bind('click', function(){ console.info('第二次单击绑定输出'); }); $("#unbind").click(function(){ $('body').unbind('click'); console.info('解除了body的所有单击事件'); }); }); </script>
以上代码绑定了两次click事件,会同时执行。unbind(‘click’),就会解除全部的click事件。
如果我只想解除其中之一,而不是解除所有的单击事件,怎么办?答案就是使用命名空间。看以下代码:
<script type="text/javascript"> $(function(){ $("body").bind('click.one', function(){ console.info('第一次单击绑定输出'); }); $("body").bind('click.two', function(){ console.info('第二次单击绑定输出'); }); $("#unbind").click(function(){ $('body').unbind('click.one'); console.info('只解除body的第一次单击事件'); }); $("#unbind-all").click(function(){ $('body').unbind('click'); console.info('解除了body的全部单击事件,包括有命名空间的单击事件'); }); }); </script>
当解除click.one时候,click.two事件就被保留了下来。但是unbind(‘click’)会解除所有(无论有没有命名空间)的单击事件。
简单的说: 杀死王小明,那么张小明会活下来。杀死小明,那么代表王小明和张小明都要被干掉。
所以,jquery的事件命名空间就是提供一种途径,让你恰当的对指定事件解除绑定(unbind)或触发(trigger),而不影响其他已绑定的“同名不同姓”的事件。
PS. 官方说明 http://docs.jquery.com/Namespaced_Events
在jquery1.2+就已经可以使用命名空间。在jquery1.3+以后,还可以这样绑定:
$('.class').bind('click.a.b', function(){}); $('.class').trigger('click.a'); $('.class').unbind('click.b'); //经测试 click.a.b === click.a === click.b 这样的命名空间有什么用?囧,貌似曾用名,现用名,但还是同一个人。
另外看看这样:
$("a").bind("click.one", function) $("a").bind("mouseover.one", function) $("a").unbind(".one"); //结果会怎样呢?
网站运营后,因为一次功能修订,被魔数的魔力命中,稍微纠结了一下。
可能多数程序员会这么做,将上传的图片按照一定规则命名, 这没什么问题,关键在于有人或许把图片尺寸纳入了此规则。
我们的规则是:文件数据库id_图片宽度_XX.png,其中图片宽度是固定尺寸,比如文件名为 0001_128 _aa.png, 页面程序输出就按此规则: echo $id.’_128_’.name, $id是变量,128就成了“魔数”。
而我们遇到的问题是,运营后boss因为某个页面效果提出问题,需要修订这个图片的尺寸,此时就感觉到魔数的魔力了,囧。
为啥会发生这种问题。。。貌似很多因素会促成这个习惯,最常见的是某些书籍,某些例子,某些教学过程。还好我们遇到的问题还不是那么难解决。无量天尊!
PS. 避免魔数的方式,很显然我们应该按这样规则命名: id_large_name.png, id_small_name.png 等等,用语义去代替具体数字。
最近发现jquery 1.4中文手册中对于closest()方法的context描述有误。
中文手册的描述:
closest(expr,[context] )
参数
expr (String, Array) : 用以过滤元素的表达式。jQuery 1.4开始,也可以传递一个字符串数组,用于查找多个元素。
context (可选) (Element, jQuery) : 作为待查找的 DOM 元素集、文档或 jQuery 对象。
其中描红的文字“jquery对象”,是错误的用法,官方文档没有说明可以是jquery对象(实际测试,也确实不可以是jquery对象)。
附上官方文档说明(官方仅指出是一个dom element):
.closest( selector, [ context ] )
selector A string containing a selector expression to match elements against.
context A DOM element within which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.
PS. 另外发现一个特性:
<body> <ul> <li> <p id="test">test context for this</p> </li> </ul> </body>
当使用$(“#text”).closest(‘li’, $(“#text”)[0])时,即context为元素本身,则会继续向上寻找,返回li,而不是空元素。
插件Home:http://www.gmarwaha.com/jquery/jcarousellite/index.php
一直在用,并且没有想过自己再造轮子的插件,作用是图片列表上下或垂直滚动,可以添加方向控制按钮,你应该懂的。
用法很简单,jquery插件通用的套路,具体看官网。个人对这个插件做了下修改,当设置为自动滚动时候,鼠标放上去可以停止,离开则继续,同时增加一个button inactive类名设置。下面进入正题。