zoukankan      html  css  js  c++  java
  • jQuery两种扩展插件的方式

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 #div1{ 100px; height:100px; background:red; position:absolute;}
     8 </style>
     9 <script src="jquery-1.10.1.min.js"></script>
    10 <script>
    11 
    12 //$.extend : 扩展工具方法下的插件形式  $.xxx() $.yyy()
    13 
    14 //$.fn.extend  :  扩展到JQ对象下的插件形式  $().xxx()  $().yyy()
    15 
    16 $.extend({
    17     leftTrim : function(str){
    18         return str.replace(/^s+/,'');
    19     },
    20     rightTrim : function(){},
    21     aaa : function(){
    22         alert(1);
    23     },
    24     bbb : function(){}
    25 });
    26 
    27 $.fn.extend({
    28     
    29     drag : function(){
    30         
    31         //this : $('#div1')
    32         
    33         var disX = 0;
    34         var disY = 0;
    35         
    36         var This = this;
    37         
    38         this.mousedown(function(ev){
    39             
    40             disX = ev.pageX - $(this).offset().left;
    41             disY = ev.pageY - $(this).offset().top;
    42             
    43             $(document).mousemove(function(ev){
    44                 
    45                 This.css('left' , ev.pageX - disX);
    46                 This.css('top' , ev.pageY - disY);
    47                 
    48             });
    49             
    50             $(document).mouseup(function(){
    51                 $(this).off();
    52             });
    53             
    54             return false;
    55             
    56         });
    57         
    58     },
    59     aaa : function(){
    60         alert(2);
    61     }
    62     
    63 });
    64 
    65 
    66 </script>
    67 <script>
    68 
    69 
    70 //$.trim()
    71 //$.leftTrim()
    72 
    73 /*var str = '  hello  ';
    74 
    75 alert( '('+$.leftTrim(str)+')' );*/
    76 
    77 $(function(){
    78     
    79     $('#div1').drag();
    80     
    81 });
    82 
    83 
    84 $.aaa();  // 1
    85 $().aaa();  //2
    86 
    87 </script>
    88 </head>
    89 
    90 <body>
    91 <div id="div1"></div>
    92 </body>
    93 </html>
  • 相关阅读:
    IIS服务器应用程序不可用的解决办法
    C#几个经常犯错误汇总
    C1flexgrid格式化
    图片自动按比例缩小代码(防止页面被图片撑破)
    VSS2005的使用与配置过程
    ASP.NET通过IHttpModule实现伪静态
    五一游玩收藏
    plants
    几个JS的方法
    英式英语VS美式英语的差异
  • 原文地址:https://www.cnblogs.com/wanqiu/p/4488543.html
Copyright © 2011-2022 走看看