jquery 插件的实现和优化
1。menus 实现:
$.fn.menu=function(options){ var $this=$(this); var cross='<div class="zhiniu_crossup"><div class="zhiniu_crossup_sub"></div></div>'; var crossRight='<div class="zhiniu_crossright"><div class="zhiniu_crossright_sub"></div></div>'; var html='<div class="zhiniu_dropdown_menu"></div>'; var ul='<ul class="zhiniu_dropdown_menu_ul"></ul>'; var li='<li class="zhiniu_dropdown_menu_li"></li>'; var liSpace='<li class="zhiniu_dropdown_menu_li_space"></li>'; var tubs={ 'setting':'<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>', 'penceil':'<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>', 'video':'<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>', 'article':'<span class="glyphicon glyphicon-list" aria-hidden="true"></span>', 'logout':'<span class="glyphicon glyphicon-log-out zhiniu_dropmenu_exit" aria-hidden="true"></span>' } //*********************in case exist********************\\ if($('.zhiniu_dropdown_menu').length>0){ $('.zhiniu_dropdown_menu').remove(); } $(document.body).append(html); var location=options.location,crossDirect=options.cross; var marginleft=location[0]||0,margintop=location[1]||0; $('.zhiniu_dropdown_menu').css( {'position':'absolute','left':($this.offset().left+marginleft)+'px','top':($this.offset().top+margintop)+'px'} ); //***********************init DOM *****************************\\ switch(crossDirect){ case 'right':$('.zhiniu_dropdown_menu').append(crossRight);break; default:$('.zhiniu_dropdown_menu').append(cross); } $('.zhiniu_dropdown_menu').append(ul); var menus=options.menus || {}; if(menus instanceof Array){ for(var i=0;i<menus.length;i++){ if(i!=0){ $('.zhiniu_dropdown_menu_ul').append(liSpace); } var liObj=$(li).html('<a href="javascript:void(0);">'+(tubs[menus[i].type]?tubs[menus[i].type]:'')+menus[i].content+'</a>').get(0); if(menus[i].handler && menus[i].handler.length>0){ $(liObj).bind('click',menus[i].handler[0].click); } $('.zhiniu_dropdown_menu_ul').append(liObj); } } $('.zhiniu_dropdown_menu').bind('mouseleave',function(){$(this).remove();}); $('.zhiniu_dropmenu_exit').parent('a').addClass('zhiniu_dropmenu_exit'); $('.zhiniu_dropmenu_exit').click(function(){ $('.zhiniu_dropdown_menu').remove(); }); };
2.面向对象的优化
function Menu(ele,opts){ var defaults={ w:'100px', h:'100px', location:[-100,-20], cross:'right' }; this.$elemt=ele; this.opts=$.extend({},defaults,opts); this.html={ cross:'<div class="zhiniu_crossup"><div class="zhiniu_crossup_sub"></div></div>', crossRight:'<div class="zhiniu_crossright"><div class="zhiniu_crossright_sub"></div></div>', html:'<div class="zhiniu_dropdown_menu"></div>', ul:'<ul class="zhiniu_dropdown_menu_ul"></ul>', li:'<li class="zhiniu_dropdown_menu_li"></li>', liSpace:'<li class="zhiniu_dropdown_menu_li_space"></li>' }; this.tubs={ 'setting':'<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>', 'penceil':'<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>', 'video':'<span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>', 'article':'<span class="glyphicon glyphicon-list" aria-hidden="true"></span>', 'logout':'<span class="glyphicon glyphicon-log-out zhiniu_dropmenu_exit" aria-hidden="true"></span>' } } Menu.prototype={ init:function(){ //*****in case of exists*****\\ var that = this; return that.$elemt.each(function(){ if($('.zhiniu_dropdown_menu').length>0){ $('.zhiniu_dropdown_menu').remove(); } $(document.body).append(that.html.html); var marginleft=that.opts.location[0], margintop=that.opts.location[1]; $('.zhiniu_dropdown_menu').css( {'position':'absolute','left':(that.$elemt.offset().left+marginleft)+'px','top':(that.$elemt.offset().top+margintop)+'px'} ); //***********************init DOM *****************************\\ switch(that.opts.cross){ case 'right':$('.zhiniu_dropdown_menu').append(that.html.crossRight);break; default:$('.zhiniu_dropdown_menu').append(that.html.cross);break; } $('.zhiniu_dropdown_menu').append(that.html.ul); var menus=that.opts.menus || {}; if(menus instanceof Array){ for(var i=0;i<menus.length;i++){ if(i!=0){ $('.zhiniu_dropdown_menu_ul').append(that.html.liSpace); } var liObj=$(that.html.li).html('<a href="javascript:void(0);">'+(that.tubs[menus[i].type]?that.tubs[menus[i].type]:'')+menus[i].content+'</a>').get(0); if(menus[i].handler && menus[i].handler.length>0){ $(liObj).bind('click',menus[i].handler[0].click); } $('.zhiniu_dropdown_menu_ul').append(liObj); } } $('.zhiniu_dropdown_menu').bind('mouseleave',function(){$(this).remove();}); $('.zhiniu_dropmenu_exit').parent('a').addClass('zhiniu_dropmenu_exit'); $('.zhiniu_dropmenu_exit').click(function(){ $('.zhiniu_dropdown_menu').remove(); }); }); } } $.fn.menu=function(){ var that=this; var opts=arguments[0]; var menu = new Menu(that,opts); return menu.init(); }
2.tooltips 实现:
var $this=this; //position data\\ var pos_left=$this.offset().left+$this.parent().width()+'px', pos_top =$this.offset().top+$this.height()/5+'px'; //predelete tip\\ var _id='zhiniu_tooltipccc'+$this.attr('id'); $('#'+_id).remove(); var args=arguments; //1:content,2:time if(arguments.length>0){ var content=args[0],time=args[1]; //********initDom********\\ $(document.body).append('<div class="zhiniu_tooltip" id="'+_id+'"></div>'); $('#'+_id).html(content+'<div class="zhiniu_tooltip_space"></div>').css({ left:pos_left, top:pos_top }) if(time && time!=0){ //*******handle time,time up remove********\\ $('#'+_id).animate({display:'none'},time*1000,function(){ $('#'+_id).remove(); }) } }
2.面向对象的优化
function Tooltips(eme,opt){ this.$elemt=eme; var defaults={ color:'#ff0000', time:2 }; this.opts=$.extend({},defaults,opt); } Tooltips.prototype={ init:function(){ var that = this, $this = that.$elemt; return that.$elemt.each(function(){ var pos_left=$this.offset().left+$this.parent().width()+'px', pos_top =$this.offset().top+$this.height()/5+'px'; //*****in case of exists*****\\ var _id='zhiniu_tooltipccc'+($this.attr('id')||$this.attr('className')||$this.attr(tagName)); $('#'+_id).remove(); var content=that.opts[0],time=that.opts[1] || that.opts.time ; //********initDom********\\ $(document.body).append('<div class="zhiniu_tooltip" id="'+_id+'"></div>'); $('#'+_id).html(content+'<div class="zhiniu_tooltip_space"></div>').css({ left:pos_left, top:pos_top }) if(time && time!=0){ //*******handle time,time up remove********\\ $('#'+_id).animate({display:'none'},time*1000,function(){ $('#'+_id).remove(); }) } }); } }; $.fn.tooltips=function(){ var that = this, opts = arguments; var tooltips=new Tooltips(that,opts); return tooltips.init();
3.alert实现
var msg=arguments[0]; var wh=arguments[1] || [200,100]; var w=wh[0],h=wh[1]; var alertBGDIV='<div class="zhiniu_alert_bg"></div>'; var alertMSGDIV='<div class="zhiniu_alert_msg"><div class="alert alert-danger" role="alert" style="margin:0;text-align:center"></div><div class="zhiniu_alert_yes">确定</div></div>'; var body=$(document.body); var screenWidth=body.width(),screenHeight=body.height(); var left=(screenWidth-w)/2,top=(screenHeight-h)/2; //*********remove bgdiv*************\\ $('.zhiniu_alert_bg').remove(); $('.zhiniu_alert_msg').remove(); body.append(alertBGDIV); body.append(alertMSGDIV); $('.zhiniu_alert_msg').css({ width:w+'px', height:h+'px', left:left+'px', top:top+'px' }) $('.alert-danger').html(msg); $('.zhiniu_alert_bg').bind('click',function(){ $('.zhiniu_alert_msg').remove(); $('.zhiniu_alert_bg').remove(); }); $('.zhiniu_alert_yes').bind('click',function(){ $('.zhiniu_alert_msg').remove(); $('.zhiniu_alert_bg').remove(); });
3.优化
function Alert(ele,opt){ this.$elemt = ele; this.w=(opt[1]|| [200,100])[0]; this.h=(opt[1]|| [200,100])[1]; this.msg = opt[0] || '请稍侯...'; // this.opts=$({},{msg:'请稍等...',wh:[200,100]},); this.elem={ alertBGDIV:'<div class="zhiniu_alert_bg"></div>', alertMSGDIV:'<div class="zhiniu_alert_msg"><div class="alert alert-danger" role="alert" style="margin:0;text-align:center"></div><div class="zhiniu_alert_yes">确定</div></div>' }; this.init(); } Alert.prototype={ init:function(){ var that = this; var $body= $(document.body); var screenWidth=$body.width(), screenHeight=$body.height(); var w = that.w,h = that.h; var left=(screenWidth-w)/2, top=(screenHeight-h)/2; //*********remove bgdiv*************\\ $('.zhiniu_alert_bg').remove(); $('.zhiniu_alert_msg').remove(); $body.append(that.elem.alertBGDIV); $body.append(that.elem.alertMSGDIV); $('.zhiniu_alert_msg').css({ width:w+'px', height:h+'px', left:left+'px', top:top+'px' }) this.initEvents(); }, initEvents:function(){ var that = this; $('.zhiniu_alert_bg,.zhiniu_alert_yes').bind('click',function(){ that.close(); }); /* $('.zhiniu_alert_yes').bind('click',function(){ that.close(); }); */ }, close:function(){ $('.zhiniu_alert_msg').remove(); $('.zhiniu_alert_bg').remove(); }, alert:function(){ var that = this; //return that.$elemt.each(function(){ $('.alert-danger').html(that.msg); //}); } } $.alert=function(){ var alt = new Alert(this,arguments); return alt.alert();
完成。用面向对象的思想去处理插件的时候,要给插件添加功能会更方便。