请教高手如果自定义一个简单表格控件,这个控件有属性,方法,事件

xr396464010 2013-07-31 12:19:40
例如这个控件名叫mygrid

调用的时候语法跟 jquery 其它插件语法一样比如
$("xxx").mygrid("close") //调用关闭方法
$("xxx").mygrid({
url:'', //这样可以设置相关初始化属性值
width :'', //这样可以设置相关初始化属性值
height :'', //这样可以设置相关初始化属性值
onClick:function(){
//事件
}
})

只有38分了
...全文
162 6 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
l676331991 2013-12-09
  • 打赏
  • 举报
回复
抛开jQuery插件不说,假若要写个MyGrid。

function MyGrid(dom,options){
  this.dom = $(dom);
  ... 
}

defaultOptions = {

};

MyGrid.prototype = {
  constructor: MyGrid,
  close: function(){
    this.dom.xxx;
  },
  open: function(){
    this.dom.xxx;
  }
  ...
}
好了,现在适配成jQuery插件

$.fn.myGrid = function(method,param){
  if(typeof(method) === 'object') {
    param = arguments[0];
    param = $.extend(param,defaultOptions);
    method = null;  //如过第一个是object,则把方法看作是setup
  }  
  return this.each(function(){
    if(method === null) {
      //初始化
      var grid = new MyGrid(this,option); //new
      $(this).data('GridObject',grid); //把new出来的对象放到这个dom节点关联的data中
    } else {
      var grid = $(this).data('GridObject'); //取出grid对象
      if(grid && grid[method]) {
        grid[method].call(grid,param); //运行grid的method方法
      }
    }
  });
}
如果你希望一切挂载到jQuery下,那么

$.MyGrid = function(dom,options){
  this.dom = $(dom);
  ... 
}

$.MyGrid.defaultOptions = {

};

$.MyGrid.prototype = {
  constructor: $.MyGrid,
  close: function(){
    this.dom.xxx;
  },
  open: function(){
    this.dom.xxx;
  },
  setRow: function(row){
  
  }
  ...
}

$.fn.myGrid = function(method,param){
  if(typeof(method) !== 'string') {
    param = arguments[0];
    param = $.extend(param,$.MyGrid.defaultOptions);
    method = null;  //如过第一个是object,则把方法看作是setup
  }  
  return this.each(function(){
    if(method === null) {
      //初始化
      var grid = new $.MyGrid(this,option); //
      $(this).data('GridObject',grid); //把new出来的对象放到这个dom节点关联的data中
    } else {
      var grid = $(this).data('GridObject'); //取出grid对象
      if(grid && grid[method]) {
        grid[method].call(grid,param); //运行grid的method方法
      }
    }
  });
}

///////////////////
//现在就可以这样用啦
///////////////////

$("#test").myGrid({}).myGrid("setRow",5).myGrid("close");

calmner 2013-12-09
  • 打赏
  • 举报
回复
<script> alert('hello') </script>
xr396464010 2013-07-31
  • 打赏
  • 举报
回复
自己顶一下。 别沉了
xr396464010 2013-07-31
  • 打赏
  • 举报
回复
引用 2 楼 zzgzzg00 的回复:
判断传入的json串 根据key值设置样式 url通过ajax取值 function添加事件 应该不是很轻易就能做好没错误的

 

 (function ($) {
    $.fn.window=function(param){
           if(typeof param=="string"){
            //如果是字条串 表示是要使用方法 我如何根据param 调用$.fn.window.methods里面指定的方法?
              
           }else {
            //如果是object ,我如何根据param里面 参数调用  $.fn.window.defaults?
           }
          
  }

  //我这里定义所有的方法
  $.fn.window.methods={
      open:function(){
        alert("open");
      },
      close:function(){
        alert("close") ;
      } 
  }
  $.fn.window.defaults={
    width:10,
    height:10,
    href:'',
    onSuccessLoad:true
  }


 })(jQuery);
在线等,求大家帮帮忙看看。 谢谢
似梦飞花 2013-07-31
  • 打赏
  • 举报
回复
判断传入的json串 根据key值设置样式 url通过ajax取值 function添加事件 应该不是很轻易就能做好没错误的
奇乐二二二 2013-07-31
  • 打赏
  • 举报
回复
如果所有的操作都通过mygrid这个方法来进行的话只有对mygrid方法的参数进行判断了,不同的参数对应不同的处理

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