大家好，怎样写jquery控件

大家好，我目前接触jquery较多，感觉有一些代码可以复用，于是想写一些控件，可以多次利用，大家谁写过或者有什么例子可以给我参考一下吗?
个人写过的更好，我只是参考一下，想自己再写点，谢谢

解决方案 »

  1.   

    jquery插件？
    不如去问google
      

  2.   

    1.简化复杂的参数列表
    function complex(p1,options){
    var settings=$.extends(
    {
    options1:defaultValue2,
    options2:defaultValue2
    },options||{});
     }2.扩展工具函数
    (function($){
    $.say=function(what){alert(‘I say ’+what);}
    })(jQuery)
    3.扩展包装集
    (function($){
    $.fn.makeItBlue=function(){
    return this.css(‘color’,’blue’};
    })(jQuery)(function($){
    $.fn.makeAllBlue=function(){
    return this.each(function(){
          this.css(‘color’,’blue’);
    })
        })(jQuery)4.示例
    /**
    * textarea插件 计算字数
    */
    (function($) {
    $.fn.initCountTip = function(settings)
    {
    return this.each(function()
    {
    this.textareaSettings = $.extend({
    //下拉区域
    max:100,
    //父元素
    tip:"提示：限制输入{max}个字符，已输入{current}个字符！",
      }, settings);
      
      var _max=this.textareaSettings.max;
      var _length = $(this).val().length;
                if(_length > _max) {
                    $(this).val($(this).val().substring(0, _max));
                }
              var _left = $(this).offset().left;
              var  _top = $(this).offset().top;
              var _width = $(this).width();
              var _height = $(this).height();
      var divTip=$("<div class='textareaTip'></div>");
            
             var _tip=this.textareaSettings.tip;
              _tip=_tip.replace("{current}",$(this).val().length).replace("{max}",_max);
             
             divTip.html(_tip);
             $(this).after(divTip);
             $(this).keyup(function() {
            $(this).showWordCount();
              });
             $(this).focus(function(){ 
              
             $(this).showWordCount();
             $(this).find("~div").fadeIn('slow');
         });
          $(this).blur(function(){
             $(this).find("~div").fadeOut('slow');
         });
       });
        },
        $.fn.showWordCount=function() { 
         return this.each(function(){
              var _tip=this.textareaSettings.tip;
              var _max=this.textareaSettings.max;
              var _length = $(this).val().length;
                if(_length > _max) {
                    $(this).val($(this).val().substring(0, _max));
                }
               _tip=_tip.replace("{current}",$(this).val().length).replace("{max}",_max);
            
              $(this).find("~div").html(_tip);
             });
        }
    })(jQuery);调用方式$("#textareaId").initCountTip({max:100});
      

  3.   

    一个完整的jquery插件小例子，LZ可以试一下<html>
    <head>
    <script src="jquery.js" type="text/javascript"></script>
    <script>/**
    * textarea插件 计算字数，可以放在单独的jquery.textarea.js文件中
    */
    (function($) {$.fn.initCountTip = function(settings)
    {
    return this.each(function()
    {
    this.textareaSettings = $.extend({
    //最大字符数，默认值为100
    max:100,
    //提示信息
    tip:"提示：限制输入{max}个字符，已输入{current}个字符！"
      }, settings);
      
      var _max=this.textareaSettings.max;
      var _length = $(this).val().length;
                if(_length > _max) {
                    $(this).val($(this).val().substring(0, _max));
                }
              var _left = $(this).offset().left;
              var  _top = $(this).offset().top;
              var _width = $(this).width();
              var _height = $(this).height();
      var divTip=$("<div class='textareaTip'></div>");
            
             var _tip=this.textareaSettings.tip;
              _tip=_tip.replace("{current}",$(this).val().length).replace("{max}",_max);
             
             divTip.html(_tip);
             $(this).after(divTip);
             $(this).keyup(function() {
            $(this).showWordCount();
              });
             $(this).focus(function(){ 
              
             $(this).showWordCount();
             $(this).find("~div").fadeIn('slow');
         });
          $(this).blur(function(){
             $(this).find("~div").fadeOut('slow');
         });
       });
        },
    //显示字数
        $.fn.showWordCount=function() { 
         return this.each(function(){
              var _tip=this.textareaSettings.tip;
              var _max=this.textareaSettings.max;
              var _length = $(this).val().length;
                if(_length > _max) {
                    $(this).val($(this).val().substring(0, _max));
                }
               _tip=_tip.replace("{current}",$(this).val().length).replace("{max}",_max);
            
              $(this).find("~div").html(_tip);
             });
        }
    })(jQuery);
    /**
    * textarea插件 结束
    */
    //初始化
    function init(){
      $("#test").initCountTip();
      //$("#test").initCountTip({max:300,tip:"提示：最大{max}，已输入{current}！"});
    }
    $(document).ready(init); 
    </script></head>
    <body>
    <form>
    <textarea id="test" cols="40" rows="10"></textarea>
    </form>
    </body>
    </html>
      

  4.   

    对jQuery的扩展，往往是在$和$.fn两个对象下添加方法。一般用一个匿名函数包裹起来一遍减少与外界的冲突:(function(){
      //用法: $().yourPlugin
      $.fn.yourPlugin=function(){};
      //用法: $.yourPlugin
      $.yourPlugin=function(){};
    })();