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();
    }
});