您的位置:时时app平台注册网站 > web前端 > Javascript - Jquery - 插件【彩世界网址】

Javascript - Jquery - 插件【彩世界网址】

2019-12-06 23:00

彩世界网址 1彩世界网址 2

以上两种方式都可以为JQuery增加静态或实例方法,但用起来不如自定义一个插件库来得方便。你只需要定义一个匿名函数,匿名函数需要接收一个参数,参数=$。使该函数可自运行,将JQuery作为参数传递给它,使用运行起来。接着只需要将我们编写的自定义方法全部放入该匿名函数内就可以了。

View Code

使用extend方法可以为JQuery对象添加静态方法,静态方法属于$构造函数的成员,不属于实例对象,所以调用时使用$.方法名即可。

彩世界网址 3彩世界网址 4

效果{ 丰富的动画 无需animate方法 实现更强大的动画。}

彩世界网址 5

为JQuery添加静态方法

contentClass : 'panel',    //面板样式
navClass : 'nav',          //导航样式
activeClass : 'active',    //导航激活样式
triggerElements : '*',     //触发元素
activeIndex : 0,           //默认选中的元素
evType : 'click',          //默认触发的事件
animate : true,            //是否支持动画渐变
multiple : false           //是否支持多个面板同时展开
//定义一个trace函数
function trace() {
    alert('hello');
}
//将其作为JQuery的静态方法
$.extend({
    trace: trace
});
//使用JQuery的静态方法
$.trace();

本文带来一个垂直方向的手风琴插件开发,可以定制的功能如下:

彩世界网址 6彩世界网址 7

彩世界网址 8彩世界网址 9

View Code

效果预览:

View Code

调用方法:

为JQuery编写插件

css样式部分:

$.fn.extend(x)

js插件部分:

