Jquery插件编写

一.简单的例子与教程

   来源:http://www.cnblogs.com/JustinYoung/archive/2010/03/30/jquery-chajian.html

   大概内容:

   1.插件遵循格式与框架

           

  2.完成样子

    

 3.放上自己写的个小东西，简易版本 慢慢完善哈

   功能 传入URL 根据获取到的对象 弄成个checkbox可选的每一项

   效果如下图

 

 

 

 

 

  
  

   
   /*
   
   
* Autocomplete - jQuery plugin 1.0
*
* Copyright (c) 2010 Luo Dong, luodonger@foxmail.com
*
* Date 2010-8-24

* Revision: $Id: jquery.emedauto.js  2010-8-24 10:37:33Z roy $
*

   
   */
   
   

jQuery(
   
   function
   
   ($) {

    
   
   //
   
   目标,数据,选项
   
   

   
       $.fn.emedauto 
   
   =
   
    
   
   function
   
   (url, opt) {
        
   
   var
   
    timeout 
   
   =
   
    
   
   ""
   
   , emddata, val, identify 
   
   =
   
    
   
   0
   
   ; e 
   
   =
   
    
   
   this
   
   ;
        
   
   var
   
    options 
   
   =
   
    $.extend({
            delay: 
   
   100
   
   ,
            usemine: 
   
   false
   
   ,
            bind: 
   
   '
   
   keyup
   
   '
   
   ,
            max: 
   
   10
   
   ,
            multi: 
   
   true
   
   ,
            parameters: 
   
   null
   
   ,
            emedautocss: 
   
   '
   
   emed_auto
   
   '
   
   ,
            onBefore: 
   
   function
   
   () {
                
   
   return
   
   ;
            },
            onAfter: 
   
   function
   
   () {
                
   
   return
   
   ;
            }
        }, opt);




        
   
   //
   
   清除以前数据
   
   

   
           
   
   this
   
   .cleartb 
   
   =
   
    
   
   function
   
   () {
            $(
   
   '
   
   #emed_tb01
   
   '
   
   ).remove();
        }
        
   
   //
   
   隐藏
   
   

   
           
   
   this
   
   .hide 
   
   =
   
    
   
   function
   
   () {
            $(
   
   '
   
   #emed_div01
   
   '
   
   ).hide();
        }

        
   
   //
   
   显示
   
   

   
           
   
   this
   
   .show 
   
   =
   
    
   
   function
   
   () {
            $(
   
   '
   
   #emed_div01
   
   '
   
   ).show();
        }
        
   
   //
   
   清空txt
   
   

   
           
   
   this
   
   .cleartxt 
   
   =
   
    
   
   function
   
   () {
            
   
   if
   
    (
   
   !
   
   options.usemine) {
                $(e).val(
   
   ""
   
   );
            }
        }


        
   
   //
   
   初始化层
   
   

   
           
   
   this
   
   .init 
   
   =
   
    
   
   function
   
   () {
            
   
   var
   
    div 
   
   =
   
    document.createElement(
   
   "
   
   div
   
   "
   
   );
            div.setAttribute(
   
   '
   
   id
   
   '
   
   , 
   
   '
   
   emed_div01
   
   '
   
   );
            div.setAttribute(
   
   '
   
   align
   
   '
   
   , 
   
   '
   
   left
   
   '
   
   );

            document.body.appendChild(div);
            document.getElementById(
   
   "
   
   emed_div01
   
   "
   
   ).style.position 
   
   =
   
    
   
   "
   
   absolute
   
   "
   
   ;


            $(e).bind(
   
   '
   
   blur
   
   '
   
   , 
   
   function
   
   () {
                
   
   if
   
    (identify 
   
   !=
   
    
   
   1
   
   ) {
                    e.hide();
                }

            });
            $(
   
   '
   
   #emed_div01
   
   '
   
   ).bind(
   
   "
   
   mouseover
   
   "
   
   , 
   
   function
   
   () {
                identify 
   
   =
   
    
   
   1
   
   ;
            });

            $(
   
   '
   
   #emed_div01
   
   '
   
   ).bind(
   
   "
   
   mouseout
   
   "
   
   , 
   
   function
   
   () {
                identify 
   
   =
   
    
   
   0
   
   ;
            });

            e.hide();
        }



        
   
   //
   
   定位地址
   
   

   
           
   
   this
   
   .location 
   
   =
   
    
   
   function
   
   () {
            
   
   var
   
    left 
   
   =
   
    
   
   0
   
   , top 
   
   =
   
    
   
   0
   
   ;
            
   
   var
   
    aTag 
   
   =
   
    e[
   
   0
   
   ];
            
   
   do
   
    {
                
   
   if
   
    (aTag.offsetParent) {
                    aTag 
   
   =
   
    aTag.offsetParent;
                }
                
   
   else
   
    {
                    left 
   
   +=
   
    aTag.style.left;
                    top 
   
   +=
   
    aTag.style.top;
                    
   
   break
   
   ;
                }
                left 
   
   +=
   
    aTag.offsetLeft;
                top 
   
   +=
   
    aTag.offsetTop;
            } 
   
   while
   
    (aTag.tagName 
   
   !=
   
    
   
   "
   
   body
   
   "
   
   );
            $(
   
   "
   
   #emed_div01
   
   "
   
   )[
   
   0
   
   ].style.left 
   
   =
   
    e[
   
   0
   
   ].offsetLeft 
   
   +
   
    parseInt(left) 
   
   +
   
    
   
   "
   
   px
   
   "
   
   ;
            $(
   
   "
   
   #emed_div01
   
   "
   
   )[
   
   0
   
   ].style.top 
   
   =
   
    e[
   
   0
   
   ].offsetTop 
   
   +
   
    parseInt(top) 
   
   +
   
    e[
   
   0
   
   ].offsetHeight 
   
   +
   
    
   
   "
   
   px
   
   "
   
   ;
        }


        
   
   //
   
   取数据
   
   

   
           
   
   this
   
   .getdata 
   
   =
   
    
   
   function
   
   () {
            
   
   var
   
    par 
   
   =
   
    
   
   "
   
   ({name:'
   
   "
   
    
   
   +
   
    $(e).val() 
   
   +
   
    
   
   "
   
   '
   
   "
   
   ;
            
   
   if
   
    (options.parameters) {
                
   
   var
   
    array 
   
   =
   
    options.parameters;
                
   
   var
   
    len 
   
   =
   
    array.length 
   
   >
   
    options.max 
   
   ?
   
    options.max : array.length;
                
   
   for
   
    (
   
   var
   
    i 
   
   =
   
    
   
   0
   
   ; i 
   
   <
   
    len; i
   
   ++
   
   ) {
                    par 
   
   =
   
    par 
   
   +
   
    
   
   "
   
   ,
   
   "
   
    
   
   +
   
    array[i][
   
   0
   
   ] 
   
   +
   
    
   
   "
   
   :'
   
   "
   
    
   
   +
   
    array[i][
   
   1
   
   ] 
   
   +
   
    
   
   "
   
   '
   
   "
   
   ;
                }
            }
            par 
   
   =
   
    par 
   
   +
   
    
   
   "
   
   })
   
   "
   
   ;


            
   
   //
   
   名称
   
   

   
               
   
   //
   
               $.post(options.url, eval(par), function(data) {
   
   

   
   
            emddata 
   
   =
   
    [
   
   '
   
   北京华美制药
   
   '
   
   , 
   
   '
   
   北京四环制药
   
   '
   
   , 
   
   '
   
   北京牛逼制药厂
   
   '
   
   ];
            e.cleartb();
            
   
   if
   
    (emddata.length 
   
   >
   
    
   
   0
   
   ) {
                e.inittb();
            }
            
   
   else
   
    {
                e.cleartxt();
            }
            
   
   //
   
               });
   
   

   
           }






        
   
   //
   
   键盘事件
   
   

   
           
   
   this
   
   .keycode 
   
   =
   
    
   
   function
   
   (e) {
            
   
   var
   
    code;
            
   
   if
   
    (
   
   !
   
   e) 
   
   var
   
    e 
   
   =
   
    window.event;
            
   
   if
   
    (e.keyCode) code 
   
   =
   
    e.keyCode;
            
   
   else
   
    
   
   if
   
    (e.which) code 
   
   =
   
    e.which;
            
   
   return
   
    code;
        }










        
   
   //
   
   根据传入的数据获得表格数据
   
   

   
           
   
   this
   
   .inittb 
   
   =
   
    
   
   function
   
   () {
            
   
   var
   
    btn 
   
   =
   
    
   
   "
   
   <tr align='center'><td colspan='2'><input type='button' id='btn_emedchoose01' value='确定' /><input type='button' id='btn_emedcancel01' value='取消' /></td></tr>
   
   "
   
   ;
            
   
   var
   
    tb 
   
   =
   
    
   
   "
   
   <table id='emed_tb01' cellpadding='0' cellspacing='0'><thead id='emed_th01'><th>选择</th><th>企业名称</th></thead>
   
   "
   
    
   
   +
   
    btn 
   
   +
   
    
   
   "
   
   </table>
   
   "
   
   ;
            $(
   
   '
   
   #emed_div01
   
   '
   
   ).append(tb);

            
   
   var
   
    th 
   
   =
   
    $(
   
   "
   
   #emed_th01
   
   "
   
   );
            
   
   for
   
    (
   
   var
   
    i 
   
   =
   
    
   
   0
   
   ; i 
   
   <
   
    emddata.length; i
   
   ++
   
   ) {
                
   
   var
   
    string 
   
   =
   
    
   
   "
   
   <tr class=\
   
   "
   
   emed_identify01\
   
   "
   
   ><td><input id=\
   
   "
   
   emed_01ckc
   
   "
   
    + i + 
   
   "
   
   \
   
   "
   
    type=\
   
   "
   
   checkbox\
   
   "
   
    /></td><td>
   
   "
   
    
   
   +
   
    emddata[i] 
   
   +
   
    
   
   "
   
   </td></tr>
   
   "
   
   ;
                th.append(string);
            }

            
   
   //
   
   取消按钮
   
   

   
               $(
   
   "
   
   #btn_emedcancel01
   
   "
   
   ).bind(
   
   '
   
   click
   
   '
   
   , 
   
   function
   
   () {
                e.cleartxt();
                e.hide();
            });


            
   
   //
   
   确定按钮
   
   

   
               $(
   
   "
   
   #btn_emedchoose01
   
   "
   
   ).bind(
   
   '
   
   click
   
   '
   
   , 
   
   function
   
   () {
                
   
   var
   
    txt 
   
   =
   
    
   
   ""
   
   ;
                
   
   var
   
    judge 
   
   =
   
    
   
   false
   
   ;
                
   
   var
   
    obj 
   
   =
   
    $(
   
   "
   
   #emed_tb01 tr td
   
   "
   
   );
                
   
   for
   
    (
   
   var
   
    i 
   
   =
   
    
   
   0
   
   ; i 
   
   <
   
    obj.length; i
   
   ++
   
   ) {
                    
   
   if
   
    (i 
   
   %
   
    
   
   2
   
    
   
   !=
   
    
   
   0
   
   ) {
                        
   
   if
   
    (judge) {
                            txt 
   
   =
   
    txt 
   
   +
   
    $(obj[i]).html() 
   
   +
   
    
   
   "
   
   |
   
   "
   
   ;
                        }
                        judge 
   
   =
   
    
   
   false
   
   ;
                    }
                    
   
   else
   
    {
                        judge 
   
   =
   
    $(
   
   "
   
   #emed_01ckc
   
   "
   
    
   
   +
   
    i 
   
   /
   
    
   
   2
   
   ).attr(
   
   "
   
   checked
   
   "
   
   );
                    }
                }
                
   
   if
   
    (txt 
   
   ==
   
    
   
   ""
   
   ) {
                    alert(
   
   "
   
   请您先选择合适的信息
   
   "
   
   );
                }
                
   
   else
   
    {
                    $(e).attr(
   
   "
   
   value
   
   "
   
   , txt.substring(
   
   0
   
   , txt.length 
   
   -
   
    
   
   1
   
   ));
                    e.hide();
                }
            });



            
   
   this
   
   .location();
            
   
   this
   
   .show();
        }



        
   
   this
   
   .each(
   
   function
   
   () {
            $(
   
   this
   
   ).bind(options.bind, 
   
   function
   
   () {
                val 
   
   =
   
    $(
   
   this
   
   ).val();
                
   
   if
   
    (val 
   
   ==
   
    
   
   ""
   
   ) {
                    $(
   
   '
   
   #emed_div01
   
   '
   
   ).hide();
                    
   
   return
   
   ;
                }
                
   
   if
   
    (timeout 
   
   !=
   
    
   
   ""
   
   ) {
                    window.clearTimeout(timeout);
                }
                timeout 
   
   =
   
    setTimeout(e.getdata, options.delay);
            });
        });
        
   
   this
   
   .init();
    }
});