jquery 插件的实现和优化
浏览数：23 /
时间：2015年06月09日
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();
完成。用面向对象的思想去处理插件的时候，要给插件添加功能会更方便。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