交互{ 拖动、置放、缩放、选择、排序 。}

  1 /**
  2  * Created by ghostwu(吴华).
  3  */
  4 (function(){
  5     var G = function( selectors, context ){
  6         return new G.fn.init( selectors, context );
  7     }
  8     G.fn = G.prototype = {
  9         length : 0,
 10         constructor : G,
 11         size : function(){
 12             return this.length;
 13         },
 14         init : function( selector, context ){
 15             this.length = 0;
 16             context = context || document;
 17             if ( selector.indexOf( '#' ) == 0 ){
 18                 this[0] = document.getElementById( selector.substring( 1 ) );
 19                 this.length = 1;
 20             }else {
 21                 var aNode = context.querySelectorAll( selector );
 22                 for( var i = 0, len = aNode.length; i < len; i   ) {
 23                     this[i] = aNode[i];
 24                 }
 25                 this.length = len;
 26             }
 27             this.selector = selector;
 28             this.context = context;
 29             return this;
 30         }
 31     }
 32 
 33     G.fn.init.prototype = G.fn;
 34     G.extend = G.fn.extend = function () {
 35         var i = 1,
 36             len = arguments.length,
 37             dst = arguments[0],
 38             j;
 39         if (dst.length === undefined) {
 40             dst.length = 0;
 41         }
 42         if (i == len) {
 43             dst = this;
 44             i--;
 45         }
 46         for (; i < len; i  ) {
 47             for (j in arguments[i]) {
 48                 dst[j] = arguments[i][j];
 49                 dst.length  ;
 50             }
 51         }
 52         return dst;
 53     };
 54 
 55     function css(obj, attr, value) {
 56         if (arguments.length == 3) {
 57             obj.style[attr] = value;
 58         } else {
 59             if (obj.currentStyle) {
 60                 return obj.currentStyle[attr];
 61             } else {
 62                 return getComputedStyle(obj, false)[attr];
 63             }
 64         }
 65     }
 66 
 67     function animate(obj, attr, fn) {
 68         clearInterval(obj.timer);
 69         var cur = 0;
 70         var target = 0;
 71         var speed = 0;
 72         //var start = new Date().getTime();//起始时间
 73         obj.timer = setInterval(function () {
 74             var bFlag = true;
 75             for (var key in attr) {
 76                 if (key == 'opacity') {
 77                     cur = css(obj, 'opacity') * 100;
 78                 } else {
 79                     cur = parseInt(css(obj, key));
 80                 }
 81                 target = attr[key];
 82                 speed = ( target - cur ) / 8;
 83                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 84                 console.log( cur, target );
 85                 if (cur != target) {
 86                     bFlag = false;
 87                     if (key == 'opacity') {
 88                         obj.style.opacity = ( cur   speed ) / 100;
 89                         obj.style.filter = "alpha(opacity:"   ( cur   speed )   ")";
 90                     } else {
 91                         obj.style[key] = cur   speed   "px";
 92                     }
 93                 }
 94             }
 95             if (bFlag) {
 96                 //var end = new Date().getTime();//结束时间
 97                 //console.log( '总计:',  ( end - start ) );
 98                 clearInterval(obj.timer);
 99                 fn && fn.call(obj);
100             }
101         }, 30 );
102     }
103 
104     G.fn.accordion = function( options ){
105         options = options || {};
106         var defaults = {
107             contentClass : 'panel',
108             navClass : 'nav',
109             activeClass : 'active',
110             triggerElements : '*',
111             activeIndex : 0,
112             evType : 'click',
113             animate : true,
114             multiple : false
115         };
116 
117         var opt = G.extend( {}, defaults, options );
118 
119         var aNavEle = this[0].querySelectorAll( "."   opt.navClass ),
120             aPanel = this[0].querySelectorAll( "."   opt.contentClass );
121 
122         var _api = {};
123 
124         var panelHeight = parseInt( css( aPanel[opt.activeIndex], 'height' ) );
125         _api.setIndex = function( curIndex, effect ){
126             if ( opt.multiple ) {
127                 if ( effect ) {
128                     if ( parseInt( css( aPanel[curIndex], 'height' ) ) == 0 ) {
129                         aPanel[curIndex].style.display = 'block';
130                         animate( aPanel[curIndex], { 'height' : panelHeight } );
131                     }else {
132                         animate( aPanel[curIndex], { 'height' : 0 }, function(){
133                             this.style.display = 'none';
134                         } );
135                     }
136                 }else {
137                     if ( css( aPanel[curIndex], 'display' ) == 'block' ){
138                         aPanel[curIndex].style.display = 'none';
139                     }else {
140                         aPanel[curIndex].style.display = 'block';
141                     }
142                     if ( aNavEle[curIndex].classList.contains( 'active' ) ) {
143                         aNavEle[curIndex].classList.remove( 'active' );
144                     }else {
145                         aNavEle[curIndex].classList.add( 'active' );
146                     }
147                 }
148             }else {
149                 if ( effect ) {
150                     for ( var i = 0; i < aPanel.length; i   ) {
151                         if( i != curIndex ) {
152                             if ( aPanel[i].style.display == 'block' ){
153                                 animate( aPanel[i], { 'height' : 0 }, function(){
154                                     this.style.display = 'none';
155                                 } );
156                             }else{
157                                 aPanel[i].style.display = 'none';
158                             }
159                         }else {
160                             aPanel[curIndex].style.display = 'block';
161                             animate( aPanel[curIndex], { 'height' : panelHeight } );
162                         }
163                     }
164                 }else {
165                     for ( var i = 0 ; i < aPanel.length; i   ){
166                         aPanel[i].style.display = 'none';
167                         aNavEle[i].classList.remove( 'active' );
168                     }
169                     aPanel[curIndex].style.display = 'block';
170                     aNavEle[curIndex].classList.add( 'active' );
171                 }
172             }
173         };
174 
175         _api.setIndex( opt.activeIndex, opt.animate );
176 
177         for( var i = 0 ; i < aNavEle.length; i   ) {
178             aNavEle[i].index = i;
179             aNavEle[i].addEventListener( opt.evType, function(){
180                 _api.setIndex( this.index, opt.animate );
181             }, false );
182         }
183         return this;
184     }
185 
186     var $ = function( selectors, context ){
187         return G( selectors, context );
188     }
189     window.$ = $;
190 })();

 

彩世界网址 10

$.extend(x)

View Code

微件{ 手风琴导航、自动完成、拾色器、对话框、滑块、标签、日历、放大镜、进度条、微调控制器、历史、布局、表格、菜单、工具提示、树、工具栏、上传组件 。}

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <!--作者:ghostwu(吴华)-->
 5     <meta charset="UTF-8">
 6     <title></title>
 7     <link rel="stylesheet" href="./css/accordion.css"/>
 8     <script src="./js/accordion.js"></script>
 9     <script>
