jquery常用插件,jquery插件开发方法

http://www.itjxue.com  2023-01-09 05:12  来源:未知  点击次数: 

jquery最好用的表格控件是哪个

其实没有最好用,只是个人用的习惯不一样。常用的有下面几个。

DataTables。DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。

tablesorter。Tablesorter是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值、字符串、日期和自定义排序。

uiTableFilter。uiTableFilter是一个用来过滤表格中的列的jQuery插件。

jQuery旋转插件jqueryrotate用法详解

本文实例讲述了jQuery旋转插件jqueryrotate用法。分享给大家供大家参考,具体如下:

CSS3

提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后

IE10

以下版本的浏览器不支持

CSS3

变形,虽然

IE

有私有属性滤镜(filter),但不全面,而且效果和性能都不好。

今天介绍一款

jQuery

插件——jqueryrotate,它可以实现旋转效果。jqueryrotate

支持所有主流浏览器,包括

IE6。如果你想在低版本的

IE

中实现旋转效果,那么

jqueryrotate

是一个很好的选择。

兼容性

jqueryrotate

支持所有主流浏览器,包括

IE6。jqueryrotate

在高级浏览器中使用

CSS3

transform

属性实现,在低版本

IE

中使用

VML

实现。当然,你可以使用

IE

条件注释,低版本

IE

使用

jqueryrotate,高级浏览器则直接使用

CSS3。

使用方法

//演示1

//旋转45angle

$(document.body).click(function

()

{

//方式1

$('.divOne').rotate(45);

//方式2

$('.divOne').rotate({

angle:

45

});

});

//演示2

//鼠标移动效果

//方式1

$('.divOne').rotate({

bind:

{

mouseover:

function

()

{

$(this).rotate({

animateTo:

180

});

},

mouseout:

function

()

{

$(this).rotate({

animateTo:

});

}

}

});

//方式2

$('.divOne').mouseover(function

()

{

$(this).rotate({

animateTo:

180

});

}).mouseout(function

()

{

$(this).rotate({animateTo:0});

});

//演示3

不停旋转

//方式1

var

angle

=

0;

setInterval(function

()

{

angle

+=

3;

$('.divOne').rotate(angle);

},

50);

//方式2

var

rotation

=

function

()

{

$('.divOne').rotate({

angle:

0,

animateTo:

360,

callback:rotation

})

}

rotation();

//方式3

var

rotation

=

function

()

{

$('.divOne').rotate({

angle:

0,

animateTo:

360,

callback:

rotation,

easing:

function

(x,

t,

b,

c,

d)

{

return

c

*

(t

/

d)

+

b;

}

})

}

rotation();

//演示4

点击旋转

//方式1

$('.divOne').click(function

()

{

$(this).rotate({

angle:

0,

animateTo:

180,

easing:

$.easing.easeInOutExpo

});

});

var

val

=

0;

$('.divOne').click(function

()

{

val

+=

90;

$(this).rotate({

animateTo:

val

});

});

参数

参数

类型

说明

默认值

angle

数字

旋转一个角度

animateTo

数字

从当前的角度旋转到多少度

step

函数

每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数

easing

函数

自定义旋转速度、旋转效果,需要使用

jQuery.easing.js

duration

整数

旋转持续时间,以毫秒为单位

callback

函数

旋转完成后的回调函数

getRotateAngle

函数

返回旋转对象当前的角度

stopRotate

函数

停止旋转

演示虽然使用的是图片,但

jqueryrotate

并不只是能运用在图片上,其他元素如

div

等也可以使用。同时,你可以发挥想象,制作出更多关于旋转的特效。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jquery插件开发有几种

//类级别插件开发,主要是在jQuery中定义全局方法:

//第一种写法

jQuery.myFunc = function(str){

alert("直接在jquery中定义方法",str)

}

//调用方式 $.myFunc("hello!");

//第二种写法

jQuery.extend({

myFunc:function(str){

alert("extend扩展$的方法",str)

}

})

//调用方式 $.myFunc("hello!");

//第三种写法: 为了不污染全局,挂载一个对象作为命名空间,自定义的所有方法放在这里,保证jQuery全局安全。

jQuery.define={

myFunc:function(str){

alert("命名空间的写法",str)

}

}

//调用方式:$.define.myFunc("hello");

//以上三种是级别插件开发方式,不常用,从调用方式看出,他们是全局执行的,不需要绑定节点对象。

//对象级别插件开发:有规范模板

;(function($){

$.fn.plugin = function(options){

var defaults = {

//各种默认参数

}

var options = $.extend(defaults,options); //传入的参数覆盖默认参数

this.each(function(){

var _this = $(this); //缓存一下插件传进来的节点对象。

//执行内容

})

return $(this); //把节点对象返回去,为了支持链式调用。

}

})(jQuery);

//调用方式

$("selector").plugin({

//自定义参数,json格式

})

40款经典前端特效插件---分享

1.flavr—超级漂亮的jQuery扁平弹出对话框 ? ??

2.轻量级触摸响应滑块插件JQuery lightSlider ? ? ?

3.带37种3D动画特效的跨浏览器CSS3动画框架 ? ? ??

4.jquery整屏滚动插件Scrollify ? ? ? ?

5.jquery旋转木马插件SLICK ? ? ? ??

6.jquery文字动画插件LetterFX ? ? ? ? ?

7.jquery文本翻转插件Wodry.js ? ? ??

8.jquery通知插件toastr ? ? ??

9.jQuery滚动执行动画插件FadeThis ? ? ?

10.jquery表单验证插件Bootstrap Validator ? ? ??

11.jCountdown倒计时插件jQuery ? ? ? ? ??

12.iCheck不一样的checkbok ? ? ? ??

13.Owl Carousel强大的响应式jQuery焦点图轮播插件 ??

14.magic-带64种动画效果的CSS3动画库 ? ??

15.jQuery实时搜索插件-HideSeek ? ? ??

16.bootstrap modal对话框 ? ? ? ? ? ??

17.一款模拟CSS3动画的js插件-move.js ? ? ? ? ? ???

18.可替代CSS3 transition和transform的jQuery插件 ? ? ? ? ?

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件 ? ? ???

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯js弹出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

jquery 插件怎么使用?

1.使用script标签加载jquery框架

2.使用script标签加载插件

3.看插件是否有api,如果有的话按照api调用

4.如果没有api,就自己看源码

一般来说jquery插件的调用方法都是

$('element').plugName(param);

其中element是你用选择选择的要执行插件方法的对象,plugName是你插件中的方法名称,param是插件方法的参数。

当然,也有的插件不是这样调用的,也有的插件是需要你在html标签中加入以下class。

具体还是要看你用的插件的api

(责任编辑:IT教学网)

更多

推荐测评专题文章