jquery插件锦集【推荐】

本篇的由来是群里面某个朋友提到说：有没有一个倒计时的特效，格式如分钟：秒；由此思考了下，觉得弄几个常用效果的射流研究…小插件还是不错的，可以供大家学习和使用，这里我取名为：沈牛。效果。js；希望大家喜欢，多多点赞支持：时钟效果。倒计时。全选效果。标签点击切换。标签鼠标移动切换。文本输入搜索。几个常用桌子展示方式插件。列表插件沈牛。寻呼机。射流研究…

下面一步一个脚印的来分享：

首先，先发个线上测试地址爱辛斯。com :8081/TPL/效果。html，接着需要引用jquery.js和沈牛。效果。射流研究…及沈牛。效果。CSS，然后咋们一起来看怎么使用和效果图。时钟插件代码：

//横向时钟亨翔时钟：函数（选项){ var defOption={ id : ' henxiangclockid '，格式： ' yyy-MM-DD hh :MM :s '，//格式setInterNum: 1 * 1000，//js计时器的周期时间，默认1s }；$.扩展（取消选项，选项);var clearVal=setInterval(function(){ var dateTime=new Date()；var y=日期时间。getfull year()；var M=日期时间。get month()1；var d=日期时间。getdate()；var h=日期时间。gethours()；var m=日期时间。getminutes()；var s=日期时间。getseconds()；var sy=y；var sM=addZero(M，10，0)；var sd=addZero(d，10，0)；var sh=addZero(h，10，0)；var sm=addZero(m，10，0)；var ss=addZero(s，10，0)；var结果=除雾。格式。替换(' yyyy '，sy).替换(' MM '，sM).替换(' dd '，sd).替换(' HH '，sh).更换(' mm '，sm).替换(' ss '，ss)；$(“#”选项。id ).html(结果);if(除雾。SetInternum=0){ ClearInterval(ClearVal)；} }，除雾。SetInternum)；}横向时钟

效果HenXiangClock({ id: 'div1_1 '，格式： ' yyyy-MM-DD hh :MM :s ' })；

文字时钟

效果HenXiangClock({ id: 'div1_2 '，format: ' yyyy年梅智节拍器月截止日期(截止日期的缩写)日殿下时毫米分悬浮物秒' });

缩写时钟