10         window.onload = function(){
11             $(".accordion").accordion( { 'animate' : true } );
12         }
13     </script>
14 </head>
15 <body>
16     <div class="main">
17         <div class="accordion">
18             <div class="panel">面板1</div>
19             <div class="nav">导航1</div>
20             <div class="panel">面板2</div>
21             <div class="nav">导航2</div>
22             <div class="panel">面板3</div>
23             <div class="nav">导航3</div>
24             <div class="panel">面板4</div>
25             <div class="nav">导航4</div>
26             <div class="panel">面板5</div>
27             <div class="nav">导航5</div>
28         </div>
29     </div>
30 </body>
31 </html>

自定义插件

$(".accordion").accordion( { animate : false, multiple : true } );
这种效果就是跟选项卡一样

Javascript - 学习总目录

$(".accordion").accordion( { animate : true, multiple : true } );   //支持多个面板同时展开, 支持动画效果

一整套基于web UI的插件,此插件大体分为三个部分 如下:

 

为JQuery对象绑定事件(包括使用Javascript动态插入的元素),type是事件触发方式,x是事件侦听器,y是可选的事件完成后的回调方法。

html部分:

View Code

View Code

彩世界网址 11彩世界网址 12

$(".accordion").accordion( { 'animate' : true } );
不支持多个面板,永远只有一个面板被打开
$(document).ready(function () {
    //使用livequery绑定事件
    $('a').livequery('click',function () {
        ADS.preventDefault()
        ADS.log.write($(this).text());
    })
    //之后动态创建的a元素也被自动绑定了事件
    $("<a href=''>4</a>").appendTo(document.body);
});

<a href=''>1</a>
<a href=''>2</a>
<a href=''>3</a>
 1 * {
 2     margin: 0;
 3     padding: 0;
 4 }
 5 body {
 6     font-size: 14px;
 7     font-family: Tahoma, Verdana,"Microsoft Yahei";
 8 }
 9 a{
10     text-decoration: none;
11     color:#000;
12 }
13 ul,li{
14     list-style-type: none;
15 }
16 img {
17     border:none;
18 }
19 .main {
20     width:960px;
21     margin:20px auto;
22 }
23 
24 .accordion{
25     width:400px;
26     margin: 0 auto 10px;
27 }
28 
29 .accordion .nav {
30     border-bottom: 1px dashed #0064cd;
31 }
32 .accordion .panel{
33     height:100px;
34     background:#ccc;
35 }
36 .accordion .nav{
37     height:30px;
38     background:#999;
39 }
40 .accordion .active{
41     background:#ff0;
42 }

彩世界网址 13彩世界网址 14

完整的手风琴插件代码:

使用fn.extend方法可以为JQuery对象添加原型方法,原型方法属于JQuery对象,属于实例对象,所以调用时使用$的实例.方法名即可。 

 

插件(Plugin)

Javascript - Jquery - 插件【彩世界网址】。效果预览:

x是对象,也可以是匿名对象,将自定义的方法作为x的属性进行定义,就完成了为JQuery添加静态方法。

彩世界网址 15

为JQuery原型添加方法

JQuery UI插件

(function ($) {
    //定义一个JQuery的静态方法trace
    $.extend({
        trace: trace
    });
    //定义一个trace函数
    function trace() {
        alert('hello');
    }
})(jQuery)


$.trace();

 

//定义一个trace函数
function trace() {
    alert('hello');
}
//将其作为JQuery的原型方法
$.fn.extend({
    trace: trace
});
//JQuery对象自动继承原型方法
$("#box").trace()

livequery(type,x,y)

彩世界网址 16彩世界网址 17

View Code

(function ($) {
    //定义一个JQuery的原型方法trace
    $.fn.extend({
        trace: trace
    });
    //定义一个trace函数
    function trace() {
        alert('hello');
    }
})(jQuery)

$(document).trace();

比如如果为页面上的所有div绑定了click事件,那么之后如果再动态创建一个div插入文档后,这个div则不会有click事件,livequery插件能使后来动态创建的元素也能自动注册事件。

livequery插件

本文由时时app平台注册网站发布于web前端,转载请注明出处:Javascript - Jquery - 插件【彩世界网址】

关键词: