jQuery Pjax-使用history.pushState无刷新改变页面URL

表现

如果你使用chrome或者firefox等浏览器访问github.com、plus.google.com等网站时,细心的你会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。

是什么有这么强大的功能呢?

HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。 继续阅读“jQuery Pjax-使用history.pushState无刷新改变页面URL”

jQuery on() 方法

on() 方法为指定元素的一个或多个事件绑定事件处理函数

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素);也就是说即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。 继续阅读“jQuery on() 方法”

分享几种动态的全屏遮罩层效果

小编给大家分享一些有趣的全屏遮罩层效果的灵感,像其他UI组件一样,在遮罩层效果上也有新的风格和趋势的出现,我们尝试一些奇妙的有趣的效果。跟sfancybox遮罩层相似的效果。这些遮罩层效果的特别之处是没有固定的大小,但是他们占据整个屏幕,因此创建效果时,必须考虑到这一点。但是这并不是说我们不能用一些有趣的效果,比如SVG形状变形。 继续阅读“分享几种动态的全屏遮罩层效果”

带缩略图进度条可拖放上传jQuery插件

jQuery File Uploader 是一个 jQuery 文件拖放上传插件,包括 Ajax 上传和进度条效果。作者编写这个插件的想法是要保持它非常简单,不像其他的插件,很多的标记,并提供一些 Hack 的方式使之兼容那些古老的浏览器。jQuery File Uploader 重点是现代浏览器,而且还提供了一个方法让你知道什时候插件不支持使用。 继续阅读“带缩略图进度条可拖放上传jQuery插件”

SweetAlert – 现成的漂亮的提示窗口效果

前端开发er们早就扔掉Alert提示效果了,自定义的弹出层提示效果应有尽有,美不胜收。今天给大家推荐一个现成的弹出层提示效果Sweet Alert。
Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果。SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒。另外提供了丰富的自定义配置选择,可以灵活控制。 继续阅读“SweetAlert – 现成的漂亮的提示窗口效果”

前端开发中有用的HTML+CSS3效果

HTML5+CSS3效果太多了,见一个就收一个吧。

1.自适应的占位符效果

在早期,我们都是通过使用 JavaScript 来实现占位符功能。而现在,HTML5 原生提供的 placeholder 属性让我们在现代浏览器轻松就能实现这样的功能。这里向大家分享一个自适应的占位符效果(Adaptive Placeholder),当你输入的时候,提示文字不会消失,而是以动画的方式移动到了输入框的上方。

012341520419811

源码下载  在线演示

2.单元素实现的 CSS 加载进度提示效果

之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合。这些加载效果都是基于一个 DIV 元素实现的,十分强悍。

021205265523301

源码下载 在线演示

3.奇特的网格加载效果

向您展示了如何使用 Masonry 网格砌体插件,结合 CSS 动画重现这种效果。另外在这里,我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。

182052264687088

源码下载 在线演示

4.超炫的复选框(Checkbox)效果

复选框(Checkbox)在各个浏览器中的效果不一致,因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。

201639273854969

源码下载 在线演示

5.网页边栏过渡动画

以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是。通常侧边栏滑入,把其他内容推到一边。这个可过程中可以加入很多微妙而奇特的效果。

271749425916660

源码下载 在线演示

6.超炫的页面切换动画效果

今天我们想与大家分享一组创意的页面切换熊效果集合。我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果。

271726215915446

源码下载 在线演示

Validform-表单验证完美解决方法

表单验证-Validform,最近发现这个真的非常好用,可以自定义样式。

功能简介:

可以在input上直接绑定正则,可以自定义datatype,自定义datatype可以是正则,也可以是函数,datatype可以累加或单选,甚至还可以对datatype规则执行简单的逻辑运算。内置10类常见的格式验证;

可以自定义提示方式,可以实现你想要的任何提示效果。内置了4种常见的提示方式;