效果HenXiangClock({ id: 'div1_3 '，format: 'HH时毫米分悬浮物秒' });效果HenXiangClock({ id: 'div1_4 '，格式： ' hh :mm :s ' })；效果HenXiangClock({ id: 'div1_5 '，format: 'yyyy-MM-dd '，setinternum : { 0 })；倒计时插件代码：

//倒计时隐士：函数（选项){ var Defoption={ id : ' RecocKid '，h: 0，//时m: 0，//分钟s: 0，//秒format: ' HH:mm:ss '，//格式isAutoZero: true，//数字个位数的时候，是否自动增加0 setInterNum: 1 * 1000，//js计时器的周期时间，默认1s背板：函数(){ } };$.扩展（取消选项，选项);var clearVal=设置间隔(function(){ var dateTime=new Date(0，0，0，defOption.h，defOption.m，defOption.s，0)；if(除雾。s=0){ if(除雾。m=0){ if(除雾。h=0){ $(' # ' Defotion。id ).html(" ")；//清除计时器clear interval(clear val)；//执行回调函数除雾。背部乐趣()；返回；} else {除雾. s=59除雾. m=59除雾。h-；} } else { defOption.s=59defoption。m-；} } var h=日期时间。gethours()；var m=日期时间。getminutes()；var s=日期时间。getseconds()；var比较数=除雾。自动归零？10 : 0;var sh=addZero(h，compareNum，0)；var sm=addZero(m，compareNum，0)；var ss=addZero(s，compareNum，0)；var结果=除雾。格式。替换(' HH '，sh).更换(' mm '，sm).替换(' ss '，ss)；$("# "除雾。id ).html(结果);除雾。s-；}，除雾。SetInternum)；}时钟倒计时

//倒计时效果ReClock({ id: 'div2_1 '，m: 1，format: ' mm:ss '，backfun : fun(){ $(' # div 2 _ 1 ').html(")结束啦');} });提交按钮倒计时

$('#btn2_2 ').on('click '，function(){ var btnObj=$(this)；btnObj.attr('禁用'，'禁用')效果。重新锁定({ id: 'div2_2 '，s: 10，format: 'ss秒后才能重新获取，isAutoZero: false，backFun:函数(){ btnobj。remove attr(' disabled ')；} });});提交按钮倒计时缩写

$('#btn2_3 ').on('click '，function(){ var btnObj=$(this)；btnObj.attr('禁用'，'禁用')效果。重新锁定({ id: 'div2_3 '，s: 10，format: 'ss秒，isAutoZero: false，backFun:函数(){ btnobj。remove attr(' disabled ')；} });});全选插件代码：

//全选CheckBoxAll:函数（选项){ var Defoption={ name all : ' cbAll '，//全选项姓名儿童： 'cb' //子项名称};$.扩展（取消选项，选项);$(' input[type=' checkbox '][name=' Defotion。NameAll ' ']').on('click ')，function () { var isChecked=$(this).是(“:已检查”)；$(' input[type=' checkbox '][name=' Defotion。NameChild ' ']').道具('选中，isChecked)；});}

//全选效果复选框all({ nameall : ' cbAll '，//全选项姓名儿童： 'cb' //子项name })；标签切换插件：

//选项卡切换TabPanel:函数（选项){ var Defoption={ tabshovid : ' tabshovid '，//tab需要显示在差异的Id data: [ { title: 'tab1 '，content: '王小一，url: '' }，{ title: 'tab2 '，content: ' '，URL : ' http://121。42 .208 .152/' }，{ title: 'tab3 '，content: '王小二，url: '' }，{ title: 'tab4 '，content: '王小三，url: '' } ]，isMouseMove: false，//是否鼠标移动切换tabParentId: 'divTab '，//tab按钮父级的id tabContentid : ' DivTabContent '//内容区域父级id }；$.扩展（取消选项，选项);//构造超文本标记语言样式var THtml=[]；var pHtml=[]；$.每个(defOption.data，function (i，item){ if(item。标题。长度0){ var lab first=(I==0？class=\ ' CheckLabel \ ' ' : ' ')；var panelFirst=(i==0？' ' : '隐藏');thtml。推送('标签数据-面板-val=' I ' ' '实验室优先' '项目。title '/label ')；if(项目。内容。长度0){ var content=item。内容；phtml。push(' div data-panel-item=' I ' ' class=' panel first ' panel content text-left ' ' content '/div ')；} else if(item。网址。长度0){ phtml。push(' div data-panel-item=' I ' class=' panel first ' panel content text-left ' ')；phtml。push(' iframe src=' http : '项。URL ' '框架边框=' 0 '滚动=' auto ' marginheight=' 0 '边距宽度=' 0 ' style=' width : 100%；高度： 100%;id=' modalContent ' ')；phtml。push('/div ')；} else { phtml。push(' div data-panel-item=' I ' ' class=' panel first ' panel content text-left '/div ')；} } });if(THtml。长度=0){ return；} var TabHTML=[]；选项卡HTMl。push(' div id=' Defotion。Tabparentid“”类=“DivTab”)；选项卡HTMl。push(THtml。join(“”)；选项卡HTMl。push('/div ')；选项卡HTMl。push(' div id=' Defotion。tab content id ' ' ' ')；选项卡HTMl。push(PhtML。join(“”)；选项卡HTMl。push('/div ')；$("# "除雾。TabShowID ).html(TabHTMl。join(“”)；var tabbarnetobj=$(' # ' Defoption。tab parentid)；var TabcontentObj=$(' # ' Defotion。tab content id)；tabbarnetobj。find(' label[data-panel-val]).打开(defOption.isMouseMove？mouseover' : 'click '，function () { //对应值var panelVal=$(this).attr(' data-panel-val ')；//选项卡按钮tabbarnetobj。find(' label[data-panel-val]).移除类(' CheckLabel ')；$(这个)。添加类(' CheckLabel ')；//必须差异承载内容tabContentObj。查找(' div[数据-面板-项目])。添加CLaSS(' hide ')；//全部隐藏标签内容obj。find(' div[数据-面板-项目='面板值' ']').removeClass("隐藏");//选中展示});}选项卡点击切换

//选项卡点击切换效果选项卡面板({ tabshavid : ' divshawtab 01 '，data: [ { title: 'tab1 '，content: '最近的工作能力大大提升，br/得到赏识，br/可是太注重事业和赚钱了，br/导致让身体透支，br/需要多注意健康，br/一日三餐要准时才好，url: '' }，{ title: 'tab2 '，content: '今日身边的女性友人会是你的贵人，多跟她们接触会得到一些好消息br/另外财运旺盛，只要能抓紧契机，积极行动便能进账丰厚，url: '' }，{ title: 'tab3 '，content: '很压抑img class=' img-rounded ' alt=' 128 x128 ' id=' imgShow ' src=' http :3358121。42 .208/XS .web/imgcontfolder/thunh nail/20161212141115292726。jpg ' data-holder-rendered=' true ' style=' width : 260 px；height : 260 pxbox-shadow : 10px 10px 5px灰色；url: '' }，{ title: 'tab4 '，content: ' '，URL : ' http://121。42 .208 .152/' }]});标签鼠标移动切换

使用代码：

//选项卡滑动切换效果选项卡面板({ tabshavid : ' divshawtab 02 '，data: [ { title: 'tab1 '，content : ' 1br/11 br/111 br/1111 br/'，url: '' }，{ title: 'tab2 '，content : ' 2br/222 br/2222 br/2222 '，url按钮父级的id tab content id : ' DivTabcontent 01 '，//内容区域父级id为mouse move : true })；文本输入搜索

//文本输入搜索TxtSearch:函数（选项){ var defOption={ name : ' TxTsearch '，//搜索框Name size: 5，//显示条数数据：[{ text : }我爱您啊，value: '1' }，{ text: '我爱祖国，value: '2' }，{ text: '我爱家人，value: '3' }，{ text: '我喜欢美女，value: '4' }，{ text: '我爱钱，value: '5' }，{ text: '我是神牛步行3 '，value: '6' } ]，show divided : ' div _ TxtSearch '//展示内容的已分割}；$.扩展（取消选项，选项);$(' input[name=' Defotion。名称' ']').on('keyup '，function(){ var txtObj=$(this)；var DivSearchObj=TxTobj。next(' div[id=' div _ TxTsearch ']')；if(DivSearchObj){ DivSearchObj。移除()；} var txtVal=$(this).val()；if(TxtVal。长度=0){ return；} var DataHTML=[]；var NSize=0；$.每个(defOption.data，function (i，item){ if(item。文字。indexof(TxtVal)=0){ DataHTML。推送(' Li data-val='项。value ' ' style=' padd :1 px 3px光标：指针；' '项。文字'/Li ')；nSizeif(nSize=除雾。size){ return false；} } });if(DataHTML。长度=0){ return；} var w=TxTobj。CSS('宽度')；var TxTHtml=[]；txthtml。push(' div id=' Defotion。ShowDivid ' ' style='位置：绝对；宽度： ' wz指数： 99；背景# fffborder: 1px固体# cccmargin-top :-1px；飞越：隐藏；显示器：块；'');txthtml。push(' ul style=' list-style : none；padd :0 px 0px ' ')；txthtml。推送(DataHTML。join(“”)；txthtml。push('/ul ')；txthtml。push('/div ')；$(这个)。在(txtHtml.join(" ")之后；//重新获取对象divSearchObj=TxTobj。next(' div[id=' div _ TxTsearch ']')；//选中项事件var liObj=$(' div[id=' Defoption。showdivided ' ']').find(' ul Li ')；//鼠标移上去liObj.on('mouseover '，function () { $(this).css(“”背景色，' # EFE CEC ')；});liObj.on('mouseout '，function () { $(this).css(“”背景色，' # fff ')；});//选中liObj.on('click ')，function () { var liVal=$(this).attr(' data-val ')；var liText=$(this).html()；txtobj。val(LiText)；});});//绑定焦点事件$(' input[name=' Defotion。名称' ']').on('focus '，function(){ $(' div[id=' Defoption。showdivided ' ']').show()；});//失去焦点$(文档)。on('click '，function(e){ var txtObj=$(' input[name=' ' Defoption。名称' ']')；var DivSearchObj=TxTobj。next(' div[id=' div _ TxTsearch ']')；var tH=TxTobj。prop(' OhHTMl ')；var eH=$(e.target).道具(' OhHTMl ')；if(tH==eH){ DivSearchObj。show()；} else { DivSearchObj。hide()；} });}

//文本下拉搜索效果TxtSearch({ name: 'txtSearch '，//搜索框Name size: 5，//显示5条数据：[{ text : }我爱您啊！value: '1' }，{ text: '我爱祖国！value: '2' }，{ text: '我爱家人！value: '3' }，{ text: '我喜欢美女！value: '4' }，{ text: '我爱钱！value: '5' }，{ text: '我是神牛步行3!值： ' 6 ' }]})；几个常用桌子展示方式插件桌子。沈牛。射流研究…

由于这个桌子。沈牛。射流研究…说明插件已经在前面文章分享过了，在里就不多说了各位可以点击链接看下使用说明。列表插件沈牛。寻呼机。射流研究…

由于这个沈牛。寻呼机。射流研究…说明件已经在前面文章分享过了，在里就不多说了各位可以点击链接看下使用说明

下面给出测试页面调用插件的例子，方便大家直接使用：