// 告警框插件定义和设置
|
;(function($, window, document, undefined) {
|
// 定义confirm类
|
var Confirm = function (ele, options) {
|
this.ele = ele;
|
this.opts = options;
|
this.confirmMask = $('.confirm-mask');
|
//this.ele.draggable(); // 可以拖动依赖jqueryui
|
};
|
|
// 创建Confirm
|
Confirm.prototype.create = function() {
|
// 清空容器
|
this.ele.text(" ");
|
this.ele.addClass('myconfirm');
|
var confirmHd = $('<div class="confirm-header"></div>'); //confirm的头部
|
var confirmContent = $('<div class="confirm-content"></div>'); // confirm的内容
|
var confirmFo = $('<div class="confirm-footer"></div>'); // confirm的底部
|
var confirmMask = $('<div class="confirm-mask"></div>'); // confirm的遮罩层
|
|
/* 定义头部 */
|
confirmHd.append($('<div class="title">系统提示</div>'));
|
confirmHd.append($('<div class="close-confirm close" onclick=""></div>'));
|
|
/* 定义底部 */
|
confirmFo.append($('<div class="ipt"><input type="button" name="" value="确定" class="confirm-ensure-btn" id="confirmEnsure"></div>'));
|
confirmFo.append($('<div class="ipt"><input type="button" name="" value="取消" class="close"></div>'));
|
|
|
this.ele.append(confirmHd);
|
this.ele.append(confirmContent);
|
this.ele.append(confirmFo);
|
$('body').append(confirmMask);
|
|
this.confirmMask = $('.confirm-mask');
|
this.center(); // 自动执行居中操作
|
|
// 设置移出事件
|
var ele = this.ele;
|
this.ele.find('.close').click(function() {
|
ele.myConfirm('hide');
|
});
|
};
|
|
// 使Confirm处在屏幕的中间
|
Confirm.prototype.center = function() {
|
var wid = this.ele.width();
|
var ht = this.ele.height();
|
var winHt = $(window).height();
|
this.ele.css({
|
top: (winHt-ht)/2+'px'
|
});
|
};
|
// 显示Confirm
|
Confirm.prototype.show = function() {
|
if(!this.ele.hasClass('myconfirm')) {
|
this.create(); // 生成内容
|
}
|
|
var obj = this.opts;
|
|
// 判断是否是confirm
|
if(obj.type == 'alert') {
|
this.ele.find('.confirm-footer').hide();
|
}else {
|
this.ele.find('.confirm-footer').show();
|
}
|
this.ele.find('.confirm-header .title').text(obj.title);
|
this.ele.find('.confirm-content').html(obj.content);
|
if(isFunction(obj.enfunc)) {
|
$('#confirmEnsure').removeClass().addClass('confirm-ensure-btn').val(obj.value);
|
}else {
|
$('#confirmEnsure').removeClass().addClass(obj.cla=='none'?"":obj.cla).addClass('confirm-ensure-btn').val(obj.value);
|
}
|
// 显示confirm为淡入
|
this.ele.fadeIn();
|
this.confirmMask.fadeIn();
|
this.confirmMask.addClass('tmp-style');
|
|
if(obj.fadeout && obj.type=='alert') {
|
setTimeout(function() {
|
this.hide();
|
}.bind(this), obj.timeout);
|
}
|
|
// 向确认按钮添加点击事件
|
this.ensure();
|
};
|
// 隐藏Confirm
|
Confirm.prototype.hide = function() {
|
// 隐藏confirm为淡出
|
this.ele.fadeOut();
|
this.confirmMask.fadeOut();
|
this.confirmMask.removeClass('tmp-style');
|
};
|
|
// 确认按钮的事件绑定
|
Confirm.prototype.ensure = function() {
|
// 传入确认按钮的回调函数执行
|
var _this = this;
|
this.ele.off('click.myConfirm').on('click.myConfirm', '.confirm-ensure-btn', function() {
|
if(typeof _this.opts.enfunc == 'function') {
|
_this.hide(); // 隐藏弹出框
|
if(isArray(_this.opts.enparams)) {
|
_this.opts.enfunc.apply({}, _this.opts.enparams); // 执行回调函数
|
}else {
|
_this.opts.enfunc(); // 执行回调函数
|
}
|
|
}else {
|
console.log('可以在配置项中添加enfunc属性设置回调函数！');
|
}
|
|
});
|
};
|
|
$.fn.myConfirm = function(options) {
|
var defaults = {
|
title: '系统提示',
|
content: '是否确认操作',
|
type: 'confirm',
|
cla: 'none',
|
value: '确定',
|
timeout: 1500,
|
fadeout: false,
|
enfunc: '',
|
enparams:[],
|
stats: 'show'
|
};
|
var opts = {};
|
var tmp = {};
|
if(options == undefined || typeof options == 'string') {
|
switch(options) {
|
case 'hide':
|
tmp.stats = "hide";
|
break;
|
default:
|
tmp.stats = "show";
|
break;
|
}
|
|
opts = $.extend(true, {}, defaults, tmp);
|
}else {
|
opts = $.extend(true, {}, defaults, options);
|
}
|
var confirm = new Confirm(this, opts);
|
|
confirm[opts.stats]();
|
|
return this;
|
}
|
})(jQuery, window, document);
|
|
// 定义容器中表格
|
;(function($, window, document, undefined) {
|
/**
|
* @description 表格插件的定义
|
* @param jquery ele jquery选择器选中元素
|
* @param object options 插件的配置项
|
*/
|
var MyTbl = function(ele, options) {
|
this.ele = ele.eq(0);
|
this.opts = options;
|
this.init();
|
};
|
|
MyTbl.prototype = {
|
init: function() {
|
this.ele.addClass('tbl-container');
|
var cont = this.ele.height();
|
var header = this.ele.find('.tbl-header').height();
|
var footer = this.ele.find('.tbl-footer').height();
|
|
this.ele.find('.tbl-body').height(cont-header-footer-1);
|
},
|
create: function() {
|
var opts = this.formatOpts();
|
|
// 根据数据生成表格元素
|
var table = $('<table></table>');
|
var thead = $('<thead></thead>');
|
var tr = $('<tr></tr>');
|
|
for(var i=0; i<opts.thead.length; i++) {
|
var td = $('<td>'+opts.thead[i]+'</td>');
|
tr.append(td);
|
}
|
|
thead.append(tr);
|
table.append(thead);
|
|
var tbody = $('<tbody></tbody>');
|
for(var i=0; i<opts.tbody.length; i++) {
|
var tr = $('<tr></tr>');
|
for(var k=0; k<opts.tbody[i].length; k++) {
|
var td = $('<td>'+opts.tbody[i][k]+'</td>');
|
tr.append(td);
|
}
|
tr.data().attr = opts.attr[i];
|
tbody.append(tr);
|
}
|
|
table.append(tbody);
|
|
this.ele.find('.tbl-body').text("");
|
|
this.ele.find('.tbl-body').append(table);
|
this.ele.find('.tbl-header').html(this.ele.find('.tbl-body').html());
|
|
this.resize();
|
},
|
|
// 格式化数据
|
formatOpts: function() {
|
// 将配置项的数据存储到当前元素的
|
var opts = $.extend(true, {}, this.opts);
|
|
// 计算表格的行数
|
opts.rows = opts.tbody.length;
|
|
// 根据表格行数向attr中添加默认对象
|
for(var i=0; i<opts.rows; i++) {
|
var tmp = {
|
lists: i
|
};
|
if(typeof opts.attr[i] != 'object') {
|
opts.attr[i] = $.extend(true, {}, tmp);
|
}else {
|
opts.attr[i] = $.extend(true, {}, opts.attr[i],tmp);
|
}
|
|
}
|
|
this.ele.data().options = opts;
|
return opts;
|
},
|
resize: function() {
|
var tblWidth = this.ele.find('.tbl-body table').width();
|
this.ele.find('.tbl-header').width(tblWidth);
|
|
var tbl = this;
|
|
$(window).resize(function() {
|
tbl.init();
|
tbl.resize();
|
});
|
}
|
};
|
|
// 向jquery中添加表格插件
|
$.fn.myTbl = function(options) {
|
var defaults = {
|
thead: [],
|
tbody: [],
|
attr:[],
|
rows:0,
|
type: 'create'
|
};
|
|
// 判断当前传递参数的类型
|
if(options !=undefined ) {
|
if(typeof options == 'string' || options.constructor.name == "Array") {
|
console.log('error options typeof!!!');
|
return this;
|
}
|
}
|
|
var opts = $.extend(true, {}, defaults, options || {});
|
var tbl = new MyTbl(this, opts);
|
|
if(tbl[opts.type]) {
|
tbl[opts.type]();
|
}else {
|
console.log('no '+opts.type+' event');
|
}
|
|
return this;
|
}
|
})(jQuery, window, document);
|
|
// 加载等待
|
;(function($, window, document, undefined) {
|
var Loading = function(ele, options) {
|
this.ele = ele;
|
this.opts = options;
|
this.loading = null;
|
this.init();
|
};
|
var _proto = Loading.prototype;
|
|
// 初始化加载登录内容
|
_proto.init = function() {
|
// 向容器中添加加载等待内容
|
this.ele.addClass('loading-container');
|
|
// 判断当前容器中是否存在加载等待的子元素
|
if(this.ele.children('.whyc-ui-loading').length == 0) {
|
var uiLoading = $('<div class="whyc-ui-loading absolute"></div>');
|
|
// 根据容器不同设置不同的位置定位
|
if(this.ele.selector == 'body') {
|
uiLoading = $('<div class="whyc-ui-loading fixed"></div>');
|
}else {
|
// 设置从滚动条滚动的位置显示加载框
|
var scrollTop = this.ele.scrollTop();
|
uiLoading.css('top', scrollTop+'px');
|
}
|
var loadingContent = $('<div class="loading-content"></div>');
|
var loadingBg = $('<div class="loading-bg opacity03"></div>');
|
var loadingImgs = $('<div class="loading-images"><i class="fa fa-spinner faa-spin animated"></i></div>')
|
|
loadingContent.append(loadingBg);
|
loadingContent.append(loadingImgs);
|
uiLoading.append(loadingContent);
|
|
this.ele.append(uiLoading);
|
}
|
|
this.loading = this.ele.children('.whyc-ui-loading');
|
};
|
|
// 显示内容
|
_proto.show = function() {
|
this.loading.addClass('show');
|
};
|
|
// 移除加载等待内容
|
_proto.hide = function() {
|
this.ele.children('.whyc-ui-loading').remove();
|
this.ele.removeClass('loading-container');
|
};
|
|
// 配置项错误处理函数
|
_proto.error = function() {
|
console.log(this.opts.errorMsg);
|
};
|
|
$.fn.loading = function() {
|
var args = arguments[0]?arguments[0]:{}; // 处理参数
|
var options = {};
|
|
if(typeof args == 'string') { // 判断如果传入的数据是字符串
|
switch(args) {
|
case 'show':
|
options.stats = 'show';
|
break;
|
case 'hide':
|
options.stats = 'hide';
|
break;
|
default:
|
options.stats = 'error';
|
options.errorMsg = '加载等待中没有这样的事件！！！';
|
break;
|
}
|
}else if(args.constructor.name == 'Array') {
|
options.errorMsg = '传入的数据不能是为数组类型！！！';
|
options.stats = 'error';
|
}
|
|
var defaults = {
|
stats: 'show',
|
errorMsg:''
|
};
|
|
var opts = $.extend(true, {}, defaults, options);
|
var loading = new Loading(this, opts);
|
|
loading[opts.stats](); // 执行对应的方法
|
|
return this;
|
}
|
})(jQuery, window, document);
|
|
// tooltip插件
|
;(function($) {
|
var Tooltip = function(ele, options) {
|
this.init(ele, options);
|
};
|
var _proto = Tooltip.prototype;
|
// 初始化tooltip的成员属性
|
_proto.init = function(ele, options) {
|
this.ele = ele;
|
this.parent = this.ele.parent();
|
this.opts = options;
|
this.id = this.ele.attr('id')+'Tooltip';
|
this.tooltip = $('#'+this.id);
|
};
|
// 构造tooltip的基本结构
|
_proto.structure = function() {
|
this.parent.addClass('whyc-tooltip-container');
|
if(this.tooltip.length == 0) {
|
var whycT = $('<div class="whyc-tooltip" id='+this.id+'></div>');
|
var tooltipContainer = $('<div class="tooltip-container"></div>');
|
var tooltipT = $('<div class="tooltip-t '+this.opts.position+'"></div>');
|
var tContainer = $('<div class="t-container"></div>');
|
var tTriange = $('<div class="t-item t-border"></div><div class="t-item t-fill"></div>');
|
|
tContainer.append(tTriange);
|
tooltipT.append(tContainer);
|
|
var tContent = $('<div class="tooltip-c">'+this.opts.content+'</div>');
|
|
tooltipContainer.append(tooltipT);
|
tooltipContainer.append(tContent);
|
whycT.append(tooltipContainer);
|
this.tooltip = whycT;
|
this.parent.append(this.tooltip);
|
this.setPosition(this.tooltip);
|
}
|
|
// 更新提示信息
|
if(this.opts.update) {
|
this.parent.find('.tooltip-c').html(this.opts.content);
|
}
|
};
|
// 根据元素的位置显示tooltip
|
_proto.setPosition = function(tooltip) {
|
var eleX = this.ele.position().left;
|
var eleY = this.ele.position().top;
|
var eHt = this.ele.height();
|
var tHt = this.tooltip.height();
|
var yShift = eleY-tHt-15;
|
if(this.opts.position == 'top') {
|
yShift = eleY+eHt+18;
|
}
|
tooltip.css({
|
left: eleX+'px',
|
top: yShift+'px'
|
});
|
}
|
// 显示tooltip提示框
|
_proto.show = function() {
|
this.structure();
|
this.tooltip.addClass('show');
|
};
|
// 隐藏tooltip提示框
|
_proto.hide= function() {
|
this.parent.removeClass('whyc-tooltip-container');
|
this.tooltip.removeClass('show');
|
};
|
// 输入参数失败执行函数
|
_proto.error = function() {
|
console.log('参数设置格式有误！');
|
};
|
$.fn.myTooltip = function() {
|
// 当前容器必须有id才可以使用myTooltip插件
|
if(this.attr('id') == undefined) {
|
console.log('当前元素不是唯一, 无法定位！');
|
return;
|
}
|
var defaults = {
|
position: 'top',
|
content: '内容提示！',
|
thing: 'show',
|
update: false
|
};
|
var tmp = {};
|
if(arguments.length != 0) {
|
if(typeof arguments[0] == 'string') {
|
switch(arguments[0]) {
|
case 'show':
|
tmp.thing = 'show';
|
break;
|
case 'hide':
|
tmp.thing = 'hide';
|
break;
|
default:
|
tmp.thing = 'error';
|
break;
|
}
|
}else{
|
tmp = $.extend(true, {}, arguments[0]);
|
}
|
}
|
var opts = $.extend(true, {}, defaults, tmp)
|
var tooltip = new Tooltip(this, opts);
|
tooltip[opts.thing]();
|
return this;
|
};
|
})(jQuery);
|
|
//文本框数据格式验证
|
;(function($) {
|
var TestVal = function(ele, options) {
|
this.ele = ele;
|
this.opts = options;
|
};
|
var _proto = TestVal.prototype;
|
|
// 根据数据的正确性修改文本框的样式
|
_proto.changeVal = function() {
|
var testVal = this;
|
|
// 文本框内容改变
|
this.ele.on('input propertychange', function() {
|
testVal.changeValEvent(testVal, $(this));
|
});
|
|
// 失去焦点
|
this.ele.on('blur', function() {
|
//$(this).next('i').removeClass('error-data');
|
$(this).myTooltip('hide');
|
});
|
|
// 获取焦点
|
this.ele.on('focus', function() {
|
testVal.changeValEvent(testVal, $(this));
|
});
|
};
|
|
_proto.changeValEvent = function(testVal, ele) {
|
var isValidate = testVal.regVal();
|
if(isValidate) {
|
ele.next('i').removeClass('error-data');
|
ele.myTooltip('hide');
|
ele.removeClass('error-data');
|
|
testVal.opts.btn.removeClass('whyc-btn-disabled');
|
}else {
|
ele.next('i').addClass('error-data');
|
ele.myTooltip({
|
position: testVal.opts.position,
|
thing: 'show',
|
update: testVal.opts.update,
|
content: '<span style="color:#FF0000">'+testVal.opts.msg+'</span>'
|
});
|
ele.addClass('error-data');
|
|
testVal.opts.btn.addClass('whyc-btn-disabled');
|
}
|
};
|
|
// 根据正则表达式验证数据的合法性
|
_proto.regVal = function() {
|
var flag = true;
|
var val = this.ele.val();
|
if(!this.opts.pattern.test(val)) {
|
flag = false;
|
}
|
|
// 数据的格式符合要求
|
if(flag && this.opts.regVal) {
|
// val值不在取值范围
|
if(val<this.opts.min || val>this.opts.max) {
|
flag = false;
|
}
|
}
|
|
return flag;
|
};
|
_proto.error = function() {
|
console.info(this.opts.msg);
|
};
|
$.fn.testVal = function(options, attr, val) {
|
var defaults = {
|
pattern: "",
|
event: "changeVal",
|
btn: $('#btn_temp'),
|
msg: "错误信息描述",
|
regVal: false,
|
update: false,
|
min: 0,
|
max: 0,
|
position: 'bottom'
|
};
|
var opts = {};
|
// 判断是否为更新配置项
|
if(isString(options)) {
|
var oldOpts = this.data('testVal');
|
opts = $.extend({}, opts, oldOpts);
|
if(attr == 'allOpts') {
|
opts = $.extend({}, opts, val);
|
}else {
|
opts[attr] = val;
|
}
|
|
}else if(isObject(options)){
|
opts = $.extend(true, {}, defaults, options||{});
|
}
|
// console.log(opts);
|
if(opts.pattern.constructor.name != 'RegExp') {
|
opts.event = "error";
|
opts.msg = '请输入正确的正则表达式格式！！！'
|
}
|
//console.log(opts);
|
var testVal = new TestVal(this, opts);
|
this.data('testVal', testVal.opts);
|
|
testVal[opts.event]();
|
|
return this;
|
};
|
})(jQuery);
|
