码迷,mamicode.com
首页 > 其他好文 > 详细

面向对象选项卡组件

时间:2016-11-11 01:12:24      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:面向   组件   length   this   cto   --   sel   cli   前端   

离校实习前端工作一个月,第一次用面向对象写的点击切换选项卡组件,点击左右按钮分别切换不同的选项

基于JQ的一个组件

//创建构造函数
function ShowNews(selector){
  this.i=0;
  this.num=$(selector).length;
}
//添加切换方法
ShowNews.prototype.show=function(selector,nextbtn,prevbtn){
  var _this=this;
//下一张
$(nextbtn).click(function(){
  _this.i++;
  if(_this.i>=_this.num){
    _this.i=0;
  }
  $(selector).eq(_this.i).show().siblings().hide();
});
//上一张
$(prevbtn).click(function(){
  _this.i--;
  if(_this.i==-1){
    _this.i=_this.num-1;
  }
  $(selector).eq(_this.i).show().siblings().hide();
})
}
//调用方法
var industryNew=new ShowNews(selector);
industryNew.show(selector,nextbtn,prevbtn);

面向对象选项卡组件

标签:面向   组件   length   this   cto   --   sel   cli   前端   

原文地址:http://www.cnblogs.com/linxianzuo/p/6052812.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!