/**
* Created by jinxs on 14-6-17.
*
*/
var _IE = webUI_browser().ie;
var _IE8 = (_IE && webUI_browser().version == 8);
/**
* 是否为IE6
* @type {*|ie|boolean}
* @private
*/
var _IEunder6 = (_IE && webUI_browser().version < 7);
var _IEunder7 = (_IE && webUI_browser().version < 8);
var _IEunder8 = (_IE && webUI_browser().version < 9);
var _IEunder9 = (_IE && webUI_browser().version < 10);
if (_IEunder6) {
document.execCommand("BackgroundImageCache", false, true);
var bg = 'backgroundAttachment';
if ($('html').css(bg) !== 'fixed' && $('body').css(bg) !== 'fixed') {
$('html').css({
zoom: 1, // 避免偶尔出现body背景图片异常的情况
backgroundImage: 'url(about:blank)',
backgroundAttachment: 'fixed'
});
}
}
function isChinese(str) {
if(escape(str).indexOf("%u")<0){
return false;
}else{
return true;
}
}
/**
* 显示操作结果
* @param success 是否成功
* @param msg 结果消息
*/
function showResult(success, msg, errorType) {
if (success) {
//成功
$.uiMessagetip.show({
animate: true,
panelStyle: 'ui_panel_success',
height: 40,
showHeader:false,
padding: 10,
title: '消息提示',
content: msg,
vertical: 'top',
horizontal: 'center',
timeout: 1500
});
} else {
var time = 2000;
if (errorType === undefined) {
errorType = 'error';
}
else if (errorType == 'error') {
time = 0;
}
$.uiMessagebox.alert({
width: 300,
height: 114,
draggable:true,
maximizable:true,
type: errorType,
title: '消息提示',
content: msg,
timeout: time
});
}
}
/**
*页面初始化
*/
$(function () {
$._ajax = $.ajax;
$.ajax = function (opt) {
var fn = {
showLoading: true,
dataType:'json',
beforeSend: function (xhr) {
},
error: function (xhr, textStatus, errorThrown) {
},
success: function (data, textStatus) {
}
};
$.extend(fn, opt || {});
$.extend(opt, {
beforeSend: function (xhr) {
if(fn.beforeSend(xhr)===false){
return false;
}
else if(fn.showLoading){
$.uiLoading.show();
}
},
error: function (xhr, textStatus, errorThrown) {
$.uiLoading.hide();
if (fn.error(xhr, textStatus, errorThrown) !== false) {
showResult(false, '服务器端错误:' + xhr.responseText);
}
},
success: function (data, textStatus) {
$.uiLoading.hide();
if (fn.success(data, textStatus) !== false) {
if (!!data.message) {
showResult(data.success, data.message);
}
}
}
});
return $._ajax(opt);
};
$(window).unbind('.resize').bind('resize.resize', function () {
$('body').children().each(function () {
var elem = $(this);
if (elem.is(':visible') || (elem.attr('closed')&&elem.attr('closed')=='false')) {
elem.triggerHandler('_resize');
}
})
});
});/**
* @summary 生成GUID
* @name uiCore#guidGenerator
* @function
* @returns {string} 唯一标识字符串
*/
function guidGenerator() {
var s4 = function () {
return (((1 + Math.random() * 0x10000) | 0).toString(16).substring(1));
};
return s4();
}
function GUID() {
return (guidGenerator() + guidGenerator() + guidGenerator() + guidGenerator() + guidGenerator() + guidGenerator() + guidGenerator() + guidGenerator());
}
/**
* @summary iframe加载完成事件
* @name uiCore#iframeLoaded
* @param iframeID
* @param loadedEvent
* @function
*/
function iframeLoaded(iframeID, loadedEvent) {
var iframe = document.getElementById(iframeID);
if (_IE) {
iframe.onload = function () {
loadedEvent;
}
} else {
iframe.onreadystatechange = function () {
if (iframe.readyState == 'complete') {
loadedEvent;
}
}
}
}
/**
* 日期转换
* @param format 格式字符串(例如:yyyy-MM-dd)
* @returns {*}
*/
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
};
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
/**
* 获取链接地址中的参数值
* @param name 参数名称
* @returns {*}
* @constructor
*/
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
return null;
}
}
/**
* Created by jinxs on 2015.08.28.
*/
/**
* @summary 提供浏览器检测的模块
* @name uiCore#browser
* @function
* @returns {string} 浏览器模块
*/
function webUI_browser() {
var agent = navigator.userAgent.toLowerCase(),
opera = window.opera,
browser = {
ie: /(msie\s|trident.*rv:)([\w.]+)/.test(agent),
opera: (!!opera && opera.version),
webkit: (agent.indexOf(' applewebkit/') > -1),
firefox: (agent.indexOf('firefox') > -1),
mac: (agent.indexOf('macintosh') > -1),
quirks: (document.compatMode == 'BackCompat')
};
browser.gecko = (navigator.product == 'Gecko' && !browser.webkit && !browser.opera && !browser.ie);
var version = 0;
// Internet Explorer 6.0+
if (browser.ie) {
version = (agent.match(/(msie\s|trident.*rv:)([\w.]+)/)[2] || 0) * 1;
browser.ie11Compat = document.documentMode == 11;
browser.ie9Compat = document.documentMode == 9;
browser.ie8 = !!document.documentMode;
browser.ie8Compat = document.documentMode == 8;
browser.ie7Compat = ((version == 7 && !document.documentMode)
|| document.documentMode == 7);
browser.ie6Compat = (version < 7 || browser.quirks);
browser.ie9above = version > 8;
browser.ie9below = version < 9;
}
// Gecko.
if (browser.gecko) {
var geckoRelease = agent.match(/rv:([\d\.]+)/);
if (geckoRelease) {
geckoRelease = geckoRelease[1].split('.');
version = geckoRelease[0] * 10000 + (geckoRelease[1] || 0) * 100 + (geckoRelease[2] || 0) * 1;
}
}
if (/chrome\/(\d+\.\d)/i.test(agent)) {
browser.chrome = +RegExp['\x241'];
}
if (/(\d+\.\d)?(?:\.\d)?\s+safari\/?(\d+\.\d+)?/i.test(agent) && !/chrome/i.test(agent)) {
browser.safari = +(RegExp['\x241'] || RegExp['\x242']);
}
// Opera 9.50+
if (browser.opera)
version = parseFloat(opera.version());
// WebKit 522+ (Safari 3+)
if (browser.webkit)
version = parseFloat(agent.match(/ applewebkit\/(\d+)/)[1]);
browser.version = version;
return browser;
}
/**
* Created by jinxs on 2015.08.28.
*/
/**
* @summary 正则方法
* @name uiCore#regexs
* @type {{require: RegExp, email: RegExp, phone: RegExp, mobile: RegExp, url: RegExp, ip: RegExp, currency: RegExp, number: RegExp, zip: RegExp, qq: RegExp, english: RegExp, chinese: RegExp, username: RegExp, integer: RegExp, double: RegExp}}
*/
(function ($) {
$.regexs = {
/**
* 必填
*/
require: /.+/,
email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
phone: /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
mobile: /^((\(\d{2,3}\))|(\d{3}\-))?(\d{11})$/,
url: /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"])*$/,
ip: /^(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5]).(0|[1-9]\d?|[0-1]\d{2}|2[0-4]\d|25[0-5])$/,
currency: /^\d+(\.\d+)?$/,
number: /^\d+$/,
zip: /^[1-9]\d{5}$/,
qq: /^[1-9]\d{4,8}$/,
english: /^[A-Za-z]+$/,
chinese: /^[\u0391-\uFFE5]+$/,
username: /^[a-zA-Z]\w{3,19}$/i,
integer: /^[-\+]?\d+$/,
'double': /^[-\+]?\d+(\.\d+)?$/,
rx_space:/^[ \s\u200b\ufeff]*$/
};
})(jQuery);
/**
* @summary 键盘键值
* @name uiCore#keyCode
* @type {{TAB: number, ENTER: number, ESCAPE: number, SPACE: number, LEFT: number, UP: number, RIGHT: number, DOWN: number}}
*/
(function ($) {
$.keyCode = {
TAB: 9,
ENTER: 13,
ESCAPE: 27,
SPACE: 32,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
};
})(jQuery);
(function ($) {
/**
* @summary 为元素添加唯一ID
* @name uiCore#setElemID
* @function
* @returns {Object}
*/
$.fn.setElemID = function () {
var elem = this;
if (!this instanceof jQuery) {
elem = $(this);
}
if (!elem.attr('id')) {
elem.attr('id',guidGenerator());
}
return elem;
};
/**
* @summary 获取元素ID
* @name uiCore#getElemID
* @function
* @returns id
*/
$.fn.getElemID = function () {
var elem = this;
if (!this instanceof jQuery) {
elem = $(this);
}
return elem.attr('id');
};
/**
* @summary 通过父元素ID生成子元素ID,如果存在ID则不生成
* @name uiCore#setIDByParentID
* @param parentID 父节点ID
* @param afterName 子元素后缀
* @returns {fn} 子元素对象
*/
$.fn.setIDByParentID = function (parentID, afterName) {
var elem = this;
if (!this instanceof jQuery) {
elem = $(this);
}
if (elem.length > 0) {
elem.attr('id', $.getIDByParentID(parentID, afterName));
}
return elem;
};
/**
* @summary 对元素中的'ui-config'属性或者属性进行转换
* @name uiCore#parseUIConfig
* @methodOf 基础
* @constructor
* @param {Json} properties 指定要转换的元素属性
* @returns {Jquery}
* @example
* target.parseUIConfig();
* target.parseUIConfig(['id','title','width',{autoFit:'boolean',border:'boolean'},{min:'number'}]);
*/
$.fn.parseUIConfig = function (properties) {
var t = $(this);
var options = {};
var s = $.trim(t.attr('ui-config'));
t.removeAttr('ui-config');
if (s) {
if (s.substring(0, 1) != '{') {
s = '{' + s + '}';
}
options = (new Function('return ' + s))();
}
return options;
};
/**
* @summary 如果组件中存在iframe,则移除iframe,回收内存,解决iframe 嵌入网页时的内存泄漏问题
* @name uiCore#destroyIframe
* @function
*/
$.fn.destroyIframe = function () {
$("iframe,frame", this).each(function () {
try {
if (this.contentWindow && this.contentWindow.document && this.contentWindow.close) {
this.contentWindow.document.write('');
this.contentWindow.close();
}
if (_IE) {
CollectGarbage();
}
} catch (ex) {
}
}).remove();
};
/**
* @summary 控制特殊HTML组件的显示隐藏(用于遮罩问题)
* @name uiCore#zIndexHack
* @param {Boolean} visible
* @param [String] excludeSelector 要排除的对象的父选择器
* @function
*/
$.fn.zIndexHack = function (visible, excludeSelector) {
return this.each(function () {
var container = $(this);
if (_IEunder6) {
container.find('SELECT').toggle(visible);
}
container.find('OBJECT,IFRAME').each(function () {
var obj = $(this);
if (!excludeSelector || obj.closest(excludeSelector).length == 0) {
if (visible) {
var h = parseInt(obj.attr('org_h'));
if (h > 0) {
obj.height(h);
} else {
obj.css("height", '');
}
obj.removeAttr('org_h');
} else {
if (obj.attr('org_h') == undefined) {
obj.attr('org_h', obj.height());
}
obj.height(0);
}
}
});
});
};
/**
* @summary 判断是否有滚动条
* @name uiCore#hasScroll
* @function
* @returns {string} '':没有 'x':横向 'y':纵向 'x,y':横向+纵向
*/
$.fn.hasScroll = function () {
var scroll = '';
var scroll_x = false;
var scroll_y = false;
var elem = this[0];
if (elem.scrollHeight != this.height()) {
scroll_x = true;
}
if (elem.scrollWidth != this.width()) {
scroll_y = true;
}
if (scroll_x && scroll_y) {
scroll = 'x,y';
} else {
if (!scroll_x && !scroll_y) {
scroll = '';
} else {
if (scroll_x) {
scroll = 'x';
}
if (scroll_y) {
scroll = 'y';
}
}
}
return scroll;
};
/**
* @summary 设置自适应属性, 返回父容器的width,height
* @name uiCore#autoFit
* @lends ui.core
* @param fit 是否自适应
* @param fitParent 是否适应parent,true:填充parent,false:自适应parent剩余空间
* @param [vertical=true] 当fitParent为false时,true:垂直填充剩余空间,false:水平填充剩余空间
* @param [filter=':visible'] 当fitParent为false时,表示当前元素兄弟的筛选器,当前元素的尺寸将设置为父容器减去兄弟元素的尺寸
* @returns {{width: *, height: *}}
* @private
*/
$.fn.autoFit = function (fit, fitParent, vertical, filter) {
var elem = this[0];
var parent = (elem.tagName == 'BODY' ? this : this.parent());
var fcount = parent[0].fcount === undefined ? 0 : parent[0].fcount;
fit = fit === undefined ? true : fit;
if (fit) {
var pWidth = 0;
var pHeight = 0;
if (!elem.fitted) {
elem.fitted = true;
elem.fitParent = fitParent;
parent[0].fcount = fcount + 1;
if (parent[0].overflow == undefined) {
parent[0].overflow = parent.css('overflow');
}
parent[0].style.overflow = 'hidden';
if (parent[0].tagName == 'BODY') {
$('html').addClass('autoFit');
}
}
pWidth = parent.width();
pHeight = parent.height();
if (!fitParent) {
var excepts = [' ui_mask ', ' ui_loading ', ' ui_dialog ', ' ui_messagebox ', ' ui_messagetip ', ' ui_tip ', ' icon_draghandler '];
vertical = vertical === undefined ? true : vertical;
filter = filter === undefined ? ':visible':filter;
this.siblings(filter).each(function () {
var el = $(this);
var cls = (' ' + this.className + ' ').replace(/[\t\r\n\f]/g, ' ');
var flag = true;
for (var i = excepts.length - 1; i >= 0; i--) {
if (cls.indexOf(excepts[i]) >= 0) {
flag = false;
break;
}
}
if (flag && this.tagName != 'SCRIPT') {
if (vertical) {
pHeight -= el.outerHeight(true);
} else {
pWidth -= el.outerWidth(true);
}
}
});
}
else {
this.css({top: 0, left: 0});
}
this.outerWidth(pWidth, true);
this.outerHeight(pHeight, true);
} else {
if (elem.fitted) {
elem.fitted = false;
parent[0].fcount = fcount - 1;
if (parent[0].fcount == 0) {
parent[0].style.overflow = parent[0].overflow;
if (parent[0].tagName == 'BODY') {
$('html').removeClass('autoFit');
}
}
}
}
return {
width: parent.width(),
height: parent.height()
}
};
/**
* @summary 将宽、高等属性百分比转换为px
* @name uiCore#parseWH
* @lends ui.core
* @param property 属性名
* @param value 属性值
* @param parent Jquery类型的父容器对象
* @param delta 边距*2
* @returns 像素值
* @private
*/
$.parseWH = function (property, value, parent, delta) {
delta = delta || 0;
var v = $.trim(String(value || ''));
var endchar = v.substr(v.length - 1, 1);
if (endchar == '%') {
v = parseInt(v.substr(0, v.length - 1));
if (property.toLowerCase().indexOf('width') >= 0) {
v = Math.floor((parent.width() - delta) * v / 100.0);
} else {
v = Math.floor((parent.height() - delta) * v / 100.0);
}
} else {
v = parseInt(v) || undefined;
}
return v;
};
/**
* @summary 通过父元素+子元素后缀获取元素对象
* @name uiCore#getByParentID
* @methodOf 基础
* @constructor
* @param parentID 父节点ID
* @param afterName 子元素后缀
* @returns {*|HTMLElement} 子元素对象
*/
$.getByParentID = function (parentID, afterName, parent) {
if (parent != null && parent != undefined) {
return $('#' + $.getIDByParentID(parentID,afterName), parent);
} else {
return $('#' + $.getIDByParentID(parentID,afterName));
}
};
/**
* @summary 通过父元素ID生成子元素ID,如果存在ID则不生成
* @name uiCore#getIDByParentID
* @param parentID 父节点ID
* @param afterName 子元素后缀
* @returns {string} 生成的ID
*/
$.getIDByParentID = function (parentID, afterName) {
return parentID + '-' + afterName;
};
/**
* @summary 在URL中添加随机参数,防止缓存
* @name uiCore#urlAddRandom
* @param url
* @function
* @returns {string}
*/
$.urlAddRandom = function (url) {
var rand = guidGenerator();
var tempUrl = "";
if (url.indexOf("?") > -1) {
var indexRef = url.indexOf('&ref');
if (indexRef > -1) {
if (url.indexOf("?", indexRef) > -1) {
tempUrl = url + "*rand=" + rand;
}
else {
tempUrl = url + "?rand=" + rand;
}
}
else {
tempUrl = url + "&rand=" + rand;
}
}
else {
tempUrl = url + "?rand=" + rand;
}
return tempUrl;
};
var _styleSheet = null;
/**
* @summary 在当前文档中获取或添加全局样式
* @name uiCore#globalCSS
* @param selector 样式选择器
* @param [rules] 要添加的规则
* @param [index] 插入的索引
* @function
* @returns {CSSRule} 返回样式或null
*/
$.globalCSS = function (selector, rules, index) {
var isGet = !rules;
index = index || 0;
if (!_styleSheet) {
_styleSheet = document.createElement('style');
_styleSheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(_styleSheet);
for (var j = 0, ss = document.styleSheets, l = ss.length; j < l; j++) {
if (!ss[j].href) {
_styleSheet = ss[j];
break;
}
}
}
if (_styleSheet.addRule) {//IE
var ieRules = _styleSheet.rules;
for (var i = 0; i < ieRules.length; i++) {
if (ieRules[i].selectorText == selector) {
if (isGet) {
return _styleSheet.rules[i];
}
_styleSheet.removeRule(selector);
}
}
if (!isGet) {
_styleSheet.addRule(selector, rules, index);
return _styleSheet.rules[index];
}
}
else if (_styleSheet.insertRule) {//firefox
var ffRules = _styleSheet.cssRules;
for (var k = 0; k < ffRules.length; k++) {
if (ffRules[k].selectorText == selector) {
if (isGet) {
return _styleSheet.cssRules[k];
}
_styleSheet.deleteRule(k);
}
}
if (!isGet) {
_styleSheet.insertRule(selector + '{' + rules + '}', index);
return _styleSheet.cssRules[index];
}
}
return null;
};
/**
* @summary 删除前、后的空子结点
* @name uiCore#trimNode
* @param [String='SE'] mode 可选值:S(删除前面的空子结点)、E(删除前面的空子结点)
* @param [Boolean=false] deep 是否循环处理子结点
* @returns {jQuery}
*/
$.fn.trimNode = function (mode, deep) {
var start, end;
mode = (mode || 'SE').toUpperCase();
deep = deep || false;
start = mode.indexOf('S') !== -1;
end = mode.indexOf('E') !== -1;
return this.each(function () {
var i, n, list = [];
$(this).children().each(function () {
var me = this;
var flag = true;
var node = me.firstChild;
// 判断是否有非空结点,有非空结点时flag=false
while (flag && node && node !== me) {
var t = node;
if (t.nodeType === 3 && !$.regexs.rx_space.test(t.data)) {
flag = false;
}
else if (t.nodeType === 1) {
node = t.firstChild;
if (!node) {
node = t.nextSibling;
}
else if (deep) {
$(node).trimNode(mode, deep);
}
}
else {
node = t.nextSibling;
}
while (flag && !node) {
node = t.parentNode;
if (node !== me) {
t = node;
node = node.nextSibling;
}
}
}
if (flag) {
list[list.length] = me;
}
});
// 删除文档开头的空结点
if (start) {
for (i = 0; i < list.length; i++) {
n = list[i];
if (!n.previousSibling && n.nextSibling) {
n.parentNode.removeChild(n);
list.splice(i--, 1);
}
else {
break;
}
}
}
if (end) {
// 删除文档末尾的空结点
for (i = list.length - 1; i >= 0; i--) {
n = list[i];
if (!n.nextSibling && n.previousSibling) {
n.parentNode.removeChild(n);
list.splice(i, 1);
}
else {
break;
}
}
}
});
};
$.clearSelection = !window.getSelection ? function () {
document.selection.empty();
} : function () {
window.getSelection().removeAllRanges();
};
})(jQuery);
/**
* @summary 模板
*/
(function ($) {
$.uiTemplate = {
iconStyle_Pre: 'icon_'
/**
* 遮罩模板
*/
,
mask: '
'
/**
* 加载模板
*/
,
loading: ' 正在加载……
'
/**
* 日期组件模板
*/
,
datepicker: {
iconHtml: '',
icon: 'icon',
pickerHtml: '',
pickerSpan: 'span'
}
,
dateRange: {
drHtml: '
'
}
,
tooltip: {
html: '',
region: {right: 'right', top: 'top', left: 'left', bottom: 'bottom'},
tip: 'tip', tipAouter: 'tipAouter', arrow: 'arrow', content: 'tipContent'
}
/**
* 面板组件模板
*/
,
panel: {
html:
' ' +
' ' +
' ',
header: 'header',
icon: 'icon',
title: 'title',
toolbar: 'toolbar',
content: 'content',
buttonbar: 'buttonbar',
btnClose: 'close',
btnMax: 'max',
btnMax_Icon: 'maxIcon',
resizeHand: 'resizeHand',
btnColl: 'coll',
btnColl_Icon: 'collIcon'
}
,
pagination: ''
/**
* 标签组件模板
*/
,
tabs: {
html: '',
tabHtml: '' +
'' +
' ' +
' ' +
'' +
'' +
'',
header: 'header',
headerLeft: 'headerLeft',
headerRight: 'headerRight',
headerCenter: 'headerCenter',
headerTabs: 'headerTabs',
panels: 'panels',
tab_li: 'li',
tab_link: 'link',
tab_linkIcon: 'linkIcon',
tab_linkTitle: 'linkTitle',
tab_close: 'tabClose',
tabContextMenu: 'contextMenu'
}
/**
* 表单组件模板
*/
,
uiForm: {
iframe: 'formIframe'
}
/**
* 下拉菜单组件模板
*/
,
uiCombo: {
html: '' +
'' +
'' +
'' +
'',
panelHtml: '',
comboValueHtml: '',
combo: 'combo', comboText: 'text', comboArrow: 'arrow', comboValue: 'value', comboPanel: 'panel'
}
,
uiValidate: {
lenDiv: 'lenDiv'
}
,
uiSearchbox: {
html: '' +
'',
searchSapn: 'span',
searchText: 'text',
searchBtn: 'btn'
}
,
uiGrid: {
colresizer: 'colresizer'
}
,
uiNTOK: {
NTOK_ID: 'ntko'
}
,
uiUEditor: {
editorID: 'editor',
contentID: 'conent',
contentHtml: '',
editorHtml: ''
}
,
uiCheckbox: {
cbHtml: '',
wrapperHtml: '',
wrapperID: 'wrapper', cbID: 'cb'
}
}
})(jQuery);
/**
* Created by jinxs on 2015.08.28.
*/
(function($){
//全屏模块
var fullScreen = {
supports: false, eventName: "", prefix: "", prefixes: "webkit moz o ms khtml".split(" "),
isFullScreen: function () {
}, requestFullScreen: function () {
}, cancelFullScreen: function () {
}
};
if (typeof document.cancelFullScreen != "undefined") {
fullScreen.supports = true;
} else {
for (var i = 0; i < fullScreen.prefixes.length; i++) {
fullScreen.prefix = fullScreen.prefixes[i];
if (typeof document[fullScreen.prefix + "CancelFullScreen"] != "undefined") {
fullScreen.supports = true;
break;
}
}
}
if (fullScreen.supports) {
fullScreen.eventName = fullScreen.prefix + "fullscreenchange";
fullScreen.isFullScreen = function () {
switch (this.prefix) {
case "":
return document.fullScreen;
case "webkit":
return document.webkitIsFullScreen;
default:
return document[this.prefix + "FullScreen"];
}
};
fullScreen.requestFullScreen = function (elem) {
return (this.prefix === "") ? elem.requestFullScreen() : elem[this.prefix + "RequestFullScreen"]();
};
fullScreen.cancelFullScreen = function (elem) {
return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + "CancelFullScreen"]();
};
}
$.uiFullScreen = {
supportsFullScreen: fullScreen.supports
, fullScreenEventName: fullScreen.eventName
, fullScreen: fullScreen
, isFullScreen: function () {
return fullScreen.isFullScreen();
}
, requestFullScreen: function (selector) {
if (selector == null || selector == undefined) {
selector = document.documentElement;
}
selector = $(selector);
return selector.each(function () {
if (fullScreen.supports) {
fullScreen.requestFullScreen(this);
}
});
}
, cancelFullScreen: function (selector) {
if (selector == null || selector == undefined) {
selector = document.documentElement;
}
selector = $(selector);
return selector.each(function () {
if (fullScreen.supports) {
fullScreen.cancelFullScreen(this);
}
});
}
, toggleFullScreen: function (selector) {
if (selector == null || selector == undefined) {
selector = document.documentElement;
}
selector = $(selector);
return selector.each(function () {
if (fullScreen.supports) {
if ($.util.isFullScreen()) {
fullScreen.cancelFullScreen(this);
} else {
fullScreen.requestFullScreen(this);
}
}
});
}
};
})(jQuery);
/**
* Created by jinxs on 14-7-8.
* 依赖
* ui.core.js
*/
(function ($) {
var _cacheName = 'uiMask';
/**
* @class 遮罩组件
* @constructor uiMask
* @type {{alert: Function, confirm: Function, prompt: Function}}
*/
$.uiMask = {
/**
* @summary 添加遮罩
* @name uiMask#add
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
add: function (options) {
options = options || {};
options = $.extend({}, $.uiMask.defaults, options);
return _add(options);
},
/**
* @summary 显示遮罩
* @name uiMask#show
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
show: function (options) {
options = options || {};
options = $.extend({}, $.uiMask.defaults, options);
return _show(options);
},
/**
* @summary 隐藏遮罩
* @name uiMask#hide
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
hide: function (options) {
options = options || {};
options = $.extend({}, $.uiMask.defaults, options);
var container = options.container;
var contID = container.getElemID();
var mask = $.getByParentID(contID, options.maskID);
if (mask.length > 0) {
var maskCache = mask.data(_cacheName);
mask.hide();
container.css({position: maskCache.parentPos, overflow: maskCache.parentOverflow});
}
container.zIndexHack(true, options.excludeSelector);
return mask;
},
/**
* @summary 移除遮罩
* @name uiMask#remove
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
remove: function (options) {
var mask = $.uiMask.hide(options);
mask.remove();
return mask;
}
};
/**
* 默认配置
* @lends uiMask.prototype
*/
$.uiMask.defaults = {
/**
* @type Object
* @default body
* @summary 组件父容器
*/
container: $('body')
/**
* 在uiMask显示/隐藏时会对指定container下的OBJECT、IFRAME对象进行隐藏/显示
* 有时需要排除对某些组件的这种控制
* @type String
* @default null
* @summary 在container中要排除的对象选择器
*/
, excludeSelector: null
, maskID: 'mask'
, zIndex: 888
}
var _add = function (options) {
var container = options.container;
container.setElemID();
var elem = container[0];
var contID = container.getElemID();
var mask = $.getByParentID(contID, options.maskID);
if (mask.length > 0) {
} else {
mask = $($.uiTemplate.mask)
.appendTo(container).attr("id", $.getIDByParentID(contID, options.maskID));
$(window).bind('resize', function () {
if (mask.is(':visible')) {
mask.width(elem.scrollWidth).height(elem.scrollHeight);
}
});
}
return mask;
};
var _show = function (options) {
var mask = _add(options);
var container = options.container;
var cache = {};
cache.parentPos = container.css('position');
cache.parentOverflow = container.css('overflow');
container.zIndexHack(false, options.excludeSelector);
mask.data(_cacheName, cache);
container.css({position: 'absolute', overflow: 'hidden'});
mask.css({zIndex: options.zIndex, width: container[0].scrollWidth, height: container[0].scrollHeight});
mask.show();
return mask;
}
})(jQuery);
/**
* Created by jinxs on 14-7-8.
* 依赖
* ui.core.js
* ui.mask.js
* ui.position.js
*/
(function ($) {
/**
* @class Loading组件
* @constructor uiLoading
* @type {{alert: Function, confirm: Function, prompt: Function}}
*/
$.uiLoading = {
/**
* @summary 添加loading
* @name uiLoading#add
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
add: function (options) {
options = options || {};
options = $.extend({}, $.uiLoading.defaults, options);
return _add(options);
},
/**
* @summary 显示loading
* @name uiLoading#show
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
show: function (options) {
options = options || {};
options = $.extend({}, $.uiLoading.defaults, options);
var loading = _show(options);
return loading;
},
/**
* @summary 隐藏loading
* @name uiLoading#hide
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
hide: function (options) {
options = options || {};
options = $.extend({}, $.uiLoading.defaults, options);
var container = options.container;
var contID=container.getElemID();
var loading = $.getByParentID(contID,options.loadingID);
if (loading.length > 0) {
loading.hide();
if (container[0].uiposition != undefined) {
container.css('position', container[0].uiposition);
}
}
container.zIndexHack(true, options.excludeSelector);
return loading;
},
/**
* @summary 移除loading
* @name uiLoading#remove
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
remove: function (options) {
var loading= $.uiLoading.hide(options);
loading.remove();
loading = null;
}
};
/**
* 默认配置
* @lends uiLoading.prototype
*/
$.uiLoading.defaults = {
/**
* @type Object
* @default body
* @summary 组件父容器
*/
container: $('body')
/**
* 在uiLoading显示/隐藏时会对指定container下的OBJECT、IFRAME对象进行隐藏/显示
* 有时需要排除对某些组件的这种控制
* @type String
* @default null
* @summary 在container中要排除的对象选择器
*/
,excludeSelector:null
/**
* 延时显示,对于加载时间较短的可以阻止遮罩显示
* @type Number
* @default 200
* @summary 延时显示,对于加载时间较短的可以阻止遮罩显示
*/
,delay:200
/**
* @type String
* @default "loading"
* @summary 后缀标识ID
*/
,loadingID:'loading'
/**
* @type Number
* @default 120
* @summary 组件宽度
*/
,width: 120
/**
* @type Number
* @default 30
* @summary 组件高度
*/
,height: 30
/**
* @type String
* @default ""
* @summary 文本内容
*/
,text: ''
/**
* @type String
* @default ""
* @summary 显示层级
*/
,zIndex:888
}
var _add = function (options) {
var container = options.container;
container.setElemID();
var contID=container.getElemID();
var loading = $.getByParentID(contID,options.loadingID);
if (loading.length > 0) {
} else {
loading = $('')
.appendTo(options.container).attr("id",$.getIDByParentID(contID,options.loadingID))
.hide();
if (container[0].tagName == 'BODY') {
loading.css({ top: 0, left: 0 });
}
var mask = $.uiMask.add({
container: loading
,zIndex:options.zIndex
});
var content = $($.uiTemplate.loading).appendTo(loading)
.css({ width: options.width, height: options.height, zIndex: parseInt(mask.css('zIndex')) + 1 })
if (options.text != '') {
content.find('span.ui_loading_text').html(options.text);
}
$(window).bind('resize', function () {
if (mask.is(':visible')) {
var content = loading.find('.ui_loading_content');
content.uiPosition({ horizontal: 'center', vertical: 'center', container: loading });
}
});
}
loading.hide();
return loading;
};
var _show = function (options) {
var container = options.container;
var loading = _add(options);
if (container.css('position') != 'relative' && container.css('position') != 'absolute') {
container[0].uiposition = container.css('position');
container.css('position', 'absolute');
}
loading.css({ width: container.width()<=10?'100%':container.width(), height: container.height()<=10?'100%':container.height() });
var content = loading.find('.ui_loading_content');
content.css({ width: options.width, height: options.height })
if (options.text != '') {
content.find('span.ui_loading_text').html(options.text);
}
setTimeout(function(){
content.uiPosition({ horizontal: 'center', vertical: 'center', container: loading });
content=null;
},0);
loading.children('.ui_mask').show();
loading.show();
container.zIndexHack(false, options.excludeSelector);
}
})(jQuery);
/**
* Created by jinxs on 14-6-26.
* * 修改自easyUI
*/
(function ($) {
var _cacheName = 'droppable';
/**
* @class 拖放组件
* @constructor droppable
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的方法的参数
* @example
* // 构件组件
* $('#div').droppable({
* axis:'h',
* onStopDrag: function(e){
* alert(this[0]==e.data.target[0]);
* }
* });
* // 调用组件方法options
* $('#div').droppable("options");
*/
$.fn.droppable = function (options, param) {
if (this.length > 0 && typeof options == 'string') {
return $.fn.droppable.methods[options](this.fire(), param);
}
return this.each(function () {
var me = $(this);
var state = me.data( _cacheName);
options = options || {};
if (state) {
$.extend(state.options, options);
} else {
_init(me);
me.data(_cacheName, {
options: $.extend({}, $.fn.droppable.defaults, me.parseUIConfig(), options)
});
}
});
};
/**
* 方法
* @lends droppable.prototype
*/
$.fn.droppable.methods = {
/**
* @summary 获得组件的配置对象
* @name droppable#options
* @function
* @returns {Object} 组件的配置对象
*/
options: function (jq) {
return $.data(jq[0], _cacheName).options;
},
/**
* @summary 启用拖放
* @name droppable#enable
* @function
* @returns {jQuery} 方法调用者
* @example
* $('#div').droppable("enable")
* 或
* $('#div').droppable({disabled: false})
*/
enable: function (jq) {
return jq.each(function () {
$(this).droppable({ disabled: false });
});
},
/**
* @summary 禁用拖放
* @name droppable#disable
* @function
* @returns {jQuery} 方法调用者
*/
disable: function (jq) {
return jq.each(function () {
$(this).droppable({ disabled: true });
});
}
};
/**
* 默认配置
* @lends droppable.prototype
*/
$.fn.droppable.defaults = {
/**
*TODO:what is the options name
*/
accept: null,
/**
* @type Boolean
* @default false
* @summary 是否禁用
*/
disabled: false,
/**
* @summary 在对象拖进时触发的方法。
* @event
* @name droppable#onDragEnter
* @param e {Object} 事件对象
* @param source {Object} 数据源
* @default emptyFn
*/
onDragEnter: function (e, source) {
},
/**
* @summary 在对象拖放时触发的方法。
* @event
* @name droppable#onDragOver
* @param e {Object} 事件对象
* @param source {Object} 数据源
* @default emptyFn
*/
onDragOver: function (e, source) {
},
/**
* @summary 在对象拖出时中触发的方法。
* @event
* @name droppable#onDragLeave
* @param e {Object} 事件对象
* @param source {Object} 数据源
* @default emptyFn
*/
onDragLeave: function (e, source) {
},
/**
* @summary 在对象拖放过程中触发的方法。
* @event
* @name droppable#onDrag
* @param e {Object} 事件对象
* @param source {Object} 数据源
* @default emptyFn
*/
onDrop: function (e, source) {
}
};
var _init = function (target) {
var options = target.data(_cacheName);
target.addClass('droppable').bind('_dragenter', function (e, source) {
options.onDragEnter.apply(this, [e, source]);
}).bind('_dragleave', function (e, source) {
options.onDragLeave.apply(this, [e, source]);
}).bind('_dragover', function (e, source) {
options.onDragOver.apply(this, [e, source]);
}).bind('_drop', function (e, source) {
options.onDrop.apply(this, [e, source]);
});
}
})(jQuery);
/**
* Created by jinxs on 14-6-26.
* 修改自easyUI
*/
(function ($) {
var _cacheName = 'draggable';
/**
* @class 拖拽组件
* @constructor draggable
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的方法的参数
* @example
* // 构件组件
* $('#div').draggable({
* axis:'h',
* onStopDrag: function(e){
* alert(this[0]==e.data.target[0]);
* }
* });
* // 调用组件方法options
* $('#div').draggable("options");
*/
$.fn.draggable = function (options, param) {
if (typeof options == 'string') {
return $.fn.draggable.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
var opts;
options = options || {};
if (cache) {
cache.handle.unbind('.draggable');
opts = $.extend(cache.options, options);
} else {
opts = $.extend({}, $.fn.draggable.defaults,me.parseUIConfig(), options);
}
var handle = opts.handle ? (typeof opts.handle == 'string' ? $(opts.handle, me) : opts.handle) : me;
me.data(_cacheName, {
options: opts,
handle: handle
});
if (opts.disabled) {
me.css('cursor', '');
return;
}
handle.unbind('.draggable')
.bind('mouseover.draggable', {target: me}, function (e) {
if ($.fn.draggable.isDragging){return}
$('body').css('cursor', opts.cursor);
})
.bind('mouseleave.draggable', {target: me}, function (e) {
$('body').css('cursor', '');
})
.bind('mousemove.draggable', {target: me}, function (e) {
$.fn.draggable.mousemove = true;
})
.bind('mousedown.draggable', {target: me}, function (e) {
var target = e.data.target;
var parent = target.parent();
var scrollLeft = parent.scrollLeft();
var scrollTop = parent.scrollTop();
var position = target.position();
var offset = target.offset();
var doc=$(document);
var data = {
startPosition: target.css('position'),
startLeft: position.left + scrollLeft,
startTop: position.top + scrollTop,
left: position.left,
top: position.top,
startX: e.pageX,
startY: e.pageY,
offsetWidth: (e.pageX - offset.left),
offsetHeight: (e.pageY - offset.top),
target: target,
parent: parent[0]
};
$.fn.draggable.mousedown = true;
$.extend(e.data, data);
var opts = target.data(_cacheName).options;
if (opts.onBeforeDrag.call(target, e) == false) return;
doc.bind('mousedown.draggable', e.data, _doDown);
doc.bind('mousemove.draggable', e.data, _doMove);
doc.bind('mouseup.draggable', e.data, _doUp);
$.fn.draggable.timer = setTimeout(function(){
$.fn.draggable.isDragging = true;
_doDown(e);
}, opts.delay);
return false;
});
});
};
$.fn.draggable.isDragging = false;
/**
* 方法
* @lends draggable.prototype
*/
$.fn.draggable.methods = {
/**
* @summary 获得组件的配置对象
* @name draggable#options
* @function
* @returns {Object} 组件的配置对象
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* @summary 获得拖拽对象的代理
* @name draggable#proxy
* @function
* @returns {jQuery} 拖拽对象的代理
*/
proxy: function (target) {
return $.data(target[0], _cacheName).proxy;
},
/**
* @summary 启用拖拽
* @name draggable#enable
* @function
* @returns {jQuery} 方法调用者
* @example
* $('#div').draggable("enable")
* 或
* $('#div').draggable({disabled: false})
*/
enable: function (target) {
return target.draggable({disabled: false});
},
/**
* @summary 禁用拖拽
* @name draggable#disable
* @function
* @returns {jQuery} 方法调用者
*/
disable: function (target) {
return target.draggable({disabled: true});
}
};
/**
* 默认配置
* @lends draggable.prototype
*/
$.fn.draggable.defaults = {
/**
* @type String|Function
* @default null
* @summary 拖拽的代理对象
* @example
* // 以#div下的#head为代理对象
* $("#div").draggable({
* proxy:"#head"
* });
* // 等同于
* $("#div").draggable({
* proxy: function(){
* return this.find("#head");
* }
* });
*/
proxy: null,
/**
* 拖动时鼠标样式
* @type String
* @default "move"
*/
cursor:'move',
delay:100,
/**
* @type Boolean
* @default false
* @summary 指示拖拽后是否回到初始位置
*/
revert: false,
/**
* @type Number
* @default null
* @summary 拖拽的X方向步长
*/
deltaX: null,
/**
* @type Number
* @default null
* @summary 拖拽的Y方向步长
*/
deltaY: null,
/**
* @type String|jQuery
* @default null
* @summary 拖拽的对象
*/
handle: null,
/**
* @type Boolean
* @default false
* @summary 是否禁用
*/
disabled: false,
edge: 0,
/**
* 值可以为v, h, vh
* @type String
* @default "vh"
* @summary 可拖拽的方向
*/
axis: 'vh',
/**
* 可通过返回false取消拖拽动作
* @summary 在对象开始拖拽前触发的方法。
* @event
* @name draggable#onBeforeDrag
* @param e {Object} 事件对象
* @this jQuery对象
* @default emptyFn
*/
onBeforeDrag: function (e) {
},
/**
* @summary 在对象开始拖拽时触发的方法。
* @event
* @name draggable#onStartDrag
* @param e {Object} 事件对象
* @this jQuery对象
* @default emptyFn
*/
onStartDrag: function (e) {
},
/**
* @summary 在对象拖拽过程中触发的方法。
* @event
* @name draggable#onDrag
* @param e {Object} 事件对象
* @this jQuery对象
* @default emptyFn
*/
onDrag: function (e) {
},
/**
* @summary 在对象拖拽结束时触发的方法。
* @event
* @name draggable#onStopDrag
* @param e {Object} 事件对象
* @this jQuery对象
* @default emptyFn
*/
onStopDrag: function (e) {
}
};
var _doDown = function (e) {
if (!$.fn.draggable.isDragging){return false;}
var target = e.data.target;
var state = target.data(_cacheName);
var opts = state.options;
state.droppables = $('.droppable').filter(function () {
return target != this;
}).filter(function () {
var accept = $.data(this[0], "draggable").options.accept;
if (accept) {
return $(accept).filter(function () {
return this == target;
}).length > 0;
} else {
return true;
}
});
var proxy = state.proxy;
if (!proxy) {
if (opts.proxy) {
if (opts.proxy == 'clone') {
proxy = $(target).clone().insertAfter(target);
} else {
proxy = opts.proxy.call(target,target);
}
state.proxy = proxy;
} else {
proxy = $(target);
}
}
proxy.css('position', 'absolute');
_drag(e);
_applyDrag(e);
opts.onStartDrag.call(target, e);
return false;
}
var _doMove = function (e) {
if (!$.fn.draggable.isDragging){return false;}
var state = $.data(e.data.target[0], _cacheName);
_drag(e);
if (state.options.onDrag.call(e.data.target, e) != false) {
_applyDrag(e);
}
var source = e.data.target;
state.droppables.each(function () {
var dropObj = $(this);
if (dropObj.droppable('options').disabled) {
return;
}
var p2 = dropObj.offset();
if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth()
&& e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()) {
if (!this.entered) {
$(this).trigger('_dragenter', [source]);
this.entered = true;
}
$(this).trigger('_dragover', [source]);
} else {
if (this.entered) {
$(this).trigger('_dragleave', [source]);
this.entered = false;
}
}
});
return false;
}
var _doUp = function (e) {
if (!$.fn.draggable.isDragging){
_clearDragging();
return false;
}
_doMove(e);
var target = e.data.target;
var state = target.data(_cacheName);
var proxy = state.proxy;
var opts = state.options;
if (opts.revert) {
if (_checkDrop(e) == true) {
target.css({
position: e.data.startPosition,
left: e.data.startLeft,
top: e.data.startTop
});
} else {
if (proxy) {
var left, top;
if (proxy.parent()[0] == document.body) {
left = e.data.startX - e.data.offsetWidth;
top = e.data.startY - e.data.offsetHeight;
} else {
left = e.data.startLeft;
top = e.data.startTop;
}
proxy.animate({
left: left,
top: top
}, function () {
_removeProxy(state,proxy);
});
} else {
target.animate({
left: e.data.startLeft,
top: e.data.startTop
}, function () {
target.css('position', e.data.startPosition);
});
}
}
} else {
var parent=target.parent();
var pos={left:0,top:0};
var doc = $(document);
if(e.data.startPosition=='fixed') {
if (parent.is('body')) {
pos.left = doc.scrollLeft();
pos.top = doc.scrollTop();
} else {
pos.left = doc.scrollLeft() - parent.scrollLeft();
pos.top = doc.scrollTop() - parent.scrollTop();
}
}else{
if(!parent.is('body')) {
pos.left = doc.scrollLeft() - parent.scrollLeft();
pos.top = doc.scrollTop() - parent.scrollTop();
}
}
target.css({
position: e.data.startPosition,
left: e.data.left-pos.left,
top: e.data.top-pos.top
});
_checkDrop(e);
}
opts.onStopDrag.call(target, e);
_clearDragging();
return false;
}
var _clearDragging=function(){
if ($.fn.draggable.timer){
clearTimeout($.fn.draggable.timer);
$.fn.draggable.timer = undefined;
}
$(document).unbind('.draggable');
$.fn.draggable.isDragging = false;
setTimeout(function(){
$('body').css('cursor','');
},100);
}
var _drag = function (e) {
var state = $.data(e.data.target[0], _cacheName);
var opts = state.options;
var proxy = state.proxy;
var dragData = e.data;
var left = dragData.startLeft + e.pageX - dragData.startX;
var top = dragData.startTop + e.pageY - dragData.startY;
if (proxy) {
if (proxy.parent()[0] == document.body) {
if (opts.deltaX != null && opts.deltaX != undefined) {
left = e.pageX + opts.deltaX;
} else {
left = e.pageX - e.data.offsetWidth;
}
if (opts.deltaY != null && opts.deltaY != undefined) {
top = e.pageY + opts.deltaY;
} else {
top = e.pageY - e.data.offsetHeight;
}
} else {
if (opts.deltaX != null && opts.deltaX != undefined) {
left += e.data.offsetWidth + opts.deltaX;
}
if (opts.deltaY != null && opts.deltaY != undefined) {
top += e.data.offsetHeight + opts.deltaY;
}
}
}
if (opts.axis.indexOf('h') != -1) {
dragData.left = left;
}
if (opts.axis.indexOf('v') != -1) {
dragData.top = top;
}
}
var _applyDrag = function (e) {
var state = $.data(e.data.target[0], _cacheName);
var opts = state.options;
var css = {};
var proxy = state.proxy;
if (!proxy) {
proxy = $(e.data.target);
}
if(opts.axis.indexOf('h') != -1){
css.left = e.data.left;
}
if(opts.axis.indexOf('v') != -1){
css.top = e.data.top;
}
proxy.css(css);
$('body').css('cursor',opts.cursor);
}
var _checkDrop = function (e) {
var state = $.data(e.data.target[0], _cacheName);
var opts = state.options;
var proxy = state.proxy;
var dropped = false;
try {
state.droppables.each(function () {
var dropObj = $(this);
if (dropObj.droppable('options').disabled) {
return;
}
var p2 = dropObj.offset();
if (e.pageX > p2.left && e.pageX < p2.left + dropObj.outerWidth()
&& e.pageY > p2.top && e.pageY < p2.top + dropObj.outerHeight()) {
if (opts.revert) {
$(e.data.target).css({
position: e.data.startPosition,
left: e.data.startLeft,
top: e.data.startTop
});
}
$(this).trigger('_drop', [e.data.target]);
_removeProxy(state,proxy);
dropped = true;
this.entered = false;
return false;
}
});
} catch(e) {
}
if (!dropped && !opts.revert) {
_removeProxy(state,proxy);
}
return dropped;
}
var _removeProxy=function(state,proxy){
if (proxy){
proxy.remove();
}
state.proxy = null;
}
})(jQuery);
/**
* Created by jinxs on 14-6-25.
* 基于easyui.resizable
*/
(function ($) {
var _cacheName = 'resizable';
/**
* @class 调整大小组件
* @constructor resizable
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
*/
$.fn.resizable = function (options, param) {
if (typeof options == 'string') {
return $.fn.resizable.methods[options](this, param);
}
return this.each(function () {
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
me.unbind('.resizable');
$.extend(cache.options, options);
} else {
options = $.extend({}, $.fn.resizable.defaults, me.parseUIConfig(), options);
me.data(_cacheName, {options: options});
}
if (options.disabled == true) {
return;
}
me.bind('mousemove.resizable', {target: me}, function (e) {
if ($.fn.resizable.isResizing) {
return;
}
_setCursor(e, _getDirection(e));
}).bind('mouseleave.resizable', {target: me}, function (e) {
_setCursor(e, '');
})
.bind('mousedown.resizable', {target: me}, function (e) {
var dir = _getDirection(e);
_setCursor(e, dir);
if (dir == '') return;
var targ = $(e.data.target);
var data = {
target: targ,
parent: targ.parent()[0],
dir: dir,
startLeft: _getCssValue(e, 'left'),
startTop: _getCssValue(e, 'top'),
left: _getCssValue(e, 'left'),
top: _getCssValue(e, 'top'),
startX: e.pageX,
startY: e.pageY,
startWidth: targ.outerWidth(),
startHeight: targ.outerHeight(),
width: targ.outerWidth(),
height: targ.outerHeight(),
deltaWidth: targ.outerWidth() - targ.width(),
deltaHeight: targ.outerHeight() - targ.height()
};
$(document).bind('mousedown.resizable', data, _doDown);
$(document).bind('mousemove.resizable', data, _doMove);
$(document).bind('mouseup.resizable', data, _doUp);
$('body').css('cursor', dir + '-resize');
});
});
};
/**
* 方法
* @lends resizable.prototype
*/
$.fn.resizable.methods = {
/**
* @summary 获得组件的配置对象
* @name resizable#options
* @function
* @returns {Object} 组件的配置对象
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* 启用组件。
* @name resizable#enable
* @function
* @example
* $('#input').resizable("enable")
*/
enable: function (target) {
target.resizable({disabled: false});
return target;
},
/**
* 禁用组件。
* @name resizable#disable
* @function
* @example
* $('#input').resizable("disable")
*/
disable: function (target) {
target.resizable({disabled: true});
return target;
}
};
/**
* 默认配置
* @lends resizable.prototype
*/
$.fn.resizable.defaults = {
/**
* 是否禁用组件。
* @default false
* @type Boolean
* @example
* $('#input').disabled({disabled:false});
*/
disabled: false,
/**
* @type ""
* @default n, e, s, w, ne, se, sw, nw, all
* @summary 调整大小时可拖动的范围
*/
handles: 'n, e, s, w, ne, se, sw, nw, all',
/**
* @type Number
* @default 10
* @summary 组件的最小宽度
*/
minWidth: 10,
/**
* @type Number
* @default 10
* @summary 组件的最小高度度
*/
minHeight: 10,
/**
* @type Number
* @default 10000
* @summary 组件的最大宽度
*/
maxWidth: 10000, //$(document).width(),
/**
* @type Number
* @default 10000
* @summary 组件的最大高度
*/
maxHeight: 10000, //$(document).height(),
/**
* @type Number
* @default 5
* @summary handles的宽度
*/
edge: 5,
/**
* @summary 在开始调整大小时触发的方法
* @name resizable#onStartResize
* @event
* @default emptyFn
*/
onStartResize: function (e) {
},
/**
* @summary 在调整大小时触发的方法
* @name resizable#onResize
* @event
* @default emptyFn
*/
onResize: function (e) {
},
/**
* @summary 在结束调整大小时触发的方法
* @name resizable#onStopResize
* @event
* @default emptyFn
*/
onStopResize: function (e) {
}
};
$.fn.resizable.isResizing = false;
var _resize = function (e) {
var resizeData = e.data;
var options = $.data(resizeData.target[0], _cacheName).options;
if (resizeData.dir.indexOf('e') != -1) {
var width = resizeData.startWidth + e.pageX - resizeData.startX;
width = Math.min(
Math.max(width, options.minWidth),
options.maxWidth
);
resizeData.width = width;
}
if (resizeData.dir.indexOf('s') != -1) {
var height = resizeData.startHeight + e.pageY - resizeData.startY;
height = Math.min(
Math.max(height, options.minHeight),
options.maxHeight
);
resizeData.height = height;
}
if (resizeData.dir.indexOf('w') != -1) {
var width = resizeData.startWidth - e.pageX + resizeData.startX;
width = Math.min(
Math.max(width, options.minWidth),
options.maxWidth
);
resizeData.width = width;
resizeData.left = resizeData.startLeft + resizeData.startWidth - resizeData.width;
}
if (resizeData.dir.indexOf('n') != -1) {
var height = resizeData.startHeight - e.pageY + resizeData.startY;
height = Math.min(
Math.max(height, options.minHeight),
options.maxHeight
);
resizeData.height = height;
resizeData.top = resizeData.startTop + resizeData.startHeight - resizeData.height;
}
}
var _applySize = function (e) {
var resizeData = e.data;
var t = $(resizeData.target);
t.css({
left: resizeData.left,
top: resizeData.top
});
if (t.outerWidth() != resizeData.width) {
t.outerWidth(resizeData.width)
}
if (t.outerHeight() != resizeData.height) {
t.outerHeight(resizeData.height)
}
}
var _doDown = function (e) {
$.fn.resizable.isResizing = true;
$.data(e.data.target[0], _cacheName).options.onStartResize.call(e.data.target, e);
return false;
}
var _doMove = function (e) {
_resize(e);
if ($.data(e.data.target[0], _cacheName).options.onResize.call(e.data.target, e) != false) {
_applySize(e)
}
return false;
}
var _doUp = function (e) {
$.fn.resizable.isResizing = false;
_resize(e, true);
if ($.data(e.data.target[0], _cacheName).options.onStopResize.call(e.data.target, e) != false) {
_applySize(e);
}
$(document).unbind('.resizable');
$('body').css('cursor', '');
return false;
}
var _getDirection = function (e) {
var tt = $(e.data.target);
var opts = $.data(e.data.target[0], _cacheName).options;
var dir = '';
var offset = tt.offset();
var width = tt.outerWidth();
var height = tt.outerHeight();
var edge = opts.edge;
if (e.pageY > offset.top && e.pageY < offset.top + edge) {
dir += 'n';
} else if (e.pageY < offset.top + height && e.pageY > offset.top + height - edge) {
dir += 's';
}
if (e.pageX > offset.left && e.pageX < offset.left + edge) {
dir += 'w';
} else if (e.pageX < offset.left + width && e.pageX > offset.left + width - edge) {
dir += 'e';
}
var handles = opts.handles.split(',');
for (var i = 0; i < handles.length; i++) {
var handle = handles[i].replace(/(^\s*)|(\s*$)/g, '');
if (handle == 'all' || handle == dir) {
return dir;
}
}
return '';
}
var _getCssValue = function (e, css) {
var val = parseInt($(e.data.target).css(css));
if (isNaN(val)) {
return 0;
} else {
return val;
}
}
var _setCursor = function (e, dir) {
if (dir == '') {
$(e.data.target).css('cursor', '');
} else {
$(e.data.target).css('cursor', dir + '-resize');
}
}
})(jQuery);
/**
* Created by jinxs on 14-7-2.
* 依赖
* ui.core.js
*/
(function ($) {
/**
* @class 位置组件
* @requires {@link uiCore}
* @constructor uiPosition
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* $('position').uiPosition({horizontal:3});
*/
$.fn.uiPosition = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiPosition.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
_init(me, $.extend({}, $.fn.uiPosition.defaults, me.parseUIConfig(), options||{}));
});
};
/**
* 默认配置
* @lends uiPosition.prototype
*/
$.fn.uiPosition.defaults = {
/**
* @type Object
* @default body
* @summary 组件的父容器
*/
container: $('body'),
/**
* @type Boolean
* @default false
* @summary 是否位置固定
*/
fixed: false,
/**
* @type Number
* @default 0
* @summary 组件的垂直坐标
*/
top: 0,
/**
* @type Number
* @default 0
* @summary 组件的水平坐标
*/
left: 0,
/**
* 位置枚举:
*
*
* | 名称 |
* 说明 |
* | left | 水平靠左 |
* | center | 水平中间 |
* | right | 水平靠右 |
*
* @type String
* @default ""
* @summary 组件的水平位置
*/
horizontal: '',
/**
* 位置枚举:
*
*
* | 名称 |
* 说明 |
* | top | 垂直靠上 |
* | center | 垂直靠中 |
* | bottom | 垂直靠下 |
*
* @type String
* @default ""
* @summary 组件的垂直位置
*/
vertical: ''
};
//////--------------------------------内部方法------------------------------
/**
* 初始化
* @param target 目标对象
* @param options
*/
var _init = function (target, options) {
var container = options.container;
var isBody = $.nodeName(container[0], 'body');
var parentW, parentH, top, left;
if (container.css('position') === 'static') {
container.css('position', 'absolute');
}
target.offsetParent().each(function () {
if (this !== container[0]) {
container.append(target.detach());
}
});
if (isBody) {
parentW = $('body').width();
parentH = $('body').height();
} else {
parentW = container.outerWidth();
parentH = container.outerHeight();
}
if (options.horizontal != "") {
switch (options.horizontal) {
case 'left':
left = 0;
break;
case 'center':
left = (parentW - target.outerWidth()) / 2;
break;
case 'right':
left = parentW - target.outerWidth();
break;
}
} else {
left = options.left || 0;
}
if (options.vertical != "") {
switch (options.vertical) {
case 'top':
top = 0;
break;
case 'center':
top = (parentH - target.outerHeight()) / 2;
break;
case 'bottom':
top = parentH - target.outerHeight();
break;
}
} else {
top = options.top || 0;
}
var hasScroll = container.hasScroll();
if (!isBody && hasScroll.indexOf('x') > -1 && options.horizontal == 'right') {
left -= 20;
}
if (!isBody && hasScroll.indexOf('y') > -1 && options.vertical == 'bottom') {
top -= 20;
}
if (options.fixed) {
if (_IEunder6) {
var style = target[0].style;
style.position = 'absolute';
style.removeExpression('left');
style.removeExpression('top');
if (isBody) {
style.setExpression('left', 'eval(document.documentElement.scrollLeft + '
+ left + ') +"px"');
style.setExpression('top', 'eval(document.documentElement.scrollTop + '
+ top + ') +"px"');
} else {
style.setExpression('left', 'eval(this.parentNode.scrollLeft + '
+ left + ') +"px"');
style.setExpression('top', 'eval(this.parentNode.scrollTop + '
+ top + ') +"px"');
}
} else {
var pos = container.position();
top += pos.top;
left += pos.left;
target.css({position: 'fixed', left: left, top: top});
}
} else {
if (isBody) {
top += $(document).scrollTop();
left += $(document).scrollLeft();
} else {
top += container.scrollTop();
left += container.scrollLeft();
}
target.css({position: 'absolute', left: left, top: top});
}
return target;
};
})(jQuery);
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiButton';
/**
* @name uiButton
* @class 按钮
* @constructor
* @summary 构造函数
* @param {Object|String} options 如果为Object,则表示组件配置,如果为String,则调用组件方法
* @param {Object} param 当options为String时,可以传入方法参数
* @returns {jQuery} jQuery对象
* @example
* //采用默认值
* $('#btn').uiButton();
* //设置组件参数
* $('#btn').uiButton({id:'btn',label:'提交'});
* //调用组件方法
* $('#btn').uiButton('setLabel','保存');
*/
$.fn.uiButton = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiButton.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
var state = me.data(_cacheName);
options = options || {};
if (state) {
$.extend(state.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiButton.defaults, me.parseUIConfig(), options)
});
}
_init(me);
});
};
/**
* 方法
* @lends uiButton.prototype
*/
$.fn.uiButton.methods = {
/**
* @summary 获取组件配置参数
* @function
* @name uiButton#options
* @returns {Object}
* @example
* $('#btn').uiButton('options');
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* @summary 设置按钮的样式类
* @function
* @name uiButton#setStyle
* @param style {String}
* @example
* $('#btn').uiButton('setStyle', 'myClassName');
*/
setStyle: function (target, style) {
_setStyle(target, style);
},
/**
* @summary 设置按钮的显示文本
* @function
* @name uiButton#setLabel
* @param text {String} 显示文本
* @example
* $('#btn').uiButton('setLabel', '提交');
*/
setLabel: function (target, text) {
_setLabel(target, text);
},
/**
* @summary 获取按钮的显示文本
* @function
* @name uiButton#getLabel
* @returns {String} 显示文本
*/
getLabel: function (target) {
return $.data(target[0], _cacheName).options.label;
},
/**
* @summary 设置按钮的图标
* @function
* @name uiButton#setIcons
* @param icons {Object} 图标样式
* @example
* $('#btn').uiButton('setIcons', {left:'add',right:'delete'});
*/
setIcons: function (target, icons) {
_setIcon(target, icons);
},
/**
* @summary 启用组件
* @function
* @name uiButton#enable
* @returns {jQuery} 方法调用者
*/
enable: function (target) {
_setDisabled(target, false);
return target;
},
/**
* @summary 禁用组件
* @function
* @name uiButton#disable
* @returns {jQuery} 方法调用者
*/
disable: function (target) {
_setDisabled(target, true);
return target;
},
/**
* @summary 设置是否禁用组件
* @function
* @name uiButton#setDisabled
* @param disabled {Boolean} 是否禁用
* @returns {jQuery} 方法调用者
*/
setDisabled: function (target, disabled) {
_setDisabled(target, !!disabled);
return target;
}
};
/**
* 默认配置
* @lends uiButton.prototype
*/
$.fn.uiButton.defaults =
{
/**
* @summary 唯一标识
* @type String
* @default ""
* @example
* $('').uiButton({id:'btnOK'});
*/
id: '',
/**
* @summary 显示按钮图标,left表示左图标,right表示右图标,取值均为样式类。
* @type Object
* @default {left: '', right: ''}
*/
icons: {left: '', right: ''},
/**
* 属性说明:(左侧图标:left;右侧图标:right)
*
*
* | 属性 |
* 说明 |
* | icon | 图标样式 |
* | color | 颜色 |
* | size | 大小(像素) |
*
* @type Object
* @default {left: {}, right: {}}
* @summary 使用奥森字体图标,示例{left: {icon:'fa-comments-o',color:'#FF0000',size:20}}
*/
fontIcon: {left: {}, right: {}},
/**
* @summary 显示文本(可以为HTML)
* @type String
* @default ''
*/
label: '',
/**
* @summary 按钮样式
* @type String
* @default ''
*/
style: 'button',
/**
* @summary 是否禁用
* @type Boolean
* @default false
*/
disabled: false,
/**
* @summary 按钮单击时触发的方法
* @name uiButton#onClick
* @event
* @default emptyFn
*/
onClick: function () {
}
};
//////--------------------------------内部方法------------------------------
/**
* 创建按钮
* @param target 目标对象
*/
var _init = function (target) {
var options = $.data(target[0], _cacheName).options;
var content = target.contents();
options.id = options.id || target[0].id;
target.attr("id", options.id);
if (_IEunder7) {
target.attr("hidefocus", true);//去掉焦点时的虚线框
}
if (options.onClick) {
target.unbind('.' + _cacheName).bind('click.' + _cacheName, options.onClick);
}
//当按钮内没有内容时配置生效
if (content.length == 0) {
if (options.label) {
$('' + options.label + '').appendTo(target);
}
}
else {
var lab = target.find("span.btnLabel");
if (lab.length > 0) {
options.label = lab.html();
}
else {
options.label = target.text();
if (options.label) {
target.wrapInner('');
}
}
}
_setIcon(target, options.icons, options.fontIcon);
_setDisabled(target, options.disabled);
return target;
};
var _setLabel = function (target, text) {
var options = $.data(target[0], _cacheName).options;
options.label = text;
var lab = target.find('span.btnLabel');
lab.html(text);
};
var _setIcon = function (target, icons, fontIcons) {
fontIcons = fontIcons || {};
var options = $.data(target[0], _cacheName).options;
if (icons || fontIcons) {
var lab = target.find('span.btnLabel');
var icoDisabledClass = "";
if (options.disabled) {
icoDisabledClass = " iconDisabled";
}
function setIcon(region) {
var iconsRegion, fontIconsRegion, iconsOpts, fontIconsOpts;
if (region == 'left') {
iconsRegion = icons.left;
fontIconsRegion = fontIcons.left;
iconsOpts = options.icons.left;
fontIconsOpts = options.fontIcon.left;
} else if (region == 'right') {
iconsRegion = icons.right;
fontIconsRegion = fontIcons.right;
iconsOpts = options.icons.right;
fontIconsOpts = options.fontIcon.right;
}
if (iconsRegion || fontIconsRegion) {
var icon = target.find('span.icon_' + region);
if (icon.length > 0) {
icon.removeClass().addClass("icon_" + region + " " + icoDisabledClass);
}
else {
var icon = $('');
if (lab.length > 0) {
if (region == 'left') {
lab.before(icon);
} else if (region == 'right') {
lab.after(icon);
}
}
else {
target.append(icon);
}
}
if (fontIconsRegion && fontIconsRegion.icon && !_IEunder6) {
fontIconsOpts.size = fontIconsRegion.size || 16;
fontIconsOpts.color = fontIconsRegion.color || 'inherit';
icon.addClass('fa').addClass(fontIconsRegion.icon)
.css({fontSize: fontIconsOpts.size, color: fontIconsOpts.color});
} else {
if (iconsRegion) {
iconsOpts = iconsRegion;
icon.addClass('icon ' + iconsRegion);
}
}
}
}
setIcon('left');
setIcon('right');
}
};
/**
* 设置不可用状态
* @param target 目标对象
* @param disabled
*/
var _setDisabled = function (target, disabled) {
var options = $.data(target[0], _cacheName).options;
var ico_l = target.find('span.icon_left');
var ico_r = target.find('span.icon_right');
//不可用时
if (disabled || target.attr('disabled') == 'disabled') {
options.disabled = true;
target.attr('disabled', true);
ico_l.addClass('iconDisabled');
ico_r.addClass('iconDisabled');
}
if (!disabled) {
options.disabled = false;
target.attr('disabled', false);
ico_l.removeClass('iconDisabled');
ico_r.removeClass('iconDisabled');
}
_setStyle(target, options.style);
};
/**
* 设置样式
* @param target 目标对象
* @private
* @param style
*/
var _setStyle = function (target, style) {
var options = $.data(target[0], _cacheName).options;
var disabled = options.disabled;
//不可用时
if (disabled) {
target.removeClass().addClass('button button_disabled');
}
else {
if (style) {
options.style = style;
if (style == "button") {
target.removeClass().addClass('button');
}
else {
target.removeClass().addClass('button ' + style);
}
}
}
if (!target.is("button")) {
target.addClass('buttonHack');
}
}
})(jQuery);
/**
* Created by jinxs on 14-6-20.
* ui.button.js
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiButtonBar';
/**
* @class 按钮栏
* @requires {@link uiButton}
* @constructor uiButtonBar
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* // 构件组件
* $('#divBtnBar').uiButtonBar({direction: 'left'});
* // 调用组件方法options
* $('#divBtnBar').uiButtonBar("options");
*/
$.fn.uiButtonBar = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiButtonBar.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiButtonBar.defaults, me.parseUIConfig(), options)
});
}
_init(me);
});
};
/**
* 方法
* @lends uiButtonBar.prototype
*/
$.fn.uiButtonBar.methods = {
/**
* @summary 获得组件的配置对象
* @name uiButtonBar#options
* @function
* @returns {Object} 组件的配置对象
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* @summary 设置为可用
* @function
* @name uiButtonBar#enable
* @returns {jQuery} 方法调用者
*/
enable: function (target) {
_setDisabled(target, false);
return target;
},
/**
* @summary 设置为不可用
* @function
* @name uiButtonBar#disable
* @returns {jQuery} 方法调用者
*/
disable: function (target) {
_setDisabled(target, true);
return target;
}
};
/**
* 默认配置
* @lends uiButtonBar.prototype
*/
$.fn.uiButtonBar.defaults = {
/**
* @type String
* @default ""
* @summary 背景颜色
*/
backgroundColor: '',
/**
* @type Boolean
* @default false
* @summary 是否显示边框
*/
buttonBorder: false,
/**
* @type Number
* @default null
* @summary 组件宽度
*/
width: null,
/**
* @type Number
* @default null
* @summary 组件高度
*/
height: null,
/**
* 可选值:left,right,center
* @type String
* @default "left"
* @summary 组件对齐方式
*/
direction: 'left',
/**
* @summary 是否禁用
* @type Boolean
* @default false
*/
disabled: false
};
//////--------------------------------内部方法------------------------------
/**
* 创建按钮
* @param target 目标对象
*/
var _init = function (target) {
var options = $.data(target[0], _cacheName).options;
var bar = $(target);
//当按钮内没有内容时配置生效
if (options.width) {
bar.width(options.width);
}
if (options.height) {
bar.height(options.height);
}
else {
options.height = bar.height();
}
if (options.direction) {
bar.css("text-align", options.direction);
}
bar.addClass('buttonbar');
if (options.backgroundColor != "") {
bar.css("background-color", options.backgroundColor);
}
var buttons = target.find('button');
buttons.each(function (index, domEle) {
var btn = $(domEle);
var uiConfig = $.fn.parseUIConfig(btn);
if (btn.attr("id") || uiConfig.id) {
}
else {
btn.attr("id", bar.attr("id") + "_" + index);
}
if ($.fn.uiButton) {
if (!options.buttonBorder) {
btn.css('border', 'none');
}
btn.uiButton(uiConfig);
}
});
return target;
};
/**
* 设置不可用状态
* @param target 目标对象
* @param disabled
*/
var _setDisabled = function (target, disabled) {
var options = $.data(target[0], _cacheName).options;
var children = target.find('button');
//不可用时
if (disabled || target.attr('disabled') == 'disabled') {
options.disabled = true;
children.each(function (index, domEle) {
var btn = $(domEle);
btn.uiButton('disable');
btn.addClass('button_dis');
});
}
else {
options.disabled = false;
children.each(function (index, domEle) {
var btn = $(domEle);
btn.uiButton('enable');
});
}
};
})(jQuery);
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiMenu';
/**
* @class 菜单组件
* @constructor uiMenu
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @returns {jQuery} jQuery对象
* @example
* //采用默认值
* $('#menu_simple').uiMenu();
* //设置组件参数
* $('#menu_simple').uiMenu({maxWidth:'200',minWidth:'100'});
* //调用组件方法
* $('#menu_simple').uiMenu('show',this);
*/
$.fn.uiMenu = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiMenu.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiMenu.defaults, me.parseUIConfig(), options)
});
}
_init(me);
});
};
/**
* 方法
* @lends uiMenu.prototype
*/
$.fn.uiMenu.methods = {
/**
* @summary 获取所有配置
* @param target
* @returns {Json}
* @example
* $('#btn').uiMenu('options');
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* @summary 显示menu,menu不会自己显示,必须调用show方法才能显示
* @name uiMenu#show
* @function
* @param triggerObject 触发显示事件的对象,如点击的button触发的就是button对象
* @example
* //通过点击button显示menu
* $('#btn').click(function(){
* $('#menu_simple').uiMenu('show',this);
*});
*/
show: function (target, triggerObject) {
return _show(target, triggerObject);
},
/**
* @summary 隐藏组件
* @name uiMenu#hide
* @function
* @returns {jQuery} 方法调用者
*/
hide: function (target) {
return _hide({data:target});
},
/**
* @summary 将某个menuitem设置为disabled,设置之后menuitem将不会触发事件,如果有子菜单将不能打开子菜单,必须有menuItem。
* @name uiMenu#disableItem
* @function
* @param itemId menuItem的ID
* @example
* //调用disableItem方法
* $('#btn').click(function(){
* $('#menu_simple').uiMenu('disableItem','001');
*});
*/
disableItem: function (target, itemId) {
return _disableItem(target, itemId);
},
/**
* @summary 将某个menuitem设置为enable。
* @name uiMenu#enableItem
* @function
* @param itemId menuItem的ID
* @example
* //调用enableItem方法
* $('#btn').click(function(){
* $('#menu_simple').uiMenu('enableItem','001');
*});
*/
enableItem: function (target, itemId) {
return _enableItem(target, itemId);
},
/**
* @summary 移除组件
* @name uiMenu#destroy
* @function
* @returns {jQuery} 方法调用者
*/
destroy: function () {
return _destroy();
}
};
/**
* 默认配置
* @lends uiMenu.prototype
*/
$.fn.uiMenu.defaults =
{
/**
* @summary 是否为右键菜单
* @type Boolean
* @default false
* @example
* $("#menu_1").uiMenu({contextMenu:true});
*/
contextMenu: false,
/**
* @summary 最大宽度,如果menuItem文字长度超出了最大宽度,将会隐藏,鼠标移动到上面会有全文提示
* @type Number
* @default 200
* @example
* $("#menu_1").uiMenu({maxWidth:150});
*/
maxWidth: 200,
/**
* @summary 最小宽度,如果menuItem文字长度少于minWidth,则将使用空白填充。
* @type Number
* @default 100
* @example
* $("#menu_1").uiMenu({minWidth:50});
*/
minWidth: 100,
/**
* @summary 数据源,可以设置为json数据,也可以是url,如果不设置则为local,默认使用页面的dom元素生成Menu
* @type String
* @default local
* @example
* $("#menu_1").uiMenu({dataSource:'menuData.json'});
*/
dataSource: 'local',
/**
* @summary 当点击选择menu的时候触发的事件,item包含当前menuItem的所有数据。
* @name uiMenu#onSelect
* @event
* @param item 当前menuItem的所有数据
* @param event jQuery.Event对象
* @type Function
* @default 无
* @example
* $("#menu_1").uiMenu({
* onSelect:function(item,event){
* location.href = item.url;
* }
* });
*/
onSelect: function (item, event) {
}
};
//////--------------------------------内部方法------------------------------
/**
* 初始化
* @param target 目标对象
*/
var _init = function (target) {
var options = $.data(target[0], _cacheName).options;
target.setElemID();
target.css({"minWidth": options.minWidth, "maxWidth": options.maxWidth});
if (_IEunder6) {
target.css("width", options.minWidth);
}
if (_IE && webUI_browser().version == 7) {
target.css("width", options.maxWidth);
}
_create(target);
return target;
};
var _create = function (target) {
// uiMenu 对 options 重设置支持不够全面,实际上也无多大必要
var options = $.data(target[0], _cacheName).options;
var source = options.dataSource;
target.addClass('ui_menu-container ui_menu-content');
target.css('position', 'absolute');
if (source) {
if (source != 'local') {
if (typeof source == 'string') {
_ajaxLoad(target, source);
} else if (typeof source == 'object') {
target.append(_appendNodes(target, source));
_bindEvent(target);
}
} else {
var firstMenu = target.children("ul").addClass("ui_menu");
_parseDuiMenu(target, firstMenu);
_bindEvent(target);
}
}
};
var _show = function (target, trigger) {
var options = $.data(target[0], _cacheName).options;
var top, left;
var triggerObject;
if (trigger.triggerObject) {
triggerObject = trigger.triggerObject;
options.triggerData = trigger.triggerData;
} else {
triggerObject = trigger;
}
var offSet = $(triggerObject).offset();
if (options.contextMenu) {
options.triggerObject = triggerObject.target;
top = triggerObject.pageY;
left = triggerObject.pageX;
triggerObject.preventDefault();
triggerObject.stopPropagation();
triggerObject.cancelBubble = true; //IE
} else {
var bottomWidth = parseInt($(triggerObject).css('borderBottomWidth'));
top = offSet.top + $(triggerObject).height() + (bottomWidth != 'NaN' ? bottomWidth : 0) + 1; //1px作为调节距离
left = offSet.left + 1;
}
var parent = target.parent();
while (parent.css('position') == 'static' && parent[0].nodeName != 'BODY') {
parent = parent.parent();
}
top -= parent.offset().top;
left -= parent.offset().left;
target.children("ul.ui_menu").show();
var width = target.width() * 0.7;
target.children("ul.ui_menu").children().each(function (index, li) {
var lic = $(li);
var lic_first = lic.find("span:first");
if (lic_first.hasClass('ui_menu-item-sep')) {
lic_first.width('98%'); //分隔条宽度
} else {
if (lic_first.width() > width) {
lic_first.width(lic.attr('aria-haspopup') ? width - 15 : width);
}
}
});
if ((left + target.outerWidth()) > document.documentElement.clientWidth) { //当右边距离过短的时候会将提示框调整到左边
left = left - target.outerWidth() - 5;
}
if ((top + target.outerHeight()) > document.documentElement.clientHeight) { //当下边距离过短的时候会将提示框调整到上边
top = top - target.outerHeight() - 5;
}
target.css({"top": top, 'left': left}).show();
$(document).bind('mousedown.uiMenu',target, _hide);
return target;
};
var _disableItem = function (target, itemId) {
target.find("#" + itemId)
.addClass("ui_menu-disabled")
.unbind(".menuItem");
return target;
};
var _enableItem = function (target, itemId) {
var cli = target.find("#" + itemId);
cli.removeClass("ui_menu-disabled");
_bindLiEvent(target, cli);
return target;
};
var _destroy = function () {
var $doc = $(document),
handler;
while (handler = this.globalEvent.pop()) {
$doc.unbind(".uiMenu", handler);
}
};
var _ajaxLoad = function (target, source) {
$.ajax({
url: source,
method: 'GET',
dataType: 'json',
showLoading:false,
success: function (data) {
target.append(_appendNodes(target, data));
_bindEvent(target);
return false;
}
});
};
var _appendNodes = function (target, source, index) {
var menuHtml = [];
var ulClass = (index == undefined) ? 'ui_menu' : 'ui_menu-content';
var display = (index == undefined) ? 'block' : 'none';
var imgClass = 'ui_menu-icon';
menuHtml.push('');
var childrenHtml = [];
$(source).each(function (index, item) {
var liID = target.getElemID() + '_' + item.id;
function createItemHtml() {
var itemHtml = [];
if (item.icon || item.fontIcon) {
if (item.fontIcon && !_IEunder6) {
item.fontIcon.size = item.fontIcon.size || 16;
item.fontIcon.color = item.fontIcon.color || 'inherit';
itemHtml.push('');
} else {
itemHtml.push('');
}
itemHtml.push('');
}else{
itemHtml.push('');
}
return itemHtml.join('');
}
if (item.children != null) {
if (item.disabled === true || item.disabled == "true") {
childrenHtml.push('- ');
}
childrenHtml.push('');
childrenHtml.push(_appendNodes(target, item.children, index++));
childrenHtml.push("
");
} else {
if (item.disabled === true || item.disabled == "true") {
childrenHtml.push('- ');
}
childrenHtml.push('');
childrenHtml.push('
');
}
if (item.seperator == "true" || item.seperator == true) {
childrenHtml.push('');
}
$.data(target[0], liID, item);
});
menuHtml.push(childrenHtml.join(''));
menuHtml.push('
');
return menuHtml.join('');
};
//处理页面编写dom节点的情况
var _parseDuiMenu = function (target, element) {
if (element.parent().attr("aria-haspopup") == "true") { //判断是否为第一帧
element.addClass("ui_menu-content");
}
element.css('display', 'none');
var lis = element.children();
for (var i = 0; i < lis.length; i++) {
var li = $(lis[i]), liCul = li.children("ul");
liCul.remove();
var label = li.text();
li.empty();
if (liCul.length) {
li.append(liCul);
}
var liOpts = li.parseUIConfig();
var liID = target.getElemID() + '_' + liOpts.id;
li[0].id = liID;
$.data(target[0], liID, liOpts);
var html = [];
html.push('');
li.prepend(html.join(''));
}
};
var _showChildren = function (target, li) {
var options = $.data(target[0], _cacheName).options;
if (li && li.length > 0) {
var li_child_ul = li.children("ul").eq(0);
var left = li.width();
if ((2 * left + li.offset().left) > document.documentElement.clientWidth) { //当右边距离过短的时候会将提示框调整到左边
left = -left;
}
li_child_ul.css({minWidth: options.minWidth, left: left});
li_child_ul.show();
li_child_ul.children().each(function (index, li) {
var lic = $(this);
if (lic.find("span:first").hasClass('ui_menu-item-sep')) {
lic.find("span:first").width('98%'); //分隔条宽度
} else {
if (li_child_ul.width() > options.maxWidth) {
li_child_ul.width(options.maxWidth);
} else {
if (li_child_ul.attr('hasShow') == undefined) {
li_child_ul.width(li_child_ul.find('li:eq(0)>a:eq(0)').width() + 15);
li_child_ul.attr('hasShow', true);
}
}
lic.find("span.ui_menu-text").width(lic.width() - 45);
}
});
}
};
var _bindLiEvent = function (target, li) {
var options = $.data(target[0], _cacheName).options;
var lic = $(li);
var item = $.data(target[0], lic[0].id); //bug
lic.unbind('.menuItem')
.bind("mouseenter.menuItem", function () {
var self_li = $(this);
var width = self_li.parent().width();
self_li.addClass("ui_menu-item-hover");
if (_IE && webUI_browser().version == 9) { //解决bug AOM-576
self_li.parent().width(width);
}
if (self_li.attr("aria-haspopup")) {
setTimeout(function () {
_showChildren(target, self_li);
}, 200);
}
})
.bind("mouseleave.menuItem", function () {
var self_li = $(this);
self_li.removeClass("ui_menu-item-hover");
setTimeout(function () {
self_li.children("ul").hide();
}, 200);
})
.bind("click.menuItem", function (event) {
if (options.onSelect) {
options.onSelect.call(target, item, event);
}
event.stopPropagation();
});
};
var _bindEvent = function (target) {
var uls = target.find("ul"),
lis = target.find("li");
for (var i = 0; i < lis.length; i++) {
if (!$(lis[i]).hasClass("ui_menu-disabled") && !$(lis[i]).hasClass("ui_menu-sep-li")) {
_bindLiEvent(target, lis[i]);
}
}
for (var j = 0; j < uls.length; j++) {
$(uls[j]).bind("mouseleave.menuContainer", function () {
var ul = $(this);
if (ul.parent().attr("aria-haspopup") == "true") {
ul.hide();
}
});
}
};
var _hide = function (e) {
var target = e.data;
if($(e.target).closest(target).length == 0) {
target.find("ul").css("display", "none");
target.find("li.ui_menu-item-hover").each(function (index, item) {
$(item).removeClass("ui_menu-item-hover");
});
target.hide();
$(document).unbind('mousedown.uiMenu');
}
};
})(jQuery);
/**
* Created by jinxs on 14-6-24.
* 依赖:
* ui.core.js
* ui.button.js
* ui.buttonbar.js
* ui.draggable.js
* ui.resizable.js
* ui.mask.js
* ui.loading.js
* ui.position.js
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiPanel';
var loadingID = 'palLoading';
/**
* @class 面板
* @requires {@link uiButton}
* @constructor uiPanel
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* // 构件组件
* $('#divMenu').uiPanel({width: 160, height: 500});
* // 调用组件方法{@link options}
* $('#divMenu').uiPanel("options");
*/
$.fn.uiPanel = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiPanel.methods[options](this, param);
}
return this.each(function () {
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiPanel.defaults, $.fn.parseUIConfig(me, null), options)
});
}
_init(me);
});
};
/**
* 方法
* @lends uiPanel.prototype
*/
$.fn.uiPanel.methods = {
/**
* @summary 获得组件的数据
* @name uiPanel#data
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
data: function (target) {
return $.data(target[0], _cacheName);
},
/**
* @summary 获得组件的面板对象
* @name uiPanel#options
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
options: function (target) {
return target.data(_cacheName).options;
},
/**
* @summary 获得组件的面板对象
* @name uiPanel#panel
* @function
* @returns {jQuery} 组件的面板对象的内容
*/
panel: function (target) {
return target;
},
/**
* @summary 获得组件的标题对象
* @name uiPanel#header
* @function
* @returns {jQuery} 组件的面板对象的内容
*/
header: function (target) {
return $.getByParentID(target.getElemID(), $.uiTemplate.panel.header);
},
/**
* @summary 设置组件的图标
* @name uiPanel#icon
* @function
* @returns {jQuery} 组件的面板对象的内容
*/
icon: function (target) {
return $.getByParentID(target.getElemID(), $.uiTemplate.panel.icon);
},
/**
* @summary 获得组件的标题文本
* @name uiPanel#title
* @function
* @returns {jQuery} 组件的面板对象的内容
*/
title: function (target) {
return $.getByParentID(target.getElemID(), $.uiTemplate.panel.title);
},
/**
* @summary 获得组件的工具栏
* @name uiPanel#toolbar
* @function
* @returns {jQuery} 组件的面板对象的内容
*/
toolbar: function (target) {
return $.getByParentID(target.getElemID(), $.uiTemplate.panel.toolbar);
},
/**
* @summary 获得组件的内容
* @name uiPanel#content
* @function
* @returns {jQuery} 组件的面板对象的内容
*/
content: function (target) {
return $.getByParentID(target.getElemID(), $.uiTemplate.panel.content);
},
/**
* @summary 获得组件的按钮栏
* @name uiPanel#buttonbar
* @function
* @returns {jQuery} 组件的面板对象的内容
*/
buttonbar: function (target) {
return $.getByParentID(target.getElemID(), $.uiTemplate.panel.buttonbar);
},
/**
* @summary 设置组件是否显示内容区边框
* @name uiPanel#border
* @param show {boolean}是否显示边框
* @function
* @returns {Object} 组件的面板对象
*/
border: function (target, show, borderWidth) {
_contentBorder(target, show, borderWidth);
return target;
},
/**
* @summary 刷新组件
* @name uiPanel#refresh
* @param url {String} 地址
* @function
* @returns {Object} 组件的面板对象
*/
refresh: function (target, url) {
if (url) {
$.data(target[0], _cacheName).options.url = url;
}
_renderContent(target, true);
return target;
},
/**
* @summary 折叠组件
* @name uiPanel#collapse
* @param target
* @param animate {boolean}是否有动画
* @returns {Object} 组件的面板对象
*/
collapse: function (target, animate) {
_collapsed(target, animate);
return target;
},
/**
* @summary 展开组件
* @name uiPanel#collapse
* @param target
* @param animate {boolean}是否有动画
* @returns {Object} 组件的面板对象
*/
expand: function (target, animate) {
_expand(target, animate);
return target;
},
/**
* @summary 调整组件的大小
* @name uiPanel#resize
* @param target
* @param position {String} 位置
* @returns {Object} 组件的面板对象
*/
resize: function (target, position) {
var opts = $.data(target[0], _cacheName).options;
if (position != undefined) {
if (position.left != undefined) {
opts.left = position.left;
}
if (position.top != undefined) {
opts.top = position.top;
}
if (position.width != undefined) {
opts.width = position.width;
}
if (position.height != undefined) {
opts.height = position.height;
}
if (position.zIndex != undefined) {
opts.zIndex = position.zIndex;
}
}
_resize(target);
return target;
},
/**
* @summary 打开组件
* @name uiPanel#open
* @param target
* @param forceOpen {boolean}是否强制打开
* @returns {Object} 组件的面板对象
*/
open: function (target, forceOpen) {
_open(target, forceOpen);
return target;
},
/**
* @summary 关闭组件
* @name uiPanel#close
* @param target
* @param forceClose {Boolean}是否强制关闭
* @returns {Object} 组件的面板对象
*/
close: function (target, forceClose) {
_close(target, forceClose);
return target;
},
/**
* @summary 移除组件
* @name uiPanel#destroy
* @param target
* @param forceDestroy {Boolean} 在'forceDestroy'参数设置为true的时候,销毁面板时将跳过'onBeforeDestory'回调函数。
* @returns {Object} 组件的面板对象
*/
destroy: function (target, forceDestroy) {
_destory(target, forceDestroy);
return target;
}
};
/**
* 默认配置
* @lends uiPanel.prototype
*/
$.fn.uiPanel.defaults = {
/**
* @type String
* @default ""
* @summary 设置组件的ID
*/
id: '',
/**
* @type Boolean
* @default false
* @summary true时,页面需要引用animate.css
*/
animate:true,
/**
* @type String
* @default ""
* @summary 打开时的动画样式名称
*/
animateOpen:'fadeIn',
/**
* @type String
* @default ""
* @summary 关闭时的动画样式名称
*/
animateClose:'fadeOut',
/**
* @type Boolean
* @default true
* @summary true时,panel只能在父容器边框内,false时,panel可以超出父容器边框
*/
inContainer: true,
/**
* 样式枚举:
*
*
* | 名称 |
* 说明 |
* | ui_panel_primary | 主样式 |
* | ui_panel_success | 成功样式 |
* | ui_panel_info | 信息样式 |
* | ui_panel_warning | 警告样式 |
* | ui_panel_danger | 危险样式 |
*
* @type String
* @default ""
* @summary 设置组件的风格
*/
panelStyle: '',
/**
* @type Boolean
* @default false
* @summary 设置组件是否自动填充
*/
autoFit: false,
/**
* @type String
* @default ""
* @summary 指示组件图标
*/
icon: '',
/**
* 属性说明:
*
*
* | 属性 |
* 说明 |
* | icon | 图标样式 |
* | color | 颜色 |
* | size | 大小(像素) |
*
* @type Object
* @default null
* @summary 使用奥森字体图标,示例{ icon:'fa-comments-o',color:'#FF0000',size:20}
*/
fontIcon: null,
/**
* @type Object
* @default null
* @summary 指示组件的上边距(支持Number、百分比)
*/
top: null,
/**
* @type Object
* @default null
* @summary 指示组件的左边距(支持Number、百分比)
*/
left: null,
/**
* @type String
* @default ""
* @summary 指示组件标题
*/
title: '',
showTitle: true,
/**
* @type Boolean
* @default false
* @summary 是否初始化组件的框架内容
*/
iniframe: false,
/**
* 可选值有get, post
* @type String
* @default "post"
* @summary 向指定的url请求数据时使用的方法
*/
method: 'get',
/**
* @type String
* @default ""
* @summary 指定远程数据加载的url
*/
url: '',
/**
* @type Boolean
* @default true
* @summary 指示组件在加载远程数据时是否显示加载进度条
*/
showLoading: true,
/**
* @type Boolean
* @default false
* @summary 请求框架内容时是否设置随机参数
*/
urlRandomParam: false,
/**
* @type Boolean
* @default false
* @summary 设置组件是否打开时刷新
*/
updateOnOpen: false,
/**
* @type Boolean
* @default false
* @summary 设置组件是否延时加载
*/
lazyLoad: false,
/**
* @type Boolean
* @default true
* @summary 设置组件是否只有首次时加载
*/
firstLoad: true,
/**
* @type Object
* @default {}
* @summary 指示组件的请求参数
*/
queryParams: {},
/**
* @type String
* @default ""
* @summary 指示组件的内容
*/
content: '',
/**
* @type Boolean
* @default true
* @summary 设置组件是否显示边框
*/
border: true,
/**
* @type Number
* @default 1
* @summary 设置组件边框宽度,仅border为ture时有效
*/
borderWidth: 1,
/**
* @type String
* @default 0px
* @summary 设置组件内边距
*/
padding: '0px',
/**
* @type Object
* @default 0
* @summary 指示组件的最小宽度(支持Number、百分比)
*/
minWidth: 0,
/**
* @type Object
* @default 0
* @summary 指示组件的最小高度(支持Number、百分比)
*/
minHeight: 0,
/**
* @type Object
* @default 0
* @summary 指示组件的宽度(支持Number、百分比)
*/
width: 0,
/**
* @type Object
* @default 0
* @summary 指示组件的高度(支持Number、百分比)
*/
height: 0,
/**
* @type Boolean
* @default true
* @summary 指示组件是否显示标题栏
*/
showHeader: true,
/**
* @type Boolean
* @default false
* @summary 指示组件是否显示按钮栏
*/
showBtnBar: false,
/**
* @type Array
* @default []
* @summary 设置组件的buttons值
*/
buttons: [],
/**
* 可选值:left,right,center
* @type String
* @default "center"
* @summary 组件按钮栏的对齐方式
*/
btnBarDir: 'center',
/**
* @type Boolean
* @default false
* @summary 指示组件是否可拖拽
*/
draggable: false,
/**
* @type Boolean
* @default false
* @summary 指示组件是否可调整大小
*/
resizable: false,
/**
* @type Boolean
* @default false
* @summary 指示组件是否可关闭
*/
closable: false,
/**
* @type Boolean
* @default false
* @summary 指示组件是否默认关闭
*/
closed: false,
/**
* @type Boolean
* @default false
* @summary 指示组件是否可最大化
*/
maximizable: false,
/**
* @type Boolean
* @default false
* @summary 指示组件是否默认最大化
*/
maximized: false,
/**
* @type Array
* @default [15,15,15,15]
* @summary 组件最大化时与父容器的间距(上、左、下、右)
*/
maxPadding: [0, 0, 0, 0],
/**
* @type Boolean
* @default false
* @summary 指示组件是否可折叠
*/
collapsible: false,
/**
* @type Boolean
* @default false
* @summary 指示组件是否默认折叠
*/
collapsed: false,
/**
* @type object
* @default null
* @summary 指示组件拖拽的对象
*/
dragHandle: null,
/**
* @type Number
* @default 0
* @summary 指示组件的zIndex
*/
zIndex: 0,
/**
* @event
* @name uiPanel#onBeforeCollapse
* @type function
* @default function () { }
* @summary 设置组件折叠之前的事件
*/
onBeforeCollapse: function () {
},
/**
* @event
* @name uiPanel#onCollapse
* @type function
* @default function () { }
* @summary 设置组件折叠时的事件
*/
onCollapse: function () {
},
/**
* @event
* @name uiPanel#onBeforeExpand
* @type function
* @default function () { }
* @summary 设置组件展开之前的事件
*/
onBeforeExpand: function () {
},
/**
* @event
* @name uiPanel#onExpand
* @type function
* @default function () { }
* @summary 设置组件展开时的事件
*/
onExpand: function () {
},
/**
* @event
* @name uiPanel#onBeforeOpen
* @type function
* @default function () { }
* @summary 设置组件打开之前的事件
*/
onBeforeOpen: function () {
},
/**
* @event
* @name uiPanel#onOpen
* @type function
* @default function () { }
* @summary 设置组件打开时的事件
*/
onOpen: function () {
},
/**
* @event
* @name uiPanel#onBeforeClose
* @type function
* @default function () { }
* @summary 设置组件关闭之前的事件
*/
onBeforeClose: function () {
},
/**
* @event
* @name uiPanel#onClose
* @type function
* @default function () { }
* @summary 设置组件关闭时的事件
*/
onClose: function () {
},
/**
* @event
* @name uiPanel#onBeforeDestroy
* @type function
* @default function () { }
* @summary 设置组件移除之前的事件
*/
onBeforeDestroy: function () {
},
/**
* @event
* @name uiPanel#onDestroy
* @type function
* @default function () { }
* @summary 设置组件移除时的事件
*/
onDestroy: function () {
},
/**
* @event
* @name uiPanel#onBeforeLoad
* @type function
* @default function () { }
* @summary 设置组件加载之前的事件
*/
onBeforeLoad: function () {
},
/**
* 若函数返回false,将不执行默认的错误处理
* @event
* @name uiPanel#onLoadError
* @type function
* @default function () { }
* @summary 设置组件加载失败的事件,参数参见$.ajax.error
*/
onLoadError: function () {
},
/**
* @event
* @name uiPanel#onLoadComplete
* @type function
* @default function () { }
* @summary 设置组件加载完成的事件
*/
onLoadComplete: function () {
},
/**
* @event
* @name uiPanel#onPanelResize
* @type function
* @default function () { }
* @summary 组件改变大小时触发
*/
onPanelResize: function () {
}
};
//////--------------------------------内部方法------------------------------
/**
* 创建按钮
* @param target 目标对象
*/
var _init = function (target) {
var options = target.data(_cacheName).options;
var targetID;
if (options.id != '') {
target[0].id = options.id;
targetID = options.id;
} else {
target.setElemID();
targetID = target.getElemID();
options.id = targetID;
}
var header, content, toolbar;
if (target.find('.ui_panel_content').length == 0) {
var contentHtml = target.children().detach();
target.addClass('ui_panel');
var reg = new RegExp('({palID})', 'g');
target.append($.uiTemplate.panel.html.replace(reg, targetID));
content = $.getByParentID(targetID, $.uiTemplate.panel.content);
content.append(contentHtml);
} else {
header = target.find('.ui_panel_header').setIDByParentID(targetID, $.uiTemplate.panel.header);
header.find('.ui_panel_icon').setIDByParentID(targetID, $.uiTemplate.panel.icon);
header.find('.ui_panel_title').setIDByParentID(targetID, $.uiTemplate.panel.title);
target.find('.ui_panel_content').setIDByParentID(targetID, $.uiTemplate.panel.content);
target.find('.ui_panel_buttonbar').setIDByParentID(targetID, $.uiTemplate.panel.buttonbar);
toolbar = target.find('.ui_panel_toolbar').setIDByParentID(targetID, $.uiTemplate.panel.toolbar);
toolbar.find('.ui_panel_toolbar_close').setIDByParentID(targetID, $.uiTemplate.panel.btnClose);
toolbar.find('.ui_panel_toolbar_max').setIDByParentID(targetID, $.uiTemplate.panel.btnMax);
}
if (options.panelStyle != '') {
target.addClass(options.panelStyle);
}
if (options.zIndex > 0) {
target.css('zIndex', options.zIndex);
}
_renderBtnBar(target);//兼容考虑
if (options.closed == true) {
_close(target, true, true);
} else {
_open(target);
}
return target;
};
var _renderHeader = function (target) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var header = $.getByParentID(targetID, $.uiTemplate.panel.header);
var icon = $.getByParentID(targetID, $.uiTemplate.panel.icon);
var title = $.getByParentID(targetID, $.uiTemplate.panel.title);
if (!options.showHeader) {
header.remove();
}
else {
icon.removeClass();
if (options.fontIcon && !_IEunder6) {
options.fontIcon.size = options.fontIcon.size || 16;
options.fontIcon.color = options.fontIcon.color || 'inherit';
icon.addClass('ui_panel_fontIcon fa').addClass(options.fontIcon.icon)
.css({color: options.fontIcon.color, fontSize: options.fontIcon.size});
} else {
if (options.icon) {
if (options.icon.indexOf('.') > 0) {
icon.addClass('icon ui_panel_icon').html("
");
} else {
icon.addClass('icon ui_panel_icon ' + $.uiTemplate.iconStyle_Pre + options.icon);
}
} else {
icon.hide();
}
}
if (options.showTitle) {
if (options.title) {
title.html(options.title);
} else {
title.hide();
}
} else {
title.remove();
}
}
};
var _renderBtnBar = function (target) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var btnbar = $.getByParentID(targetID, $.uiTemplate.panel.buttonbar);
if (btnbar.length > 0 && options.showBtnBar) {
var buttons = options.buttons;
if (buttons.length > 0) {
for (var i = 0; i < buttons.length; i++) {
var btnOpts = buttons[i];
var btn = $('').appendTo(btnbar);
btn.uiButton(btnOpts);
}
}
btnbar.uiButtonBar({direction: options.btnBarDir, height: 28, buttonBorder: true});
} else {
btnbar.remove();
}
};
var _renderContent = function (target, refresh) {
refresh = refresh === undefined ? false : refresh;
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
if (options.padding != '') {
content.css('padding', options.padding);
}
options.onBeforeLoad.call(target);
if (!refresh && $.trim(content.html()) != "") {
content.addClass('overflowAuto');
} else {
if (options.url != '') {
if (refresh) {
_loadContent(target);
}
} else {
content.addClass('overflowAuto');
if (options.content) {
content.append(options.content);
}
options.onLoadComplete.call(target);
options.onOpen.call(target);
}
}
};
var _loadContent = function (target) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var excludeId = '#' + targetID;
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
var tempHref = options.url;
if (options.urlRandomParam) {
tempHref = $.urlAddRandom(options.url);
}
if (options.iniframe) {
content.removeClass('overflowAuto');
var ifrm = $.getByParentID(targetID, 'iframe');
var params = $.param(options.queryParams);
if (params) {
tempHref += /\?/.test(tempHref) ? '&' : '?' + params;
}
if (options.showLoading) {
$.uiLoading.show({container: target, loadingID: loadingID, excludeSelector: excludeId});
}
if (ifrm.length > 0) {
ifrm[0].src = tempHref;
} else {
var iframeID = $.getIDByParentID(targetID, 'iframe');
ifrm = $('');
ifrm.load(function () {
options.onLoadComplete.call(target);
options.onOpen.call(target);
if (options.showLoading) {
$.uiLoading.hide({container: target, loadingID: loadingID, excludeSelector: excludeId});
}
}).appendTo(content);
}
}
else {
content.addClass('overflowAuto');
$.ajax({
type: options.method,
url: tempHref,
cache: true,
showLoading: false,
data: options.queryParams,
dataType: "html",
success: function (data) {
content.empty();
content.append(data);
return false;
},
complete: function () {
options.onLoadComplete.call(target);
options.onOpen.call(target);
},
error: function (xhr) {
if (options.onLoadError.apply(target, arguments) !== false) {
content.append(xhr.responseText);
}
return false;
}
});
}
};
var _resizable = function (target) {
var options = $.data(target[0], _cacheName).options;
if (options.resizable) {
var targetID = target.getElemID();
var btnbar = $.getByParentID(targetID, $.uiTemplate.panel.buttonbar);
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
var header = $.getByParentID(targetID, $.uiTemplate.panel.header);
var resizeHand = $('').setIDByParentID(targetID, $.uiTemplate.panel.resizeHand).appendTo(target)
.css({zIndex: parseInt(target.css("zIndex")) + 1, position: 'absolute', right: 0, bottom: 0});
target.resizable({
minWidth: $.parseWH('minWidth', options.minWidth, target.parent()),
minHeight: $.parseWH('minHeight', options.minHeight, target.parent()),
onStartResize: function () {
target.addClass('ui_panel_proxy');
content.height(0);
},
onResize: function () {
},
onStopResize: function (e) {
target.removeClass('ui_panel_proxy');
var pos = target.position();
options.top = pos.top;
options.left = pos.left;
options.width = target.width();
options.height = target.height();
if (options.inContainer) {
var d = e.data;
var tar = $(d.target);
var par = $(d.parent);
if (d.left + tar.outerWidth() > par.width()) {
options.width = par.width() - d.left;
}
if (d.top + tar.outerHeight() > par.height()) {
options.height = par.height() - d.top;
}
}
_resize(target);
return false;
}
});
}
};
var _draggable = function (target) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var header = $.getByParentID(targetID, $.uiTemplate.panel.header);
var title = $.getByParentID(targetID, $.uiTemplate.panel.title);
if (options.draggable) {
if (!options.dragHandle) {
if (options.showHeader) {
options.dragHandle = title;
}
}
target.draggable({
handle: options.dragHandle,
proxy: function (source) {
var p = $('');
p.appendTo('body');
return p;
},
onStartDrag: function () {
target.hide();
},
onStopDrag: function (e) {
if (options.inContainer) {
var d = e.data;
if (d.left < 0) {
d.left = 0
}
if (d.top < 0) {
d.top = 0
}
if (d.left + $(d.target).outerWidth() > $(d.parent).width()) {
d.left = $(d.parent).width() - $(d.target).outerWidth();
}
if (d.top + $(d.target).outerHeight() > $(d.parent).height()) {
d.top = $(d.parent).height() - $(d.target).outerHeight();
}
target.css({
left: d.left,
top: d.top
});
}
options.top = parseInt(target.css("top"));
options.left = parseInt(target.css("left"));
target.show();
}
});
}
};
var _maximizable = function (target) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var btnMax = $.getByParentID(targetID, $.uiTemplate.panel.btnMax);
var toolbar = $.getByParentID(targetID, $.uiTemplate.panel.toolbar);
var header = $.getByParentID(targetID, $.uiTemplate.panel.header);
if (options.maximizable) {
if (btnMax.length > 0) {
btnMax.show();
} else {
btnMax = $('' +
'')
.setIDByParentID(targetID, $.uiTemplate.panel.btnMax).appendTo(toolbar);
}
btnMax.unbind("click.panel").bind("click.panel", function (e) {
if (options.maximized) {
options.maximized = false;
_isMax(target, false);
}
else {
options.maximized = true;
_isMax(target, true);
}
_resize(target);
e.stopPropagation();
});
header.unbind("dblclick").bind("dblclick", function (e) {
btnMax.click();
e.stopPropagation();
});
}
else {
if (btnMax.length > 0) {
btnMax.hide();
}
}
};
var _isMax = function (target, isMax) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
if (options.maximizable) {
var btnMax_icon = $.getByParentID(targetID, $.uiTemplate.panel.btnMax_Icon);
var resizeHand = $.getByParentID(targetID, $.uiTemplate.panel.resizeHand);
if (isMax) {
btnMax_icon.removeClass('icon_pal_max').addClass('icon_pal_min');
if (options.draggable) {
target.draggable("disable");
}
if (options.resizable) {
target.resizable("disable");
resizeHand.hide();
}
}
else {
btnMax_icon.removeClass('icon_pal_min').addClass('icon_pal_max');
if (options.draggable) {
target.draggable("enable");
}
if (options.resizable) {
target.resizable("disable");
target.resizable("enable");
resizeHand.show();
}
}
}
};
var _closeable = function (target) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var btnClose = $.getByParentID(targetID, $.uiTemplate.panel.btnClose);
var toolbar = $.getByParentID(targetID, $.uiTemplate.panel.toolbar);
if (options.closable) {
if (btnClose.length > 0) {
btnClose.show();
} else {
btnClose = $('' +
'')
.setIDByParentID(targetID, $.uiTemplate.panel.btnClose).appendTo(toolbar);
}
btnClose.unbind("click").bind("click", function (e) {
_close(target);
e.stopPropagation();
});
}
else {
if (btnClose.length > 0) {
btnClose.hide();
}
}
};
var _collapsible = function (target) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var btnColl = $.getByParentID(targetID, $.uiTemplate.panel.btnColl);
var toolbar = $.getByParentID(targetID, $.uiTemplate.panel.toolbar);
var header = $.getByParentID(targetID, $.uiTemplate.panel.header);
if (options.collapsible) {
if (btnColl.length > 0) {
btnColl.show();
} else {
var iconClass = 'icon_pal_col';
var iconTitle = '收缩';
if (options.collapsed) {
iconClass = 'icon_pal_exp';
iconTitle = '展开';
}
btnColl = $('' +
'')
.setIDByParentID(targetID, $.uiTemplate.panel.btnColl).appendTo(toolbar);
}
var btnColl_icon = $.getByParentID(targetID, $.uiTemplate.panel.btnColl_Icon);
btnColl.unbind("click.panel").bind("click.panel", function (e) {
if (options.collapsed) {
btnColl_icon.removeClass('icon_pal_exp').addClass('icon_pal_col').attr('title', '收缩');
_expand(target, false);
}
else {
btnColl_icon.removeClass('icon_pal_col').addClass('icon_pal_exp').attr('title', '展开');
_collapsed(target, false);
}
e.stopPropagation();
});
header.unbind("click").bind("click", function (e) {
btnColl.click();
// 这会阻止layout 上下的click事件使Panel不能展开
//e.stopPropagation();
});
}
else {
if (btnColl.length > 0) {
btnColl.remove();
}
}
};
var _resize = function (target) {
var targetID = target.getElemID();
var header = $.getByParentID(targetID, $.uiTemplate.panel.header);
var icon = $.getByParentID(targetID, $.uiTemplate.panel.icon);
var title = $.getByParentID(targetID, $.uiTemplate.panel.title);
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
var btnbar = $.getByParentID(targetID, $.uiTemplate.panel.buttonbar);
var toolbar = $.getByParentID(targetID, $.uiTemplate.panel.toolbar);
var options = $.data(target[0], _cacheName).options;
_contentBorder(target, options.border, options.borderWidth);
var parent = target.parent();
if (options.maximized) {
var pos = {left: 0, top: 0};
pos.left = parent.scrollLeft();
pos.top = parent.scrollTop();
target.outerWidth(parent.width() - options.maxPadding[1] - options.maxPadding[3]);
target.outerHeight(parent.height() - options.maxPadding[0] - options.maxPadding[2]);
target.css('top', options.maxPadding[0] + pos.top);
target.css('left', options.maxPadding[1] + pos.left);
} else {
if (options.top) {
target.css('top', options.top);
}
if (options.left) {
target.css('left', options.left);
}
if (options.autoFit) {
target.autoFit(true, false);
} else {
target.autoFit(false);
options.width = $.parseWH("width", options.width, parent);
options.minWidth = $.parseWH("minWidth", options.minWidth, parent);
options.height = $.parseWH("height", options.height, parent);
options.minHeight = $.parseWH("minHeight", options.minHeight, parent);
var width = Math.max(Math.max(options.width, 0), options.minWidth || 0);
var height = Math.max(Math.max(options.height, 0), options.minHeight || 0);
target.outerWidth(width);
if (!options.collapsed) {
target.outerHeight(height);
}
}
}
var contentH = target.height();
if (header.length > 0) {
contentH -= header.outerHeight();
}
if (btnbar.length > 0 && options.showBtnBar) {
contentH -= btnbar.outerHeight();
}
content.outerHeight(contentH);
content.outerWidth(target.width());
_contentChildrenResize(content);
options.onPanelResize.call(target);
};
var _open = function (target, forceOpen) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
if (forceOpen != true) {
if (options.onBeforeOpen.call(target) == false) {
return;
}
}
options.closed = false;
target.show();
target.attr('closed', false);
content.attr('closed', false);
if (options.firstLoad) {
_renderHeader(target);
_draggable(target);
_resizable(target);
_maximizable(target);
_closeable(target);
_collapsible(target);
if (options.maximized) {
_resize(target);
_isMax(target, true);
} else {
_resize(target);
}
_renderContent(target, true);
if (options.collapsed) {
var btnColl_icon = $.getByParentID(targetID, $.uiTemplate.panel.btnColl_Icon);
options.collapsed = false;
btnColl_icon.removeClass('icon_pal_col').addClass('icon_pal_exp').attr('title', '展开');
_collapsed(target, false);
}
target.bind("_resize", function () {
if (target.attr('closed') !== 'true' && options.maximized) {
_resize(target);
}
});
options.firstLoad = false;
}
else {
target.width(options.tempWidth).height(options.tempHeight);
if (options.url != '' && options.updateOnOpen) {
_loadContent(target);
} else {
options.onOpen.call(target);
}
}
if(options.animate){
target.removeClass('animated '+options.animateClose).addClass('animated '+options.animateOpen+' fast');
}
};
var _close = function (target, forceClose, firstLoad) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
if(options.closed){
return;
}
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
if (forceClose != true) {
if (options.onBeforeClose.call(target) == false) {
return;
}
}
target.attr('closed', true);
content.attr('closed', true);
if (firstLoad) {
target.hide();
return target;
}
options.closed = true;
var height=target.height();
if(height>0) {
options.tempWidth = target.width();
options.tempHeight = target.height();
}
if(options.animate){
target.removeClass('animated '+options.animateOpen).addClass('animated '+options.animateClose+' fast');
setTimeout(function(){
target.width(0).height(0);
options.onClose.call(target);
},500);
}else {
target.width(0).height(0);
options.onClose.call(target);
}
return target;
};
var _destory = function (target, forceDestroy) {
var options = $.data(target[0], _cacheName).options;
if (forceDestroy != true) {
if (options.onBeforeDestroy.call(target) == false) {
return;
}
}
var content = target.uiPanel($.uiTemplate.panel.content);
content.destroyIframe();
target.remove();
options.onDestroy.call(target);
};
var _contentBorder = function (target, showBorder, borderWidth) {
if (showBorder) {
target.css('borderWidth', borderWidth);
} else {
target.css('borderWidth', 0);
}
};
var _collapsed = function (target, animate) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var header = $.getByParentID(targetID, $.uiTemplate.panel.header);
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
if (options.collapsed == true) {
return;
}
content.stop(true, true);
if (options.onBeforeCollapse.call(target) == false) {
return;
}
if (animate == true) {
target.animate({height: header.outerHeight()}, 'fast', function () {
_collControl(target, options, true);
options.onCollapse.call(target);
});
} else {
target.outerHeight(header.outerHeight());
_collControl(target, options, true);
options.onCollapse.call(target);
}
};
var _expand = function (target, animate) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
if (options.collapsed == false) {
return;
}
content.stop(true, true);
if (options.onBeforeExpand.call(target) == false) {
return;
}
if (animate == true) {
target.animate({height: options.height}, 'fast', function () {
options.collapsed = false;
options.onExpand.call(target);
});
} else {
target.outerHeight(options.height);
_collControl(target, options, false);
options.onExpand.call(target);
}
};
var _collControl = function (target, options, coll) {
var targetID = target.getElemID();
var content = $.getByParentID(targetID, $.uiTemplate.panel.content);
var btnbar = $.getByParentID(targetID, $.uiTemplate.panel.buttonbar);
var resizeHand = $.getByParentID(targetID, $.uiTemplate.panel.resizeHand);
var objs = content.find('OBJECT,IFRAME').length;
if (coll) {
btnbar.hide();
resizeHand.hide();
if (objs == 0) {
content.hide();
} else {
content.width(0).height(0);
}
content.attr('closed', true);
options.collapsed = true;
} else {
btnbar.show();
resizeHand.show();
if (objs == 0) {
content.show();
}
content.attr('closed', false);
content.autoFit(true, false);
options.collapsed = false;
_contentChildrenResize(content);
}
};
var _contentChildrenResize = function (content) {
content.children().each(function () {
var elem = $(this);
elem.triggerHandler('_resize');
});
}
})(jQuery);
/**
* Created by jinxs on 14-6-25.
* 依赖
* ui.core.js
* ui.position.js
* ui.panel.js
*/
(function ($) {
/**
* @class 消息提示组件
* @constructor uiMessagetip
* @type {{show: Function}}
*/
$.uiMessagetip = {
show: function (options, param) {
options = options || {};
options = $.extend({}, $.uiMessagetip.defaults, options);
options.title = options.title || '提示';
_show(options);
}
};
/**
* 默认配置
* @lends uiMessagetip.prototype
*/
$.uiMessagetip.defaults = {
/**
* @type String
* @default ui_panel_primary
* @summary 指示组件的面板风格
*/
panelStyle: 'ui_panel_primary',
showHeader: true,
/**
* @type String
* @default ""
* @summary 指示组件的标题
*/
title: '',
/**
* @type String
* @default ""
* @summary 指示组件的内容
*/
content: '',
/**
* @type Number
* @default 200
* @summary 指示组件的宽度
*/
width: 200,
/**
* @type Number
* @default 100
* @summary 指示组件的高度
*/
height: 120,
/**
* @type Number
* @default 0
* @summary 与容器之间的间隔
*/
padding: 0,
/**
* @type Boolean
* @default true
* @summary 指示组件是否有动画效果
*/
animate: true,
/**
* @type Boolean
* @default true
* @summary 指示组件是否固定
*/
fixed: true,
/**
* @type Object
* @default $(document.body)
* @summary 指示组件的父容器
*/
container: $(document.body),
/**
* @type String
* @default bottom
* @summary 指示组件的垂直位置
*/
vertical: 'bottom',
/**
* @type String
* @default right
* @summary 指示组件的水平位置
*/
horizontal: 'right',
/**
* @type Number
* @default 3000
* @summary 指示组件的延时关闭时间
*/
timeout: 3000,
/**
* @event
* @name uiMessagetip#onClose
* @type function
* @default function () { }
* @summary 指示组件的关闭事件
*/
onClose: function () {
}
, zIndex: 99999
}
var _close = function (messagebox, handler) {
handler ? handler() : jQuery.noop();
messagebox.remove();
};
var _show = function (options) {
var onClose = options.onClose;
var messageBox = $('').appendTo(options.container).hide();
var msgboxWidth = options.width || 200;
var msgboxHeight = options.height || 120;
var cont='';
if ($.fn.uiPanel) {
messageBox.uiPanel({
zIndex: options.zIndex,
icon: 'messagebox',
width: msgboxWidth,
height: msgboxHeight,
closable: true,
showHeader: options.showHeader,
title: options.title,
content: cont,
onClose: function () {
_close(messageBox, onClose);
}
});
}
messageBox.addClass(options.panelStyle + " ui_messagetip");
if (!options.showHeader) {
var divContent = messageBox.uiPanel("content");
var btnClose = $('' +
'')
.setIDByParentID(messageBox[0].id, $.uiTemplate.panel.btnClose).appendTo(divContent);
btnClose.bind("click", function () {
messageBox.uiPanel("close");
});
switch (options.panelStyle) {
case "ui_panel_primary":
divContent.addClass("content_primary");
break;
case "ui_panel_success":
divContent.addClass("content_success");
break;
case "ui_panel_info":
divContent.addClass("content_info");
break;
case "ui_panel_warning":
divContent.addClass("content_warning");
break;
case "ui_panel_danger":
divContent.addClass("content_danger");
break;
}
}
messageBox
.bind("keydown.messagebox", function (event) {
if (event.which == $.keyCode.ESCAPE) {
_close(messageBox, onClose);
}
}).hide();
if (!options.animate || (_IE && _IEunder6)) {
messageBox.uiPosition({
horizontal: options.horizontal,
vertical: options.vertical,
container: options.container,
fixed: options.fixed
}).show();
} else {
switch (options.vertical) {
case 'top':
messageBox.uiPosition({
horizontal: options.horizontal,
vertical: options.vertical,
container: options.container,
fixed: options.fixed
}).show();
var top = parseInt(messageBox.css('top')) + options.padding;
messageBox.css({top: top - messageBox.height(), opacity: 0});
if(options.horizontal=="left"){
messageBox.animate({top: top,left:options.padding, opacity: 1}, 600);
}else{
messageBox.animate({top: top,right:options.padding, opacity: 1}, 600);
}
break;
case 'center':
messageBox.uiPosition({
horizontal: options.horizontal,
vertical: options.vertical,
container: options.container,
fixed: options.fixed
}).fadeIn();
break;
case 'bottom':
messageBox.uiPosition({
horizontal: options.horizontal,
vertical: options.vertical,
container: options.container,
fixed: options.fixed
}).show();
var top = parseInt(messageBox.css('top')) - options.padding;
messageBox.css({top: top + messageBox.height(), opacity: 0});
if(options.horizontal=="left"){
messageBox.animate({top: top,left:options.padding, opacity: 1}, 600);
}else{
messageBox.animate({top: top,right:options.padding, opacity: 1}, 600);
}
break;
}
}
var timer;
function timeout(time) {
timer = setInterval(function () {
if (!options.animate || (_IE && _IEunder6)) {
_close(messageBox, onClose);
} else {
switch (options.vertical) {
case 'top':
var tmp_top = parseInt(messageBox.css('top'));
messageBox.animate({top: tmp_top - messageBox.height(), opacity: 0}, function () {
_close(messageBox, onClose);
});
break;
case 'center':
messageBox.fadeOut(function () {
_close(messageBox, onClose);
});
break;
case 'bottom':
var tmp_top = parseInt(messageBox.css('top'));
messageBox.animate({top: tmp_top + messageBox.height(), opacity: 0}, function () {
_close(messageBox, onClose);
});
break;
}
}
clearInterval(timer);
}, time);
}
if (options.timeout > 0) { //定时关闭
timeout(options.timeout);
}
messageBox.bind('mouseover', function () {
clearInterval(timer);
}).bind('mouseout', function () {
if (timer) {
timeout(options.timeout);
}
});
$(window).bind("resize", function () {
if (messageBox.width > 0 && messageBox.height > 0) {
messageBox.uiPosition({
horizontal: options.horizontal,
vertical: options.vertical,
container: options.container,
fixed: options.fixed
});
}
});
};
})(jQuery);
/**
* Created by jinxs on 14-6-25.
* 依赖
* ui.core.js
* ui.button.js
* ui.buttonbar.js
* ui.draggable.js
* ui.resizable.js
* ui.position.js
* ui.panel.js
*/
(function ($) {
/**
* @class 消息框组件
* @constructor uiMessagebox
* @type {{alert: Function, confirm: Function, prompt: Function}}
*/
$.uiMessagebox = {
/**
* @summary 显示提示消息框
* @name uiMessagebox#alert
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
alert: function (options, param) {
options = options || {};
options = $.extend({}, $.uiMessagebox.defaults, options);
options.title = options.title || '提示';
options.type = options.type || 'alert';
_show(options);
},
/**
* @summary 显示确认消息框
* @name uiMessagebox#confirm
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
confirm: function (options, param) {
options = options || {};
options = $.extend({}, $.uiMessagebox.defaults, options);
options.title = options.title || '确认';
options.type = 'confirm';
_show(options);
},
/**
* @summary 显示输入提示消息框
* @name uiMessagebox#confirm
* @function
* @param options {Object} 组件的配置对象
* @returns {jQuery} 组件对象
*/
prompt: function (options, param) {
options = options || {};
options = $.extend({}, $.uiMessagebox.defaults, options);
options.title = options.title || '请输入';
options.type = 'prompt';
_show(options);
}
};
/**
* 默认配置
* @lends uiMessagebox.prototype
*/
$.uiMessagebox.defaults = {
/**
* @type String
* @default alert
* @summary 指示消息框的类型
*/
type: 'alert',
/**
* @type String
* @default ""
* @summary 指示消息框的标题
*/
title: '',
maskID: 'mask',
/**
* @type String
* @default ""
* @summary 指示消息框的内容
*/
content: '',
/**
* @type Boolean
* @default true
* @summary 指示消息框是否有动画效果
*/
animate: true,
/**
* @type Number
* @default 2000
* @summary 消息框动画持续的时间
*/
timeout: 2000,
/**
* @type Object
* @default $(document.body)
* @summary 指示消息框打开后遮罩的范围
*/
container: $(document.body),
/**
* @type Number
* @default null
* @summary 消息框的宽度
*/
width: null,
/**
* @type Number
* @default null
* @summary 消息框的高度
*/
height: null,
/**
* @type Boolean
* @default true
* @summary 指示消息框是否可拖拽
*/
draggable: false,
maximizable: false,
zIndex: 889,
/**
* @event
* @name uiMessagebox#onClose
* @type function
* @default function () { }
* @summary 指示消息框关闭事件
*/
onClose: function () {
}
};
var timer;
var _close = function (options, messageBox, mask, handler, value) {
timer && clearInterval(timer);
timer = null;
handler ? handler(value) : jQuery.noop();
messageBox.remove();
$.uiMask.remove({container: options.container, maskID: options.maskID});
};
var _show = function (options) {
var palID = 'msgBox_' + guidGenerator();
options.maskID = palID + '-' + options.maskID;
var onClose = options.onClose;
var mask = $.uiMask.show({container: options.container, zIndex: options.zIndex, maskID: options.maskID});
var okbtnHtml = $('');
var cancelbtnHtml = $('');
cancelbtnHtml.uiButton({
onClick: function () {
_close(options, messageBox, mask, onClose, false);
}
});
var msgboxWidth = 0;
var msgboxHeight = 0;
if ($.fn.uiButton) {
switch (options.type) {
case 'confirm':
msgboxWidth = options.width || 300;
msgboxHeight = options.height || 100;
okbtnHtml.uiButton({
onClick: function () {
_close(options, messageBox, mask, onClose, true);
}
});
break;
case 'prompt':
msgboxWidth = options.width || 250;
msgboxHeight = options.height || 120;
okbtnHtml.uiButton({
onClick: function () {
var returnValue = onClose ? onClose($('#' + inputID).val()) : jQuery.noop();
if (!returnValue) {
messageBox.remove();
mask.remove();
}
}
});
break;
default:
msgboxWidth = options.width || 250;
msgboxHeight = options.height || 100;
okbtnHtml.uiButton({
onClick: function () {
_close(options, messageBox, mask, onClose, true);
}
});
if (options.timeout > 0 && options.type != 'error') { //定时关闭
timeout(options.timeout);
}
}
}
var input = '';
var inputID = guidGenerator();
if (options.type == 'prompt') {
input = '
';
}
var content = ' | ' +
'' + options.content + input + ' |
';
var messageBox = $('').appendTo(options.container).hide().uiPanel({
id: palID,
zIndex: options.zIndex + 1,
icon: 'messagebox',
draggable: options.draggable,
maximizable: options.maximizable,
maxPadding: [10, 10, 10, 10],
showBtnBar: true,
width: msgboxWidth,
height: msgboxHeight,
closable: true,
title: options.title,
content: content,
onClose: function () {
_close(options, messageBox, mask, onClose, false);
}
});
var btnbars = messageBox.uiPanel('buttonbar');
okbtnHtml.appendTo(btnbars);
switch (options.type) {
case 'alert':
messageBox.addClass('ui_panel_primary');
break;
case 'success':
messageBox.addClass('ui_panel_success');
okbtnHtml.addClass('button_success');
break;
case 'error':
messageBox.addClass('ui_panel_danger');
okbtnHtml.addClass('button_cancel');
okbtnHtml.uiButton('setIcons', {left: 'icon_close'});
okbtnHtml.uiButton('setLabel', '关闭');
break;
case 'question':
messageBox.addClass('ui_panel_info');
break;
case 'warning':
messageBox.addClass('ui_panel_warning');
okbtnHtml.addClass('button_warning');
break;
case 'confirm':
messageBox.addClass('ui_panel_primary');
okbtnHtml.addClass('button_submit');
cancelbtnHtml.appendTo(btnbars);
break;
case 'prompt':
messageBox.addClass('ui_panel_primary');
okbtnHtml.addClass('button_submit');
cancelbtnHtml.appendTo(btnbars);
break;
default:
messageBox.addClass('ui_panel_primary');
break;
}
messageBox.bind("keydown.messagebox", function (event) {
if (event.which == $.keyCode.ESCAPE) {
_close(options, messageBox, mask, onClose, false);
}
}).fadeIn().uiPosition({
horizontal: 'center',
vertical: 'center',
container: options.container,
fixed: false
});
$(window).bind("resize", function () {
if (mask.is(':visible')) {
messageBox.uiPosition({
horizontal: 'center',
vertical: 'center',
container: options.container,
fixed: options.fixed
});
}
});
function timeout(time) {
timer && clearInterval(timer);
timer = setInterval(function () {
if (!options.animate || _IEunder6) {
_close(options, messageBox, mask, onClose, false);
} else {
messageBox.fadeOut(function () {
_close(options, messageBox, mask, onClose, false);
});
}
clearInterval(timer);
timer = null;
}, time);
}
messageBox.bind('mouseover', function () {
timer && clearInterval(timer);
timer = null;
}).bind('mouseout', function () {
if (options.timeout > 0 && options.type != 'error') { //定时关闭
timeout(options.timeout);
}
});
okbtnHtml.focus();
};
})(jQuery);
/**
* Created by jinxs on 14-6-25.
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiDialog';
/**
* @class 对话框
* @extends uiPanel
* @requires {@link uiPanel}
* @constructor uiDialog
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* // 构件组件
* $('#divDialog').uiDialog({title: '面板测试', width: 160, height: 500});
* // 调用组件方法open
* $('#divDialog').uiDialog("open");
*/
$.fn.uiDialog = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiDialog.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiDialog.defaults, $.fn.parseUIConfig(me, null), options)
});
}
_init(me);
});
};
$.fn.uiDialog.methods = $.extend({}, $.fn.uiPanel.methods,
/**
* 方法
* @lends uiDialog.prototype
*/
{
/**
* @summary 打开对话框
* @name uiDialog#open
* @function
* @param [opts] {Object} 配置对象,具有属性forceOpen、horizontal、vertical,url
* @returns {jQuery} 方法调用者
*/
open: function (target, opts) {
opts = opts || {};
var options = $.data(target[0], _cacheName).options;
var palOpts = target.uiPanel('options');
var id = '#' + target.attr('id');
palOpts = $.extend(palOpts, opts);
if (palOpts.maximized) {
target.width(palOpts.width).height(palOpts.height);
setPos();
palOpts.left = parseInt(target.css('left'));
palOpts.top = parseInt(target.css('top'));
target.uiPanel('open', palOpts.forceOpen);
setPos();
}
else {
target.uiPanel('open', palOpts.forceOpen);
setPos();
palOpts.left = parseInt(target.css('left'));
palOpts.top = parseInt(target.css('top'));
}
function setPos() {
target.uiPosition({
horizontal: palOpts.horizontal == undefined ? 'center' : palOpts.horizontal,
vertical: palOpts.vertical == undefined ? 'center' : palOpts.vertical,
container: options.maskContainer,
fixed: false
});
}
return target;
},
/**
* @summary 关闭对话框
* @name uiDialog#close
* @function
* @param forceClose {Boolean} 是否强制关闭(忽略onBeforeClose事件返回的false)
* @returns {jQuery} 方法调用者
*/
close: function (target, forceClose) {
var options = $.data(target[0], _cacheName).options;
var id = '#' + target.attr('id');
target.uiPanel('close', forceClose);
return target;
},
/**
* @summary 添加对话框按钮
* @name uiDialog#buttonbar
* @function
* @param buttonConfig {Array} 按钮配置列表
* @returns {jQuery} 方法调用者
*/
buttonbar: function (target, buttonConfig) {
_renderBtnbar(target, buttonConfig);
return target;
},
/**
* @summary 获取对话框按钮对象
* @name uiDialog#button
* @param buttonID {String} 按钮ID
* @function
* @returns {jQuery} 按钮
*/
button: function (target, buttonID) {
return $('#' + buttonID);
},
/**
* TODO:
* @summary setUserParam
* @name uiDialog#setUserParam
* @function
* @returns {jQuery} 方法调用者
*/
setUserParam: function (target, userparam) {
return target.each(function(){
$.data(this, _cacheName).options.userParam = userparam;
});
},
/**
* TODO:
* @summary getUserParam
* @name uiDialog#getUserParam
* @function
* @returns {Object} 按钮
*/
getUserParam: function (target, userparam) {
var options = $.data(target[0], _cacheName).options;
return options.userParam;
}
});
$.fn.uiDialog.defaults = $.extend({}, $.fn.uiPanel.defaults,
/**
* 默认配置
* @lends uiDialog.prototype
*/
{
/**
* @type String
* @default ui_panel
* @summary 对话框面板样式
*/
panelStyle: 'ui_panel',
/**
* @type Array
* @default [15,15,15,15]
* @summary 组件最大化时与父容器的间距(上、左、下、右)
*/
maxPadding: [15, 15, 15, 15],
/**
* @type Boolean
* @default true
* @summary 对话框是否可拖动
*/
draggable: true,
/**
* @type Boolean
* @default true
* @summary 对话框是否可改变大小
*/
resizable: true,
/**
* @type Boolean
* @default true
* @summary 对话框是否可关闭
*/
closable: true,
/**
* @type Boolean
* @default true
* @summary 对话框是否可最大化
*/
maximizable: true,
/**
* @type Boolean
* @default false
* @summary 对话框是否包含遮罩
*/
mask: false,
/**
* @type jQuery
* @default $("body")
* @summary 对话框遮罩范围对象
*/
maskContainer: null,
/**
* @type Array
* @default []
* @summary 对话框按钮配置对象列表
*/
buttons: []
, zIndex: 888
});
//////--------------------------------内部方法------------------------------
/**
* 创建按钮
* @param target 目标对象
*/
var _init = function (target) {
var options = $.data(target[0], _cacheName).options;
var content = target.children();//.detach(); // detach 后无法在uiPanel中显示
var btnVisible = false;
var btnLen = options.buttons.length;
target.addClass('ui_dialog');
if (options.maskContainer == null) {
options.maskContainer = target.parent();
}
if (btnLen > 0) {
btnVisible = true;
}
var id = '#' + target.attr('id');
var maskID = target.getElemID() + '-dialog_mask';
function showMask() {
if (options.mask) {
$.uiMask.show({
container: options.maskContainer,
maskID: maskID,
zIndex: options.zIndex - 1,
excludeSelector: id
});
}
}
function hideMask() {
if (options.mask) {
$.uiMask.hide({container: options.maskContainer, maskID: maskID, excludeSelector: id});
}
}
target.uiPanel($.extend({}, options, {
showBtnBar: btnVisible || options.showBtnBar,
closed: true,
content: content,
onBeforeOpen: function () {
options.onBeforeOpen.call(target);
showMask();
},
onClose: function () {
options.onClose.call(target);
hideMask();
}
}));
$(window).bind("resize", function () {
if (target.attr('closed') == 'false') {
target.uiPosition({horizontal: 'center', vertical: 'center', container: options.maskContainer});
}
});
return target;
};
})(jQuery);/**
* Created by jinxs on 14-7-11.
* 基于easyui.pagination源码
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiPagination';
/**
* @class 分页组件
* @constructor uiPagination
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* //采用默认值
* $('#pag').uiPagination();
* //设置组件参数
* $('#pag').uiPagination({total:'1',pageSize:'20'});
* //调用组件方法
* $('#pag').uiPagination('refresh',[options]);
*/
$.fn.uiPagination = function (options, param) {
if (this.length > 0 && typeof options == "string") {
return $.fn.uiPagination.methods[options](this.first(), param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiPagination.defaults, me.parseUIConfig(), options)
});
}
_init(me);
_calc(me);
});
};
/**
* 方法
* @lends uiAccordion.prototype
*/
$.fn.uiPagination.methods = {
/**
* @summary 获得组件的配置对象
* @name uiPagination#options
* @function
* @returns {Object} 组件的配置对象
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* @summary 在组件加载时触发的方法。
* @event
* @name uiPagination#loading
* @this 组件jQuery对象
* @default function (target)
*/
loading: function (target) {
_loadState(target, true);
return target;
},
/**
* @summary 在组件加载完触发的方法。
* @event
* @name uiPagination#loaded
* @this 组件jQuery对象
* @default function (target)
*/
loaded: function (target) {
_loadState(target, false);
return target;
},
/**
* @summary 在组件刷新时触发的方法。
* @event
* @name uiPagination#refresh
* @this 组件jQuery对象
* @default function (target)
*/
refresh: function (target, options) {
_calc(target, options);
return target;
},
/**
* @summary 在选择数据时触发的方法。
* @event
* @name uiPagination#refresh
* @this 组件jQuery对象
* @default function (target)
*/
select: function (target, pageIndex) {
_selectPageEvent(target, pageIndex);
return target;
}
};
/**
* 默认配置
* @lends uiPagination.prototype
*/
$.fn.uiPagination.defaults = {
/**
* @type Number
* @default 1
* @summary 指示记录总数
*/
total: 0,
/**
* @type Number
* @default 20
* @summary 指示组件的页面大小
*/
pageSize: 20,
/**
* @type Array
* @default 1
* @summary 指示组件的起始页
*/
pageIndex: 1,
/**
* @type Array
* @default [10,20,30,50]
* @summary 指示组件的页面大小选择项
*/
pageList: [10, 20, 30, 50],
/**
* @type Boolean
* @default true
* @summary 指示组件是否加载数据
*/
loading: false,
/**
* @type Boolean
* @default true
* @summary 指示组件是否显示页数列表
*/
showPageList: true,
/**
* @type Boolean
* @default true
* @summary 指示组件是否显示刷新
*/
showRefresh: true,
/**
* @type String
* @default ""
* @summary 指示组件显示的消息
*/
displayMsg: '',
/**
* @type String
* @default ""
* @summary 指示组件页数之前显示的文本
*/
beforePageText: '',
/**
* @type String
* @default ""
* @summary 指示组件页数之后显示的文本
*/
afterPageText: '',
/**
* @summary 在选择页数时触发的方法。
* @event
* @name uiPagination#onSelectPage
* @this 组件jQuery对象
* @default emptyFn
*/
onSelectPage: function (pageIndex, pageSize) {
},
/**
* @summary 在组件刷新之前触发的方法。
* @event
* @name uiPagination#onBeforeRefresh
* @this 组件jQuery对象
* @default emptyFn
*/
onBeforeRefresh: function (pageIndex, pageSize) {
},
/**
* @summary 在组件刷新时触发的方法。
* @event
* @name uiPagination#onRefresh
* @this 组件jQuery对象
* @default emptyFn
*/
onRefresh: function (pageIndex, pageSize) {
},
/**
* @summary 在页面大小发生变化时触发的方法。
* @event
* @name uiPagination#onChangePageSize
* @this 组件jQuery对象
* @default emptyFn
*/
onChangePageSize: function (pageSize) {
}
};
var _init = function (target) {
var cache = $.data(target[0], _cacheName);
var options = cache.options;
target.setElemID().addClass('ui_pagination');
var targId = target.getElemID();
var reg=new RegExp('({pageID})','g');
target.html($($.uiTemplate.pagination.replace(reg, targId)).html());
var pageInput = $.getByParentID(targId, 'input');
var sel_pagesize = $.getByParentID(targId, 'pagesize');
var btnFirst = $.getByParentID(targId, 'first');
var btnPrev = $.getByParentID(targId, 'prev');
var btnNext = $.getByParentID(targId, 'next');
var btnLast = $.getByParentID(targId, 'last');
var btnLoad = $.getByParentID(targId, 'load');
var pagination_info = $.getByParentID(targId, 'info');
var pagination_after = $.getByParentID(targId, 'after');
sel_pagesize.bind("change", function () {
options.pageSize = parseInt($(this).val());
options.onChangePageSize.call(target, options.pageSize);
//_selectPageEvent(target, options.pageIndex);
});
for (var i = 0; i < options.pageList.length; i++) {
$("").text(options.pageList[i]).appendTo(sel_pagesize);
}
pageInput.unbind(".pagination").bind("keydown.pagination", function (e) {
if (e.keyCode == $.keyCode.ENTER) {
var pageIndex = parseInt($(this).val()) || 1;
_selectPageEvent(target, pageIndex);
return false;
}
});
btnFirst.unbind('.pagination').bind('click.pagination', function () {
if(btnFirst.attr('disabled')){
return;
}
_selectPageEvent(target, 1);
});
btnPrev.unbind('.pagination').bind('click.pagination', function () {
if(btnPrev.attr('disabled')){
return;
}
if (options.pageIndex > 1) {
_selectPageEvent(target, options.pageIndex - 1);
}
});
btnNext.unbind('.pagination').bind('click.pagination', function () {
if(btnNext.attr('disabled')){
return;
}
var pageCount = Math.ceil(options.total / options.pageSize);
if (options.pageIndex < pageCount) {
_selectPageEvent(target, options.pageIndex + 1);
}
});
btnLast.unbind('.pagination').bind('click.pagination', function () {
if(btnLast.attr('disabled')){
return;
}
var pageCount = Math.ceil(options.total / options.pageSize);
if (options.pageIndex < pageCount) {
_selectPageEvent(target, pageCount);
}
});
btnLoad.unbind('.pagination').bind('click.pagination', function () {
if (options.onBeforeRefresh.call(this, options.pageIndex, options.pageSize) != false) {
_selectPageEvent(target, options.pageIndex);
options.onRefresh.call(target, options.pageIndex, options.pageSize);
}
});
options.displayMsg = pagination_info.html();
options.afterPageText = pagination_after.html();
};
var _selectPageEvent = function (target, pageIndex) {
var cache = $.data(target[0], _cacheName).options;
_calc(target, {pageIndex: pageIndex});
cache.onSelectPage.call(target, cache.pageIndex, cache.pageSize);
};
var _calc = function (target, opts) {
var cache = $.data(target[0], _cacheName);
var targId=target.getElemID();
var options = cache.options;
$.extend(options, opts || {});
var sel_pagesize = $.getByParentID(targId, 'pagesize');
if (sel_pagesize.length) {
sel_pagesize.val(options.pageSize + "");
options.pageSize = parseInt(sel_pagesize.val());
}
var pageindex = Math.ceil(options.total / options.pageSize) || 1;
if (options.pageIndex < 1) {
options.pageIndex = 1;
}
if (options.pageIndex > pageindex) {
options.pageIndex = pageindex;
}
var pageInput = $.getByParentID(targId, 'input');
pageInput.val(options.pageIndex);
var pagination_info = $.getByParentID(targId, 'info');
var displayMsg = options.displayMsg;
displayMsg = displayMsg.replace(/{from}/, options.total == 0 ? 0 : options.pageSize * (options.pageIndex - 1) + 1);
displayMsg = displayMsg.replace(/{to}/, Math.min(options.pageSize * (options.pageIndex), options.total));
displayMsg = displayMsg.replace(/{total}/, options.total);
pagination_info.html(displayMsg);
var pagination_after = $.getByParentID(targId, 'after');
var pages = options.afterPageText;
pages = pages.replace(/{pages}/, Math.ceil(options.total / options.pageSize));
pagination_after.html(pages);
var btnFirst = $.getByParentID(targId, 'first');
var btnPrev = $.getByParentID(targId, 'prev');
var btnNext = $.getByParentID(targId, 'next');
var btnLast = $.getByParentID(targId, 'last');
btnFirst.attr('disabled', (options.pageIndex == 1));
btnPrev.attr('disabled', (options.pageIndex == 1));
btnNext.attr('disabled', (options.pageIndex == pageindex));
btnLast.attr('disabled', (options.pageIndex == pageindex));
_btnDisabled(btnFirst);
_btnDisabled(btnPrev);
_btnDisabled(btnNext);
_btnDisabled(btnLast);
_loadState(target, options.loading);
};
var _loadState = function (target, loading) {
var cache = $.data(target[0], _cacheName);
var options = cache.options;
options.loading = loading;
var btnLoad = $.getByParentID(target.getElemID(), 'load');
if (options.showRefresh && btnLoad) {
if (options.loading) {
btnLoad.removeClass('ui_pagination_load').addClass('ui_pagination_loading');
}
else {
btnLoad.removeClass('ui_pagination_loading').addClass('ui_pagination_load');
}
}
};
var _btnDisabled = function (target) {
if (target.attr('disabled')) {
target.addClass('iconDisabled');
} else {
target.removeClass('iconDisabled');
}
}
})(jQuery);
/**
* Created by jinxs on 14-7-4.
*依赖
* ui.mask.js
* ui.loading.js
* ui.position.js
* ui.panel.js
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiGrid';
var _idFieldName = 'idField';
/**
* @class 表单-基类
* @requires {@link panel}
* @constructor uiGrid
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* // 构件组件
* $('#selectAge').uiGrid({direction: 'left'});
* // 调用组件方法options
* $('#selectAge').uiGrid("options");
*/
$.fn.uiGrid = function (options, param) {
if (this.length > 0 && typeof options == 'string') {
return $.fn.uiGrid.methods[options](this.first(), param);
}
return this.each(function () {
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
var opts = $.extend(true, {}, $.fn.uiGrid.defaults, me.parseUIConfig(), options);
me.data(_cacheName, {options: opts});
}
_init(me);
});
};
/**
* 方法
* @lends uiGrid.prototype
*/
$.fn.uiGrid.methods = {
/**
* @summary 获取所有配置
* @name uiGrid#options
* @function
* @param target {jQuery}
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
}
/**
* @summary 获取grid的数据源
* @name uiGrid#gridData
* @function
* @param target {jQuery}
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
, gridData: function (target) {
return $.data(target[0], _cacheName).options.gridData;
}
/**
* @summary 加载数据
* @name uiGrid#loadData
* @function
* @param target {jQuery}
* @param opts {String}
* @returns {Array}
*/
, loadData: function (target, opts) {
var options = $.data(target[0], _cacheName).options;
$.extend(true, options, opts);
var palContent = target.uiPanel('content');
var grid_data = palContent.children('.grid_data');
_renderGridBody(target, palContent, grid_data);
}
/**
* @summary 设置数据并加载
* @name uiGrid#setData
* @function
* @param target {jQuery}
* @param data {String}
* @returns {jQuery} target
*/
, setData: function (target, data) {
var palContent = target.uiPanel('content');
var grid_data = palContent.children('.grid_data');
_getData(target, palContent, grid_data, data);
return target;
}
/**
* @summary获取工具栏
* @name uiGrid#toolbar
* @function
* @param target {jQuery}
* @param opts {String}
* @returns {Array}
*/
, toolbar: function (target) {
var palContent = target.uiPanel('content');
return palContent.children('.grid_toolbar');
}
/**
* @summary 获取已选择的数据信息
* @name uiGrid#selectedData
* @function
* @param target {jQuery}
* @param field {String} 用于筛选要返回的字段名
* @returns {Array}
*/
, selectedData: function (target, field) {
var options = target.data(_cacheName).options;
var selectedRows = options._selectedRows;
var cacheData = options._cacheData.rows;
var data = [];
if (selectedRows.length > 0) {
$.each(selectedRows, function (i, n) {
if (!field) {
data[i] = cacheData[n];
}
else {
data[i] = cacheData[n][field];
}
});
}
return data;
}
/**
* @summary 获取表格指定列的样式定义
* @name uiGrid#getColumnStyle
* @function
* @param target {jQuery}
* @param columnIndex {Number} 指定列,从0开始
* @returns {CSSStyleDeclaration} 表格指定列的样式定义或null
*/
, getColumnStyle: function (target, columnIndex) {
var options = target.data(_cacheName).options;
return options._colStyles[columnIndex];
}
};
/**
* 默认配置
* @lends uiGrid.prototype
*/
$.fn.uiGrid.defaults = {
/**
* @type Boolean
* @default false
* @summary 指示组件是否只设置样式(应用于已经生成好数据表的情况)
*/
onlyStyle: false,
/**
* @type Boolean
* @default false
* @summary 指示组件是否自动适应
*/
autoFit: false,
/**
* 表格的列宽在初始化时会根据内容进行计算(除非在表头的列指定了固定宽度,
* 此时若该列包含样式auto-width,则固定宽度可以为百分比且该列的宽度会再根据表格整体宽度进行比例缩放)。
* @type Boolean
* @default false
* @summary 指示表格列宽是否适应
*/
colFit: false,
/**
* @type Boolean
* @default false
* @summary 指示表格列宽是否一直适应
*/
colFitAllTime: false,
/**
* @type Boolean
* @default false
* @summary 指示表格标题是否固定
*/
gridTitleFix: false,
/**
* @type Boolean
* @default true
* @summary 指示组件是否显示边框
*/
border: true,
/**
* @type String
* @default ""
* @summary 指示组件图标
*/
icon: '',
/**
* @type String
* @default ""
* @summary 指示组件标题
*/
title: '',
/**
* @type Number
* @default 400
* @summary 指示组件宽度
*/
width: 0,
/**
* @type Number
* @default 300
* @summary 指示组件高度
*/
height: 0,
/**
* @type Boolean
* @default true
* @summary 指示组件是否显示标题栏
*/
showHeader: true,
/**
* @type String
* @default ""
* @summary 为组件加载的提示信息
*/
loadMsg: '',
/**
* @type String
* @default null
* @summary 为组件加载数据
*/
localData: null,
/**
* @type Boolean
* @default false
* @summary 是否延迟加载远程数据
*/
lazyLoad: false,
/**
* @type String
* @default id
* @summary 指示组件信息主键的字段名
*/
idField: 'id',
/**
* 可选值有get, post
* @type String
* @default "post"
* @summary 向指定的url请求数据时使用的方法
*/
method: 'get',
/**
* @type String
* @default ""
* @summary 指定远程数据加载的url
*/
url: '',
tpl_head: '',
tpl_body: '',
/**
* @type Object
* @default {}
* @summary 指示组件的请求参数
*/
queryParams: {},
defaultSortField:'',
defaultOrder:'desc',
paramSort:'orderField',
paramOrder:'descended',
paramPageIndex:'pageIndex',
paramPageSize:'pageSize',
/**
* @type Number
* @default 1
* @summary 指示组件是的起始页
*/
pageIndex: 1,
/**
* @type Number
* @default 20
* @summary 指示组件的页面大小
*/
pageSize: 20,
/**
* @type Array
* @default [20, 40, 50, 100, 200]
* @summary 指示组件的页面大小选择项
*/
pageList: [20, 40, 50, 100, 200],
/**
* @summary 在行选择时触发的方法。
* @event
* @name uiGrid#onSelectRow
* @this 组件jQuery对象
* @default null
*/
onSelectRow: function (selectedIndexs, selectedIds) {
},
/**
* @type Boolean
* @default false
* @summary 加载数据时是否自动选择上一次选中的行
*/
autoSelectedOnLoad: false,
/**
* @type Boolean
* @default true
* @summary 指示组件是否支持行多选
*/
multiSelect: true,
/**
* @type Boolean
* @default true
* @summary 指示组件的列是否可调整大小
*/
colResizable: true,
/**
* @type Number
* @default 0
* @summary 指示组件的最小列宽
*/
minColWidth: 0,
/**
* @type Number
* @default 1000
* @summary 指示组件的最大列宽
*/
maxColWidth: 1000,
/**
* @type Boolean
* @default true
* @summary 指示数据加载完全时组件是否可本地排序
*/
localSortable: false,
_cacheData: {},
_selectedRows: [],
_colStyles: [],
selectedIds: [],
/**
* @event
* @name uiGrid#dataFilter
* @type function
* @default function () { return data;}
* @summary 数据过滤
*/
dataFilter:function(data){
return data;
},
/**
* @event
* @name uiGrid#onBeforeLoad
* @type function
* @default function () { }
* @summary 设置组件加载数据之前的事件
*/
onBeforeLoadData: function () {
}
/**
* @event
* @name uiGrid#onLoadError
* @type function
* @default function () { }
* @summary 设置组件加载数据失败的事件
*/
, onLoadDataError: function () {
}
/**
* @event
* @name uiGrid#onLoadComplete
* @type function
* @default function () { }
* @summary 设置组件加载数据完成的事件
*/
, onLoadDataSuccess: function (result) {
}
};
//////--------------------------------内部方法------------------------------
/**
* 初始化
* @param target 目标对象
*/
var _init = function (target) {
var options = target.data(_cacheName).options;
target.addClass('grid');
var onlyStyle = options.onlyStyle;
var grid_data = target.children('table.grid_data').wrap('').parent();
var content;
var palContent;
grid_data.find('tbody tr:first-child').children().each(function (i) {
$(this).addClass('col_' + i);
});
options.tpl_head = $('thead', grid_data).html();
options.tpl_body = $('tbody', grid_data).html();
grid_data.empty();
content = target.children().detach();
target.uiPanel({
autoFit: options.autoFit,
icon: options.icon,
title: options.title,
width: options.width,
height: options.height,
border: options.border,
minWidth: 0,
minHeight: 0,
showHeader: options.showHeader,
showBtnBar: false
});
palContent = target.uiPanel('content').append(content);
$.uiLoading.add({
container: palContent,
text: options.loadMsg || $.uiLoading.defaults.text
});
if (!onlyStyle) {
_renderTpl(target);
}
_renderToolbar(palContent);
_renderPagination(target, palContent, grid_data);
_renderGridStyle(target, grid_data);
_gridFit(target, grid_data);
_renderGridBody(target, palContent, grid_data, true);
target.bind('_resize', function () {
var me = $(this);
target.uiPanel('resize');
var gridData = me.find('div.grid_data');
_gridFit(me, gridData);
_renderView(me, gridData, me.data(_cacheName).options.colFitAllTime);
});
return target;
};
var _renderTpl = function (target) {
var options = target.data(_cacheName).options;
options.tpl_body = '{{each rows as value i}}' + options.tpl_body + '{{/each}}';
options._tplBodyFn = template.compile(options.tpl_body);
};
/**
* 渲染grid的标题
* @param target
* @param grid_data
* @private
*/
var _renderGridStyle = function (target, grid_data) {
var options = $.data(target[0], _cacheName).options;
var onlyStyle = options.onlyStyle;
if (options.gridTitleFix) {
var gridHeader = $('');
var gridBody = $('' + (onlyStyle ? options.tpl_body : '') + '
');
var tmpScrollTop;
gridHeader.appendTo(grid_data);
gridBody.appendTo(grid_data);
tmpScrollTop = gridBody.scrollTop();
gridBody.unbind('scroll').bind('scroll', function () {
//防止垂直滚动时计算
if (tmpScrollTop != gridBody.scrollTop()) {
tmpScrollTop = gridBody.scrollTop();
return;
}
gridHeader.scrollLeft(gridBody.scrollLeft());
});
} else {
var table = $('');
table.appendTo(grid_data);
table.find('thead tr:last-child td').addClass('ui_grid_head_border');
if (options.colFit) {
table.css('width', '98%');
}
grid_data.css('overflow', 'auto');
}
};
var _renderGridBody = function (target, palContent, grid_data, isInit) {
var options = $.data(target[0], _cacheName).options;
if (options.onlyStyle) {
_renderView(target, grid_data);
return;
}
if (options.localData) {
options.onBeforeLoadData.call(target);
options.gridData = options.dataFilter.call(target,options.localData);
_getData(target, palContent, grid_data, options.gridData);
options.onLoadDataSuccess.call(target, options.gridData);
} else if (!isInit || !options.lazyLoad) {
if (options.url != '') {
var pagination = palContent.find('.grid_pagination');
var ajaxData = options.queryParams;
if(options.defaultSortField && !ajaxData[options.paramSort]){
ajaxData[options.paramSort] = options.defaultSortField;
ajaxData[options.paramOrder] = options.defaultOrder=='desc';
}
if (pagination.length > 0) {
var obj = {};
obj[options.paramPageIndex] = options.pageIndex;
obj[options.paramPageSize] = options.pageSize;
$.extend(ajaxData, obj);
}
$.ajax({
type: options.method,
url: options.url,
cache: false,
showLoading:false,
data: ajaxData,
dataType: "json",
beforeSend: function () {
$.uiLoading.show({
container: palContent
});
options.onBeforeLoadData.call(target);
},
success: function (result) {
if (result.success) {
options.gridData =options.dataFilter.call(target, result.data);
_getData(target, palContent, grid_data, options.gridData);
options.onLoadDataSuccess.call(target, options.gridData);
return false;
}
},
complete: function () {
$.uiLoading.hide({container: palContent});
},
error: function () {
options.onLoadDataError.call(target, arguments);
alert('加载远程数据' + options.url + '失败!');
return false;
}
});
}
}
};
var _getData = function (target, palContent, grid_data, data) {
var options = target.data(_cacheName).options;
var dataHtml, tbody;
var pagination = palContent.find('.grid_pagination');
if (pagination.length > 0) {
pagination.uiPagination('refresh', $.extend(options,{total: data.total}));
}
options._cacheData = data;
options._selectedRows = [];
target.find('thead :checkbox.grid_selector').each(function () {
this.checked = false;
});
dataHtml = $(options._tplBodyFn(data));
if (options.gridTitleFix) {
tbody = grid_data.find('div.ui_grid_data table.ui_grid tbody');
} else {
tbody = grid_data.find('table.ui_grid tbody');
}
tbody.html(dataHtml);
_renderView(target, grid_data);
_renderSelection(target, tbody);
};
var _gridFit = function (target, grid_data) {
var options = $.data(target[0], _cacheName).options;
var size = grid_data.autoFit(true, false);
if (options.gridTitleFix) {
grid_data.find('div.ui_grid_data').autoFit(true, false, true, '.ui_grid_head');
}
};
/**
*
* @param target
* @param grid_data
* @param resetWidth 是否重新计算列宽
* @private
*/
var _renderView = function (target, grid_data, resetWidth) {
var options = target.data(_cacheName).options;
var gridHeader = grid_data.children('div.ui_grid_head');
var headTable = gridHeader.find('.ui_grid');
var headTrs_last_tds = headTable.find('tr:last-child td');
var targetId = target.attr('id');
var colStyles = options._colStyles;
var colWidths = options._colWidths;
var inited = colStyles.length > 0;
if (!inited) {
resetWidth = true;
colStyles = options._colStyles = [];
colWidths = options._colWidths = [];
// ##colresizer
if (options.colResizable) {
$('').setIDByParentID(targetId, $.uiTemplate.uiGrid.colresizer).appendTo(grid_data);
}
// #colresizer
// ##grid_sort
if (headTrs_last_tds.length == 0) {
headTrs_last_tds = grid_data.find('thead tr:last-child td');
}
headTrs_last_tds.each(function () {
var td = $(this);
if (td.attr('sortfield')) {
var div = td.children('div');
if (div.length > 0) {
div.addClass('icon_sort');
}
else {
td.wrapInner('');
}
td.addClass('sortable').click(function () {
var opt = $('#' + targetId).data(_cacheName).options;
var data = opt.localData || opt._cacheData;
var me = $(this);
var sort = me.attr('sortfield');
var order = 'asc';
if (me.hasClass('asc')) {
order = 'desc';
me.removeClass('asc').addClass(order);
}
else if (me.hasClass('desc')) {
if(opt.defaultSortField){
sort = opt.defaultSortField;
order = opt.defaultOrder;
}
else {
order = '';
}
me.removeClass('desc');
}
else {
me.addClass(order).siblings('.asc,.desc').removeClass('asc desc');
}
if (order == '') {
delete opt.queryParams[opt.paramSort];
delete opt.queryParams[opt.paramOrder];
}
else {
opt.queryParams[opt.paramSort] = sort;
opt.queryParams[opt.paramOrder] = order=='desc';
}
if (!!opt.localData || (opt.localSortable && data.total == data.rows.length)) {
if (order == '' || data._sorted) {
var tmp = data.rows;
data.rows = data._rows;
data._rows = tmp;
data._sorted = !data._sorted;
}
if (order != '') {
if (!data._rows) {
data._rows = $.map(data.rows, function (a) {
return a;
});
}
data.rows.sort(function (a, b) {
var v1 = a[sort] || '';
var v2 = b[sort] || '';
var c = 0;
if (typeof v1 === 'number') {
c = v1 - v2;
}
else {
c = v1.localeCompare(v2);
}
return order == 'asc' ? c : -c;
});
}
_getData(target, target.uiPanel('content'), grid_data, data);
}
else {
_renderGridBody(target, target.uiPanel('content'), grid_data);
}
});
}
});
// #grid_sort
}
if (options.gridTitleFix && resetWidth === true) {
var gridBody = grid_data.children('div.ui_grid_data');
var bodyTable = gridBody.find('.ui_grid');
var trs = bodyTable.children().children();
if (trs.length > 0) {
var bodytd = trs.eq(0).children();
var tableWidth = 0;
var staticWidth = 0;
var padWidth = bodytd.outerWidth() - bodytd.width();
var fitCols = [];
var gridWidth = grid_data.width() - 21;
bodytd.each(function (index) {
var me = $(this);
var td = headTrs_last_tds.eq(index);
var maxWidth = 0;
var isFixed;
if (!inited) {
isFixed = !td.hasClass('auto-width') && !!td[0].style.width;
// ##colresizer
if (options.colResizable) {
td.resizable({
handles: 'e',
minWidth: options.minColWidth,
maxWidth: options.maxColWidth,
onStartResize: function (e) {
var resizer = $.getByParentID(targetId, $.uiTemplate.uiGrid.colresizer);
var dl = resizer.parent().offset().left;
resizer.css('left', e.pageX - dl).show();
return false;
},
onResize: function (e) {
var resizer = $.getByParentID(targetId, $.uiTemplate.uiGrid.colresizer);
var dl = resizer.parent().offset().left;
resizer.css('left', e.pageX - dl);
return false;
},
onStopResize: function (e) {
var cw = e.data.width - e.data.startWidth;
if (cw != 0) {
var opt = $('#' + targetId).data(_cacheName).options;
var colWidths = opt._colWidths;
var idx = this.index();
if (opt.colFitAllTime) {
var tw = 0;
$.each(colWidths, function (i, n) {
tw += n;
});
cw = Math.floor(cw * tw / (this.parent().width()));
}
colWidths[idx] += cw;
if (colWidths[idx] < 0) {
colWidths[idx] = 0;
}
_renderView(target, grid_data, true);
}
$.getByParentID(targetId, $.uiTemplate.uiGrid.colresizer).hide();
return false;
}
});
}
// #colresizer
if (!isFixed) {
maxWidth = Math.max(td.width(), td.hasClass('auto-width')?0:me.width());
if (!options.colFit) {
colStyles[index] = $.globalCSS('#' + targetId + ' .col_' + index, 'width:' + maxWidth + 'px;');
}
}
else {
maxWidth = parseFloat(td[0].style.width);
td.addClass('fixed-width');
colStyles[index] = $.globalCSS('#' + targetId + ' .col_' + index, 'width:' + maxWidth+'px');
}
colWidths[index] = maxWidth;
td.addClass('col_' + index).css('width', '');
}
else {
isFixed = td.hasClass('fixed-width');
maxWidth = colWidths[index];
if (isFixed || !options.colFitAllTime) {
colStyles[index].style.width = maxWidth + 'px';
}
}
tableWidth += maxWidth + padWidth;
if (isFixed) {
staticWidth += maxWidth + padWidth;
}
else if ((!inited && options.colFit) || options.colFitAllTime) {
fitCols[fitCols.length] = {index: index, width: maxWidth};
}
});
if ((!inited && options.colFit) || options.colFitAllTime) {
var ext = gridWidth - staticWidth;
var pct = (tableWidth - staticWidth) / ext;
for (var i = 0; i < fitCols.length; i++) {
var index = fitCols[i].index;
var w = Math.floor((fitCols[i].width + padWidth) / pct);
ext -= w;
staticWidth += w;
w -= padWidth;
if (i == fitCols.length - 1) {
w += ext;
staticWidth += ext;
}
if (!inited) {
colStyles[index] = $.globalCSS('#' + targetId + ' .col_' + index, 'width:' + w + 'px;');
if (!options.colFitAllTime) {
colWidths[index] = w;
}
}
else if (w > 0) {
colStyles[index].style.width = w + 'px';
}
}
tableWidth = gridWidth;
}
gridHeader.children('.ui_grid_head1').width(tableWidth + 21);
gridBody.children().width(tableWidth);
if (!inited) {
headTable.css('table-layout', 'fixed');
bodyTable.css('table-layout', 'fixed');
}
headTable.width(tableWidth);
bodyTable.width(tableWidth);
}
}
};
var _renderSelection = function (target, gridTBody) {
var cks = gridTBody.find(':checkbox.grid_selector'),
targetId = target.attr('id'),
options = target.data(_cacheName).options,
selectedRows = options._selectedRows,
onSelectRow = options.onSelectRow,
selectedIds = options.selectedIds,
autoSelect = options.autoSelectedOnLoad,
fn = function (e) {
var ck = $(this),
tr = ck,
isTr = !ck.is(':checkbox'),
ckAll = tr.closest('div.grid_data').find('thead :checkbox.grid_selector');
if (!isTr) {
tr = ck.closest('tr');
}
else {
ck = tr.find(':checkbox.grid_selector');
}
if (!options.multiSelect || (isTr && !e.ctrlKey)) {
tr.siblings('.selected').removeClass('selected')
.find(':checked.grid_selector').each(function () {
this.checked = false;
});
}
if (!isTr || e.ctrlKey) {
var cked = false;
cked = tr.hasClass('selected');
tr.toggleClass('selected', !cked);
ck[0].checked = !cked;
}
else {
ck[0].checked = true;
tr.addClass('selected');
}
selectedRows.splice(0, selectedRows.length);
selectedIds.splice(0, selectedIds.length);
tr.parent().children().each(function (i) {
if (!$(this).hasClass('selected')) {
cked = false;
}
else {
selectedRows[selectedRows.length] = i;
if (autoSelect&&tr.attr('idField')) {
selectedIds[selectedIds.length] = tr.attr('idField');
}
}
});
ckAll.each(function () {
this.checked = cked;
cked = null;
});
if (typeof onSelectRow === 'function') {
onSelectRow.call(target, selectedRows, selectedIds);
}
if (isTr && e.ctrlKey) {
return false;
}
};
cks.each(function(index, ck) {
var me = $(ck);
var tr = me.closest('tr');
me.change(fn).mousedown(function () {
return false;
});
tr.mousedown(fn);
if (autoSelect) {
var val = tr.attr(_idFieldName);
if (val) {
for (var i = 0; i < selectedIds.length; i++) {
if (val == selectedIds[i]) {
selectedRows[selectedRows.length] = index;
selectedIds.splice(0,0,selectedIds[i++]);
tr.addClass('selected');
ck.checked = true;
}
}
}
}
});
if (autoSelect) {
if(selectedIds.length > 0){
//selectedIds.splice(selectedRows.length, selectedIds.length - selectedRows.length);
selectedIds.length = selectedRows.length;
}
if(typeof onSelectRow === 'function') {
onSelectRow.call(target, selectedRows, selectedIds);
}
}
target.find('thead :checkbox.grid_selector').unbind('change').change(function () {
var me = $(this),
grid = $('#' + targetId),
cked = this.checked,
opt = grid.data(_cacheName).options,
trs = me.closest('div.grid_data').find('table tbody tr');
if (!opt.multiSelect) {
return false;
}
selectedRows.splice(0, selectedRows.length);
selectedIds.splice(0, selectedIds.length);
var j=0;
trs.each(function (i) {
var tr = $(this);
var ckCount = tr.find("input.grid_selector").length;
if(ckCount>0) {
if (cked) {
selectedRows[j] = i;
j++;
if (opt.autoSelectedOnLoad) {
selectedIds[selectedIds.length] = tr.attr('idField');
}
}
tr.toggleClass('selected', cked).find(':checkbox.grid_selector').each(function () {
this.checked = cked;
});
}
});
if (typeof onSelectRow === 'function') {
onSelectRow.call(grid, selectedRows, selectedIds);
}
});
};
var _renderToolbar = function (palContent) {
var toolbar = palContent.children('.grid_toolbar');
if (toolbar.length > 0) {
toolbar.uiButtonBar();
toolbar.css('marginLeft', -1);
}
};
var _renderPagination = function (target, palContent, grid_data) {
var pagination = palContent.find('.grid_pagination');
if (pagination.length > 0) {
var options = $.data(target[0], _cacheName).options;
pagination.uiPagination({
pageIndex: options.pageIndex,
pageSize: options.pageSize,
pageList: options.pageList,
onSelectPage: function (pageIndex, pageSize) {
options = $.data(target[0], _cacheName).options;
options.pageIndex = pageIndex;
options.pageSize = pageSize;
_renderGridBody(target, palContent, grid_data);
},
onChangePageSize: function (pageSize) {
options = $.data(target[0], _cacheName).options;
options.pageIndex = 1;
options.pageSize = pageSize;
_renderGridBody(target, palContent, grid_data);
}
});
}
};
})(jQuery);
/**
* Created by jinxs on 14-6-25.
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiTooltip';
/**
* @class 提示信息组件
* @constructor uiTooltip
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* //采用默认值
* $('#scb').uiTooltip();
* //设置组件参数
* $('#scb').uiTooltip({region:'right'});
* //调用组件方法
* $('#scb').uiTooltip('hide');
*/
$.fn.uiTooltip = function (options, param) {
if (typeof options == "string") {
return $.fn.uiTooltip.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiTooltip.defaults, me.parseUIConfig(), options),
tip: null
});
_init(me);
}
_bindEvent(me);
_update(me);
});
};
/**
* 方法
* @lends uiTooltip.prototype
*/
$.fn.uiTooltip.methods = {
/**
* @summary 获取所有配置
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* @summary 获取提示jquery对象
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
tip: function (target) {
return $.getByParentID(target.getElemID(), $.uiTemplate.tooltip.tip);
},
/**
* @summary 获取提示箭头jquery对象
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
arrow: function (target) {
return target.uiTooltip("tip").children(".ui_tooltip-arrow-outer,.ui_tooltip-arrow");
},
/**
* @summary 获取提示内容jquery对象
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
content: function (target) {
return $.getByParentID($(target).getElemID(), $.uiTemplate.tooltip.content);
},
/**
* @summary 显示提示
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
show: function (target, e) {
_show(target, e);
},
/**
* @summary 隐藏提示
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
hide: function (target, e) {
_hide(target, e);
},
/**
* @summary 更新提示
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
update: function (target, content) {
_update(target, content);
},
/**
* @summary 重置提示框位置。
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
reposition: function (target) {
_reposition(target);
},
/**
* @summary 删除提示对象
* @param target
* @returns {*|Function|HTMLOptionsCollection|options|options}
*/
destroy: function (target) {
_destroy(target);
}
};
/**
* 默认配置
* @lends uiTooltip.prototype
*/
$.fn.uiTooltip.defaults = {
/**
* @type String
* @default 'right'
* @summary 消息框位置。可用值有:"left","right","top","bottom"
*/
region: "right",
/**
* @type String|Object
* @default null
* @summary 消息框内容
*/
content: null,
/**
* @type Boolean
* @default false
* @summary 为true时,允许提示框跟着鼠标移动
*/
trackMouse: false,
/**
* @type Array
* @default [0,0]
* @summary [水平方向提示框的位置,垂直方向提示框的位置]
*/
offset: [0, 0],
/**
* @type String
* @default mouseenter
* @summary 触发提示显示的事件
*/
showOn: "mouseenter",
/**
* @type String
* @default mouseleave
* @summary 触发提示隐藏的事件
*/
hideOn: "mouseleave",
/**
* @type Boolean
* @default true
* @summary 为false时,通过程序控制其隐藏
*/
autoHide: true,
/**
* @type Boolean
* @default true
* @summary 为false时,通过程序控制其显示
*/
autoShow:true,
/**
* @type Number
* @default 200
* @summary 延时多少秒显示提示框
*/
showDelay: 200,
/**
* @type Number
* @default 100
* @summary 延时多少秒隐藏提示框
*/
hideDelay: 100,
/**
* @event
* @name uiTooltip#onShow
* @type function
* @default function () { }
* @summary 在显示提示框的时候触发。
*/
onShow: function (e) {
},
/**
* @event
* @name uiTooltip#onHide
* @type function
* @default function () { }
* @summary 在隐藏提示框的时候触发。
*/
onHide: function (e) {
},
/**
* @event
* @name uiTooltip#onUpdate
* @type function
* @default function () { }
* @summary 在提示框内容更新的时候触发。
*/
onUpdate: function (content) {
},
/**
* @event
* @name uiTooltip#onPosition
* @type function
* @default function () { }
* @summary 在提示框位置改变的时候触发。
*/
onPosition: function (left, top) {
},
/**
* @event
* @name uiTooltip#onDestroy
* @type function
* @default function () { }
* @summary 在提示框被销毁的时候触发。
*/
onDestroy: function () {
}
};
//////--------------------------------内部方法------------------------------
/**
* 初始化方法,主要设置高宽,加载内容
*/
var _init = function (target) {
var state = $.data(target[0], _cacheName);
var options = state.options;
target.setElemID();
var title = target.attr('title');
if (title != undefined && title != '' && !options.content) {
options.content = title;
target.removeAttr('title');
}
return target;
};
function _show(target, e) {
var state = $.data(target[0], _cacheName);
var options = state.options;
var tip = $.getByParentID(target.getElemID(), $.uiTemplate.tooltip.tip);
if (tip.length == 0) {
var targetID = target.getElemID();
var reg = new RegExp('({target})', 'g');
tip = $($.uiTemplate.tooltip.html.replace(reg, targetID)).appendTo('body');
_update(target);
}
tip.removeClass("ui_tooltip-top ui_tooltip-bottom ui_tooltip-left ui_tooltip-right").addClass("ui_tooltip-" + options.region);
_setTimer(target);
state.showTimer = setTimeout(function () {
_reposition(target);
tip.show();
options.onShow.call(target, e);
var arrowOuter = $.getByParentID(targetID, $.uiTemplate.tooltip.tipAouter);
var arrow = $.getByParentID(targetID, $.uiTemplate.tooltip.arrow);
var borderColor = "border-" + options.region + "-color";
arrowOuter.add(arrow).css({
borderTopColor: "",
borderBottomColor: "",
borderLeftColor: "",
borderRightColor: ""
});
arrowOuter.css(borderColor, tip.css(borderColor));
arrow.css(borderColor, tip.css("backgroundColor"));
}, options.showDelay);
tip.unbind('mouseover.uiTooltip').bind('mouseover.uiTooltip', function (e) {
if (state.hideTimer) {
clearTimeout(state.hideTimer);
state.hideTimer = null;
}
});
if (options.autoHide) {
tip.unbind('mouseleave.uiTooltip').bind('mouseleave.uiTooltip', function (e) {
setTimeout(function () {
_hide(target, e);
}, options.hideDelay);
});
}
};
function _bindEvent(target) {
var state = $.data(target[0], _cacheName);
var options = state.options;
target.unbind(".uiTooltip");
if (options.autoShow) {
target.bind(options.showOn + ".uiTooltip", function (e) {
_show(target, e);
});
}
if (options.autoHide) {
target.bind(options.hideOn + ".uiTooltip", function (e) {
_hide(target, e);
});
}
target.bind("mousemove.uiTooltip", function (e) {
if (options.trackMouse) {
options.trackMouseX = e.pageX;
options.trackMouseY = e.pageY;
_reposition(target);
}
});
};
function _setTimer(target) {
var state = $.data(target[0], _cacheName);
if (state.showTimer) {
clearTimeout(state.showTimer);
state.showTimer = null;
}
if (state.hideTimer) {
clearTimeout(state.hideTimer);
state.hideTimer = null;
}
};
function _reposition(target) {
var state = $.data(target[0], _cacheName);
var tip = $.getByParentID(target.getElemID(), $.uiTemplate.tooltip.tip);
if (!state || tip.length == 0) {
return;
}
var options = state.options;
var left, top, t;
if (options.trackMouse) {
t = $();
left = options.trackMouseX + options.offset[0];
top = options.trackMouseY + options.offset[1];
} else {
var t = $(target);
left = t.offset().left + options.offset[0];
top = t.offset().top + options.offset[1];
}
switch (options.region) {
case $.uiTemplate.tooltip.region.right:
left += t.outerWidth() + 12 + (options.trackMouse ? 12 : 0);
top -= (tip.outerHeight() - t.outerHeight()) / 2;
break;
case $.uiTemplate.tooltip.region.left:
left -= tip.outerWidth() + 12 + (options.trackMouse ? 12 : 0);
top -= (tip.outerHeight() - t.outerHeight()) / 2;
break;
case $.uiTemplate.tooltip.region.top:
left -= (tip.outerWidth() - t.outerWidth()) / 2;
top -= tip.outerHeight() + 12 + (options.trackMouse ? 12 : 0);
break;
case $.uiTemplate.tooltip.region.bottom:
left -= (tip.outerWidth() - t.outerWidth()) / 2;
top += t.outerHeight() + 12 + (options.trackMouse ? 12 : 0);
break;
}
if (!$(target).is(":visible")) {
left = -100000;
top = -100000;
}
tip.css({
left: left,
top: top,
zIndex: (options.zIndex != undefined ? options.zIndex : ($.fn.uiDialog ? $.fn.uiDialog.defaults.zIndex++ : ""))
});
options.onPosition.call(target, left, top);
};
function _hide(target, e) {
var state = $.data(target[0], _cacheName);
var tip = $.getByParentID(target.getElemID(), $.uiTemplate.tooltip.tip);
if (state && tip.length > 0) {
_setTimer(target);
state.hideTimer = setTimeout(function () {
var tip = $.getByParentID(target.getElemID(), $.uiTemplate.tooltip.tip);
tip.hide();
state.options.onHide.call(target, e);
}, state.options.hideDelay);
}
};
function _update(target, content) {
var state = $.data(target[0], _cacheName);
var options = state.options;
if (content) {
options.content = content;
}
var tip = $.getByParentID(target.getElemID(), $.uiTemplate.tooltip.tip);
if (tip.length == 0) {
return;
}
var cont = typeof options.content == "function" ? options.content.call(target) : options.content;
$.getByParentID($(target).getElemID(), $.uiTemplate.tooltip.content).html(cont);
options.onUpdate.call(target, cont);
};
function _destroy(target) {
var state = $.data(target[0], _cacheName);
if (state) {
_setTimer(target);
var options = state.options;
var tip = $.getByParentID(target.getElemID(), $.uiTemplate.tooltip.tip);
if (tip.length > 0) {
tip.remove();
}
if (options.content) {
$(target).attr("title", options.content);
}
$.removeData(target, _cacheName);
$(target).unbind(".uiTooltip");
options.onDestroy.call(target);
}
};
})(jQuery);
/**
* Created by jinxs on 14-7-15.
* 基于easyui.layout源码
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiLayout';
var _resizing = false;
var pal_region = {
top: 'top',
bottom: 'bottom',
right: 'right',
left: 'left',
center: 'center'
};
/**
* @class 布局组件
* @constructor uiLayout
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的方法的参数
* @example
* // 构件组件
* $('#div').uiLayout({
* axis:'h',
* onStopDrag: function(e){
* alert(this[0]==e.data.target[0]);
* }
* });
* // 调用组件方法options
* $('#div').uiLayout("options");
*/
$.fn.uiLayout = function (options, params) {
if (typeof options == "string") {
return $.fn.uiLayout.methods[options](this, params);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiLayout.defaults, me.parseUIConfig(), options),
panels: {center: $(), top: $(), bottom: $(), right: $(), left: $()}
});
_init(me);
}
_resize(me);
_collapsePanels(me);
});
};
/**
* 方法
* @lends uiLayout.prototype
*/
$.fn.uiLayout.methods = {
/**
* @summary 根据配置重置控件的大小
* @name uiLayout#resize
* @function
* @returns {jQuery} 方法调用者
*/
resize: function (target) {
_resize(target);
return target;
},
/**
* @summary 获得组件的面板对象
* @name uiLayout#panel
* @function
* @param palPosition {Number} 面板位置
* @returns uiPanel 组件的面板对象
*/
panel: function (target, palPosition) {
return $.data(target[0], _cacheName).panels[palPosition];
},
/**
* @summary 折叠组件
* @name uiLayout#collapse
* @function
* @param region {Object} 折叠区域
* @returns {jQuery} 方法调用者
*/
collapse: function (target, region) {
_collapsePanel(target, region);
return target;
},
/**
* @summary 展开组件
* @name uiLayout#expand
* @function
* @param region {Object} 展开区域
* @returns {jQuery} 方法调用者
*/
expand: function (target, region) {
_expandPanel(target, region);
return target;
},
/**
* @summary 为组件添加面板对象
* @name uiLayout#add
* @function
* @param palOption {Object} 面板参数
* @returns {jQuery} 方法调用者
*/
add: function (target, palOption) {
_addPanel(target, palOption);
_resize(target);
if (target.uiLayout('panel', palOption.region).uiPanel('options').collapsed) {
_collapsePanel(target, palOption.region, 0);
}
return target;
},
/**
* @summary 移除指定的组件的面板对象
* @name uiLayout#remove
* @function
* @param region {String} 方向参数
* @returns {jQuery} 方法调用者
* @example
* $('#divMenu').uiLayout("remove", 'left');
*/
remove: function (target, region) {
_remove(target, region);
_resize(target);
return target;
}
};
$.fn.uiLayout.defaults = {autoFit: false};
$.fn.uiLayout.paneldefaults = $.extend({}, $.fn.uiPanel.defaults,
/**
* 默认配置
* @lends uiLayout.prototype
*/
{
/**
* @type String
* @default null
* @summary 组件区域
*/
region: null,
/**
* @type Boolean
* @default true
* @summary 指示组件是否显示边框
*/
border: true,
/**
* @type Boolean
* @default false
* @summary 指示组件是否显示按钮栏
*/
showBtnBar: false,
/**
* @type Boolean
* @default false
* @summary 指示组件是否可分割
*/
split: false,
/**
* @type Boolean
* @default true
* @summary 指示组件是否可折叠
*/
collapsible: true,
/**
* @type Number
* @default 30
* @summary 指示组件可折叠的大小
*/
collapsedSize: 30,
/**
* @type Number
* @default 10
* @summary 指示组件的最小宽度
*/
minWidth: 10,
/**
* @type Number
* @default 10
* @summary 指示组件的最小高度
*/
minHeight: 10,
/**
* @type Number
* @default 10000
* @summary 指示组件的最大宽度
*/
maxWidth: 10000,
/**
* @type Number
* @default 10000
* @summary 指示组件的最大高度
*/
maxHeight: 10000
});
var _init = function (target) {
target.addClass("ui_layout");
var _addPal = function (target) {
target.children("div").each(function () {
var palOpts = $.extend({}, $.fn.uiLayout.paneldefaults, $(this).parseUIConfig());
if ("top,bottom,right,left,center".indexOf(palOpts.region) >= 0) {
_addPanel(target, palOpts, this);
}
});
};
target.children("form").length ? _addPal(target.children("form")) : _addPal(target);
target.append("");
target.bind("_resize", function () {
var opts = $.data(target[0], _cacheName).options;
if (opts.autoFit == true) {
_resize(target);
}
});
};
var _collapsePanels = function (target) {
var panels = $.data(target[0], _cacheName).panels;
if (panels.right.length > 0 && panels.right.uiPanel("options").collapsed) {
_collapsePanel(target, pal_region.right, 0);
}
if (panels.left.length > 0 && panels.left.uiPanel("options").collapsed) {
_collapsePanel(target, pal_region.left, 0);
}
if (panels.top.length > 0 && panels.top.uiPanel("options").collapsed) {
_collapsePanel(target, pal_region.top, 0);
}
if (panels.bottom.length > 0 && panels.bottom.uiPanel("options").collapsed) {
_collapsePanel(target, pal_region.bottom, 0);
}
};
var _resize = function (target) {
var opts = $.data(target[0], _cacheName);
var options = opts.options;
var pals = opts.panels;
if (target[0].tagName == "BODY") {
target.autoFit(true, true);
} else {
options.autoFit ? target.autoFit(true, true) : target.autoFit(false);
}
var sizeOpts = {top: 0, left: 0, width: target.width(), height: target.height()};
_calcNS(_palVisible(pals.expandTop) ? pals.expandTop : pals.top, "n");
_calcNS(_palVisible(pals.expandBottom) ? pals.expandBottom : pals.bottom, "s");
_calcEW(_palVisible(pals.expandRight) ? pals.expandRight : pals.right, "e");
_calcEW(_palVisible(pals.expandLeft) ? pals.expandLeft : pals.left, "w");
if (_IEunder9 && !pals.center.uiPanel('options').border) {
sizeOpts.width += 4;
sizeOpts.height += 4;
}
pals.center.each(function () {
$(this).uiPanel("resize", sizeOpts);
});
function _getPalHeight(pal) {
var pal_opts = pal.uiPanel("options");
return Math.min(Math.max(pal_opts.height||pal.outerHeight(), pal_opts.minHeight||0), pal_opts.maxHeight);
}
function _getPalWidth(pal) {
var pal_opts = pal.uiPanel("options");
return Math.min(Math.max(pal_opts.width||pal.outerWidth(), pal_opts.minWidth||0), pal_opts.maxWidth);
}
function _calcNS(pal, dir) {
if (!pal.length || !_palVisible(pal)) {
return;
}
var opts = pal.uiPanel("options");
var height = _getPalHeight(pal);
var top = (dir == "n" ? 0 : target.height() - height);
pal.uiPanel("resize", {width: target.width(), height: height, left: 0, top: top});
sizeOpts.height -= height;
if (dir == "n") {
sizeOpts.top += height;
if (!opts.split && opts.border) {
sizeOpts.top -= 1;
}
}
if (!opts.split && opts.border) {
sizeOpts.height += 1;
}
}
function _calcEW(pal, dir) {
if (!pal.length || !_palVisible(pal)) {
return;
}
var opts = pal.uiPanel("options");
var width = _getPalWidth(pal);
var left = (dir == "e" ? target.width() - width : 0);
pal.uiPanel("resize", {width: width, height: sizeOpts.height, left: left, top: sizeOpts.top});
sizeOpts.width -= width;
if (dir == "w") {
sizeOpts.left += width;
if (!opts.split && opts.border) {
sizeOpts.left -= 1;
}
}
if (!opts.split && opts.border) {
sizeOpts.width += 1;
}
}
};
var _addPanel = function (target, palOptions, panel) {
palOptions.region = palOptions.region || pal_region.center;
var panels = $.data(target[0], _cacheName).panels;
var region = palOptions.region;
if (panels[region].length) {
return;
}
var pal = $(panel);
if (!pal.length) {
pal = $("").appendTo(target);
}
var palOpts = $.extend({}, $.fn.uiLayout.paneldefaults, {
width: (pal.length ? parseInt(pal[0].style.width) || pal.width() : "auto"),
height: (pal.length ? parseInt(pal[0].style.height) || pal.height() : "auto"),
collapsible: true
}, palOptions);
palOpts = $.extend(palOpts, {
onOpen: function () {
var toolbar = $(this).uiPanel("toolbar").empty();
var btnDir = {top: "up", bottom: "down", right: "right", left: "left"};
if (!btnDir[region]) {
return;
}
var btnClass = "ui_layout_btn_" + btnDir[region];
var btn = toolbar.children("." + btnClass);
if (!btn.length) {
btn = $('').addClass('ui_layout_btn').addClass(btnClass).appendTo(toolbar);
btn.bind("click", {dir: region}, function (e) {
_collapsePanel(target, e.data.dir);
return false;
});
}
$(this).uiPanel("options").collapsible ? btn.show() : btn.hide();
}
});
pal.uiPanel(palOpts);
pal.addClass('ui_layout_panel ui_layout_panel_' + region);
panels[region] = pal;
if (pal.uiPanel("options").split) {
pal = pal.uiPanel("panel");
pal.addClass("ui_layout_split_" + region);
pal.uiPanel('content').addClass("ui_layout_split_content_" + region);
var dir = '';
switch (region) {
case pal_region.top:
dir = 's';
break;
case pal_region.bottom:
dir = 'n';
break;
case pal_region.right:
dir = 'w';
break;
case pal_region.left:
dir = 'e';
break;
}
var split_proxy;
pal.resizable($.extend({}, {
handles: dir,
onStartResize: function (e) {
_resizing = true;
if (region == pal_region.top || region == pal_region.bottom) {
split_proxy = target.children('div.ui_layout_split_proxy_v');
} else {
split_proxy = target.children('div.ui_layout_split_proxy_h');
}
var mask = $.uiMask.show({container: target, maskID: 'layout'});
var pos = {
display: 'block',
top: 0,
left: 0,
width: 0,
height: 0,
zIndex: parseInt(mask.css('zIndex')) + 1
};
switch (region) {
case pal_region.top:
pos.top = parseInt(pal.css('top')) + pal.outerHeight() - split_proxy.height();
pos.left = parseInt(pal.css('left'));
pos.width = pal.width();
pos.height = split_proxy.height();
break;
case pal_region.bottom:
pos.top = parseInt(pal.css('top'));
pos.left = parseInt(pal.css('left'));
pos.width = pal.width();
pos.height = split_proxy.height();
break;
case pal_region.right:
pos.top = parseInt(pal.css('top')) || 0;
pos.left = parseInt(pal.css('left')) || 0;
pos.width = split_proxy.width();
pos.height = pal.height();
break;
case pal_region.left:
pos.top = parseInt(pal.css('top')) || 0;
pos.left = pal.outerWidth() - split_proxy.width();
pos.width = split_proxy.width();
pos.height = pal.height();
break;
}
split_proxy.css(pos);
},
onResize: function (e) {
if (region == pal_region.top || region == pal_region.bottom) {
split_proxy.css('top', e.pageY - $(target).offset().top - split_proxy.height() / 2);
} else {
split_proxy.css('left', e.pageX - $(target).offset().left - split_proxy.width() / 2);
}
return false;
},
onStopResize: function (e) {
split_proxy.hide();
split_proxy = null;
pal.uiPanel('resize', e.data);
_resize(target);
_resizing = false;
$.uiMask.remove({container: target, maskID: 'layout'});
}
}, palOptions));
}
};
function _remove(target, region) {
var panels = $.data(target[0], _cacheName).panels;
if (panels[region].length > 0) {
panels[region].panel('destroy');
panels[region] = $();
var expandPalName = 'expand' + region.substring(0, 1).toUpperCase() + region.substring(1);
if (panels[expandPalName]) {
panels[expandPalName].panel('destroy');
panels[expandPalName] = undefined;
}
}
}
/**
*
* @param target
* @param region
* @param duration 默认值: 'normal', 三种预定速度的字符串('slow', 'normal', 或 'fast')或表示动画时长的毫秒数值(如:1000)
* @private
*/
var _collapsePanel = function (target, region, duration) {
if (duration == undefined) {
duration = 'normal';
}
var panels = $.data(target[0], _cacheName).panels;
var pal = panels[region];
var pal_opts = pal.uiPanel('options');
if (pal_opts.onBeforeCollapse.call(pal) == false) {
return;
}
var expandPalName = 'expand' + region.substring(0, 1).toUpperCase() + region.substring(1);
if (!panels[expandPalName]) {
panels[expandPalName] = _createPanel(pal_opts, region);
panels[expandPalName].uiPanel('panel').bind('click', function () {
var colPalOpts = coll_Opts();
pal.uiPanel('open').uiPanel('expand', false).uiPanel('resize', colPalOpts.collapse);
pal.uiPanel('panel').animate(colPalOpts.expand, function () {
$(this).unbind('.layout').bind('mouseleave.layout', {region: region}, function (e) {
if (_resizing == true) {
return;
}
_collapsePanel(target, e.data.region);
});
});
});
}
var colPalOpts = coll_Opts();
if (!_palVisible(panels[expandPalName])) {
panels.center.uiPanel('resize', colPalOpts.resizeC);
}
pal.uiPanel('panel').animate(colPalOpts.collapse, duration, function () {
pal.uiPanel('close').uiPanel('collapse', false);
panels[expandPalName].uiPanel('open').uiPanel('resize', colPalOpts.expandP);
$(this).unbind('.layout');
});
function _createPanel(pal_opts, region) {
var btnCollapse;
var title = '';
var icon = '';
switch (region) {
case pal_region.right:
btnCollapse = 'ui_layout_btn_left1';
break;
case pal_region.left:
btnCollapse = 'ui_layout_btn_right1';
break;
case pal_region.top:
title = pal_opts.title;
icon = pal_opts.icon;
btnCollapse = 'ui_layout_btn_down1';
break;
case pal_region.bottom:
title = pal_opts.title;
icon = pal_opts.icon;
btnCollapse = 'ui_layout_btn_up1';
break;
}
var collPal = $('').appendTo(target);
collPal.uiPanel($.extend({}, $.fn.uiLayout.paneldefaults,
{title: title, icon: icon, closed: true, minWidth: 0, minHeight: 0}));
var pal_toolbar = collPal.uiPanel('toolbar').empty();
var btn = pal_toolbar.children('.' + btnCollapse);
if (!btn.length) {
btn = $('').addClass('ui_layout_btn').addClass(btnCollapse).appendTo(pal_toolbar);
btn.bind('click', {dir: region}, function (e) {
_expandPanel(target, region);
return false;
});
}
collPal.addClass('ui_layout_expand ui_layout_expand_' + region);
if (region == pal_region.left || region == pal_region.right) {
var collPal_content = collPal.uiPanel('content');
collPal_content.html('');
} else {
collPal.uiPanel('title').css('color', 'black');
}
collPal.uiPanel('panel').hover(function () {
$(this).addClass('ui_layout_expand_over');
}, function () {
$(this).removeClass('ui_layout_expand_over');
});
return collPal;
}
function coll_Opts() {
var centerPal_Opts = panels.center.uiPanel('options');
var pal_collSize = pal_opts.collapsedSize;
switch (region) {
case pal_region.right:
var centerWidth = centerPal_Opts.width + pal_opts.width - pal_collSize;
if (pal_opts.split) {
centerWidth++;
}
return {
resizeC: {width: centerWidth},
expand: {left: target.width() - pal_opts.width},
expandP: {
top: centerPal_Opts.top,
left: target.width() - pal_collSize,
width: pal_collSize,
height: centerPal_Opts.height
},
collapse: {left: target.width(), top: centerPal_Opts.top, height: centerPal_Opts.height}
};
break;
case pal_region.left:
var centerWidth = centerPal_Opts.width + pal_opts.width - pal_collSize;
if (pal_opts.split || !pal_opts.border) {
centerWidth++;
}
return {
resizeC: {width: centerWidth, left: pal_collSize - 1},
expand: {left: 0},
expandP: {left: 0, top: centerPal_Opts.top, width: pal_collSize, height: centerPal_Opts.height},
collapse: {left: -pal_opts.width, top: centerPal_Opts.top, height: centerPal_Opts.height}
};
break;
case pal_region.top:
var centerHeight = centerPal_Opts.height;
if (!_palVisible(panels.expandTop)) {
centerHeight += pal_opts.height - pal_collSize + ((pal_opts.split || !pal_opts.border) ? 1 : 0);
}
panels.right.add(panels.left).add(panels.expandRight).add(panels.expandLeft).each(function () {
$(this).uiPanel('resize', {top: pal_collSize - 1, height: centerHeight});
});
return {
resizeC: {top: pal_collSize - 1, height: centerHeight},
expand: {top: 0}, expandP: {top: 0, left: 0, width: target.width(), height: pal_collSize},
collapse: {top: -pal_opts.height, width: target.width()}
};
break;
case pal_region.bottom:
var centerHeight = centerPal_Opts.height;
if (!_palVisible(panels.expandBottom)) {
centerHeight += pal_opts.height - pal_collSize + ((pal_opts.split || !pal_opts.border) ? 1 : 0);
}
panels.right.add(panels.left).add(panels.expandRight).add(panels.expandLeft).each(function () {
$(this).uiPanel('resize', {height: centerHeight});
});
return {
resizeC: {height: centerHeight},
expand: {top: target.height() - pal_opts.height},
expandP: {
top: target.height() - pal_collSize,
left: 0,
width: target.width(),
height: pal_collSize
},
collapse: {top: target.height(), width: target.width()}
};
break;
}
}
};
var _expandPanel = function (target, region) {
var panels = $.data(target[0], _cacheName).panels;
var panel = panels[region];
var pal_opts = panel.uiPanel('options');
if (pal_opts.onBeforeExpand.call(panel) === false) {
return;
}
var palOpts = setPalOptions();
var expandPalName = 'expand' + region.substring(0, 1).toUpperCase() + region.substring(1);
if (panels[expandPalName]) {
panels[expandPalName].uiPanel('close');
panel.uiPanel('panel').stop(true, true);
panel.uiPanel('open').uiPanel('expand', false).uiPanel('resize', palOpts.collapse);
panel.uiPanel('panel').animate(palOpts.expand, function () {
_resize(target);
});
}
function setPalOptions() {
var cPal_opts = panels.center.uiPanel('options');
if (region == pal_region.right && panels.expandRight) {
return {
collapse: {left: target.width(), top: cPal_opts.top, height: cPal_opts.height},
expand: {left: target.width() - panels[pal_region.right].uiPanel('options').width}
};
} else {
if (region == pal_region.left && panels.expandLeft) {
return {
collapse: {
left: -panels[pal_region.left].uiPanel('options').width,
top: cPal_opts.top,
height: cPal_opts.height
},
expand: {left: 0}
};
} else {
if (region == pal_region.top && panels.expandTop) {
return {
collapse: {top: -panels[pal_region.top].uiPanel('options').height, width: target.width()},
expand: {top: 0}
};
} else {
if (region == pal_region.bottom && panels.expandBottom) {
return {
collapse: {top: target.height(), width: target.width()},
expand: {top: target.height() - panels[pal_region.bottom].uiPanel('options').height}
};
}
}
}
}
}
};
var _palVisible = function (uiPanel) {
if (!uiPanel) {
return false;
}
if (uiPanel.length > 0) {
return uiPanel.attr('closed') == 'false';
} else {
return false;
}
};
})(jQuery);
/**
* Created by jinxs on 14-7-22.
* 基于easyui.tabs源码
* 依赖
* ui.core.js
* ui.panel.js
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiTabs';
/**
* @class 标签页组件
* @requires {@link uiPanel}
* @constructor uiTabs
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* //采用默认值
* $('#tab').uiTabs();
* //设置组件参数
* $('#tab').uiTabs({height:'20',width:'auto'});
* //调用组件方法
* $('#tab').uiTabs('close','');
*/
$.fn.uiTabs = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiTabs.methods[options](this, param);
}
return this.each(function () {
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiTabs.defaults, me.parseUIConfig(), options),
tabs: [],
selectHis: []
});
_init(me);
}
_setProperties(me);
_setSize(me);
_bindEvents(me);
_doFirstSelect(me);
});
};
/**
* 方法
* @lends uiTabs.prototype
*/
$.fn.uiTabs.methods = {
/**
* @summary 获得组件的配置对象
* @name uiTabs#options
* @function
* @returns {Object} 组件的配置对象
*/
options: function (target) {
var opts = $.data(target[0], _cacheName).options;
var tab = _getSelectedTab(target);
opts.selected = tab ? _getTabIndex(target, tab) : -1;
return opts;
},
/**
* @summary 获得组件
* @name uiTabs#tabs
* @function
* @returns {jQuery} 组件对象
*/
tabs: function (target) {
return $.data(target[0], _cacheName).tabs;
},
/**
* @summary 设置组件的大小
* @name uiTabs#resize
* @function
* @returns {jQuery} 方法调用者
*/
resize: function (target) {
_setSize(target);
_setSelectedSize(target);
return target;
},
/**
* @summary 添加标签页
* @name uiTabs#add
* @function
* @param options {Object} 标签页配置参数
* @returns {jQuery} 组件对象
*/
add: function (target, options) {
_addTab(target, options);
return target;
},
/**
* @summary 关闭标签页
* @name uiTabs#close
* @function
* @param which {Number} 标签页索引
* @returns {jQuery} 组件对象
*/
close: function (target, which) {
_closeTab(target, which);
return target;
},
/**
* @summary 获得指定标签页
* @name uiTabs#getTab
* @function
* @param which {Number} 标签页索引
* @returns {Object} 标签页组件
*/
getTab: function (target, which) {
return _getTab(target, which);
},
/**
* @summary 获得标签页Index
* @name uiTabs#getTabIndex
* @function
* @param tab {Object} 需要获取Index的标签页
* @returns {Object} 标签页组件
*/
getTabIndex: function (target, tab) {
return _getTabIndex(target, tab);
},
/**
* @summary 获得已选择的标签页
* @name uiTabs#getSelected
* @function
* @returns {Object} 标签页组件
*/
getSelected: function (target) {
return _getSelectedTab(target);
},
/**
* @summary 选择指定的标签页
* @name uiTabs#select
* @function
* @param which {Number} 标签页索引
* @returns {jQuery} 组件对象
*/
select: function (target, which) {
_selectTab(target, which);
return target;
},
/**
* @summary 取消选择指定的标签页
* @name uiTabs#unselect
* @function
* @param which {Number} 标签页索引
* @returns {jQuery} 组件对象
*/
unselect: function (target, which) {
_unselectTab(target, which);
return target;
},
/**
* @summary 是否存在指定的标签页
* @name uiTabs#exists
* @function
* @param which {Number} 标签页索引
* @returns {jQuery} 组件对象
*/
exists: function (target, which) {
return _exists(target, which);
},
/**
* @summary 更新标签页
* @name uiTabs#update
* @function
* @param options {Object} 标签页配置参数
* @returns {jQuery} 组件对象
*/
update: function (target, options) {
_updateTab(target, options, true);
return target;
},
/**
* @summary 启用指定标签页
* @name uiTabs#enableTab
* @function
* @param which {Number} 标签页索引
* @returns {jQuery} 组件对象
*/
enableTab: function (target, which) {
var tab = target.uiTabs('getTab', which).uiPanel('options').tab;
tab.removeClass('tabs-disabled');
return target;
},
/**
* @summary 禁用指定标签页
* @name uiTabs#disableTab
* @function
* @param which {Number} 标签页索引
* @returns {jQuery} 组件对象
*/
disableTab: function (target, which) {
var tab = target.uiTabs('getTab', which).uiPanel('options').tab;
tab.addClass('tabs-disabled');
return target;
},
/**
* @summary 根据偏移量滚动
* @name uiTabs#scrollBy
* @function
* @param deltaX 偏移量
* @returns {jQuery} 组件对象
*/
scrollBy: function (target, deltaX) {
var opts = target.uiTabs('options');
var targetID = target.getElemID();
var headerTabs = $.getByParentID(targetID, $.uiTemplate.tabs.headerCenter);
var pos = Math.min(headerTabs.scrollLeft() + deltaX, getMaxScrollWidth());
headerTabs.animate({scrollLeft: pos}, opts.scrollDuration);
function getMaxScrollWidth() {
var width = 0;
var ul = $.getByParentID(targetID, $.uiTemplate.tabs.headerTabs);
ul.children('li').each(function () {
width += $(this).outerWidth(true);
});
return width - headerTabs.width() + (ul.outerWidth() - ul.width());
}
}
};
/**
* 默认配置
* @lends uiTabs.prototype
*/
$.fn.uiTabs.defaults = {
/**
* @type Number
* @default 0
* @summary 组件宽度
*/
width: 0,
/**
* @type Number
* @default 0
* @summary 组件高度
*/
height: 0,
/**
* @type Number
* @default 150
* @summary 组件标头宽度
*/
headerWidth: 150,
/**
* @type String
* @default auto
* @summary 标签宽度
*/
tabWidth: 'auto',
/**
* @type String
* @default 200
* @summary 标签页最大宽度
*/
tabMaxWidth: 200,
/**
* @type Number
* @default 0
* @summary 选中的标签页索引
*/
selected: 0,
/**
* @type Boolean
* @default false
* @summary 指示组件是否自动填充
*/
autoFit: false,
/**
* @type Boolean
* @default true
* @summary 指示组件是否显示边框
*/
border: true,
/**
* @type Number
* @default 0
* @summary 最大标签数
*/
maxTabNumber: 0,
/**
* 值可为click(鼠标点击切换), mouseover(鼠标滑过切换)
* @type String
* @default click
* @summary 页签切换的模式
*/
switchMode: 'click',
/**
* @type Boolean
* @default true
* @summary 是否自动循环切换页签
*/
autoPlay: false,
/**
* @type Number
* @default 2000
* @summary 自动切换间隔时间
*/
autoPlayTime: 2000,
/**
* 是否懒加载,当该属性为true时,只有在页签被单击选中时才尝试加载标签页正文区。
*/
/**
* @type Boolean
* @default false
* @summary 是否延迟加载
*/
lazyLoad: false,
/**
* @type String
* @default top
* @summary 标签页位置
*/
tabPosition: 'top',
/**
* @type Number
* @default 100
* @summary 滚动的步长
*/
scrollIncrement: 100,
/**
* @type Number
* @default 400
* @summary 滚动持续时间
*/
scrollDuration: 400,
/**
* @type Boolean
* @default false
* @summary 是否启用右击菜单
*/
enableContextMenu: false,
/**
* @type Array
* @default [
{id: 1, icon: 'update', label: '刷新标签'},
{id: 2, icon: 'close', label: '关闭标签'},
{id: 3, icon: 'closeo', label: '关闭其他'},
{id: 4, icon: 'closea', label: '关闭所有'}
]
* @summary 右键菜单数据,支持自定义(1~4为系统菜单ID),自定义事件为click,{id: 5, icon: 'closea', label: '关闭所有',onSelect:function(item,triggerData){alert(item.id)}})
*/
contextData: [
{id: 1, icon: 'update', label: '刷新标签'},
{id: 2, icon: 'close', label: '关闭标签'},
{id: 3, icon: 'closeo', label: '关闭其他'},
{id: 4, icon: 'closea', label: '关闭所有'}
],
/**
* @summary 在加载时触发的方法。
* @event
* @name uiTabs#onLoad
* @param id {String} 所选标签页的id
* @default emptyFn
*/
onLoad: function (panel) {
},
/**
* @summary 在选择标签页时触发的方法。
* @event
* @name uiTabs#onSelect
* @param id {String} 所选标签页的id
* @param index {Number} 所选标签页的索引
* @default emptyFn
*/
onSelect: function (id, index) {
},
/**
* @summary 取消选择标签页时触发的方法。
* @event
* @name uiTabs#onUnselect
* @param id {String} 所选标签页的id
* @param index {Number} 所选标签页的索引
* @default emptyFn
*/
onUnselect: function (id, index) {
},
/**
* @summary 在关闭标签页之前触发的方法。
* @event
* @name uiTabs#onBeforeClose
* @param id {String} 所选标签页的id
* @param index {Number} 所选标签页的索引
* @default emptyFn
*/
onBeforeClose: function (id, index) {
},
/**
* @summary 在关闭标签页时触发的方法。
* @event
* @name uiTabs#onClose
* @param id {String} 所选标签页的id
* @param index {Number} 所选标签页的索引
* @default emptyFn
*/
onClose: function (id, index) {
},
/**
* @summary 在添加标签页时触发的方法。
* @event
* @name uiTabs#onAdd
* @param id {String} 所选标签页的id
* @param index {Number} 所选标签页的索引
* @default emptyFn
*/
onAdd: function (id, index) {
},
/**
* @summary 在更新标签页时触发的方法。
* @event
* @name uiTabs#onUpdate
* @param id {String} 所选标签页的id
* @param index {Number} 所选标签页的索引
* @default emptyFn
*/
onUpdate: function (id, index) {
},
/**
* @summary 标签页右击时触发的方法。
* @event
* @name uiTabs#onContextMenu
* @param e {String}
* @param id {String} 所选标签页的id
* @param index {Number} 所选标签页的索引
* @default emptyFn
*/
onContextMenu: function (e, id, index) {
}
};
/**
* 初始化
* @param target
* @private
*/
var _init = function (target) {
var options = $.data(target[0], _cacheName).options;
var tabs = $.data(target[0], _cacheName).tabs;
target.setElemID();
var targetID = target.getElemID();
target.addClass('ui_tabs');
var divs = target.children('div');
target.empty();
var reg = new RegExp('({tabs})', 'g');
target.append($($.uiTemplate.tabs.html.replace(reg, targetID)).html());
var panels = $.getByParentID(targetID, $.uiTemplate.tabs.panels);
divs.each(function (index, value) {
this.id = targetID + '-' + $.uiTemplate.tabs.panels + '-' + index;
var pal = $(this);
pal.appendTo(panels);
var opts = $.extend({}, pal.parseUIConfig(), {
selected: (pal.attr('selected') ? true : undefined)
});
tabs.push(pal);
_createTab(target, pal, opts);
});
$.getByParentID(targetID, $.uiTemplate.tabs.headerLeft)
.add($.getByParentID(targetID, $.uiTemplate.tabs.headerRight))
.hover(
function () {
$(this).addClass('ui_tabs_scroller_over');
},
function () {
$(this).removeClass('ui_tabs_scroller_over');
}
);
target.bind("_resize", function () {
var opts = $.data(target[0], _cacheName).options;
if (opts.autoFit == true) {
_setSize(target);
_setSelectedSize(target);
}
});
_contextMenu(target);
};
var _createTab = function (target, pal, palOptions) {
var state = $.data(target[0], _cacheName);
palOptions = palOptions || {};
var targetID = target.getElemID();
palOptions = $.extend(true, {}, {
border: false,
padding: '0px',
closed: true,
showHeader: false,
showBtnBar: false,
draggable: false,
resizable: false,
maximizable: false,
collapsible: false,
// 解决panel内容被加载两次的问题
//content: pal.html(),
onLoad: function () {
if (palOptions.onLoad) {
palOptions.onLoad.call(this, arguments);
}
state.options.onLoad.call(target, $(this));
}
}, palOptions);
var tabs = $.getByParentID(targetID, $.uiTemplate.tabs.headerTabs);
var reg = new RegExp('({tab})', 'g');
if (palOptions.id != undefined && palOptions.id != '') {
pal[0].id = palOptions.id;
} else {
palOptions.id = pal[0].id;
}
palOptions.tab = $($.uiTemplate.tabs.tabHtml.replace(reg, pal[0].id)).appendTo(tabs);
_updateTab(target, {tab: pal, options: palOptions});
};
/**
*更新标签页
* @param target
* @param param
*/
var _updateTab = function (target, param, update) {
update = update == undefined ? false : update;
var selectHis = $.data(target[0], _cacheName).selectHis;
var pal = param.tab;
var palID = pal[0].id;
var palOptions = param.options;
var oldID = '';
try {
var oldOpts = pal.uiPanel('options');
oldID = oldOpts.id;
palOptions = $.extend(oldOpts, palOptions);
} catch (e) {
oldID = palOptions.id;
}
if (update) {
pal.uiPanel('refresh', pal.uiPanel('options').url);
} else {
pal.uiPanel(palOptions);
}
var opts = pal.uiPanel('options');
var tab = opts.tab;
var tab_title = $.getByParentID(palID, $.uiTemplate.tabs.tab_linkTitle);
var tab_icon = $.getByParentID(palID, $.uiTemplate.tabs.tab_linkIcon);
var tab_close = $.getByParentID(palID, $.uiTemplate.tabs.tab_close);
tab_title.html(opts.title);
tab.attr('title', opts.title);
if (opts.closable) {
if (tab_close.length == 0) {
$('').appendTo(tab);
}
} else {
if (tab_close.length > 0) {
tab_close.remove();
}
}
if (opts.fontIcon && !_IEunder6) {
opts.fontIcon.size = opts.fontIcon.size || 16;
opts.fontIcon.color = opts.fontIcon.color || 'inherit';
tab_icon.addClass('ui_panel_fontIcon fa').addClass(opts.fontIcon.icon)
.css({color: opts.fontIcon.color, fontSize: opts.fontIcon.size});
} else {
if (opts.icon) {
if(opts.icon.indexOf('.')>0){
tab_icon.addClass('icon').html("
");
}else{
tab_icon.addClass('icon ' + $.uiTemplate.iconStyle_Pre + opts.icon);
}
} else {
tab_icon.removeClass();
}
}
if (oldID != opts.id) {
for (var i = 0; i < selectHis.length; i++) {
if (selectHis[i] == oldID) {
selectHis[i] = opts.id;
}
}
}
$.data(target[0], _cacheName).options.onUpdate.call(target, opts.id, _getTabIndex(target, pal));
};
var _setProperties = function (target) {
var opts = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
var header = $.getByParentID(targetID, $.uiTemplate.tabs.header);
var panels = $.getByParentID(targetID, $.uiTemplate.tabs.panels);
header.removeClass('ui_tabs_header-top ui_tabs_header-bottom ui_tabs_header-left ui_tabs_header-right');
panels.removeClass('ui_tabs_panels-top ui_tabs_panels-bottom ui_tabs_panels-left ui_tabs_panels-right');
if (opts.tabPosition == 'top') {
header.insertBefore(panels);
header.addClass('ui_tabs_header-top');
panels.addClass('ui_tabs_panels-bottom');
} else if (opts.tabPosition == 'bottom') {
header.insertAfter(panels);
header.addClass('ui_tabs_header-bottom');
panels.addClass('ui_tabs_panels-top');
} else if (opts.tabPosition == 'left') {
header.addClass('ui_tabs_header-left');
panels.addClass('ui_tabs_panels-right');
} else if (opts.tabPosition == 'right') {
header.addClass('ui_tabs_header-right');
panels.addClass('ui_tabs_panels-left');
}
if (opts.border == true) {
header.removeClass('ui_tabs_header_noborder');
panels.removeClass('ui_tabs_panels_noborder');
} else {
header.addClass('ui_tabs_header_noborder');
panels.addClass('ui_tabs_panels_noborder');
}
};
var _setSize = function (target) {
var state = $.data(target[0], _cacheName);
var opts = state.options;
if (opts.autoFit) {
target.autoFit(true, false);
} else {
target.width(opts.width).height(opts.height);
}
var targetID = target.getElemID();
var header = $.getByParentID(targetID, $.uiTemplate.tabs.header);
var panels = $.getByParentID(targetID, $.uiTemplate.tabs.panels);
var headerCenter = $.getByParentID(targetID, $.uiTemplate.tabs.headerCenter);
var ul = $.getByParentID(targetID, $.uiTemplate.tabs.headerTabs);
for (var index = 0; index < state.tabs.length; index++) {
var pal = state.tabs[index];
var pal_opts = pal.uiPanel('options');
var tab_title = $.getByParentID(pal.getElemID(), $.uiTemplate.tabs.tab_link);
var tab_title_t = $.getByParentID(pal.getElemID(), $.uiTemplate.tabs.tab_linkTitle);
var iconw = 0;
var closew = 0;
if (pal_opts.icon != '' || (pal_opts.fontIcon != null && !_IEunder6)) {
iconw = 20;
tab_title_t.css({left: 20});
}
if (pal_opts.closable) {
closew = 5;
}
var tabW = parseInt(opts.tabWidth);
opts.tabWidth=opts.tabWidth+'';
if (opts.tabWidth.indexOf("%") > 0) {
tabW = target.width() * tabW / 100;
}
if (tabW && tabW > 0) {
pal_opts.tabWidth = tabW;
tab_title.width(tabW);
tab_title_t.outerWidth(tab_title.width() - iconw - closew);
} else {
var titleW = tab_title_t.outerWidth();
if (_IEunder9) {
titleW = tab_title_t.text().length * 14;
}
var w = titleW + iconw + closew;
if (w > opts.tabMaxWidth) {
w = opts.tabMaxWidth;
tab_title_t.outerWidth(opts.tabMaxWidth - iconw - closew);
}
pal_opts.tabWidth = w;
tab_title.width(w);
}
}
if (opts.tabPosition == 'left' || opts.tabPosition == 'right') {
header.outerWidth(opts.headerWidth);
panels.outerWidth(target.width() - header.outerWidth());
panels.outerHeight(target.height());
header.add(panels).outerHeight(target.height());
headerCenter.outerWidth(header.width()).outerHeight(target.height());
ul.outerWidth(headerCenter.width());
} else {
var scroller_link = $.getByParentID(targetID, $.uiTemplate.tabs.headerLeft)
.add($.getByParentID(targetID, $.uiTemplate.tabs.headerRight));
header.outerWidth(target.width());
scroller_link.show();
ul.outerHeight(opts.tabHeight).css('width', '');
_setScrollers(target);
panels.outerHeight(target.height() - header.outerHeight());
panels.outerWidth(target.width());
}
};
/**
* 是否显示tab左右滚动链接
* @param target
* @private
*/
var _setScrollers = function (target) {
var opts = $.data(target[0], _cacheName).options;
if (opts.tabPosition == 'left' || opts.tabPosition == 'right') {
return;
}
var targetID = target.getElemID();
var header = $.getByParentID(targetID, $.uiTemplate.tabs.header);
var headerCenter = $.getByParentID(targetID, $.uiTemplate.tabs.headerCenter);
var sLeft = $.getByParentID(targetID, $.uiTemplate.tabs.headerLeft);
var sRight = $.getByParentID(targetID, $.uiTemplate.tabs.headerRight);
var headerTabs = $.getByParentID(targetID, $.uiTemplate.tabs.headerTabs);
var tHeight = header.outerHeight();
var tabsWidth = 0;
headerTabs.children('li').each(function () {
tabsWidth += $(this).outerWidth(true);
});
var cWidth = header.width();
if (tabsWidth > cWidth) {
sLeft.add(sRight).show().outerHeight(tHeight);
headerCenter.css({
marginLeft: sLeft.outerWidth(),
marginRight: sRight.outerWidth(),
width: cWidth - sLeft.outerWidth() - sRight.outerWidth()
});
} else {
sLeft.add(sRight).hide();
headerCenter.css({
marginLeft: 0,
marginRight: 0,
width: cWidth
});
}
};
/**
* 设置选中的标签页面板的大小
* @param target
* @private
*/
var _setSelectedSize = function (target) {
var opts = $.data(target[0], _cacheName).options;
var tab = _getSelectedTab(target);
if (tab) {
var panels = $.getByParentID(target.getElemID(), $.uiTemplate.tabs.panels);
var width = panels.width();
var height = panels.height();
tab.uiPanel('resize', {
width: width,
height: height
});
}
};
var _bindEvents = function (target) {
var state = $.data(target[0], _cacheName);
var opts = state.options;
var targetID = target.getElemID();
var header = $.getByParentID(targetID, $.uiTemplate.tabs.header);
var ul = $.getByParentID(targetID, $.uiTemplate.tabs.headerTabs);
header.unbind().bind(opts.switchMode, function (e) {
if (e.target.id == header[0].id || e.target.id == ul[0].id) {
} else if (e.target.id == $.getIDByParentID(targetID, $.uiTemplate.tabs.headerLeft)) {
target.uiTabs('scrollBy', -opts.scrollIncrement);
} else if (e.target.id == $.getIDByParentID(targetID, $.uiTemplate.tabs.headerRight)) {
target.uiTabs('scrollBy', opts.scrollIncrement);
} else {
var evTarget = $(e.target);
var li = evTarget.closest('li');
if (li.hasClass('tabs-disabled')) {
return;
}
if (li.length) {
var tabIndex = getLiIndex(li);
if (evTarget.hasClass('ui_tab_close')||e.button==1) {
_closeTab(target, tabIndex);
return;
}
var popts = state.tabs[tabIndex].uiPanel('options');
if (popts.collapsible) {
popts.closed ? _selectTab(target, tabIndex) : _unselectTab(target, tabIndex);
} else {
_selectTab(target, tabIndex);
}
}
}
});
if (opts.enableContextMenu) {
header.unbind('contextmenu').bind('contextmenu', function (e) {
var li = $(e.target).closest('li');
if (li.hasClass('tabs-disabled')) {
return;
}
if (li.length) {
var tabIndex = getLiIndex(li);
var tab = target.uiTabs('getTab', tabIndex);
var menu = $.getByParentID(targetID, $.uiTemplate.tabs.tabContextMenu);
var mId = menu.attr('id');
var mOpt = tab.uiPanel('options');
opts.onContextMenu.call(target, e, li[0].id, tabIndex);
menu.uiMenu('show', {triggerObject: e, triggerData: {tabIndex: tabIndex, tabID: tab[0].id}});
// 没有Iframe时禁用刷新菜单项
if (!mOpt.iniframe) {
menu.uiMenu('disableItem', mId + '_1');
} else {
menu.uiMenu('enableItem', mId + '_1');
}
if (!mOpt.closable) {
menu.uiMenu('disableItem', mId + '_2');
} else {
menu.uiMenu('enableItem', mId + '_2');
}
}
});
}
function getLiIndex(li) {
var index = 0;
ul.children('li').each(function (i) {
if (li[0].id == this.id) {
index = i;
return false;
}
});
return index;
}
};
var _addTab = function (target, options) {
var opts = $.data(target[0], _cacheName).options;
var tabs = $.data(target[0], _cacheName).tabs;
if (options.selected == undefined) options.selected = true;
if (options.id != undefined && options.id != '') {
var tab = _getTab(target, options.id);
if (tab) {
_selectTab(target, options.id);
return;
}
} else {
options.id = guidGenerator();
}
var panel = $('').appendTo($.getByParentID(target.getElemID(), $.uiTemplate.tabs.panels));
tabs.push(panel);
_createTab(target, panel, options);
opts.onAdd.call(target, options.id, tabs.length - 1);
_setSize(target);
if (options.selected) {
_selectTab(target, tabs.length - 1);
}
};
/**
* 关闭指定标签页
* @param target
* @param which
* @private
*/
var _closeTab = function (target, which) {
var opts = $.data(target[0], _cacheName).options;
var tabs = $.data(target[0], _cacheName).tabs;
var selectHis = $.data(target[0], _cacheName).selectHis;
if (!_exists(target, which)) return;
var tab = _getTab(target, which);
var id = tab[0].id;
var index = tab[0].index;
if (opts.onBeforeClose.call(target, id, index) == false) return;
tabs.splice(index, 1);
tab.uiPanel('options').tab.remove();
tab.uiPanel('destroy');
opts.onClose.call(target, id, index);
_setSize(target);
for (var i = 0; i < selectHis.length; i++) {
if (selectHis[i] == id) {
selectHis.splice(i, 1);
i--;
}
}
var hisID = selectHis.pop();
if (hisID) {
_selectTab(target, hisID);
} else {
_selectTab(target, 0);
}
};
/**
* 获取指定的标签页
*/
var _getTab = function (target, which, removeit) {
var tabs = $.data(target[0], _cacheName).tabs;
if (typeof which == 'number') {
if (which < 0 || which >= tabs.length) {
return null;
} else {
var tab = tabs[which];
if (removeit) {
tabs.splice(which, 1);
}
tab[0].index = which;
return tab;
}
}
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
if (tab[0].id == which) {
if (removeit) {
tabs.splice(i, 1);
}
tab[0].index = i;
return tab;
}
}
return null;
};
var _getTabIndex = function (target, tab) {
var tabs = $.data(target[0], _cacheName).tabs;
for (var i = 0; i < tabs.length; i++) {
if (tabs[i][0].id == $(tab)[0].id) {
return i;
}
}
return -1;
};
var _getSelectedTab = function (target) {
var tabs = $.data(target[0], _cacheName).tabs;
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
if (tab.uiPanel('options').closed == false) {
return tab;
}
}
return null;
};
/**
* 设置第一个选中的标签页
* @param target
* @private
*/
var _doFirstSelect = function (target) {
var state = $.data(target[0], _cacheName)
_selectTab(target, state.options.selected);
};
var _selectTab = function (target, which) {
var state = $.data(target[0], _cacheName);
var opts = state.options;
var tabs = state.tabs;
var selectHis = state.selectHis;
if (tabs.length == 0) {
return;
}
var panel = _getTab(target, which);
if (!panel) {
return;
}
var selected = _getSelectedTab(target);
if (selected) {
if (panel[0].id == selected[0].id) {
return;
}
_unselectTab(target, _getTabIndex(target, selected));
if (!selected.uiPanel('options').closed) {
return;
}
}
panel.uiPanel('open');
var palID = panel[0].id;
selectHis.push(palID);
var tab = panel.uiPanel('options').tab;
tab.addClass('tabs_selected');
var header = $.getByParentID(target.getElemID(), $.uiTemplate.tabs.header);
var left = tab.position().left;
var right = left + tab.outerWidth();
if (left < 0 || right > header.width()) {
var deltaX = left - (header.width() - tab.width()) / 2;
$(target).uiTabs('scrollBy', deltaX);
} else {
$(target).uiTabs('scrollBy', 0);
}
_setSelectedSize(target);
opts.onSelect.call(target, palID, _getTabIndex(target, panel));
};
var _unselectTab = function (target, which) {
var state = $.data(target[0], _cacheName);
var pal = _getTab(target, which);
if (pal) {
var opts = pal.uiPanel('options');
if (!opts.closed) {
pal.uiPanel('close');
if (opts.closed) {
opts.tab.removeClass('tabs_selected');
state.options.onUnselect.call(target, pal[0].id, _getTabIndex(target, pal));
}
}
}
};
/**
* 判断标签页是否存在
* @param target
* @param which
* @returns {boolean}
* @private
*/
var _exists = function (target, which) {
return _getTab(target, which) != null;
};
var _contextMenu = function (target) {
var options = $.data(target[0], _cacheName).options;
var targetID = target.getElemID();
if (options.enableContextMenu) {
var menu = $('').appendTo(target);
menu.uiMenu({
contextMenu: true,
minWidth: 120,
maxWidth: 120,
dataSource: options.contextData,
onSelect: function (item, e) {
var triggerData = menu.uiMenu('options').triggerData;
var tabIndex = triggerData.tabIndex;
var tabID = triggerData.tabID;
switch (item.id) {
case 1:
target.uiTabs('select', tabIndex);
var tab = target.uiTabs('getSelected');
tab.uiPanel('refresh', tab.uiPanel('options').url);
break;
case 2:
target.uiTabs('close', tabIndex);
break;
case 3:
var tabs = target.uiTabs('tabs');
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
if (tabID != tab[0].id && tab.uiPanel('options').closable == true) {
target.uiTabs('close', tab[0].id);
i--;
}
}
break;
case 4:
var tabs = target.uiTabs('tabs');
for (var i = 0; i < tabs.length; i++) {
var tab = tabs[i];
if (tab.uiPanel('options').closable == true) {
target.uiTabs('close', i);
i--;
}
}
break;
default :
item.onSelect.call(target, item, triggerData);
break;
}
menu.uiMenu('hide');
}
});
}
};
})(jQuery);
/**
* Created by jinxs on 14-8-7.
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiAccordion';
/**
* @class 手风琴选项卡
* @requires {@link uiPanel}
* @constructor uiAccordion
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* // 构件组件
* $('#divMenu').uiAccordion({width: 160, height: 500});
* // 调用组件方法options
* $('#divMenu').uiAccordion("options");
*/
$.fn.uiAccordion = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiAccordion.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiAccordion.defaults, me.parseUIConfig(), options)
});
_setProperties(me);
_init(me);
}
_setSize(me);
_doFirstSelect(me);
});
};
/**
* 方法
* @lends uiAccordion.prototype
*/
$.fn.uiAccordion.methods = {
/**
* @summary 获得组件的配置对象
* @name uiAccordion#options
* @function
* @returns {Object} 组件的配置对象
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* @summary 获得组件的面板对象列表
* @name uiAccordion#panels
* @function
* @returns {Array} 组件的面板对象列表
*/
panels: function (target) {
return $.data(target[0], _cacheName).panels;
},
/**
* @summary 根据配置重置控件的大小
* @name uiAccordion#resize
* @function
* @returns {jQuery} 方法调用者
*/
resize: function (target) {
_setSize(target);
return target;
},
/**
* @summary 获得选择的面板对象列表
* @name uiAccordion#getSelections
* @function
* @returns {Array} 获得选择的面板对象列表
*/
getSelections: function (target) {
return _getSelections(target);
},
/**
* @summary 获得选择的第一个面板对象
* @name uiAccordion#getSelected
* @function
* @returns {Array} 获得选择的第一个面板对象
*/
getSelected: function (target) {
return _getSelected(target);
},
/**
* @summary 根据面板索引获得组件的面板对象
* @name uiAccordion#getPanel
* @function
* @param which {Number} 面板索引
* @returns {uiPanel|null} 组件的面板对象,若未找到则返回null
* @example
* $('#divMenu').uiAccordion("getPanel", 0);
*/
getPanel: function (target, which) {
return _getPanel(target, which);
},
/**
* @summary 根据组件面板对象获得的面板索引
* @name uiAccordion#getPanelIndex
* @function
* @param panel {uiPanel} 面板索引
* @returns {Number} 组件的面板索引,若未找到则返回-1
* @example
* $('#divMenu').uiAccordion("getPanelIndex", panel);
*/
getPanelIndex: function (target, panel) {
return _getPanelIndex(target, panel);
},
/**
* @summary 选择指定的组件的面板对象
* @name uiAccordion#select
* @function
* @param which {Number} 面板索引
* @returns {jQuery} 方法调用者
* @example
* $('#divMenu').uiAccordion("select", 0);
*/
select: function (target, which) {
_select(target, which);
return target;
},
/**
* @summary 取消选择指定的组件的面板对象
* @name uiAccordion#unselect
* @function
* @param which {Number} 面板索引
* @returns {jQuery} 方法调用者
* @example
* $('#divMenu').uiAccordion("unselect", 0);
*/
unselect: function (target, which) {
_unselect(target, which);
return target;
},
/**
* @summary 为组件添加面板对象
* @name uiAccordion#add
* @function
* @param options {Object} 面板配置参数
* @returns {jQuery} 方法调用者
*/
add: function (target, options) {
_add(target, options);
return target;
},
/**
* @summary 移除指定的组件的面板对象
* @name uiAccordion#remove
* @function
* @param which {Number} 面板索引
* @returns {jQuery} 方法调用者
* @example
* $('#divMenu').uiAccordion("remove", 0);
*/
remove: function (target, which) {
_remove(target, which);
return target;
}
};
/**
* 默认配置
* @lends uiAccordion.prototype
*/
$.fn.uiAccordion.defaults = {
/**
* @type Number
* @default 0
* @summary 组件宽度
*/
width: 0,
/**
* @type Number
* @default 0
* @summary 组件高度
*/
height: 0,
/**
* @type Boolean
* @default false
* @summary 是否自适应宽高
*/
autoFit: false,
/**
* @type Boolean
* @default true
* @summary 是否显示边框
*/
border: true,
/**
* @type Boolean
* @default false
* @summary 是否可展开多个面板
*/
multiple: false,
/**
* @type Number
* @default 0
* @summary 默认展开的面板索引
*/
selected: 0,
/**
* @summary 在面板展开时触发的方法。
* @event
* @name uiAccordion#onSelect
* @param title {String} 所选面板的标题
* @param index {Number} 所选面板的索引
* @default emptyFn
*/
onSelect: function (title, index) {},
/**
* @summary 在面板收缩时触发的方法。
* @event
* @name uiAccordion#onUnselect
* @param title {String} 所选面板的标题
* @param index {Number} 所选面板的索引
* @default emptyFn
*/
onUnselect: function (title, index) {},
/**
* @summary 在面板被添加时触发的方法。
* @event
* @name uiAccordion#onAdd
* @param title {String} 所选面板的标题
* @param index {Number} 所选面板的索引
* @default emptyFn
*/
onAdd: function (title, index) {},
/**
* 若方法返回false,则移除操作将撤销
* @summary 在面板被移除前触发的方法。
* @event
* @name uiAccordion#onBeforeRemove
* @param title {String} 所选面板的标题
* @param index {Number} 所选面板的索引
* @default emptyFn
*/
onBeforeRemove: function (title, index) {},
/**
* @summary 在面板被移除后触发的方法。
* @event
* @name uiAccordion#onRemove
* @param title {String} 所选面板的标题
* @param index {Number} 所选面板的索引
* @default emptyFn
*/
onRemove: function (title, index) {}
};
var _init = function (target) {
var state = $.data(target[0], _cacheName);
var options = state.options;
target.setElemID();
target.addClass('ui_accordion');
var targetID = target.getElemID();
if (options.autoFit) {
target.autoFit(true, false);
} else {
target.autoFit(false);
if (!isNaN(options.width)) {
target.outerWidth(options.width);
} else {
target.css('width', '');
}
if (!isNaN(options.height)) {
target.outerHeight(options.height);
} else {
target.css('height', '');
}
}
if(options.multiple){
target.css({overflow:'scroll',overflowX:'hidden'});
}
state.panels = [];
target.children('div').each(function (index) {
var pal = $(this);
pal.addClass('ui_accordion-panel');
pal.setIDByParentID(targetID, index);
var opts = $.extend({}, pal.parseUIConfig(), {
selected: (pal.attr('selected') ? true : undefined)
});
state.panels.push(pal);
_createPanel(target, pal, opts);
});
target.bind('_resize', function (e, force) {
if (options.autoFit == true || force) {
target.autoFit(true, false);
_setSize(target);
}
return false;
});
}
var _createPanel = function (target, pal, palOptions) {
var opts = $.data(target[0], _cacheName).options;
pal.uiPanel($.extend({}, {
collapsible: true,
width: target.width(),
height: 27,
border: false,
minimizable: false,
maximizable: false,
closable: false,
collapsed: true
}, palOptions, {
onBeforeExpand: function () {
if (!opts.multiple) {
var all = $.grep(_getSelections(target), function (p) {
return p.uiPanel('options').collapsible;
});
for (var i = 0; i < all.length; i++) {
_unselect(target, _getPanelIndex(target, all[i]));
}
}
var header = $(this).uiPanel('header');
header.addClass('ui_accordion-header-selected');
var btnColl_icon = $.getByParentID(palID, $.uiTemplate.panel.btnColl_Icon);
btnColl_icon.removeClass('icon_pal_exp').addClass('icon_pal_col').attr('title', '收缩');
},
onExpand: function () {
opts.onSelect.call(target, $(this).uiPanel('options').title, _getPanelIndex(target, this));
},
onBeforeCollapse: function () {
var header = $(this).uiPanel('header');
header.removeClass('ui_accordion-header-selected');
var btnColl_icon = $.getByParentID(palID, $.uiTemplate.panel.btnColl_Icon);
btnColl_icon.removeClass('icon_pal_col').addClass('icon_pal_exp').attr('title', '展开');
},
onCollapse: function () {
opts.onUnselect.call(target, $(this).uiPanel('options').title, _getPanelIndex(target, this));
}
}));
var palOpts = pal.uiPanel('options');
if (palOpts.collapsible) {
var palID = pal.getElemID();
var header = pal.uiPanel('header');
header.css('cursor', 'pointer');
var btnColl = $.getByParentID(palID, $.uiTemplate.panel.btnColl);
btnColl.unbind('click.panel').bind('click.accordion', function () {
if (palOpts.collapsed) {
pal.uiPanel('expand', false);
} else {
if (opts.multiple) {
pal.uiPanel('collapse', false);
} else {
if (!header.hasClass('ui_accordion-header-selected')) {
pal.uiPanel('collapse', false);
}
}
}
return false;
});
}
}
var _setSize = function (target) {
var state = $.data(target[0], _cacheName);
var panels = state.panels;
var headerHeight = 0;
var bodyHeight = 0;
var headers = target.find('>div.ui_panel>div.ui_panel_header');
if (headers.length) {
headerHeight = $(headers[0]).outerHeight();
}
bodyHeight = target.height() - headerHeight * headers.length;
_resize(true, bodyHeight - _resize(false));
function _resize(collapsible, height) {
var totalHeight = 0;
for (var i = 0; i < panels.length; i++) {
var p = panels[i];
var h = p.uiPanel('header').outerHeight(headerHeight);
if (p.uiPanel('options').collapsible == collapsible) {
var pheight = isNaN(height) ? undefined : (height + headerHeight * h.length);
p.uiPanel('resize', {
width: state.options.multiple?target[0].clientWidth:target.width(),
height: (collapsible ? pheight : undefined)
});
totalHeight += p.uiPanel('panel').outerHeight() - headerHeight;
}
}
return totalHeight;
}
}
var _findBy = function (target, property, value, all) {
var panels = $.data(target[0], _cacheName).panels;
var pp = [];
for (var i = 0; i < panels.length; i++) {
var p = panels[i];
if (property) {
if (p.uiPanel('options')[property] == value) {
pp.push(p);
}
} else {
if (p[0] == $(value)[0]) {
return i;
}
}
}
if (property) {
return all ? pp : (pp.length ? pp[0] : null);
} else {
return -1;
}
}
var _getSelections = function (target) {
return _findBy(target, 'collapsed', false, true);
}
var _getSelected = function (target) {
var pp = _getSelections(target);
return pp.length ? pp[0] : null;
}
/**
* get panel index, start with 0
*/
var _getPanelIndex = function (target, panel) {
return _findBy(target, null, panel);
}
/**
* get the specified panel.
*/
var _getPanel = function (target, which) {
var panels = $.data(target[0], _cacheName).panels;
if (typeof which == 'number') {
if (which < 0 || which >= panels.length) {
return null;
} else {
return panels[which];
}
}
return _findBy(target, 'title', which);
}
var _setProperties = function (target) {
var opts = $.data(target[0], _cacheName).options;
if (opts.border) {
target.removeClass('ui_accordion-noborder');
} else {
target.addClass('ui_accordion-noborder');
}
}
/**
* select and set the specified panel active
*/
var _select = function (target, which) {
var p = _getPanel(target, which);
if (!p) {
return
}
p.uiPanel('expand', false);
}
var _unselect = function (target, which) {
var pal = _getPanel(target, which);
if (!pal) {
return
}
pal.uiPanel('collapse', false);
}
var _doFirstSelect = function (target) {
var opts = $.data(target[0], _cacheName).options;
var pal = _findBy(target, 'selected', true);
if (pal) {
_selectP(_getPanelIndex(target, pal));
} else {
_selectP(opts.selected);
}
function _selectP(index) {
_select(target, index);
}
}
var _add = function (target, options) {
var state = $.data(target[0], _cacheName);
var opts = state.options;
var panels = state.panels;
if (options.selected == undefined) options.selected = true;
var pal = $('').appendTo(target);
panels.push(pal);
_createPanel(target, pal, options);
_setSize(target);
opts.onAdd.call(target, options.title, panels.length - 1);
if (options.selected) {
_select(target, panels.length - 1);
}
}
var _remove = function (target, which) {
var state = $.data(target[0], _cacheName);
var opts = state.options;
var panels = state.panels;
var panel = _getPanel(target, which);
var title = panel.uiPanel('options').title;
var index = _getPanelIndex(target, panel);
if (!panel) {
return
}
if (opts.onBeforeRemove.call(target, title, index) == false) {
return
}
panels.splice(index, 1);
panel.uiPanel('destroy');
if (panels.length) {
_setSize(target);
var curr = _getSelected(target);
if (!curr) {
_select(target, 0);
}
}
opts.onRemove.call(target, title, index);
}
})(jQuery);/**
* Created by jinxs on 14-8-11.
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiNumberbox';
/**
* @name uiNumberbox
* @class 数字输入框组件,只能输入数字,字符自动过滤掉。
* @constructor uiNumberbox
* @description 构造函数.
* @param options 组件配置参数:{}
* @example
* $('numberbox').uiNumberbox({decimalPrecision:3});
*/
$.fn.uiNumberbox = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiNumberbox.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiNumberbox.defaults, me.parseUIConfig(), options),
character: '',
allowed: ''
});
}
_init(me);
});
};
/**
* 方法
* @lends uiNumberbox.prototype
*/
$.fn.uiNumberbox.methods = {
/**
* @summary 启用组件。
* @name uiNumberbox#enable
* @function
* @example
* $('#input').uiNumberbox("enable")
*/
enable: function (target) {
_enable(target);
return target;
},
/**
* @summary 禁用组件。
* @name uiNumberbox#disable
* @function
* @example
* $('#input').uiNumberbox("disable")
*/
disable: function (target) {
_disable(target);
return target;
}
};
/**
* 默认配置
* @lends uiNumberbox.prototype
*/
$.fn.uiNumberbox.defaults =
{
/**
* @summary 是否允许输入小数。
* @default true
* @type Boolean
* @example
* $('#input').uiNumberbox({allowDecimals:true});
*/
allowDecimals: true, //是否允许输入小数
/**
* @summary 是否允许输入负数。
* @default true
* @type Boolean
* @example
* $('#input').uiNumberbox({allowNegative:true});
*/
allowNegative: true, //是否允许输入负数
/**
* @summary 精确到小数点后几位。
* @default 2
* @type Number
* @example
* $('#input').uiNumberbox({decimalPrecision:2});
*/
decimalPrecision: 2, //精确到小数点后几位
/**
* @summary 是否禁用组件。
* @default false
* @type Boolean
* @example
* $('#input').uiNumberbox({disabled:true});
*/
disabled: false,
/**
* @summary 在输入框失去焦点时触发的方法。
* @event
* @param value 当前输入框的值
* @param event jQuery.Event对象
* @default emptyFn
* @example
* $('#input').uiNumberbox({onBlur:function(value,event){alert(value);}});
*/
onBlur: function (value) {
},
/**
* @summary 是否只读。
* @default false
* @type Boolean
* @example
* $('#input').uiNumberbox({readOnly:true});
*/
readOnly: false
};
//////--------------------------------内部方法------------------------------
/**
* 创建按钮
* @param target 目标对象
*/
var _init = function (target) {
var options = $.data(target[0], _cacheName).options;
options.id = options.id || target[0].id;
target.attr("id", options.id);
if (typeof options.disabled !== "boolean") {
options.disabled = target.attr("disabled");
}
if (options.readOnly) {
target.attr("readonly", "readonly");
}
_buildAllowChars(target);
_create(target);
if (options.disabled) {
_disable(target);
} else {
_enable(target);
}
return target;
};
// 设置小数精度
var _fixPrecision = function (value, c, p) {
var v = value.indexOf(".");
if (isNaN(value) && value != ".") {
for (; isNaN(value);) {
value = value.substring(0, value.length - 1);
}
}
if (!p.allowNegative && value.indexOf("-") != -1) {
var array = value.split("-");
value = array.join("");
}
if (!p.allowDecimals && v != -1 || value.charAt(value.length - 1) === '.') {
return value.substring(0, v);
}
if (v != -1) {
value = value.substring(0, v + p.decimalPrecision + 1);
}
return value.length > 0 ? parseFloat(value) : "";
};
var _create = function (target) {
var options = $.data(target[0], _cacheName).options;
target.addClass("ui_numberbox")
.css("ime-mode", "disabled");
target.keypress(function (e) {
if (e.which == null && (e.charCode != null || e.keyCode != null)) {
e.which = e.charCode != null ? e.charCode : e.keyCode;
}
var k = e.which;
if (k === 8 || (k == 46 && e.button == -1) || k === 0) {
return;
}
var character = String.fromCharCode(k);
$.data(target[0], _cacheName).character = character;
var allowed = $.data(target[0], _cacheName).allowed;
if (allowed.indexOf(character) === -1 || ($(this).val().indexOf("-") !== -1 && character == "-")
|| ($(this).val().indexOf(".") !== -1 && character == ".")) {
e.preventDefault();
}
}).focus(function () {
target.addClass('ui-focus');
}).blur(function (e) {
target.removeClass('ui-focus');
var character = $.data(target[0], _cacheName).character;
target[0].value = _fixPrecision(this.value, character, options);
target.trigger("onBlur", e, this.value);
}).keydown(function (e) {
_checkLast(target);
//Chrome并不支持css属性ime-mode,无法阻止拼音输入,但当使用输入法时,事件的e.which===229恒成立.
if (229 === e.which) {
e.preventDefault();
}
}).keyup(function (e) {//在Chrome中文输入法下,输入 ,。等字符不会触发input框的keypress事件
_checkLast(target);
}).bind('cut paste', function (e) {
return false;
});
};
var _checkLast = function (target) {
var v = target[0].value,
len = v.length;
if (v && $.data(target[0], _cacheName).allowed.indexOf(v.charAt(len - 1)) === -1
|| v.indexOf('.') != v.lastIndexOf('.')
|| v.indexOf('-') != v.lastIndexOf('-')) {
target[0].value = v = v.substring(0, (len--) - 1);
}
};
var _buildAllowChars = function (target) {
var options = $.data(target[0], _cacheName).options;
var allowed = "0123456789";
// 允许输入的字符
if (options.allowDecimals) {
allowed = allowed + ".";
}
if (options.allowNegative) {
allowed = allowed + "-";
}
if (options.readOnly) {
allowed = "";
}
$.data(target[0], _cacheName).allowed = allowed;
};
var _disable = function (target) {
target.attr("disabled", true)
.addClass("ui-disabled");
};
var _enable = function (target) {
target.attr("disabled", false)
.removeClass("ui-disabled");
};
})(jQuery);/**
* Created by jinxs on 14-8-11.
*/
(function ($) {
/**
* 缓存名称
* @type {String}
* @private
*/
var _cacheName = 'uiDate';
/**
* @class 日期输入框
* @requires {@link My97DatePicker}
* @constructor uiDate
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的方法的参数
* @example
* // 构件组件
* $('#numberbox').uiDate({dateFmt: 'yyyy-MM-dd'});
* // 调用组件方法enable
* $('#numberbox').uiDate("enable");
*/
$.fn.uiDate = function (options, param) {
if (this.length > 0 && typeof options == 'string') {
return $.fn.uiDate.methods[options](this.first(), param);
}
return this.each(function(){
var me = $(this);
var cache = me.data(_cacheName);
options = options || {};
if (cache) {
$.extend(cache.options, options);
} else {
me.data(_cacheName, {
options: $.extend({}, $.fn.uiDate.defaults, me.parseUIConfig(), options)
});
}
_init(me);
});
};
/**
* 方法
* @lends uiDate.prototype
*/
$.fn.uiDate.methods = {
/**
* @summary 启用组件
* @name uiDate#enable
* @function
* @returns {jQuery} 方法调用者
* @example
* $('#input').uiDate("enable")
*/
enable: function (target) {
_enable(target);
return target;
},
/**
* @summary 禁用组件。
* @name uiDate#disable
* @function
* @returns {jQuery} 方法调用者
* @example
* $('#input').uiDate("disable")
*/
disable: function (target) {
_disable(target);
return target;
},
setReadonly:function(target,readonly){
_setReadonly(target,readonly);
return target;
}
};
/**
* 默认配置
* @lends uiDate.prototype
*/
$.fn.uiDate.defaults =
{
/**
* @type Boolean
* @default false
* @summary 是否必填
*/
required: false,
/**
* @type Number
* @default 150
* @summary 控件宽度
*/
width: 150,
skin: 'default',
/**
* 设置初始化时显示的日期值,若不设置则为当前日期,可结合参数alwaysUseStartDate使用
* @name uiDate#startDate
* @type String
* @default ''
* @summary 默认开始日期
*/
startDate: '',
/**
* 若为true,则控件初始化时,无论输入框的值是否为空都将使用开始日期作为默认值
* @type Boolean
* @default false
* @summary 是否始终使用默认开始日期
*/
alwaysUseStartDate: false,
/**
* @type Boolean
* @default false
* @summary 双日历
*/
doubleCalendar: false,
/**
* 若不设置,最小日期为1900-01-01 00:00:00
* 其它特性同maxDate
* @type String
* @default ''
* @summary 限制最小日期
*/
minDate: '',
/**
* 若不设置,最大日期为2099-12-31 23:59:59
* 可以通过系统给出的动态变量,如%y(当前年),%M(当前月)等来限度日期范围,你还可以通过{}进行表达式运算,如:{%d+1}:表示明天
* 动态变量表:
*
*
* | 格式 |
* 说明 |
* | %y | 当前年 |
* | %M | 当前月 |
* | %d | 当前日 |
* | %ld | 本月最后一天 |
* | %H | 当前时 |
* | %m | 当前分 |
* | %s | 当前秒 |
* | {} | 运算表达式,如:{%d+1}:表示明天 |
* | #F{} | {}之间是函数可写自定义JS代码 |
*
* @type String
* @default ''
* @summary 限制最大日期
*/
maxDate: '',
/**
* 设置为true时,无效天和无效日期变成有效天和有效日期
* 使用无效天和无效日期可以很方便的禁用不可用的日期,但是在只需要启用少部分日期的情况下,有效天和有效日期的功能就非常适合了
* @type Boolean
* @default false
* @summary 有效天与有效日期反转
*/
opposite: false,
/**
* 可以使用此功能禁用周日至周六所对应的日期(0至6 分别代表 周日至周六)
* @type Array
* @default []
* @summary 设置不可用的天
*/
disabledDays: [],
/**
* 可以使用此功能禁用,所指定的一个或多个日期,只要你熟悉正则表达式,你可以尽情发挥
* ['2008-02-01','2008-02-29'] 表示禁用 2008-02-01 和 2008-02-29
* ['2008-..-01','2008-02-29'] 表示禁用 2008-所有月份-01 和 2008-02-29
* ['200[0-8]]-02-01','2008-02-29'] 表示禁用 [2000至2008]-02-01 和 2008-02-29
* ['^2006'] 表示禁用 2006年的所有日期
* 此外,您还可以使用 %y %M %d %H %m %s 等变量, 用法同动态日期限制 注意:%ld不能使用
* ['....-..-01','%y-%M-%d'] 表示禁用 所有年份和所有月份的第一天和今天
* ['%y-%M-{%d-1}','%y-%M-{%d+1}'] 表示禁用 昨天和明天
* 当然,除了可以限制日期以外,您还可以限制时间
* ['....-..-.. 10\:00\:00'] 表示禁用 每天10点 (注意 : 需要 使用 \: )
* @type Array
* @default []
* @summary 设置不可用的日期
*/
disabledDates: [],
/**
* @type Array
* @default []
* @summary 设置特殊的天
*/
specialDays: [],
/**
* @type Array
* @default []
* @summary 设置特殊的日期
*/
specialDates: [],
/**
* 纠错处理可设置为3种模式:提示(默认) 自动纠错 标记,当日期框中的值不符合格式时,系统会尝试自动修复,
* 如果修复失败会根据您设置的纠错处理模式进行处理,错误判断功能非常智能它可以保证用户输入的值是一个合法的值
* 使用默认容错模式 提示模式 errDealMode = 0 在输入错误日期时,会先提示
* 自动纠错模式 errDealMode = 1 在输入错误日期时,自动恢复前一次正确的值
* 标记模式 errDealMode = 2 在输入错误日期时,不做提示和更改,只是做一个标记,但此时日期框不会马上隐藏
* @type Number
* @default 1
* @summary 自动纠错功能
*/
errDealMode: 1,
/**
yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式.
日期格式表
| 格式 |
说明 |
| y |
将年份表示为最多两位数字。如果年份多于两位数,则结果中仅显示两位低位数。 |
| yy |
同上,如果小于两位数,前面补零。 |
| yyy |
将年份表示为三位数字。如果少于三位数,前面补零。 |
| yyyy |
将年份表示为四位数字。如果少于四位数,前面补零。 |
| M |
将月份表示为从 1 至 12 的数字 |
| MM |
同上,如果小于两位数,前面补零。 |
| MMM |
返回月份的缩写 一月 至 十二月 (英文状态下 Jan to Dec) 。 |
| MMMM |
返回月份的全称 一月 至 十二月 (英文状态下 January to December) 。 |
| d |
将月中日期表示为从 1 至 31 的数字。 |
| dd |
同上,如果小于两位数,前面补零。 |
| H |
将小时表示为从 0 至 23 的数字。 |
| HH |
同上,如果小于两位数,前面补零。 |
| m |
将分钟表示为从 0 至 59 的数字。 |
| mm |
同上,如果小于两位数,前面补零。 |
| s |
将秒表示为从 0 至 59 的数字。 |
| ss |
同上,如果小于两位数,前面补零。 |
| w |
返回星期对应的数字 0 (星期天) - 6 (星期六) 。 |
| D |
返回星期的缩写 一 至 六 (英文状态下 Sun to Sat) 。 |
| DD |
返回星期的全称 星期一 至 星期六 (英文状态下 Sunday to Saturday) 。 |
| W |
返回周对应的数字 (1 - 53) 。 |
| WW |
同上,如果小于两位数,前面补零 (01 - 53) 。 |
示例
| 格式字符串 |
值 |
| yyyy-MM-dd HH:mm:ss |
2008-03-12 19:20:00 |
| yy年M月 |
08年3月 |
| yyyyMMdd |
20080312 |
| 今天是:yyyy年M年d HH时mm分 |
今天是:2008年3月12日 19时20分 |
| H:m:s |
19:20:0 |
| y年 |
8年 |
| MMMM d, yyyy |
三月 12, 2008 |
* @type String
* @default 'yyyy-MM-dd'
* @summary 日期格式
*/
dateFmt: 'yyyy-MM-dd',
/**
* @default false
* @type Boolean
* @summary 是否禁用组件
* @example
* $('#input').uiDate({disabled:true});
*/
disabled: false,
/**
* 如果日期格式里不包含 d(天) 这个元素时,快速选择将一直显示
* @default true
* @type Boolean
* @summary 是否启用快速选择功能
*/
qsEnabled: true,
/**
* 可以传入5个快速选择日期
* 日期格式必须与 realDateFmt realTimeFmt 相匹配
* 除了使用静态的日期值以外,还可以使用动态参数(如:%y,%M分别表示当前年和月)
* @default []
* @type Array
* @summary 快速选择数据
*/
quickSel: [],
/**
* @default false
* @type Boolean
* @example
* $('#input').uiDate({readonly:true});
* @summary 是否只读
*/
readonly: false,
/**
* 可以通过配置此属性决定是否限制周,并且在返回日期的时候还可以通过自带的自定义事件和API函数返回选择的周
* @default false
* @type Boolean
* @summary 是否显示周
* @example
* $('#input').uiDate({isShowWeek:true,onpicked:function(){$dp.$('d122_1').value=$dp.cal.getP('W','W');$dp.$('d122_2').value=$dp.cal.getP('W','WW');}});
*/
isShowWeek: false,
/**
* @default true
* @type Boolean
* @summary 是否高亮周末
*/
highLineWeekDay: true,
/**
* @default true
* @type Boolean
* @summary 是否显示清空按钮
*/
isShowClear: true,
/**
* @default true
* @type Boolean
* @summary 是否显示今天按钮
*/
isShowToday: true,
/**
* 例如{left:100,top:100}
* @default {}
* @type Object
* @summary 自定义换件的显示位置
*/
position: {},
/**
* 各个国家的习惯不同,有些喜欢以星期日作为第一天,有些以星期一作为第一天.
* 相关属性:firstDayOfWeek: 可设置 0 - 6 的任意一个数字,0:星期日 1:星期一 以此类推
* @default 1
* @type Number
* @summary 自定义星期的第一天
*/
firstDayOfWeek: 1,
/**
* 在输入框失去焦点时触发的方法。
* @event
* @name uiDate#onpicking
* @param dp {Object} 控件API
* @default emptyFn
* @example
* $('#input').uiDate({onpicking:function(dp){
* if(!confirm('日期框原来的值为: '+dp.cal.getDateStr()+', 要用新选择的值:' + dp.cal.getNewDateStr() + '覆盖吗?'))
* return true;
* }});
* @summary 在输入框失去焦点时触发
*/
onpicking: function (dp) {},
/**
* @summary 在输入框失去焦点时触发的方法。
* @event
* @name uiDate#onpicked
* @param dp {Object} 控件API
* @default emptyFn
* @example
* 选择第一个日期的时候,第二个日期选择框自动弹出
* 注意:下面第一个控件代码的写法
*
* 至
*
* 注意:$dp.$是一个内置函数,相当于document.getElementById
*/
onpicked: function (dp) {},
/**
* 当函数返回true时,系统的清空事件将被取消
* @summary 在输入框的值被清空时触发的方法。
* @event
* @name uiDate#onclearing
* @default emptyFn
*/
onclearing: function () {
},
/**
* @summary 在输入框的值被清空后触发的方法。
* @param dp {Object} 控件API
* @event
* @name uiDate#oncleared
* @default emptyFn
*/
oncleared: function (dp) {},
/**
* 在方法内可使用$dp.cal.date和$dp.cal.newdate获得更改前后的日期对象
* 类似的事件有Mchanging、dchanging、Hchanging、mchanging和schanging
* @event
* @summary 年份更改时触发的事件
* @name uiDate#ychanging
* @default emptyFn
*/
ychanging: function () {},
/**
* 在方法内可使用$dp.cal.date和$dp.cal.newdate获得更改前后的日期对象
* 类似的事件有Mchanged、dchanged、Hchanged、mchanged和schanged
* @event
* @summary 年份更改后触发的事件
* @name uiDate#ychanged
* @default emptyFn
*/
ychanged: function () {},
Mchanging: function () {},
Mchanged: function () {},
dchanging: function () {},
dchanged: function () {},
Hchanging: function () {},
Hchanged: function () {},
mchanging: function () {},
mchanged: function () {},
schanging: function () {},
schanged: function () {}
};
//////--------------------------------内部方法------------------------------
/**
* 创建按钮
* @param target 目标对象
*/
var _init = function (target) {
var options = $.data(target[0], _cacheName).options;
target.setElemID().addClass('ui_date');
var targetID = target.getElemID();
if (typeof options.disabled !== "boolean") {
options.disabled = target.attr("disabled");
}
var span = $($.uiTemplate.datepicker.pickerHtml).setIDByParentID(targetID, $.uiTemplate.datepicker.pickerSpan);
target.wrap(span);
var icon = $($.uiTemplate.datepicker.iconHtml).setIDByParentID(targetID, $.uiTemplate.datepicker.icon);
target.after(icon);
_setReadonly(target,options.readonly);
if(_IEunder7) {
target.outerWidth(options.width - icon.outerWidth());
}else{
target.outerWidth(options.width - icon.outerWidth()+2);
}
return target;
};
var _disable = function (target) {
var icon = $.getByParentID(target.getElemID(), $.uiTemplate.datepicker.icon);
target.attr("disabled", true)
.addClass("ui-disabled");
target.unbind('.uiDate');
icon.unbind('.uiDate');
};
var _enable = function (target) {
var options = $.data(target[0], _cacheName).options;
target.attr("disabled", false)
.removeClass("ui-disabled");
var icon = $.getByParentID(target.getElemID(), $.uiTemplate.datepicker.icon);
var span = $.getByParentID(target.getElemID(), $.uiTemplate.datepicker.pickerSpan);
icon.unbind('.uiDate').bind('click.uiDate', function () {
target.focus();
});
target.unbind('.uiDate').bind('focus.uiDate',function () {
span.addClass('ui_date-focus');
WdatePicker(options);
}).bind('blur.uiDate', function () {
span.removeClass('ui_date-focus');
});
if (options.required) {
target.uiValidate({
required: true,
tipOffset: [20, 0],
afterValidate: function (validate) {
if (!validate) {
span.addClass('ui_date-invalid');
} else {
span.removeClass('ui_date-invalid');
}
}
});
target.css('border','0');
}
};
var _setReadonly = function (target, readonly) {
var options = $.data(target[0], _cacheName).options;
var icon = $.getByParentID(target.getElemID(), $.uiTemplate.datepicker.icon);
var span = $.getByParentID(target.getElemID(), $.uiTemplate.datepicker.pickerSpan);
var input = span.find('.ui_date');
if (readonly) {
span.addClass('ui_validate_disabled');
icon.hide();
input.width(input.width() + 20);
target.attr('readonly',true);
target.unbind('.uiDate');
icon.unbind('.uiDate');
var starId=target.attr('id')+'-star';
$('#'+starId).remove();
} else {
span.removeClass('ui_validate_disabled');
icon.show();
input.width(input.width() - 20);
if (options.disabled) {
_disable(target);
} else {
_enable(target);
}
}
}
})(jQuery);/**
* Created by jinxs on 14-8-13.
*/
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiValidate';
/**
* @class 验证组件
* @constructor uiValidate
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的组件方法的参数
* @example
* //采用默认值
* $('#tab').uiValidate();
* //设置组件参数
* $('#tab').uiValidate({delay:'200',width:'150'});
* //调用组件方法
* $('#tab').uiValidate('destroy','');
*/
$.fn.uiValidate = function (options, param) {
if (this.length > 0 && typeof options == 'string') {
return $.fn.uiValidate.methods[options](this, param);
}
return this.each(function () {
var me = $(this);
var state = me.data(_cacheName);
options = options || {};
if (state) {
$.extend(state.options, options);
} else {
me.data(_cacheName, {options: $.extend({}, $.fn.uiValidate.defaults, me.parseUIConfig(), options)});
_init(me);
}
_isValidate(me);
_isValid(me);
setTimeout(function () {
_hideTip(me);
}, options.delay);
$.getByParentID(me.attr('id'), $.uiTemplate.uiValidate.lenDiv).hide();
});
};
/**
* 方法
* @lends uiValidate.prototype
*/
$.fn.uiValidate.methods = {
/**
* @summary 获取组件配置参数
* @function
* @name uiValidate#options
* @returns {Object}
* @example
* $('#btn').uiValidate('options');
*/
options: function (target) {
return $.data(target[0], _cacheName).options;
},
/**
* @summary 移除组件
* @name uiValidate#destroy
* @function
* @returns {jQuery} 组件对象
*/
destroy: function (target) {
_destroy(target);
},
/**
* @summary 验证
* @name uiValidate#validate
* @function
* @returns {jQuery} 组件对象
*/
validate: function (target) {
_isValid(target);
return target;
},
/**
* @summary 是否合法
* @name uiValidate#isValid
* @function
* @returns {Boolean}
*/
isValid: function (target) {
return _isValid(target);
},
/**
* @summary 启用验证功能
* @name uiValidate#enableValidation
* @function
* @returns {jQuery} 组件对象
*/
enableValidation: function (target) {
_isValidate(target, false);
return target;
},
/**
* @summary 禁用验证功能
* @name uiValidate#disableValidation
* @function
* @returns {jQuery} 组件对象
*/
disableValidation: function (target) {
_isValidate(target, true);
return target;
},
/**
* @summary 启用组件
* @name uiValidate#enable
* @function
* @returns {jQuery} 组件对象
*/
enable: function (target) {
target.attr('readonly', false).removeClass('ui_validate_disabled');
_isValidate(target, false);
return target;
},
/**
* @summary 禁用组件
* @name uiValidate#disable
* @function
* @returns {jQuery} 组件对象
*/
disable: function (target) {
_isValidate(target, true);
return target;
},
/**
* @summary 设置组件是否为只读
* @name uiValidate#setReadonly
* @function
* @param readonly {Boolean} 是否为只读
* @returns {jQuery} 组件对象
*/
setReadonly: function (target, readonly) {
_setReadonly(target, readonly);
return target;
}
};
/**
* 默认配置
* @lends uiValidate.prototype
*/
$.fn.uiValidate.defaults = {
/**
* @type Number
* @default 150
* @summary 组件宽度
*/
width: 150,
/**
* @type Boolean
* @default false
* @summary 是否必填
*/
required: false,
star: {show: true, front: false},
/**
* @type Boolean
* @default false
* @summary 指示组件是否禁用
*/
disabled: false,
readonly: false,
/**
* @type String
* @default null
* @summary 空值
*/
nullValue: null,
/**
* 验证规则包含:
*
*
* | 属性 |
* 说明 |
* | username | 姓名 |
* | phone | 电话 |
* | mobile | 移动电话 |
* | email | 邮箱 |
* | url | URL |
* | length | 输入文本的长度:用法:length[0,10] |
* | remote | 远程 |
*
* @type String
* @default null
* @summary 验证类型
*/
validType: null,
/**
* @type String
* @default null
* @summary 验证参数
*/
validParams: null,
/**
* @type Boolean
* @default false
* @summary 是否输入完即验证
*/
tipAfterInput: false,
/**
* @type Boolean
* @default false
* @summary 是否以html Title的形式显示提示信息
*/
showTitleTip: false,
/**
* @type Number
* @default 200
* @summary 组件输入框在编辑后执行验证前的延迟毫秒数
*/
delay: 200,
/**
* @type String
* @default 必填项!
* @summary 必填提示消息
*/
missingMessage: '必填项!',
tipMessage:'',
/**
* @type String
* @default ""
* @summary 无效提示消息
*/
invalidMessage: '',
/**
* @type String
* @default right
* @summary 提示消息的位置
*/
tipPosition: 'right',
/**
* @type String
* @default [0, 19]
* @summary 提示消息的偏移量
*/
tipOffset: [0, 0],
/**
* @type Boolean
* @default false
* @summary 是否显示验证后的效果
*/
novalidate: false,
/**
* @summary 在验证之后触发的方法。
* @event
* @name uiValidate#afterValidate
* @param isValidate {Boolean} 是否验证
* @default emptyFn
*/
afterValidate: function (isValidate) {
},
/**
* 验证规则包含:
*
*
* | 属性 |
* 说明 |
* | username | 姓名 |
* | phone | 电话 |
* | mobile | 移动电话 |
* | email | 邮箱 |
* | url | URL |
* | length | 输入文本的长度 |
* | remote | 远程 |
*
* @summary 验证规则定义,通过validType调用,可通过扩展该方法实现更多的验证规则
* @name uiValidate#rules
*/
rules: {
username: {
validator: function (val) {
return $.regexs.username.test(val);
}, message: '请输入合法的用户名!'
},
phone: {
validator: function (val) {
return $.regexs.phone.test(val);
}, message: '电话格式错误!'
},
mobile: {
validator: function (val) {
return $.regexs.mobile.test(val);
}, message: '手机号码格式错误!'
},
email: {
validator: function (val) {
return $.regexs.email.test(val);
}, message: "请输入有效的邮箱地址!"
},
url: {
validator: function (val) {
return $.regexs.url.test(val);
}, message: "请输入合法的URL!"
},
length: {
validator: function (val, len) {
var valLen = $.trim(val).length;
var lenDivName = $.uiTemplate.uiValidate.lenDiv;
var lenDiv = $.getByParentID(this[0].id, lenDivName);
if (lenDiv.length == 0) {
lenDiv = $('');
this.after(lenDiv);
}
lenDiv.html('字数:' + valLen);
if (_IEunder9) {
lenDiv.width(80);
}
var pos = this.position();
lenDiv.css({
top: pos.top + this.outerHeight(),
left: pos.left + this.outerWidth() - lenDiv.outerWidth()
});
return valLen >= len[0] && valLen <= len[1];
}, message: "长度必须介于{0}~{1}。"
},
remote: {
validator: function (val, params) {
var date = {};
date[params[1]] = val;
var responseText = $.ajax({
url: params[0],
dataType: "json",
data: date,
async: false,
cache: false,
type: "post"
}).responseText;
return responseText == "true";
}, message: "请确认信息的正确性!"
}
}
};
var _init = function (target) {
target.each(function () {
var me = $(this);
if (this.style.width == '' && me.attr("cols") === undefined) {
me.width(me.data(_cacheName).options.width);
}
me.setElemID();
me.addClass("ui_validate");
});
};
var _destroy = function (target) {
target.each(function () {
var me = $(this);
var state = me.data(_cacheName);
state.validating = false;
if (state.timer) {
clearTimeout(state.timer);
}
me.tooltip("destroy");
me.remove();
});
};
function _bindEvents(target) {
var state = $.data(target[0], _cacheName);
var options = state.options;
target.unbind(".uiValidate");
if (options.novalidate) {
return;
}
target.bind("focus.uiValidate", function () {
state.validating = true;
state.value = undefined;
target.addClass('ui-focus');
if (options.tipAfterInput) {
(function () {
if (state.validating) {
if (state.value != target.val()) {
state.value = target.val();
if (state.timer) {
clearTimeout(state.timer);
}
state.timer = setTimeout(function () {
vali();
}, state.options.delay);
} else {
_reShowTip(target);
}
setTimeout(arguments.callee, 200); //递归调用
}
})();
} else {
vali();
}
function vali() {
var vali = target.uiValidate("isValid");
}
var lenDiv = $.getByParentID(target[0].id, $.uiTemplate.uiValidate.lenDiv);
lenDiv.show();
})
.bind("blur.uiValidate", function () {
target.removeClass('ui-focus');
if (state.timer) {
clearTimeout(state.timer);
state.timer = undefined;
}
state.validating = false;
if (!options.tipAfterInput) {
target.uiValidate("validate");
}
_hideTip(target);
var lenDiv = $.getByParentID(target[0].id, $.uiTemplate.uiValidate.lenDiv);
lenDiv.hide();
})
.bind("mouseover.uiValidate", function () {
if(options.tipMessage!=''){
state.message=options.tipMessage;
_showTip(target);
}
if (target.hasClass("ui_validate-invalid")) {
_showTip(target);
}
})
.bind("mouseleave.uiValidate", function () {
if (!state.validating) {
_hideTip(target);
}
});
};
var _showTip = function (target) {
target.each(function () {
var me = $(this);
var state = me.data(_cacheName);
var options = state.options;
if (_IEunder6 || options.showTitleTip) {
me[0].title = state.message;
state.tip = true;
return;
}
me.uiTooltip({content: state.message, region: options.tipPosition, offset: options.tipOffset})
.uiTooltip('show');
state.tip = true;
});
};
var _reShowTip = function (target) {
var state = $.data(target[0], _cacheName);
if (state) {
if (_IEunder6 || state.options.showTitleTip) {
target[0].title = state.message;
return;
}
if (state.tip) {
var targetID = target.getElemID();
var tipContent = $.getByParentID(targetID, $.uiTemplate.tooltip.content);
if (tipContent.length > 0 && tipContent.is(':visible')) {
tipContent.html(state.message);
}
}
}
};
var _hideTip = function (target) {
target.each(function () {
var me = $(this);
var state = me.data(_cacheName);
if (_IEunder6 || state.options.showTitleTip) {
return;
}
state.tip = false;
me.uiTooltip('hide');
});
};
var _isValid = function (target) {
var rs = true;
target.each(function () {
var me = $(this);
var state = me.data(_cacheName);
var options = state.options;
var val = me.val();
if (options.novalidate || me.is(":disabled")) {
me.removeClass("ui_validate-invalid");
_hideTip(me);
me[0].title = '';
return true;
}
if (options.required) {
me[0].title = '';
if ($.trim(val) == "" || val == options.nullValue) {
me.addClass("ui_validate-invalid");
_setMsg(options.missingMessage);
if (state.validating) {
_showTip(me);
}
options.afterValidate.call(me, false);
rs = false;
return true;
}
options.afterValidate.call(me, true);
}
if (options.validType) {
if ($.isArray(options.validType)) {
for (var i = 0; i < options.validType.length; i++) {
if (!_valid(options.validType[i])) {
options.afterValidate.call(me, false);
rs = false;
return true;
}
}
} else {
if (typeof options.validType == "string") {
if (!_valid(options.validType)) {
options.afterValidate.call(me, false);
rs = false;
return true;
}
} else {
for (var typeName in options.validType) {
var valid = options.validType[typeName];
if (!_valid(typeName, valid)) {
options.afterValidate.call(me, false);
rs = false;
return true;
}
}
}
}
}
me.removeClass("ui_validate-invalid");
_hideTip(me);
options.afterValidate.call(me, true);
function _setMsg(msg) {
state.message = msg;
}
function _valid(typeName, validOpts) {
me[0].title = '';
var params = /([a-zA-Z_]+)(.*)/.exec(typeName);
var rule = options.rules[params[1]];
if (rule && val) {
var valid_options = validOpts || options.validParams || eval(params[2]);
if (!rule["validator"].call(me, val, valid_options)) {
me.addClass("ui_validate-invalid");
var msg = rule["message"];
if (valid_options) {
for (var i = 0; i < valid_options.length; i++) {
msg = msg.replace(new RegExp("\\{" + i + "\\}", "g"), valid_options[i]);
}
}
_setMsg(options.invalidMessage || msg);
if (state.validating) {
_showTip(me);
}
return false;
}
}
return true;
}
});
return rs;
};
var _isValidate = function (target, novalidate) {
target.each(function () {
var me = $(this);
if (me.data(_cacheName)) {
var options = me.data(_cacheName).options;
if (novalidate != undefined) {
options.novalidate = novalidate;
}
var starId = me.attr('id') + '-star';
if (options.novalidate) {
me.removeClass("ui_validate-invalid");
_hideTip(me);
if (options.star.show) {
$('#' + starId).remove();
}
} else {
if (options.star.show && options.required && !options.readonly) {
var star = '*';
var tar = me;
if (tar.hasClass('ui_combo-text') || tar.hasClass('ui_date') || tar.hasClass('ui_ueditor')) {
tar = me.parent();
addStar();
}else{
if(!me.attr("readonly")){
addStar();
}
}
function addStar() {
if ($('#' + starId).length == 0) {
if (options.star.front) {
tar.before(star);
} else {
tar.after(star);
}
}
}
} else {
$('#' + starId).remove();
}
}
_bindEvents(me);
}
});
};
var _setReadonly = function (target, readonly) {
target.each(function () {
var me = $(this);
if (me.data(_cacheName)) {
var options = me.data(_cacheName).options;
options.readonly=readonly == undefined ? false : readonly;
}
});
_isValidate(target, readonly);
if (readonly) {
target.attr('readonly', true).addClass('ui_validate_disabled');
} else {
target.attr('readonly', false).removeClass('ui_validate_disabled');
}
}
})(jQuery);
(function ($) {
/**
* 缓存名称
* @type {string}
* @private
*/
var _cacheName = 'uiForm';
/**
* @class 表单组件
* @constructor uiForm
* @summary 构造函数
* @param [options] {Object|String} 组件配置参数|要调用的组件方法名
* @param [param] {Object} 表示要调用的方法的参数
* @example
* // 构件组件
* $('#div').uiForm({
* axis:'h',
* onStopDrag: function(e){
* alert(this[0]==e.data.target[0]);
* }
* });
* // 调用组件方法options
* $('#div').uiForm("options");
*/
$.fn.uiForm = function (options, param) {
if (typeof options == 'string') {
return $.fn.uiForm.methods[options](this, param);
}
return this.each(function(){
var me = $(this);
options = options || {};
if (!me.data(_cacheName)) {
me.data(_cacheName,{
options: $.extend({}, $.fn.uiForm.defaults, options)
});
_setForm(me);
}
});
};
/**
* 方法
* @lends uiForm.prototype
*/
$.fn.uiForm.methods = {
/**
* @summary 获得组件的数据对象
* @name uiForm#data
* @function
* @returns {Array