Day: May 11, 2015

轻量级的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.html… Read More

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

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

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

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

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

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

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

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

LZW算法PHP实现方法 lzw_decompress php

LZW算法简介 字符串和编码的对应关系是在压缩过程中动态生成的,并且隐含在压缩数据中,解压的时候根据表来进行恢复,算是一种无损压缩. 根据 Lempel-Ziv-Welch Encoding ,简称 LZW 的压缩算法,用任何一种语言来实现它. LZW压缩算法[1]的基本概念:LZW压缩有三个重要的对象:数据流(CharStream)、编码流(CodeStream)和编译表(String Table)。在编码时,数据流是输入对象(文本文件的据序列),编码流就是输出对象(经过压缩运算的编码数据);在解码时,编码流则是输入对象,数据流 是输出对象;而编译表是在编码和解码时都须要用借助的对象。字符(Character):最基础的数据元素,在文本文件中就是一个字节,在光栅数据中就是 一个像素的颜色在指定的颜色列表中的索引值;字符串(String):由几个连续的字符组成; 前缀(Prefix):也是一个字符串,不过通常用在另一个字符的前面,而且它的长度可以为0;根(Root):一个长度的字符串;编码(Code):一 个数字,按照固定长度(编码长度)从编码流中取出,编译表的映射值;图案:一个字符串,按不定长度从数据流中读出,映射到编译表条目.   LZW压缩算法的基本原理:提取原始文本文件数据中的不同字符,基于这些字符创建一个编译表,然后用编译表中的字符的索引来替代原始文本文件数据中 的相应字符,减少原始数据大小。看起来和调色板图象的实现原理差不多,但是应该注意到的是,我们这里的编译表不是事先创建好的,而是根据原始文件数据动态 创建的,解码时还要从已编码的数据中还原出原来的编译表.… Read More