/**
* 第一行数据上方表头下方的提示框
*
* @file 第一行数据上方表头下方的提示框
* @author Brian Li(lbxxlht@163.com)
*/
var define = typeof define === 'function' && define.amd ? define : function (factory) {
typeof module === 'object' ? (module.exports = factory(require)) : '';
};
define(function (require) {
var util = require('../core/util');
var Plugin = require('../core/plugin');
var CLOSE_BUTTON_CMD = 'close-information-bar';
// public /////////////////////////////////////////////////////////////////
/**
* 构造函数
*
* @constructor
* @param {Object} param 初始化对象
* @param {string} param.content 显示的内容，支持html
* @param {boolean} param.close 初始是否处于关闭状态
*/
function TableInformationBar(param) {
if (!(this instanceof TableInformationBar)) {
return new TableInformationBar(param);
}
param = param || {};
this.content = param.content || '';
this.isClose = param.close;
this.required = ['TableHeader'];
Plugin.call(this, param);
}
util.inherit(TableInformationBar, Plugin);
/**
* @override
*
* @param {Object} param 宿主UI初始化时的参数引用，***操作请小心***
* @return {boolean} 是否初始化成功
*/
TableInformationBar.prototype.load = function (param) {
param.pluginSkin = util.joinClassName(param.pluginSkin, 'table-information-bar');
param.tpl = extendTPL(param.tpl, this.content, this.isClose);
util.appendHandler(param, 'click', mouseHandler);
return true;
};
/**
* 修改提示的内容
*
* @param {string} content 要重新写的内容
*/
TableInformationBar.prototype.setContent = function (content) {
// 获取信息栏模板
var bar = produceTPL(content, this.isClose);
// 修改宿主模板
var picker = new util.Picker(this.host.tpl);
picker.find('.information-bar').remove();
picker.find('.table-head').after(bar);
this.host.tpl = picker.export();
// 动态修改页面
content += '<div class="iconfont icon-guanbi" data-ui-cmd="' + CLOSE_BUTTON_CMD + '"></div>';
$(this.host.container).find('.information-bar td')
.css('opacity', 0.5).html(content).animate({opacity: 1});
};
/**
* 弹出信息栏
*
* @param {?string} content 如果指定同时更新内容
*/
TableInformationBar.prototype.pop = function (content) {
this.isClose = false;
if (typeof content === 'string') {
var picker = new util.Picker(this.host.tpl);
var bar = produceTPL(content, false);
picker.find('.information-bar').remove();
picker.find('.table-head').after(bar);
this.host.tpl = picker.export();
content += '<div class="iconfont icon-guanbi" data-ui-cmd="' + CLOSE_BUTTON_CMD + '"></div>';
$(this.host.container).find('.information-bar').removeClass('disable').find('td')
.css('opacity', 0.5).html(content).animate({opacity: 1});
}
else {
this.host.tpl = new util.Picker(this.host.tpl).find('.information-bar').removeClass('disable').export();
$(this.host.container).find('.information-bar').removeClass('disable');
}
};
/**
* 关闭提示框
*/
TableInformationBar.prototype.close = function () {
this.isClose = true;
this.host.tpl = new util.Picker(this.host.tpl).find('.information-bar').addClass('disable').export();
$(this.host.container).find('.information-bar').addClass('disable');
};
// private /////////////////////////////////////////////////////////////////
/**
* 生成模板
*
* @param {string} content 信息栏的内容
* @param {boolean} close 是否是关闭的
* @return {Array.<string>} 信息框模板
*/
function produceTPL(content, close) {
return [
'<tr class="information-bar' + (close ? ' disable' : '') + '">',
'<td colspan="999">',
content,
'<div class="iconfont icon-guanbi" data-ui-cmd="' + CLOSE_BUTTON_CMD + '"></div>',
'</td>',
'</tr>'
];
}
/**
* 对模版进行扩充
*
* @param {Array.<string>} tpl 原始模板
* @param {string} content 信息栏的内容
* @param {boolean} close 是否是关闭的
* @return {Array.<string>} 扩展后的模板
*/
function extendTPL(tpl, content, close) {
return new util.Picker(tpl).find('.table-head').after(produceTPL(content, close)).export();
}
/**
* 处理一切鼠标事件
*
* @param {Event} evt 鼠标事件句柄
*/
function mouseHandler(evt) {
var dataset = util.getDataset(evt.target);
if (dataset.uiCmd === CLOSE_BUTTON_CMD) {
this.plugin.TableInformationBar.close();
}
}
return TableInformationBar;
});
|