/** * Created by carlos on 2015/5/19. * 1、Qalert 页面提示插件,可以传入对应参数修改提示的位置和css * 2、QloadingCover 页面加载提示插件。 $.QloadingCover.options 可以改变默认属性 * 3、setPosition 方法可以单独调用可以设置对象的位置,注意是position:fixed * 4、Qmodal 页面弹出框插件,默认ios样式 * 5、Q_confirm 确定提示,类似于js中的confirm * 6、Q_alert 提示,类似于js中的alert * 7、Qstorage 本地缓存方法 */ (function ($) { $.fn.Qalert = function(params){ var defaults = { text:'alert页面', //文本信息 duration:3000, //显示时间长度 position:'bottom', //显示的提示框的位置:top、middle、bottom space:50, //与上下边框的间隔距离,只有当top和bottom时候生效 debug:false, //是否显示debug调试信息,主要是定位信息 css:{ //alert的提示框的css color:'#ffffff', background:'#222222', padding:'10px 15px', "border-radius":'5px', "font-size":'14px' } }; var Qthis=$(this); var options = params || defaults; var Q_alert = $(''); Q_alert.css(options.css||defaults.css); Q_alert.css({display:'none',"text-shadow":"none"}); Q_alert.html(options.text||defaults.text); Qthis.append(Q_alert); Q_alert.setPosition({ position:options.position||defaults.position, space:options.space||defaults.space, debug:options.debug||defaults.debug }); Q_alert.fadeIn(); setTimeout(function(){ Q_alert.fadeOut(); Q_alert.remove(); },options.duration||defaults.duration) }; $.fn.setPosition = function(poss){ // poss = { // position:'bottom', // space:20, // debug:false // } init(poss,this); function init(poss,obj){ var Pthis = $(obj); var Pthis_W = Pthis.outerWidth(true); var Pthis_H = Pthis.outerHeight(true); var win_W = $(window).width(); var win_H = $(window).height(); var obj_left = null, obj_top = null; obj_left = (win_W - Pthis_W)/2; if(poss.position == "middle"){ obj_top = (win_H - Pthis_H)/2; } else if(poss.position == 'top'){ obj_top = poss.space; } else{ obj_top = win_H - Pthis_H - poss.space; } Pthis.css({"position":"fixed","z-index":10000,"left":obj_left,"top":obj_top}); if(poss.debug){ console.log("提示框宽度:"+Pthis_W,"提示框高度:"+Pthis_H); console.log("屏幕宽度:"+win_W,"屏幕高度:"+win_H); console.log("提示框距离左边:"+obj_left,"提示框距离上边:"+obj_top); } } }; $.QloadingCover = function(action,params,sign){ params = params || {}; sign = sign || 'loadingCover'; if(action=='show') $.QloadingCover.sign = sign; var defaults = { text:"加载中", //显示文本 showText:true, //是否显示文本 customContent:"", //当showText和showImage同时为false,此项自定义内容生效 imageUrl:'', //图片url imageAuto:true, //图片原大小显示,默认为true imageWidth:50, //图片宽度,当imageAuto=为false时生效 imageHeight:50, //图片高度,当imageAuto=为false时生效 showImage:false, //是否显示图片,默认为false debug:false, //是否显示debug调试信息,主要是定位信息 zIndex:9999, //cover的z层高度 coverColor:'#3A3A3A', //cover的颜色 coverOpacity:0.5, //cover的透明度 close:false, //点击非提示框是否关闭,默认false css:{ //loading的提示框的css color:'#ffffff', background:'#222222', padding:'10px 15px', "border-radius":'5px', "font-size":'14px' } }; var options = $.QloadingCover.options; //改变默认属性 defaults = $.extend({},defaults,options,params); if(action=="show"){ var Qcover = createCover(); if($('#Qloadingbox').length>0){$('#Qloadingbox').remove();} var Qloadingbox = $('
'); $('body').append(Qcover,Qloadingbox); Qloadingbox.css('display','none'); Qloadingbox.css(GetResultValue('css')); Qloadingbox.css({display:'none',"text-shadow":"none","z-index":GetResultValue('zIndex')+1,"text-align":'center'}); if(GetResultValue('showImage')){ var img = $(''); if(!GetResultValue('imageAuto')){img.css({width:GetResultValue('imageWidth')+'px',height:GetResultValue('imageHeight')+'px'});} img.css({"margin-bottom":"5px"}); img.attr('src',GetResultValue('imageUrl')); Qloadingbox.append(img); } if(GetResultValue('showText')){ var span = $(''); span.html(GetResultValue('text')); if(GetResultValue('showImage')) Qloadingbox.append('
'); Qloadingbox.append(span); } if(!GetResultValue('showText')&&!GetResultValue('showImage')){ Qloadingbox.append(GetResultValue('customContent')); } Qloadingbox.setPosition({position:'middle',space:0,debug:GetResultValue('debug')}); $(window).resize(function(){ $('#Qloadingbox').setPosition({position:'middle',space:0,debug:GetResultValue('debug')}) }); $('body').css('overflow','hidden'); Qcover.fadeIn(); Qloadingbox.fadeIn(); initCover(Qcover, Qloadingbox); return Qloadingbox; } else if(action=="hide"){ if($.QloadingCover.sign!=sign) return; var Qcover = $('#Qcover'); var Qloadingbox = $('#Qloadingbox'); $('body').css('overflow','auto'); Qcover.fadeOut(); Qloadingbox.fadeOut(); } else{ console.log('action is invalid'); } function initCover(c,l){ if(GetResultValue('close')){ closeCover(c,l); } } function closeCover(c,l){ c.bind('click',function(e){ c.fadeOut(); l.fadeOut(); $('body').css('overflow','auto'); }); } function createCover(){ this.coverWidth = $(window).width(); this.coverHeight = $(document).height(); if($('#Qcover').length>0){$('#Qcover').remove();} this.cover = $('
'); this.coverOpacity = GetResultValue('coverOpacity'); this.cover.css({ "position":"absolute", "width":this.coverWidth, "height":this.coverHeight, "z-index":GetResultValue('zIndex'), filter:'alpha(opacity='+this.coverOpacity*10+')', "-moz-opacity":this.coverOpacity, "-khtml-opacity": this.coverOpacity, "opacity": this.coverOpacity, "background":GetResultValue('coverColor'), "top":0, "left":0, "display":"none" }); return this.cover; } function GetResultValue(name){ return defaults[name]; } }; $.Qmodal = function(action,params,sign){ params = params || {}; sign = sign || 'modal'; var defaults = { theme:"ios", //默认样式ios showHead:false, //是否显示头部,默认false showBtn:false, //是否显示按钮,默认false btnVertical:false, //按钮是否垂直布局,默认false headText:"modal提示", //头部显示文字 headColor:"#2C73DF", //头部文字颜色 contentHtml:"
", //要显示的内容html close:false, //点击非提示框是否关闭,默认false modalWidth:"75%" //modal的宽度设置 }; var defaultBtns = [{ name:"取消", fun:modalCancel },{ name:"确定", fun:modalSubmit }]; defaults.btns = defaultBtns; //showBtn为true时默认按钮 var ios = { //ios皮肤样式 background:"#EFEFEF", overflow:"hidden", "-webkit-border-radius": "4px", "-moz-border-radius": "4px", "border-radius":'4px', "-webkit-box-shadow": "#666 3px 3px 5px", "-moz-box-shadow": "#666 3px 3px 5px", "box-shadow":"#666 3px 3px 5px" }; defaults = $.extend({},defaults,params); ios.width = defaults.modalWidth; defaults.showText = false; defaults.showImage = false; defaults.css = eval(defaults.theme); var headstyle = { 'overflow':'hidden', 'padding':'8px 10px', 'text-align': 'left', 'font-size':'1.1em', 'color':defaults.headColor, 'border-bottom':'2px solid '+defaults.headColor }; var Qmodal_html = $('
'); Qmodal_html.html(defaults.contentHtml); var Qmodal_box = $('
'); if(defaults.showHead){ var Qmodal_head = $('
'); var Qmodal_head_text = $(''); Qmodal_head_text.html(defaults.headText); Qmodal_head.css(headstyle); Qmodal_head.append(Qmodal_head_text); Qmodal_box.append(Qmodal_head); } Qmodal_box.append(Qmodal_html); var td_style = { "text-align":"center", "padding":"10px 0", "border":"1px solid #C9C9C9", "font-size":"0.8em" }; if(defaults.showBtn){ var Qmodal_foot = $('
'); var count = defaults.btns.length; var foot_table = $(''); foot_table.css({"width":"100%","border-collapse":"collapse"}); var avg_width = 100/count; if(defaults.btnVertical){ for(var i=0;i'); var td = $(''); for(var i=0;i'); td.css(td_style); td.html(btn_params.name); td.bind('click',btn_params.fun); tr.append(td); } foot_table.append(tr); } Qmodal_box.append(foot_table); } defaults.customContent = Qmodal_box; return $.QloadingCover(action,defaults,sign); function modalCancel(){$.Qmodal('hide');} function modalSubmit(){$.Qmodal('hide');} }; $.Q_confirm = function(text, params){ params = params || {}; var confirm = params.confirm; var cancel = params.cancel; if(typeof(cancel)!="function"){cancel=function(){}} if(typeof(confirm)!="function"){confirm=function(){}} var content = $('
'); content.css({"padding":"10px"}); content.html(text); return $.Qmodal("show",{ contentHtml:content, showBtn:true, modalWidth:"250px", btns:[{ name:"取消", fun:function(){ cancel(); $.Qmodal('hide',{},'confirm'); }}, { name:"确定", fun:function(){ confirm(); $.Qmodal('hide',{},'confirm'); } }] },'confirm'); }; $.Q_alert = function(text, params){ params = params || {}; var confirm = params.confirm; if(typeof(confirm)!="function"){confirm=function(){}} var content = $('
'); content.css({"padding":"10px"}); if(!text) text = 'undefined'; content.html(text); var modalObj = $.Qmodal("show",{ contentHtml:content, showBtn:true, modalWidth:"250px", btns:[{ name:"确定", fun:function(){ confirm(); $.Qmodal('hide',{},'_alert'); } }]},'_alert'); }; $.Qstorage = { kset:function(key, value){ window.localStorage.setItem(key, value); }, kget:function(key){ return window.localStorage.getItem(key); }, kremove:function(key){ window.localStorage.removeItem(key); }, kclear:function(){ window.localStorage.clear(); } } })(jQuery);
'); td.css(td_style); td.html(btn_params.name); td.bind('click',btn_params.fun); tr.append(td); foot_table.append(tr); } } else{ var tr = $('