非空校验的提示按钮（shiro项目中来的六）

一：图示

假如你现在还在为自己的技术担忧，假如你现在想提升自己的工资，假如你想在职场上获得更多的话语权，假如你想顺利的度过35岁这个魔咒，假如你想体验BAT的工作环境，那么现在请我们一起开启提升技术之旅吧，详情请点击http://106.12.206.16:8080/qingruihappy/index.html

 二，js脚本

 

  1 /**
  2 * jquery tips 提示插件 jquery.tips.js v0.1beta
  3 *
  4 * 使用方法
  5 * $(selector).tips({   //selector 为jquery选择器
  6 *  msg:'your messages!',    //你的提示消息  必填
  7 *  side:1,  //提示窗显示位置  1，2，3，4 分别代表 上右下左 默认为1（上） 可选
  8 *  color:'#FFF', //提示文字色 默认为白色 可选
  9 *  bg:'#F00',//提示窗背景色 默认为红色 可选
 10 *  time:2,//自动关闭时间 默认2秒 设置0则不自动关闭 可选
 11 *  x:0,//横向偏移  正数向右偏移 负数向左偏移 默认为0 可选
 12 *  y:0,//纵向偏移  正数向下偏移 负数向上偏移 默认为0 可选
 13 * })
 14 *
 15 *
 16 */
 17 (function ($) {
 18     $.fn.tips = function(options){
 19         var defaults = {
 20             side:1,
 21             msg:'',
 22             color:'#FFF',
 23             bg:'#F00',
 24             time:2,
 25             x:0,
 26             y:0
 27         }
 28         var options = $.extend(defaults, options);
 29         if (!options.msg||isNaN(options.side)) {
 30         throw new Error('params error');
 31     }
 32     if(!$('#jquery_tips_style').length){
 33         var style='<style id="jquery_tips_style" type="text/css">';
 34         style+='.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
 35         style+='.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
 36         style+='.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
 37         style+='.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
 38         style+='.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
 39         style+='.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
 40         style+='.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
 41         style+='</style>';
 42         $(document.body).append(style);
 43     }
 44         this.each(function(){
 45             var element=$(this);
 46             var element_top=element.offset().top,element_left=element.offset().left,element_height=element.outerHeight(),element_width=element.outerWidth();
 47             options.side=options.side<1?1:options.side>4?4:Math.round(options.side);
 48             var sideName=options.side==1?'top':options.side==2?'right':options.side==3?'bottom':options.side==4?'left':'top';
 49             var tips=$('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_'+sideName+'"></i><div class="jq_tips_info">'+options.msg+'</div></div>').appendTo(document.body);
 50             tips.find('.jq_tips_arrow').css('border-'+sideName,'10px solid '+options.bg);
 51             tips.find('.jq_tips_info').css({
 52                 color:options.color,
 53                 backgroundColor:options.bg
 54             });
 55             switch(options.side){
 56                 case 1:
 57                     tips.css({
 58                         top:element_top-tips.outerHeight()+options.x,
 59                         left:element_left-10+options.y
 60                     });
 61                     break;
 62                 case 2:
 63                     tips.css({
 64                         top:element_top-20+options.x,
 65                         left:element_left+element_width+options.y
 66                     });
 67                     break;
 68                 case 3:
 69                     tips.css({
 70                         top:element_top+element_height+options.x,
 71                         left:element_left-10+options.y
 72                     });
 73                     break;
 74                 case 4:
 75                     tips.css({
 76                         top:element_top-20+options.x,
 77                         left:element_left-tips.outerWidth()+options.y
 78                     });
 79                     break;
 80                 default:
 81             }
 82             var closeTime;
 83             tips.fadeIn('fast').click(function(){
 84                 clearTimeout(closeTime);
 85                 tips.fadeOut('fast',function(){
 86                     tips.remove();
 87                 })
 88             })
 89             if(options.time){
 90                 closeTime=setTimeout(function(){
 91                     tips.click();
 92                 },options.time*1000);
 93                 tips.hover(function(){
 94                     clearTimeout(closeTime);
 95                 },function(){
 96                     closeTime=setTimeout(function(){
 97                         tips.click();
 98                     },options.time*1000);
 99                 })
100             }
101         });
102         return this;
103     };
104 })(jQuery);

 

三，用法 

 

 

 1 var accountId = $("#key_accountId").val();
 2         if(accountId==""||$("#key_accountId").val()=='请选择'){
 3             $("#key_accountId").tips({
 4                 side:3,
 5                 msg:'请输入账号',
 6                 bg:'#AE81FF',
 7                 time:9
 8             });
 9             $("#key_accountId").focus();
10             return false;
11             }
12