github的历史前进后退无刷新实现

今天google了下,了解了解。

Github的源码浏览在点击浏览器前进或后退时,会呈现滑动特效,并且地址栏url真实改变,整个页面无刷新,与传统的加#url的实现完全不一样了。

这得益于HTML5的history api加强。其他人已经分析写的很好了,再此贴上参考资料:

有空可以玩玩。

继续阅读~ 评论(1)

css3的背景透明如何在IE实现

css3的background-color支持rgba值以支持透明背景,具体使用方法可以看手册或google。

注意不同于css2的opacity属性,opacity 透明会使该元素的子孙元素和文字都变的透明。

标准浏览器如FF,Opera,Safari,Chrome等最新版都支持了rgba的背景透明 ,而仍然使用广泛的IE6,7,8是不支持的。但是今天研究了下about.me,搞清楚了ie下的滤镜实现方式,这样通过一些额外代码就可以使IE也完美表现。

IE下有个背景渐变滤镜:Gradient Filter。如同Photoshop中的渐变一样。就是这个滤镜可以实现背景透明。

继续阅读~ 参与评论~

Web开发者必备电子书推荐,提供良好的下载地址

来源于 http://www.iteye.com/news/21773, 不过见其提供的下载有些是需要积分的csdn地址,故自己根据书名google了下其他的下载地址。这里的书籍不是全部,只列了我感兴趣并下载了的几本。

1、Getting Real中文版.pdf  ( 下载 )

Getting Real是37signals(一家私人控股的网络应用公司,总部位于美国伊利诺斯州芝加哥市,其开发的软件在70个国家的企业中超过1亿人使用)出版的关于商业、设计、编程和营销理念的书,这本书从方方面面讲述如何开始并成功地运维一个互联网产品。对于曾在或是正在从事互联网工作的人来说,会更能感受到这本书的魅力。

2、The Woork Handbook( 下载 or http://woork.blogspot.com/2009/01/woork-handbook.html )

本书是一本关于CSS、HTML、AJAX、Web编程、MooTools、Scriptaculous和关于网页设计其他方面的免费电子书。

3、Building iPhone Apps with HTML, CSS, and JavaScript ( 下载 or online read:   http://ofps.oreilly.com/titles/9780596805784/ )

如果你了解HTML、CSS和JavaScript,你就可以开发自己的iPhone应用程序。有了这本书,你将学习如何使用这些开源的Web技术,以便设计和创建iPhone、iPod Touch应用程序。

4、Dive Into Accessibility ( 下载 )

这本书回答了两个问题。第一个问题是“为什么要使我的网站更具亲和力?”如果你没有网站,这本书是不适合你的。第二个问题是“如何使我的网站更具亲和力?”如果你不相信第一个答案,你也不会对第二个问题感兴趣的。

5、HTML5 Quick Learning Guide ( 下载 )

本指南主要介绍你可能要马上使用的HTML5的主要元素。

6、Best Practices for Developing a Web Site ( 下载 )

建设一个网站最具挑战性的部分是开发的基本要点、网站的规划和构想。在任何实际的设计和开发之前,你需要定义你的网站的主要目的、你想去传达的信息,以及如何传达这一信息。

7、Web Style Guide V3 ( 下载 )

本书已经是第三版了,包含各种Web开发知识和技巧,为无数的Web开发者提供了帮助。

继续阅读~ 参与评论~

jQuery配合正则取背景图地址

来自于: 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”))

继续阅读~ 参与评论~

工作用ubuntu 11.04,我都做了啥…

1、RabbitVCS : TortoiseSVN 的替代者(来自http://wowubuntu.com/rabbitvcs.html)

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. 据使用的同事说用起来会卡, 我先试试再说了。

继续阅读~ 评论(3)

jQuery的事件命名空间-Namespaced Events

命名空间简单易懂的说就是为了避免混淆,恰似人类的姓+名。专业解释请看 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"); //结果会怎样呢?

                                    
                

继续阅读~ 评论(1)

魔数的魔力伤害

网站运营后,因为一次功能修订,被魔数的魔力命中,稍微纠结了一下。

可能多数程序员会这么做,将上传的图片按照一定规则命名, 这没什么问题,关键在于有人或许把图片尺寸纳入了此规则。

我们的规则是:文件数据库id_图片宽度_XX.png,其中图片宽度是固定尺寸,比如文件名为  0001_128 _aa.png, 页面程序输出就按此规则: echo $id.’_128_’.name, $id是变量,128就成了“魔数”。

而我们遇到的问题是,运营后boss因为某个页面效果提出问题,需要修订这个图片的尺寸,此时就感觉到魔数的魔力了,囧。

为啥会发生这种问题。。。貌似很多因素会促成这个习惯,最常见的是某些书籍,某些例子,某些教学过程。还好我们遇到的问题还不是那么难解决。无量天尊!

PS. 避免魔数的方式,很显然我们应该按这样规则命名: id_large_name.png, id_small_name.png 等等,用语义去代替具体数字。

继续阅读~ 参与评论~

关于jquery方法closest()

最近发现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,而不是空元素。

继续阅读~ 评论(1)

jCarouselLite-好用的图片滚动插件,修改加入悬停习惯

插件Home:http://www.gmarwaha.com/jquery/jcarousellite/index.php

一直在用,并且没有想过自己再造轮子的插件,作用是图片列表上下或垂直滚动,可以添加方向控制按钮,你应该懂的。

用法很简单,jquery插件通用的套路,具体看官网。个人对这个插件做了下修改,当设置为自动滚动时候,鼠标放上去可以停止,离开则继续,同时增加一个button inactive类名设置。下面进入正题。

继续阅读~ 参与评论~

1 2 20 21 22 23 24 25 26 27 28 29

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(58)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(55)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(33)移动开发(4)自然(26)