国庆送干货——前端建站实用UI工具vajoyJS

差不多是从七月开始有空就写一写,写到现在也算是可以拿出来展示了,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 举报,一经查实,本站将立刻删除。

相关推荐


1.第一步 设置响应头 header(&#39;Access-Control-Allow-Origin:*&#39;); //支持全域名访问,不安全,部署后需要固定限制为客户端网址 header(&#39;Access-Control-Allow-Methods:POST,GET,OPTIONS,D
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回-1; $.inArray(value,array) --value是要查找的值,array是被查找的数组。 有如下实例: &lt;!DOCTYPE html&gt; &l
jquery.serializejson.min.js的妙用 关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。 前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提
JS 将form表单数据快速转化为object对象(json对象) jaymou 于 2020-03-03 11:11:05 发布 3534 收藏 3 分类专栏: 前端 文章标签: javascript jquery 版权 前端 专栏收录该内容 5 篇文章0 订阅 订阅专栏 直接上代码 /** *
jQuery的区别:$().click()和$(document).on(&#39;click&#39;,&#39;要选择的元素&#39;,function(){})的不同 文章地址:https://www.cnblogs.com/sqh17/p/7746418.html 解决:动态创建的元素的事件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http://www.helloweba.com/view-blog-282.html 左右加减数字 像京东提交订单时目前使用的是左右加减数字的效果,这个效果直接明了,操作简单。我们使用jquery.spinner.js插件实
layui标签或一般标签均可&lt;div class=&quot;layui-form-item&quot;&gt; &lt;label class=&quot;layui-form-label&quot;&gt;异地仓名称&lt;/label&gt; &lt;div class=&quot;la
网上对于select option 动态添加修改如下, $(&quot;#selectId&quot;).append(&quot;&lt;option value=&#39;&quot;+value+&quot;&#39;&gt;&quot;+text+&quot;&lt;/option&gt;&
jQuery中的 $.extend() 和 $.fn.extend() ANGWH 于 2020-05-24 06:39:59 发布 注意:$.extend是为jQuery类添加添加类方法,用$.调用(类似$.ajax),$.fn.extend则是为jQuery对象添加方法(实例方法),用DOM元素
jquery 循环数组输出显示在html页面 jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现 js部分如下: 复制代码 $(function(){ var a=[&quot;1aa&quot;,&q
javascript事件委托理解,jQuery .on()方法一步到位实现事件委托 Javascript-概念原理 专栏收录该内容 10 篇文章0 订阅 订阅专栏 本篇文章借鉴自:博客园文章,只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托?他还有一个名字叫做事件代理,(时间代理 事件委托,
JQuery-$.when().done().fail()的使用 原文引用于&#160;Echoo华地于&#160;2022-01-06 14:07:10 发布 jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。 每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery 1
jQuery tableExport导出 excel 上篇写的是jQuery&#160;导出word,就试试导出excel。看见网上写的很乱,我这就把我写的整理下来,有部分来自网上capy 1. js文件的引用 &lt;script type=&quot;text/javascript&quot;
jQuery的遍历-prev()和next()方法 &lt;div class=&quot;box&quot; id=&quot;box&quot;&gt; &lt;a href=&#39;#&#39; class=&quot;a&quot;&gt; &lt;input type=&quot;tex
attr()和addClass()的区别 方法 addClass() attr()用途&#x9;追加样式&#x9;设置样式对同一个网页元素操作&#x9;&lt;p&gt;test&lt;/p&gt;第1次使用方法&#x9;$(&quot;p&quot;).addClass(&quot;high&quot;);&#x9;$(&quot;p&
前端——函数(匿名函数、自执行函数) FreshLemon_ 于 2019-06-11 17:11:49 发布 函数声明:function box(){} 函数表达式:var box = function(){}; 匿名函数:function(){} (属于函数表达式) 1声明了一个函数: var
js: 获取标签元素data-*属性值的方法 彭世瑜 于 2022-05-23 09:59:50 发布 2165 收藏 1 文章标签: javascript 前端 jquery 版权 标签上有两个属性data-id 和 data-user-name, 需要通过js去获取 &lt;style&gt;
JavaScript函数详解:匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 1.具名函数 定义: 调用: 方式1:方法名(); 可以多次调用 方式2:在事件中调用,直接写函数名,不需用括号 2.匿名函数 没有名字的函数 匿名函数在使用时只有两种情况: 1.匿名函数自执行:声明后不需要
如何等待ajax完成再执行相应操作 ajax广泛应用于异步请求,对于大多数业务来说,这是十分方便的,但对于一些特殊的业务,ajax的异步性会起到相反的作用。 例如在ajax请求成功后,后续的操作需要依赖ajax执行成功后的相应操作。 // 声明一个表示状态的全局变量 status var statu
一步一步教你写一个jQuery的插件教程(Plugin) 更新时间:2009年09月03日 02:10:54 作者: 我将会在下面的例子中一个一个的说明上面这几个条件,做完这些事情后我们就会创建一个高亮显示text的简单插件。 jQuery 的plugin开发需要注意的事情, 1. 明确jQuery