jQuery倒计时插件jCountdown

目前版本为:jCountdown jQuery Plugin – v1.5.2 – 2014-07-29
下载地址:https://github.com/tomgrohl/jCountdown/
这个插件使用比较简单,难得的是一个版本一个版本在不断做着升级优化。非常符合我选择插件的要求。
介绍下如何使用:
1、引用jquery.jcountdown.js文件。
2、html里面添加给要显示倒计时的区域添加id名。例:

3、调用,填写相应参数。

$(document).ready(function() {

	$("#countdown").countdown({
		date: "August 15, 2014 09:59",
		omitZero: false,//省略0
		//minsOnly: true,
		leadingZero: false, //前导0
		//yearsAndMonths: true, //年月
		//weeks: true //周
	});

});

由于为外国人开发所显示的为日期名称为英文,还好有参数,方便修改。另一例调用方法,如下。

	// 倒计时
	var dateTo = "August 15, 2014 00:00"
	$("#time").countdown({
		yearText: '年',
		monthText: '月',
		weekText: '周',
		dayText: '天',
		hourText: '时',
		minText: '分',
		secText: '秒',
		yearSingularText: '年',
		monthSingularText: '月',
		weekSingularText: '周',
		daySingularText: '天',
		hourSingularText: '时',
		minSingularText: '分',
		secSingularText: '秒',
		date: dateTo,
		omitZero: false
	});

在这个过程中,产品有个需求是去掉“秒”的展示,通过简易模板配置可以完成。代码如下:

$(document).ready(function() {

	// Tokens available: %y = years, %m = months, %w = weeks, %d = days, %h = hours, %i = minutes, %s = seconds
	
	$("#countdown").countdown({
		date: "september 10, 2015 12:35",
        //yearsAndMonths: true,
		template: '%d %h %i'
	});

});

ps:此插件支持一个页面有多个倒计时存在。还包含了一些方法,请查看示例。

设置时间时不能设为24:00,否则在chrome下会出现:Uncought Error:Invalid Date passer to jCountdown

select2 去掉搜索框

select2 是一个基于jQuery 的选择框美化插件。支持搜索远程数据集以及无限滚动等功能

地址为:http://ivaynberg.github.io/select2/

使用后会自动生成一个搜索框,有些时候没有用,需要去掉。代码如下:

html部分:


javascript部分:

$(document).ready(function() { 
	$("#type_select").select2({
		minimumResultsForSearch: -1
	}); 
});

好用的弹窗jQuery插件之bPopup.js

插件官网:http://dinbror.dk/blog/bpopup/
版本佚代次数较多目前为:0.9.4

浏览器支持:IE7-9, FF2-7, Opera 9-10, Safari 4-5 and Chrome 4-15.
悲催的ie6不在支持了,但是还是有需要的。通过查看Change list,发现是在0.6.0版本时给去掉,但是有提示添加很容易。
没找到添加的版本,刚刚发现标题部分显示,14年1月16日服务器故障,旧版本都没有了,冏~~

使用说明:
html部分

    
         ... 
        
          ...
            
            
            
            
Content of popup
...

css部分

#element_to_pop_up { display:none; }

js部分

    // Semicolon (;) to ensure closing of earlier scripting
    // Encapsulation
    // $ is assigned to jQuery
    ;(function($) {

         // DOM Ready
        $(function() {

            // Binding a click event
            // From jQuery v.1.7.0 use .on() instead of .bind()
            $('#my-button').bind('click', function(e) {

                // Prevents the default action to be triggered. 
                e.preventDefault();

                // Triggering bPopup when click event is fired
                $('#element_to_pop_up').bPopup();

            });

        });

    })(jQuery);

或者配置参数使用:
    ;(function($) {
        $(function() {
            $('#my-button').bind('click', function(e) {
                e.preventDefault();
                $('#element_to_pop_up').bPopup({
                    appendTo: 'form'
                    , zIndex: 2
                    , modalClose: false
                });
            });
         });
     })(jQuery);

