差不多是从七月开始有空就写一写,写到现在也算是可以拿出来展示了,vajoyJS是一款可以提供多项建站常用UI功能的插件库,让你轻松创建简易幻灯片、模态窗口和单屏滚页等效果。vajoyJS依赖于 jQuery 和 base.css,可以在Github(欢迎各种star或fork)下载最新版本,内有各种效果的Demo文件,今后也会陆续往里面增添更多实用功能。
目录
--------幻灯片
--------模态窗口(弹出窗口)
--------PIN事件
--------pushUp事件
--------鼠标滚轮事件
--------单屏滚页事件
--------表单过滤和验证
--------识别IE
一. 使用方式
在页面引入base.css、jQuery、vajoyJS源文件:
<link rel="stylesheet" type="text/css" href="../base.css"> script src="../jquery-1.11.1.js"></script="../vajoy.js">
其中引入base.css主要是利用其 body,html{height:100%;} 和 clearfix类的设置,如果你自己的基础样式文件已经自带了这两项(当然一般都会有的),那么大可不必引入base.css,使用你自己的基础样式表文件即可。
然后是依循Demo中提供的各组件的写法,按需使用你项目网站中所需的功能即可。下面我们会依次介绍它们。
二. 功能组件介绍(下面均只给出主要部分的代码,建议下载demo查看完整代码和更多写法)
幻灯片
vajoyJS中集成了淡出淡入式和滚动式的幻灯片,页面原型可以这样写:
div id="outside1" > a href="#" target="_blank" style="background:url(../img/1.jpg) center" title="图片描述文本"a="background:url(../img/2.jpg) center"="background:url(../img/3.jpg) center"</div>
定义样式:
#outside1{ width:100%; height:300px; position:relative;} .li_df{width:20px;height:background-color:gray;border-radius:9px;} .li_ac{white;9px;}
其中 .li_df指幻灯片下方圆形小按钮未激活状态的样式,.li_ac是鼠标移上去或者激活状态的样式。
接着是应用脚本:
jQuery(document).ready(function(){ $("#outside1").VJ_slidePics("li_df","li_ac"); })
效果如下:
默认是淡出淡入式的风格,且默认自动播放,你也可以添加参数,改变成滚动式幻灯片,且禁止自动播放:
$("#outside1").VJ_slidePics("li_df","li_ac",false,"scroll");
你也可以轻松添加左右指针,只需要增加左右指针的样式即可:
.arrow_left,.arrow_right{30px; background-color:red;}
$("#outside1").VJ_slidePics("li_df","arrow_left","arrow_right","scroll");
模态窗口(弹出窗口)
模态窗口最简单的应用只需要三个参数——“点击触发弹出窗口的元素”、“弹出窗口元素” 和 “点击关闭窗口的元素”。我们来个小例子:
style> #wrap{ position:absolute; displaynone width450px height300px padding30px backgroundwhite text-aligncenter} > span ="open">点击我试试span="wrap"> >hahahahaahaha><br/></> label>关闭窗口 jQuery(document).ready(function(){ $.VJ_Dialog("#open,#wrap#wrap label); }) >
效果如下:
你也可以添加触发回调函数和偏移弹出窗口的位置:
var openFun = (){ alert("it`s open"); }; $.VJ_Dialog("#open","#wrap","#wrap label",30,openFun); //窗口分别向左和向上挪动30像素,并触发openFun事件
PIN事件
是的,就是bootstrap的那个PIN事件,不过咱代码和写法跟它不一样,我们先来个例子:
<style> #bodywrap{margin:0 auto;width:1000px;} .top{margin:0 auto;height:160px; background:yellow;} .left{ float:left;width:70%; height:800px; background:blue;} .right{ float:right;width:30%;height:600px; background:red;} #bottom{margin-top:20px;height:350px; background:gray;} </style> </head> <body> <div id="bodywrap" class="clearfix"> <div class="top"></div> <div class="left">1111</div> <div class="right" id="right">22222</div> </div> <div id="bottom"> 这里是底部 </div> <script> jQuery(document).ready((){ $("#right").VJ_pin("#bottom",20); }) </script>
它表示$("#right")会被PIN住,但在$("#bottom")上方20像素的地方停止被PIN:
你也可以限制被PIN的元素仅限于在其父元素内被PIN,写法很简单:
$("#right").VJ_pin("#bodywrap");
vajoyJS会自动判断参数是否其父元素,如果是,则限制被PIN元素仅PIN于其父元素内,本例效果跟上面的一样,这里就不贴图了。
还有一种是直接全程PIN住,没有任何限制,也是最简单的写法:
$("#right").VJ_pin();
PushUp事件
PIN事件的近亲,可以用于页面右下角的悬浮按钮,让其在遇到页脚时取消悬浮状态。我们来个例子:
#bodywrapheight900pxbackgroundyellow} #floatDivpositionfixed bottom left50% margin-leftred color #bottom350pxgray="bodywrap"> ew/>ew/>/> ="floatDiv">悬浮图标="bottom" 这里是底部 (){ $(#floatDiv).VJ_pushUp(#bottom30); }) >
第二个参数“30”是悬浮图标要停在$("#bottom")上方的位置,它是可选参数,你也可以去掉它(即让悬浮图标紧贴#bottom)。上面这段代码效果如下:
鼠标滚轮事件
JQ没有内置监听滚轮事件的方法,于是我自己写了两个方法——$.VJ_mouseScroll() 和 $.VJ_mouseScroll2()。
为啥是俩个呢?因为它们的防抖方案不一样,前者默认鼠标滚轮滚动7小轮才被认为正常滚动了一轮,后者则是用setTimeout的方式来防抖,默认有效间隔1秒。你可以依据你的项目需求来挑选防抖方式。
我们先看看 $.VJ_mouseScroll() ,它有三个参数 up_fun,down_fun,sp ,而且三个参数都是可选的。
up_fun 和 down_fun 表示鼠标鼠轮向上滚和向下滚会触发的回调事件;
sp可以设置为数值或字符串,当sp是数值时,它表示防抖圈数(比如设置为10,则表示滚10小轮为有效的一轮),当sp是字符串,则表示取消鼠标滚轮监听事件。
$.VJ_mouseScroll2() 方法有着一样的三个参数,不过当sp是数值时,表示防抖间隔时间(比如设置为2000,则表示2000毫秒为有效间隔时间)
示例:
div).text(滚动鼠标吧骚年!); var up_fun = (){ $(UP!); } down_fun DOWN!); } $.VJ_mouseScroll(up_fun,down_fun); //$.VJ_mouseScroll(up_fun,1); //最后一个数字是防抖作用,数值越大,滚轮要滚动的时间要更久才能生效 $.VJ_mouseScroll2(up_fun,down_fun); //这个是按照setTimeout来防抖的,默认1000毫秒 $(button).click((){ $.VJ_mouseScroll(up_fun,1)">cancle); 取消滚轮监听事件 }) }) headbody> button>取消滚轮事件>
单屏滚页事件
之前有写过一篇文章(点击这里)介绍过这个效果,然后对代码进行了封装,成为了vajoyJS的 VJ_scrollPage 组件。其用法如下:
$("btn").VJ_scrollPage("screen_wrap","page","reset","act_a");
$("btn")指触发滚页效果的按钮,通常来说都是a标签。screen_wrap是包含全部滚页的父元素,page是激活页面的回调事件的前缀,reset是非激活页面的重置事件的前缀,"act_a"是btn中被激活的元素会添加的class。
另外值得一提的,该组件支持鼠标滚轮滚动触发滚页效果(默认的是1秒时间间隔的防抖,就是上方介绍过的$.VJ_mouseScroll2()方法)。
其中"page","act_a"这最后三个参数是可选的,非必填项,我们来个例子:
style type="text/css" .screen_wraprelative100% overflowhidden .page .page0 .page1color .page2green .page3blue .page4 .bottom_nav0pxpadding10px 0pxwidthblack opacity0.8 .bottom_nav amargin0px 10px .bottom_nav a.act_afont-weightbold> 注意回调和重置函数一定要写为全局/外部函数 page1 .page1).animate({opacity0.2},1)">2000 page3 .page30.54000 reset1 (){ 初始化函数 $().stop().css({1}); } reset3 }); } jQuery(document).ready((){ $(#bottom_nav a).VJ_scrollPage(#screen_wrappageresetact_a); page是激活页面的回调事件的前缀,reset是非激活页面的重置事件的前缀,act_a是a标签点击后激活的class $("#bottom_nav a").VJ_scrollPage("#screen_wrap"); }) class="screen_wrap" id="screen_wrap"> ="page page0">第一页="page page1">第二页="page page2">第三页="page page3">第四页="page page4">第五页="bottom_nav"="bottom_nav"> ="#!/1">第1页="#!/2">第2页="#!/3">第3页="#!/4">第4页="#!/5">第5页>
表单过滤和验证
这俩个我还没用到项目上,所以写的比较仓促和马虎,如果有bug或者有更好的正则验证方式请告知,后续用到项目上如果遇到问题我也会修复的。
⑴ 表单过滤
表单过滤是 VJ_filter() 方法,它接收一个参数来确定自己要过滤什么格式外的信息,由于支持的过滤格式我写的实在太多了,所以即使在Demo里也没有全列出来(我太懒了抱歉),建议大家看源码吧,注释写的清清楚楚:
来个简单例子:
>emailinput ="text"="email" >mobile="mobile" >mobile2(suggested) maxlength="11" >tel(numbers or XXX-XXXXXXX)="tel">float number="float" 更多过滤方式请查看源码//u can find more filter-methods out through the source #email).VJ_filter(only_mail); $(#mobileonly_mobile#telonly_tel#floatonly_nfn>
效果图只示范2个,更多的有兴趣你们自行尝试吧
⑵ 表单验证
表单验证可用 .VJ_verify() 方法,其语法为
input.VJ_verify( issus,error_fun,correct_fun,empty_fun,fill_fun ) ;
error、correct、empty、fill 参数分别代表表单控件失焦后验证 错误/正确/为空/不为空 时触发的回调事件,不过除了error是必填项,其它参数都是可选的。
.VJ_verify() 同样有太多的验证功能,建议自行查看源码,我们这里来个示例:
>tel(XXXX-XXXXXXX)>try to type numbers only:="nums" >password(at least 6 words):="password"="password" >try to type Chinese word which as 2 bits(at least 6 characters at most 10 characters):="test" 更多验证方式请查看源码//u can find more verify-methods out through the source (){ error (){alert(error!!)}; correct correct!! empty empty!! fill filled!!)}; $().VJ_verify(mailmobiletel_all#numsavoid_num#password6#test10>
注意最后2个VJ_verify的应用写法里,前面的参数是数值,这表示该表单控件所输入字符的范围。
比如 $("#password").VJ_verify(6,correct) 表示$("#password")所输入的字符大小不能小于6字节,否则失焦后触发error事件;
而 $("#test").VJ_verify(6,10,correct) 表示该控件所输入的字符大小必须在[6,10]的区间内,否则触发error事件。
上段代码的效果如下:
如你所见,验证这一块,会区分全角字符的,一个全角字符(含中文)为2字节。
识别IE
即使是最新版的IE也会有一些头疼的问题,比如在一个项目中使用VJ_pushUp()时,发现IE打死都不能准确获取页脚的offset.top值,需要重复注册一次VJ_pushUp()才可以。
于是写了$.VJ_isIE 方法来判断(判断的userAgent,不考虑浏览器伪装IE的作死情况了),它会返回一个Boolean值:
>不是IEif($.VJ_isIE()){ $(就是IE); } }) >
三. 修改和扩展
vajoyJS源码中的注释还是较多的,你可以对其做适当修改或扩展,我们举个例子。
首先是幻灯片,我们默认幻灯片的圆形按钮是没有数字的,如果我们希望这些小圆形按钮中能自带数字怎么做?
我们可以从源码或者通过调试知道这些圆形按钮是vajoyJS自动生成的li元素,那我们在这些li里加上它们自己的索引值加一的值就行了:
在源码中搜索“//添加li按钮”找到添加li的代码行,把该行改为:
var pl=0; while(++pl<=pic_l){ $("<li>"+pl+"</li>").appendTo($ul); } 添加li按钮
即可,我们再修改一下,把li的位置移到左边,很容易想到li的位置肯定是通过定义其父元素ul的css来实现的,我们找到UlMiddle函数里的
$ul.css({"margin-left":-$ul.width()/2,"left":pic_w/2});
将其改为
$ul.css({"margin-left":-500,"left":pic_w/2});
之后再改改 .li_df 和 .li_ac 就能得到我们想要的好看的效果(这个是在我自己一个项目上的应用):
四. 压缩
建议你在项目中使用Grunt来压缩所有的脚本文件(Grunt入门点此),vajoyJS压缩后仅10kb大小(截止至14/10/01),但你也可以自行删除vajoyJS中你不常用的组件。
比如你的项目中基本用不上 VJ_pin 功能,你可以把
钉子模块 $.fn.VJ_pin = (relative_obj,space){ var $r_o = relative_obj?$(relative_obj):false; var $p_o = $(this); ........ } 下一个组件的开头注释
的代码段注释掉(注释掉即可,毕竟Grunt给你压缩脚本的时候会自动帮你删除注释的)。
不过vajoyJS中有些组件是依赖于其它组件的,比如 VJ_scrollPage 依赖于 VJ_mouseScroll2,VJ_Dialog 依赖于 VJ_stayCenter ,不过这也不是啥问题,使用的时候发现出错,把误删的组件注释取消掉即可。
后续vajoyJS会继续添加更多有趣的功能,欢迎随刻关注我的Github(顺便帮我star一下嘿嘿~)。共勉~
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。