可以对表单下的某一块区域或具体的某个表单元素单独进行验证,并可以选择验证后需不需要显示出错信息,还能得到一个值来判断被检测对象是否通过了验证;

可以轻松的取消或恢复对表单下的某一块区域或具体的某个表单元素的验证;

强大的ajax功能,很轻松的可以实现实时验证以及表单的ajax提交;可以灵活的设置ajax提交时的参数;

智能的出错信息提示:会根据绑定的datatype输出相应的出错信息,另外还可以在自定义datatype里返回具体的出错信息,错误信息里可以使用html标签,如果页面里没有显示出错信息的标签,会根据tiptype值自动创建。可以选择在没有输入时不提示和只在提交表单时有信息提示。可以选择一次提示单个错误或一次显示全部出错信息。可以自己设置默认的提示文字;

可以在表单开始检测前和表单检测通过后,提交表单之前绑定事件;

当前版本外调插件可以实现文件上传检测、密码强度检测、日期控件和表单美化效果;

丰富的Validform对象的属性和方法,给你的验证操作带来无限的可能。

blog-validform

VIEW DEMODOWNLOAD

入门详解

1、引入css

请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 “/*==========以下部分是Validform必须的===========*/” 之后的部分是必须的)。

2、引入js (jquery 1.4.3 以上版本都可以)

3、给需要验证的表单元素绑定附加属性

<form class="demoform">

<input type="text" value="" name="name" datatype="s5-16" errormsg="昵称至少5个字符,最多16个字符!" />

</form>

4、初始化,就这么简单

<script type="text/javascript">
$(function(){
$(".demoform").Validform(); //就这一行代码!;
})
</script>

绑定附加属性

凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式。
如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非常强大的功能,通过它可以满足你的任何需求。

可以绑定的附加属性有:datatype、nullmsg、sucmsg、errormsg、ignore、recheck、tip、altercss、ajaxurl 和 plugin
绑定方法如下所示:

<!--ajax实时验证用户名-->

<input type="text" value="" name="name" datatype="e" ajaxurl="valid.php?myparam1=value1&myparam2=value2" sucmsg="用户名验证通过!" nullmsg="请输入用户名!" errormsg="请用邮箱或手机号码注册!" />

<!--密码-->

<input type="password" value="" name="userpassword" datatype="*6-15" errormsg="密码范围在6~15位之间!" />

<!--确认密码-->

<input type="password" value="" name="userpassword2" datatype="*" recheck="userpassword" errormsg="您两次输入的账号密码不一致!" />

<!--默认提示文字-->

<textarea tip="请在这里输入您的意见。" errormsg="很感谢您花费宝贵时间给我们提供反馈,请填写有效内容!" datatype="s" altercss="gray" class="gray" name="msg" value="">请在这里输入您的意见。</textarea>

<!--使用swfupload插件-->

<input type="text" plugin="swfupload" class="inputxt" disabled="disabled" value="">

<input type="hidden" value="" pluginhidden="swfupload">

<!--使用passwordStrength插件-->

<input type="password" errormsg="密码至少6个字符,最多18个字符!" datatype="*6-18" plugin="passwordStrength" class="inputxt" name="password" value="">

<div class="passwordStrength" style="display:none;"><b>密码强度:</b> <span>弱</span><span>中</span><span class="last">强</span></div>

<!--使用DatePicker插件-->

<input type="text" plugin="datepicker" class="inputxt" name="birthday" value="">

分享8个能提升你网站质量的HTML代码片段

HTML5是迄今为止最有趣的超文本标记语言。在本文中整理了9个有趣实用的HTML5代码片段,相信这些一定能让你的网站更出色。

1.Url和Email   input类型

url和email是HTML5推出新的input类型中的一个。这能够让你写出一个语义上更正确的代码,并能更简单的在移动设备上完成表单form的制作,它能根据不同的input类型显示特殊的按钮(如@或COM按钮)。 继续阅读“分享8个能提升你网站质量的HTML代码片段”