介绍常用的参数:
appendTo [string] (’body’) 将模态窗口添加到指定元素中,jquery选择器直接指定元素。
closeClass [string] (‘b-close’) 在元素上添加b-close的class,点击关闭模态窗口
escClose [bool] (true) 是否启用esc关闭,默认开启。
follow [bool,bool] ([true,true]) 默认开启,模态窗口跟随浏览器大小而改变
modalClose [bool] (true) 模态窗口点击是否关闭,默认是。
position [int,int] (['auto','auto']) 定位,先水平,后垂直。

还有很多功能,待使用发掘。演示的demo,效果很帅,插件本身挺小,推荐使用。

好用的弹窗jQuery插件之simplemodal

一、simplemodal 网站:http://www.ericmmartin.com/simplemodal-1-4-4-released/

浏览器支持:
IE 6+
Firefox 2+
Opera 9+
Safari 3+
Chrome 1+

引入jquery库及插件后使用。简单用法:

$("#element-id").modal();    //显示element-id
$.modal("

SimpleModal

"); //新建模态窗口内容为引号内html片段。

带参数的示例:

// 改变遮罩颜色和透明度
$("#sample").modal({
	opacity:80,
	overlayCss: {backgroundColor:"#fff"}
});

参数很丰富,参数列表(http://www.ericmmartin.com/projects/simplemodal/#options)基于这些基本能满足我们的需求。记录几个比较常用的参数。

appendTo [String:’body’]
默认值body,将弹层加入到指定元素中。例:appendTo:’.content’,将弹层加入到class为content的层中。

autoPosition [Boolean:true] (Changed in 1.4)
改变窗口大小调整自动定位,默认为真。当使用引导层时,选择false,改变窗口大小时就不会改变位置了。

closeClass [String:’simplemodal-close’]
添加class为simplemodal-close的html元素,点击关闭弹窗。

position [Array:null]
位置参数,一般弹层为居中显示时不用此参数。当有定位需求时使用例:

$("#sample").modal({position: [10,10]});

记录几个常用的js插件

1、jQuery定位跳转插件(jquery.scrollTo.js)

ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置。适用在一些页面内容比较多,页面长度有好几屏的场合。

当点击导航按钮时,触发scrollTo方法,$.scrollTo带有两个参数,第一个是指定要滚动的目的ID,第二个参数是滚动时间间隔,以毫秒为单位。

下载:https://github.com/flesler/jquery.scrollTo/releases
中文简易教程:http://www.helloweba.com/view-blog-118.html

2、美化滚动条插件(jquery.nicescroll.js)

jquery.nicescroll是一个非常时尚的滚动条,用来美化,兼容所有的浏览器。

一款非常完美的滚动条,简称nicescroll自定义滚动条,兼容性良好,可以完美兼容IE 6 7 8 火狐 谷歌等几乎目前都在用的浏览器,使用方法简单。

只要依次引入jquery库以及jquery.nicescroll插件即可,其中滚动条的颜色以及宽度均在js中可以控制,效果简单易用。

下载地址及使用说明:http://areaaperta.com/nicescroll/index.html

3、jQuery Easing动画效果扩展插件

缓动函数指定动画效果在执行时的速度,使其看起来更加真实。现实物体照着一定节奏移动,并不是一开始就移动很快的。当我们打开抽屉时,首先会让它加速,然后慢下来。当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板。本页可以在每次你需要时,帮助你找到想要的缓动函数。缓动函数速查表:http://easings.net/zh-cn

jQuery中animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。自定义动画函数.animate()有四个参数:

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
duration (String,Number) : (可选) 三种预定速度之一的字符串(”slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
easing (String) : (可选) 要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.
callback (Function) : (可选) 在动画完成时执行的函数

其中参数easing默认有两个效果:“linear”和“swing”,如果需要更多就要插件:jQuery Easing Plugin.

下载地址:http://gsgd.co.uk/sandbox/jquery/easing/

4、幻灯片插件SlidesJS

Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件。
Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多选项。
用Slides插件,你可以随机播放幻灯片,设定那一套您想要开始幻灯片。它附带充分的说明和示例。
下载:http://slidesjs.com/
基本使用方法:http://www.cnblogs.com/mzbdadou/archive/2013/02/19/2916803.html

5、滚动动画效果

ScrollMagic 是 jQuery 插件,允许用户像进度条一样使用滚动条。用户可以:

在特定滚动位置开始一个动画
滚动条滚动的时候同步动画
固定一个元素在指定的滚动位置

网址:http://janpaepke.github.io/ScrollMagic

6、图片预加载插件:QueryLoader2

功能:在图片加载之前出现进度条

下载地址: https://github.com/Gaya/QueryLoader2

7、扑克牌风格的扇形页面的展示效果

你有没有试过使用扑克牌风格的扇形页面的展示效果呢?如果没有,那你可千万不要错过我们今天介绍的jQuery插件-Baraja。

http://tympanus.net/Development/Baraja/

8、鼠标滚轮编程中的JavaScript(javascript-mouse-wheel)

它是关于相当简单的用户输入法 – 鼠标滚轮。 我相信,现在恐怕很难找到一个没有鼠标滚轮。 绝大多数用户都采用向轮作为滚动列表中的一个控件,缩放等,而一些Web应用程序,但是,做出明智的使用鼠标滚轮。 本页面为您提供有关处理在JavaScript编程语言的鼠标滚轮生成的事件的一般信息。

在应用程序,滚动起来通常意味着页面向下滚动等。

下载地址:http://www.adomas.org/javascript-mouse-wheel/

2009 年度最佳 jQuery 插件

jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。本文是 webdesignledger.com 网站推选的2009年度最佳 jQuery 插件

拉洋片

在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种 Web 效果大行其道,jQuery 有大量与此有关的插件,以下插件无疑是最佳的。

AnythingSlider 由 CSS-Tricks 的 Chris Coyier 设计,功能齐全,应用十分广泛。
Easy Slider 这个 Content Slider 插件既包含传统“前后”导航模式,又包含页码式导航。
Coda-Slider 2.0 Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。

图片库

那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过,借助 jQuery,这种效果已经可以在本地实现,以下是本年度备受欢迎的几个 jQuery 图片库插件。

Galleria 这是一个基于 jQuery 的图片库,可以逐个加载图片并显示缩略图。
jQuery Panel Gallery 一个可以高度定义的图片库插件,无需对单个图片进行任何处理,这个插件会帮你完成一切。
slideViewer slideViewer 会检查你的图片列表中的编号,动态创建各个图片的页码浏览导航。
Supersized 一个令人惊讶的图片循环展示插件,包含各种变换效果和预加载选项,会对图片自动改变尺寸以适应浏览器窗口。

导航

我 们相信,作为网站的导航系统,应该越简单,越易用越好,然而,假如你确实希望实现一些更炫的效果,jQuery 就是最好的选项,以下插件是09年最好的 jQuery 导航插件。

jquery mb.menu
Horizontal Scroll Menu with jQuery
AutoSprites

表单和表格

在 Web 设计中,表单和表格都是不是很讨人喜欢的东西,但你不得不面对,本年度出现几个不错的 jQuery 插件帮你完成这些任务。

Password Strength 这个插件帮你评估用户输入的密码是否足够强壮。
Ajax Fancy Capcha 顾名思义,一个支持 Ajax 又很炫的 jQuery Captcha 插件,它使用了很人性化的验证机制。
Chromatable 这个插件可以帮助你在表格上实现滚动条。
jqTransform 一个式样插件,帮助你对表单中的控件进行式样控制。
Uploadify 实现多个文件同时上传。
jExpand 一个很轻量的 jQuery 插件,使你的表格可以扩展,在一些商业应用中,可以让表格更容易组织其中的内容。