plugin插件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了plugin插件相关的知识,希望对你有一定的参考价值。

plugin插件

1fullpage

<script type="text/javascript">
    $(function(){
        /*
        组建好网页布局后,必须选中包裹所有section的div的id,并调用fullpage()方法,才能加载布局。
        调用fullpage()方法后,可以给函数传入对象类型的参数,设置fullpage的各种属性。
        */
       $(#fullpage).fullpage({
           /*内容是否垂直居中?默认为true*/
           /*verticalCentered : flase,*/
           
           
           /*字体是否随窗体缩放,默认为flase*/
        /*resize:true,*/
           
           /*设置每一屛的背景色*/
           /*sectionsColors:["#FF0000","#00FF00","#0000FF"],*/
           
           
           /*设置每一屛的锚点*/
        anchors:["page1","page2","page3","page4"],
           
           /*设置单页滚动速度,默认700毫秒*/
        scrollingSpeed : 300,
           
           
           /*设置滚动动画方式
            jQuery只支持几种动画,更多动画效果需要导入jquery.easings.min.js
            */
        /*easing : "easeInQuart",*/
           
           /*绑定一个菜单,详见html5*/
           menu : "#menu",
           
           /*是否显示导航小圆点*/
           navigation : true,
           /*设置导航圆点的位置,可选值left和right,默认值right*/
        /*navigationPosition : "left",*/
       
           /*设置鼠标指上时,小圆点的提示文字*/
           navigationTooltips:["第一页","第二页","第三页"],
           
           /*设置幻灯片的导航*/
           //slidesNavigation:true,
           //slidesNavPosition:"top",
           
           /*设置幻灯片左右切换箭头的背景色*/
           controlArrowColor:"RGBA(0,0,0,0.5)",
           
           /*最后一页下滑,是否滚回首页*/
           //loopBottom:true,
           
           /*第一页上滑,是否可以滚动尾页*/
           //loopTop:true,
           
           
           /*是否可以循环滚动:与上面两个属性不兼容,只能选其一*/
           //continuousVertical:true,
       
           /*设置幻灯片是否水平循环,默认true*/
           //loopHorizontal:false,
           
           /*是否使用插件的滚动翻页方式,设置为false,将使用浏览器默认的滚动条*/
           //autoScrolling:false,
           
           
           /*设置内容超出满屏区域后,是否显示滚动条。必须要导入scrolloverflow.js才能使用*/
           //scrollOverflow:true,
           
           /*是否使用css3动画滚动。默认false,表示使用jQuery动画滚动*/
           //css3:true,
           
           /*单页上下方的padding*/
           //paddingTop:"40px",
           //paddingBottom:"40px",
           
           /*是否使用键盘方向键导航,默认true*/
           //keyboardScrolling:false,
           
           /*手机滑屏的力度,数值越大,越难翻页*/
           //touchSensitivity:5,
           
           
           /*浏览器直接打开指定锚点时,是否以动画显示,默认为true*/
           //animateAnchor:false,
           
           
           
           
           /*
            afterLoad:当一个页面,加载完成之后触发;
            anchorLink:当前页面的锚点名;
            index:当前页面的序号,从1开始;
            */
           afterLoad:function(anchorLink,index){
               //console.log(anchorLink);
               //console.log(index);
           },
           
           
           /*onLeave:当页面即将滚动离开的时候触发
            index:当前所在页面的序号
            nextindex:即将去往页面的序号
            direction:离开的方向,up或down
           */
           onLeave:function(index,nextindex,direction){
               //console.log(index);
               //console.log(nextindex);
               //console.log(direction);
           },
           
           
           /*afterRender:页面初次完成初始化的时候,执行一次
                                    先执行第一个页面的afterLoad再执行afterRender
           */
           afterRender:function(){
               //console.log("=====afterRender=====");
           },
           
           /*
           当幻灯片加载完成时,执行的函数
           anchorLink:幻灯片所在section的锚点
           index:幻灯片所在的section的序号
           slideAnchor:幻灯片自身的锚点(如果有的话。如果没有,显示slideIndex)
           slideIndex:幻灯片自身的序号(从0开始)
           */
           afterSlideLoad:function(anchorLink,index,slideAnchor,slideIndex){
//             console.log(anchorLink);
//             console.log(index);
//             console.log(slideAnchor);
//             console.log(slideIndex);
           },
           /*
           onSlideLeave;当幻灯片离开去另一张幻灯片时触发
           anchorLink,当前幻灯片所在section的锚点
           index,当前幻灯片所在section的序号,从1开始
           slideIndex,当前幻灯片自身的序号,从0开始
           direction,幻灯片移动的方向,left和right
           nextslideIndex,即将显示的幻灯片的序号,从0开始
           */
           onSlideLeave:function(anchorLink,index,slideIndex,direction,nextslideIndex){
//             console.log(anchorLink);
//             console.log(index);
//             console.log(slideIndex);
//             console.log(direction);
//             console.log(nextslideIndex);
           },
 
       });
    });
    
    
</script>

 

2move

<script type="text/javascript">
            document.getElementById("btn1").onclick = function(){
                move("#div1")
                //.set("margin-left","100px")//设置css相关属性
                //.set("margin-top","100px")
                //.set("width","200px")
                .add("width",50)//将数值类型的属性,在原有基础上加一个数
                //.rotate(90)//设置旋转角度
                .duration("1s")//设置动画完成时间
                //.translate(200,400)//设置平移
                //.skew(30,40)//设置x轴,y轴的旋转角度
                //.scale(2,2)//设置缩放
                .end()
                //.then()//利用duration和delay也能实现then函数。
                .x(200)//设置x轴位置
                .y(200)//设置y轴位置
                //.ease()//动画效果
                .delay(1000)//动画延时多少毫秒之后开始执行
                .end(function(){
                    /*
                    move.js要使动画生效,必须使用.end()结尾。
                    .end()传入一个函数,表示动画结束后执行的回调函数
                    */
                    //alert("动画结束");
                });
            }
      
        </script>

 

3validation.html1

<script type="text/javascript">
        $(function(){
            $("#commentForm").validate({
                //rules对象,用于声明各个input的验证规则
                rules:{
                    //选择每个input时,需选中input的name,并对应一个对象设置多条验证
                    name:{
                        required:true,
                        minlength:2
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    url:{
                        url:true
                    },
                    reurl:{
                        equalTo:"#url"
                    },
                    comment:{
                        required:true,
                    },
                    
                },
                //messages对象,用于显示各个input验证不通过时的提示文字,
                //message对应每个规则都会有默认的提示文字,如非特殊需要,无需单独设置。
                messages:{
                    name:{
                        required:"这个内容你必须填",
                        minlength:"这里最少输入两个字符"
                    },
                },
            });
        });
    </script>

 


以上是关于plugin插件的主要内容,如果未能解决你的问题,请参考以下文章

ansible plugins简介

markdown 链接,片段,提醒,收集点作为重新访问WordPress插件开发期间的笔记#WordPress #Plugin #PHP #Refere

Eclipse 插件片段

maven-shade-plugin插件未生效原因分析

VIM 代码片段插件 ultisnips 使用教程

EOS 源代码解读 插件-插件模板