ACE框架整合记录5tooltip插件-【完结】

来源:互联网 发布:java图形接口 编辑:程序博客网 时间:2024/06/07 05:05

效果图



使用
$("body").acetooltip({
                        content: result, callback: function () {
                            window.location.href = window.location.href;
                        }
                    });
插件代码
/**
*说明:与ace配套的在主页面使用的ToolTip插件
*作者:黄枰凯
*更新时间:2016-5-11 15:29 完结
*/
(function ($, window) {
 $.fn.acetooltip = function (options) {
  // 默认参数
  var defaults = {
   content: "",
   width: "200px",
   height: "40px",
   callback: null
  };
  var _self = $(this);
  // 插件配置
  var opt = $.extend(defaults, options);
  var div = $("<div class=\"widget-container-span modal fade in\" style=\"width:" + opt.width + ";height:"+opt.height+"; padding:10px; background-color:white; opacity:0.7; overflow:hidden; margin: 120px auto;border:1px solid #ddd;\"> <i class=\"icon-volume-up bigger-130 green\"></i>"+opt.content+"</div>");
  _self.append(div)
  //动画显示
  div.animate({
   height: 'toggle'
  }, function () {
   setTimeout(function () {
    //关闭
    div.animate({
     height: 'toggle'
    }, function () {
     div.remove();
     if ($.isFunction(opt.callback)) {
      //返回button对象
      opt.callback.apply(this);
     }
    });
   }, 1200);
  });
  return this;
 }
})(jQuery, window); 

0 0