Author: Gideon

HTML 5缓存机制:Cache Manifest配置实例

Cache Manifest是HTML 5的一种缓存机制,文章作者直接用博客当测试环境,虽然应用起来非常简单,但效果却出奇的好。缓存后的速度,简直是惊人的快。像Yslow显示,打开一个缓存过的页面,只要0.729秒,比不缓存的差不多快了10倍。 一、Cache Manifest基础知识 作为一个Web开发相关的人员,都不会少听到、看到Cache这个词。是的,上面也已经说了,它是一种缓存的机制。它可以通过一个.manifest文件来配置需要缓存的或者一定要保持联网缓存的文件。而重点就是这个.manifest文件,这里进行了简单的整理: ◆MIME TYPE:text/cache-manifest ◆需要由你创建… Read More

不使用 Cookie 的“Cookie”技术

有另一种方法可以跟踪用户而不使用cookies或Javascript。这种方法 已经被用于无数网站,但几乎没人人们知道。本页解释这种方法是如何运作的,以及是如何保护你自己的。 这种跟踪方式 无需使用: Cookies Javascript LocalStorage/SessionStorage/GlobalStorage Flash、Java或其他组件 你的IP地址或是用户代理字符串(User Agent String ) 任何Panopticlick所使用的方式 相反,它使用另一种存储方式,在浏览器重启的时候也可以保持持久性,这就是: caching。 即使你完全禁用cookies、关闭Javascript功能并且使用V… Read More

Ubuntu 查看哪些设备链接wifi[How To] Find What Devices Are Connected to Network In Ubuntu

Wireless Network are the most easy as well as desirable target for wannabe hackers. Ever wondered that someone might be leeching of your hard paid wifi network? You may opt out for an expensive way to keep the hackers away by buying hacker-proof wallpapers for your home but that really is far fetched. An easy

轻量级的jQuery表单校验插件: Happy.js

当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂。如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择。 这个插件是轻量级的,所以只支持一些输入校验默认包括:必填、日期、数字、电子邮件、最大/最小限制,电话号码。但还可以通过正则表达式扩展校验规则。   要求: jQuery or Zepto 支持 项目网站: http://happyjs.com/ 下载地址: https://github.com/andyet/Happy.js   转自:http://www.open-open.com/lib/view/open1346835863100.ht… Read More

如何用 javascript 做一个高逼格的进度条

可能你发现了本站顶部的进度条,它是如何实现的呢?下面一起来看。 页面进度条展示的是资源下载的进度,通常在页面上加上进度条,可以缓解用户的等待焦虑,也提升了网站的逼格。 前端进度条实现 在前端,实现网页的进度条目前还没有一个比较精确的方案,都是一些模拟进度。即页面打开的时候是 1%,然后定时器增加进度到 99%,然后 window.onload 之后,进度跑到 100%。 在前端,ajax 资源的上传和下载,html5 中都可以获取进度的,此文不谈。 实现准备 html 文件 <!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="UT… Read More

jQuery kxbdMarquee 无缝滚动

<marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件。 版本: jQuery v1.3.2+ 查看 Demo jQuery kxbdmarquee 文档目录 使用方法 参数说明 相关信息 使用方法 载入 JavaScript 文件 <script src="jquery.js"></script> <script src="jquery.kxbdmarquee.js"></script>   CSS 样式 /** * 父容器需要设置溢出隐藏 * 如果是水平滚动,项目需要设置浮动 */ #element_id… Read More

Nestable 可移动拖拽的树型结构的使用(jQuery)

利用jQuery可以制作出很好的树型结构。这里介绍一款最近才找到使用的Nestable   可以拖动。  网页中的效果 http://dbushell.github.com/Nestable/ 具体详细介绍的地址下载https://github.com/dbushell/Nestable   精简后的实例: <?php if($_POST['tree_data']) { echo '==>'.$_POST['tree_data'].'<pre>'; print_r(json_decode($_POST['tree_data'])); echo '</pre>'; die… Read More

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。(可以看看测试页面,有简短解释。) 方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 <div class="wrapper"> <div class="cell"> <div class="content"> Content goes here&… Read More

CSS学习:使用HTML、CSS写好一个输入框

1、引子与强迫症 先看图: 如 上图,放大了数倍之后的输入框在无文字和有文字时的光标高度以及对齐方式。以上举例的四个输入框只有百度做的最完美,无无文字时和输入文字时一致对齐,非 常的美观。反观其他3个输入框,做的都不是特别好,只在意在无文字输入时,蓄意放大光标长度,导致输入文字时光标高度不一致。这种输入框在强迫症患者下看 来是无法接受的。 2、光标的高度决定关系 以淘宝输入框为例: 如图中用绿色框中的样式,如文字大小、高度、行高、内边距,这些是影响输入框内部的主要样式(样式参考以chrome浏览器为例)。 chrome浏览器的输入框光标、输入文字、占位符有以下规则: 无文字输入时,以行高为准; 有文字输入时,以文字… Read More

jQuery插件实现网页底部自动加载-类似新浪微博

要实现滚动条滚到底部自动加载后续内容到内容到底部的功能,用jQuery非常方便的,只要知道什么时候滚动到了底部就好办了。 $(document).scrollTop() //获取垂直滚动条到顶部的距离 $(document).height()//整个网页的高度 $(window).height()//浏览器窗口的高度 文档的高度减去窗口的高度就是滚动条可滚动的范围了。那么 $(window).scrollTop() + $(window).height() >= $(document).height() 滚动条就到底部了,我们只要在$(window).scroll()中判断和加载内容就可以了: $(functi… Read More

jquery插件:jquery-scrollable无限无缝循环滚动

1、插件介绍 支持无限无缝循环滚动。 最小的限度的操作DOM,只在初始化的时候复制一次DOM,后续不会再操作DOM,最大化性能。 默认的DOM结构为:#demo>ul>li*n。 丰富配置、简单接口。 注意:无缝滚动不支持prev、next操作,不支持onbeforechange、onafterchange回调。 2、插件参数 // 默认参数 $.fn.scrollable = { // 内容区域选择器 contentSelector: "ul", // 宽度,超过隐藏 width: "auto", // 高度,超过隐藏 height: "auto", // 滚动方向 direction: "top", // 每次滚动的项目数量 // 如果为… Read More