///
//电脑端banner滑块控件命名空间
Namespace.register("U.MD.UI.slider");
/**
电脑端banner滑块控件
*/
/**
@box {object} 存放控件的div的id
@imgarr {array} 存放图片的数组
@speed {string} 轮播速度
@cut {bool} 判断左右切换按钮是否出现
@dot {bool} 判断小圆点是否出现
@cb {回调callback} 引用方法
**/
U.MD.UI.slider = function (box, imgarr, attr) {
//定义传输进来的参数
var _speed = attr.speed;
var _arrow = attr.arrow;
var _dot = attr.dot;
var _moveFun = attr.moveFun;
//快速创建存放图片的ul
var _sliderimgul = $$("ul", { className: 'U_MD_UI_slider_ImgList' }, box);
//在数组的第一个插入最后一张图片
imgarr.unshift(imgarr[imgarr.length - 1]);
//在arrImg[]最后放第一张图片
imgarr.push(imgarr[1]);
//for循环创建需要的li
for (i = 0; i < imgarr.length; i++) {
var _sliderimgli = $$("li", { className: '' }, _sliderimgul),
_sliderImg = $$("img", { className: '', src: imgarr[i] }, _sliderimgli); //"onerror": U.MD.C.imgError,
}
//快速创建存放左右按钮的ul
var _sliderbtnul = $$("ul", { className: 'U_MD_UI_slider_Btn' }, box),
_sliderbtnlil = $$("li", { className: 'U_MD_UI_slider_Left', innerHTML: '<' }, _sliderbtnul),
_sliderbtnlir = $$("li", { className: 'U_MD_UI_slider_Right', innerHTML: '>' }, _sliderbtnul);
//快速创建存放小圆点的ul
var _sliderpointul = $$("ul", { className: 'U_MD_UI_slider_Point' }, box);
//快速创建li,li的长度为图片的减两张（补图法）
for (i = 0; i < imgarr.length - 3; i++) {
//第一个li时，定义第一个li的class
if (i == 0) {
$$("li", { className: 'U_MD_UI_slider_On' }, _sliderpointul)[0];
}
$$("li", { className: '' }, _sliderpointul)[i];
}
//定义父元素的宽度
var _boxidwidth = box.offsetWidth;
//定义父元素的高度
var _boxidheight = box.offsetHeight;
//定义class为U_MD_UI_slider_ImgList
var _sliderimglist = box.getElementsByClassName("U_MD_UI_slider_ImgList")[0];
var _sliderimgli = _sliderimglist.getElementsByTagName("li");
//定义class为U_MD_UI_slider_Btn
var _sliderbtn = document.getElementsByClassName("U_MD_UI_slider_Btn")[0];
//定义class为U_MD_UI_slider_Point
var _sliderpoint = box.getElementsByClassName('U_MD_UI_slider_Point')[0];
//定义class为_sliderbtn的所有li
var _btnli = _sliderbtn.getElementsByTagName("li");
//定义class为_sliderimglist的li长度
var _listlen = _sliderimglist.getElementsByTagName("li").length;
//定义图片索引为1
var _listindex = 1;
//定义_sliderpoint里的li
var _pointdot = _sliderpoint.getElementsByTagName("li");
//定义_pointdot.length
var _dotlen = _pointdot.length;
//定义小圆点索引为0
var _dotindex = 0;
//初始化timer
var timer = null;
//如果obj.dot为true则显示小圆点
if (_dot) {
_sliderpoint.style.display = "block";
} else {
_sliderpoint.style.display = "none";
}
/** Banner宽度和高度跟随父元素 **/
//定义_sliderimglist里的li
var _sliderli = _sliderimglist.getElementsByTagName("li");
//所有图片的高宽等于盒子
for (var i = 0; i < _sliderli.length; i++) {
_sliderli[i].style.width = _boxidwidth + "px";
_sliderli[i].style.height = _boxidheight + "px";
}
//存放图片的ul的总宽度（盒子长度*图片数量）
_sliderimglist.style.width = (_boxidwidth * imgarr.length) + "px";
//第一张图片的位置
_sliderimglist.style.left = -_boxidwidth + "px";
//左右切换按钮宽度跟随盒子宽度
_sliderbtn.style.width = _boxidwidth + "px";
/** 鼠标停留计时器停止或启动、左右按钮显示 **/
//鼠标停留
box.onmouseover = function () {
//如果obj.cut为true则显示按钮
if (_arrow) {
_sliderbtn.style.display = "block";
} else {
_sliderbtn.style.display = "none";
}
//清除计时器
clearInterval(timer);
}
//鼠标离开
box.onmouseout = function () {
_sliderbtn.style.display = "none";
//启动计时器
timer = setInterval(auto, _speed);
}
//定义当前时间
var sTime = new Date();
//左边按钮
_btnli[0].onclick = function () {
//定义点击后的时间
var nTime = new Date();
//点击后时间距离下次点击要大于500ms才能继续下次点击
if (nTime - sTime > 500) {
//图片索引和小圆点索引减少
_listindex--;
_dotindex--;
if (_listindex == 0) {
//调用move函数
move(_sliderimglist, { left: -_boxidwidth * _listindex }, function () {
_listindex = _listlen - 2;
this.style.left = -_listindex * _boxidwidth + "px";
});
} else {
move(_sliderimglist, { left: -_boxidwidth * _listindex });
}
//小圆点移动
_dotindex = _dotindex == -1 ? _dotlen - 1 : _dotindex;
moveBtn(_dotindex);
_moveFun && _moveFun(_dotindex + 1);
}
sTime = new Date();
}
//右边按钮
_btnli[1].onclick = function () {
//定义点击后的时间
var nTime = new Date();
//点击后时间距离下次点击要大于500ms才能继续下次点击
if (nTime - sTime > 500) {
//图片索引和小圆点索引增加
_listindex++;
_dotindex++;
//小圆点索引清零
_dotindex = _dotindex % _dotlen;
//图片到最后一张时索引清零重新计算
if (_listindex == _listlen - 1) {
move(_sliderimglist, { left: -_boxidwidth * _listindex }, function () {
_listindex = 1;
this.style.left = -_listindex * _boxidwidth + "px";
});
} else {
move(_sliderimglist, { left: -_boxidwidth * _listindex });
}
//小圆点移动
moveBtn(_dotindex);
_moveFun && _moveFun(_dotindex + 1);
}
sTime = new Date();
}
//定义自动轮播
timer = setInterval(auto, _speed);
if (_dotindex == 0) {
console.log(_dotindex + 1);
}
//自动轮播
function auto() {
/* for (var i = 0; i < _sliderimgli.length; i++) {
_sliderimgli[i]._listindex = i;
//点击小圆点
//_listindex = this._listindex;
console.log(_listindex+1);
}*/
//图片索引和小圆点索引
_listindex = ++_listindex % _listlen;
_dotindex++;
//小圆点索引清零
_dotindex = _dotindex % _dotlen;
//图片到最后一张时索引清零重新计算
if (_listindex == _listlen - 1) {
move(_sliderimglist, { left: -_boxidwidth * _listindex }, function () {
_listindex = 1;
this.style.left = -_listindex * _boxidwidth + "px";
});
} else {
move(_sliderimglist, { left: -_boxidwidth * _listindex });
}
moveBtn(_dotindex);
_moveFun && _moveFun(_dotindex + 1);
}
//遍历小圆点
for (var i = 0; i < _dotlen; i++) {
_pointdot[i]._listindex = i;
//点击小圆点
_pointdot[i].onclick = function () {
_dotindex = this._listindex;
_listindex = _dotindex + 1;
move(_sliderimglist, { left: -_boxidwidth * _listindex });
moveBtn(_dotindex);
//console.log(_dotindex);
}
}
//小圆点样式
function moveBtn(_dotindex) {
for (var j = 0; j < _dotlen; j++) {
_pointdot[j].className = "";
}
_pointdot[_dotindex].className = "U_MD_UI_slider_On";
}
}
/*
切换过程函数
@dom {object} 需要移动的对象
@json {Array}向某个方向移动的距离
@callback {回调callback}
*/
function move(dom, json, callback) {
//清除计时器
clearInterval(dom.timer);
dom.timer = setInterval(function () {
//true这个计时器用来标记json中所有的attr已到达target目标
var mark = true;
for (var attr in json) {
var cur = null;
if (attr == "opacity") {
cur = getStyle(dom, attr) * 100;
} else {
cur = parseInt(getStyle(dom, attr)) || 0;
}
var target = json[attr];
// console.log(target);
// console.log(cur);
var speed = (target - cur) * .2;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != target) {
if (attr == "opacity") {
dom.style.filter = "alpha(opacity = " + (cur + speed) + ")"; //ie
dom.style[attr] = (cur + speed) / 100; //0~1
} else {
dom.style[attr] = cur + speed + "px";
}
//false表明当前的这个attr没有达到目标
mark = false;
}
//console.log(cur);
//console.log(1);
}
if (mark) {
clearInterval(dom.timer);
callback && callback.call(dom);
}
}, 100 / 3);
}
function getStyle(dom, attr) {
return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, null)[attr];
};
///
Namespace.register("U.MD.UI.calendar");
/**
* 日历控件调用API函数
* @param el 对象元素
* @param parentnode 添加到的父元素
* @param datetimeboolean 【boolean】是否显示选择时分秒功能
*/
U.MD.UI.Calendar = U.MD.UI.calendar = function (el, parentnode, datetimeboolean) {
if (!el)
return
if (typeof datetimeboolean == 'boolean' && datetimeboolean == false) {
U.MD.UI.calendar.datetimeformat = datetimeboolean
} else {
U.MD.UI.calendar.datetimeformat = true;
}
U.MD.UI.calendar.create(el, parentnode);
}
U.MD.UI.calendar.NOW = new Date(); /*获取当天时间*/
U.MD.UI.calendar.CURRENTYEAR = U.MD.UI.calendar.NOW.getFullYear(); /*今年*/
U.MD.UI.calendar.CURRENTMONTH = U.MD.UI.calendar.NOW.getMonth(); /*今月*/
U.MD.UI.calendar.CURRENTDAY = U.MD.UI.calendar.NOW.getDate(); /*今日*/
U.MD.UI.calendar.year = U.MD.UI.calendar.CURRENTYEAR; /*可变年*/
U.MD.UI.calendar.month = U.MD.UI.calendar.CURRENTMONTH; /*可变月*/
U.MD.UI.calendar.day = U.MD.UI.calendar.CURRENTDAY; /*可变日*/
U.MD.UI.calendar.hour = '00'; /*时*/
U.MD.UI.calendar.minute = '00'; /*分*/
U.MD.UI.calendar.second = '00'; /*秒*/
U.MD.UI.calendar.datetimeformat = true; /*是否以时分秒时间格式输出*/
U.MD.UI.calendar.fouseinp = null; /*当前聚焦的input*/
U.MD.UI.calendar.board = null; /*最外层div*/
U.MD.UI.calendar.tit = null; /*日期标题*/
U.MD.UI.calendar.mark = 1; /*标记量*/
U.MD.UI.calendar.template = [ /*html模板块*/
/*功能*/
'' +
'
关闭
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'- 日
' +
'- 一
' +
'- 二
' +
'- 三
' +
'- 四
' +
'- 五
' +
'- 六
' +
'
' +
'
' +
'
' +
'
' +
'- 1月
' +
'- 2月
' +
'- 3月
' +
'- 4月
' +
'- 5月
' +
'- 6月
' +
'- 7月
' +
'- 8月
' +
'- 9月
' +
'- 10月
' +
'- 11月
' +
'- 12月
' +
'
' +
'
' +
'
' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'
' +
'
' +
'
清空
' +
'
现在
' +
'
确定
' +
'
' +
'
'
];
/**
* 创建日历的壳
* @param els 对象元素
* @param els 父元素
*/
U.MD.UI.calendar.create = function (els, parentnode) {
if (els == U.MD.UI.calendar.fouseinp && U.MD.UI.calendar.board.style.display == 'block')
return
if (parentnode && U.MD.UI.calendar.board) {
U.MD.UI.calendar.board.parentNode.removeChild(U.MD.UI.calendar.board);
U.MD.UI.calendar.board = null;
}
var _top = document.documentElement.scrollTop || document.body.scrollTop,
_left = document.documentElement.scrollLeft || document.body.scrollLeft;
var _offsetHtml = [Math.abs(els.getBoundingClientRect().left) + _left, Math.abs(els.getBoundingClientRect().top) + _top]; /*获取元素相对于html文档的距离*/
U.MD.UI.calendar.fouseinp = els; /*当前聚焦的input*/
if (!U.MD.UI.calendar.board) { /*判断是否有创建日历内容*/
U.MD.UI.calendar.showBoard(els, _offsetHtml, parentnode); /*创建日历内容*/
} else {
U.MD.UI.calendar.resetData(_offsetHtml);
}
U.MD.UI.calendar.showDay(); /*日期显示*/
}
/**
* 时分秒模板控制
* @param that 对象元素
* @param text 改变的文字
*/
U.MD.UI.calendar.toggleChooseText = function (that) {
var _child = U.selectEl('.U_MD_UI_calendar_c_a')[0].children, //模板元素
_len = _child.length; //长度
if (that.innerText == '返回日期') { //点击的字
U.MD.UI.calendar.changeDisplay(_lastTemplate, _child[_len - 1]); //切换模板
that.innerText = "选择时间"; //改变文字
U.selectEl(that).removeClass("U_MD_UI_calendar_timeTextClick"); //删除选中class
return; //调出函数
}
for (var i = 0; i < _len - 1; i++) { //循环模板
_child[i].style.display != 'none' && (_child[i].style.display = 'none', _lastTemplate = _child[i]); //隐藏
}
_child[_len - 1].style.display = 'block'; //显示选择时分秒模板
that.innerText = "返回日期"; //改变文字
U.selectEl(that).addClass("U_MD_UI_calendar_timeTextClick"); //添加class
}
/**
* 数据重置
* @param offsethtml 偏移量
*/
U.MD.UI.calendar.resetData = function (offsethtml) {
U.MD.UI.calendar.board.style.display = 'block'; /*让日历显示*/
U.MD.UI.calendar.mark = 1;
U.selectEl('#calendar_day')[0].style.display = 'block';
U.selectEl('#calendar_month')[0].style.display = 'none';
U.selectEl('#calendar_year')[0].style.display = 'none';
U.MD.UI.calendar.board.style.left = offsethtml[0] + 'px'; /*改变日历显示的x轴*/
U.MD.UI.calendar.board.style.top = offsethtml[1] + U.MD.UI.calendar.fouseinp.clientHeight + 10 + 'px'; /*改变日历显示的y轴*/
U.MD.UI.calendar.year = U.MD.UI.calendar.CURRENTYEAR;
U.MD.UI.calendar.month = U.MD.UI.calendar.CURRENTMONTH;
U.MD.UI.calendar.ChooseDefault(true);
}
/**
* 创建时间选择模块
* @param addel 添加父元素
*/
U.MD.UI.calendar.createChooseTime = function (addel) {
var _dataObj = [
["时", "分", "秒"],
[24, 60, 60],
["hour", "minute", "second"]
],
_lastTemplate;
var _ct = $$('div', { id: 'calendar_time', className: 'U_MD_UI_calendar_time', innerHTML: U.MD.UI.calendar.template[4] }, U.MD.UI.calendar.board);
for (var i = 0; i < _dataObj[0].length; i++) {
var _row = $$('div', { className: "U_MD_UI_calendar_timeRow" }, addel);
$$('span', { className: "U_MD_UI_calendar_timeRowText", innerText: _dataObj[0][i] }, _row);
var _rowCon = $$('div', { className: "U_MD_UI_calendar_timeRowCon" }, _row),
_ul = $$('ul', { className: "U_MD_UI_calendar_timeRowUl", name: _dataObj[2][i] }, _rowCon);
for (var j = 0; j < _dataObj[1][i]; j++) {
var _text = j.toString().length == 1 ? '0' + j : j;
$$('li', {
innerText: _text,
onclick: function () {
var _parentUl = this.parentNode,
_activeLi = _parentUl.querySelector('.U_MD_UI_calendar_timeRowActive');
U.selectEl(_activeLi).removeClass('U_MD_UI_calendar_timeRowActive');
U.selectEl(this).addClass('U_MD_UI_calendar_timeRowActive');
switch (_parentUl.name) {
case 'hour':
U.MD.UI.calendar.hour = this.innerText;
break;
case 'minute':
U.MD.UI.calendar.minute = this.innerText;
break;
case 'second':
U.MD.UI.calendar.second = this.innerText;
break;
}
}
}, _ul);
}
}
if (!U.MD.UI.calendar.datetimeformat) {
_ct.style.display = 'none';
}
U.selectEl('#U_MD_UI_calendar_timeText')[0].onclick = function () { //绑定进入选择时分秒的模块时间
U.MD.UI.calendar.toggleChooseText(this)
}
U.selectEl('#U_MD_UI_calendar_clearText')[0].onclick = function () { //绑定清空事件
U.MD.UI.calendar.fouseinp.value ? U.MD.UI.calendar.fouseinp.value = '' : U.MD.UI.calendar.fouseinp.innerText = '';
U.MD.UI.calendar.ChooseDefault(true);
U.MD.UI.calendar.board.style.display = 'none';
}
U.selectEl('#U_MD_UI_calendar_nowTime')[0].onclick = function () { //绑定输出今天事件
U.MD.UI.calendar.outPutDate(true);
}
U.selectEl('#U_MD_UI_calendar_okBtn')[0].onclick = function () { //绑定确定事件
U.MD.UI.calendar.outPutDate(false);
}
}
/**
* 创建日历
* @param input 当前聚焦的input
* @param offsetHtml 元素相对于html文档的距离
*/
U.MD.UI.calendar.showBoard = function (input, offsetHtml, parentnode) {
var _template = U.MD.UI.calendar.template,
/*转局部变量*/
_parentNode = parentnode || document.body,
_templateHTML = _template[1] + _template[2] + _template[3] + _template[5];
if (!parentnode) {
U.MD.UI.calendar.board = $$('div', { "className": "U_MD_UI_calendar_bigboard", style: { left: offsetHtml[0] + "px", top: offsetHtml[1] + input.clientHeight + 10 + "px" } }, _parentNode); /*创建日历元素*/
} else {
U.MD.UI.calendar.board = $$('div', { "className": "U_MD_UI_calendar_bigboard" }, parentnode);
}
U.MD.UI.calendar.board.innerHTML = _template[0]; /*给上html模板的第一个*/
_dayC = $$('div', { "className": 'U_MD_UI_calendar_c_a', innerHTML: _templateHTML }, U.MD.UI.calendar.board); /*创建剩下的内容，把html模板内容丢进去*/
U.MD.UI.calendar.tit = U.selectEl('#calendar_tit')[0]; /*获取日历标题*/
_mc = U.selectEl('#calendar_month > ul > li'); /*获取选择月模块的li*/
_titInp = U.selectEl('#calendar_tit_btn')[0]; /*获取日历标题的input*/
_timer = null; /*定义一个定时器*/
U.MD.UI.calendar.createChooseTime($('#calendar_timeChoose')[0]);
U.MD.UI.calendar.tit.onclick = function () { /*给日历标题绑定点击事件*/
clearTimeout(_timer); /*清除定时器*/
if (U.MD.UI.calendar.mark == 1) { /*标记数是1*/
U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year; /*日历标题赋值可变月*/
U.MD.UI.calendar.changeDisplay($('#calendar_month')[0], U.selectEl('#calendar_day')[0]); /*选择月显示，选择天隐藏*/
U.MD.UI.calendar.mark = 2; /*标记数赋值2，以表示当前停留在选择月模块*/
U.MD.UI.calendar.ChooseDefault();
} else if (U.MD.UI.calendar.mark == 2) { /*标记数是2*/
_timer = setTimeout(function () { /*赋值一个定时器*/
U.MD.UI.calendar.changeDisplay($('#calendar_year')[0], U.selectEl('#calendar_month')[0]); /*选择年显示，选择月隐藏*/
U.MD.UI.calendar.dateTenYear(); /*调用显示10年内容函数*/
U.MD.UI.calendar.mark = 3; /*标记数复制3，以表示档期那停球在选择年模块*/
U.MD.UI.calendar.ChooseDefault();
}, 250); /*0.25秒后执行*/
}
}
U.MD.UI.calendar.tit.ondblclick = function () { /*给日历标题绑定双击事件*/
clearTimeout(_timer); /*清除定时器，防止进入单击事件*/
if (U.MD.UI.calendar.mark === 2) { /*标记数是2*/
_obj = U.MD.UI.calendar.changeDisplay(_titInp, this, 'inline-block'); /*日历标题文本框显示，日历标题隐藏*/
_obj[0].value = this.innerText; /*把日历title赋值给编辑input*/
_obj[0].focus(); /*编辑input给上聚焦*/
}
}
_titInp.onkeydown = function (e) { /*给日历标题文本框一个键盘事件*/
switch (e.keyCode) {
case 13:
/*编辑input 回车来更改内容*/
var _arr2 = U.MD.UI.calendar.changeDisplay(U.MD.UI.calendar.tit, this, 'inline-block'); /*显示日历title， 隐藏编辑input*/
_arr2[0].innerText = U.MD.UI.calendar.year = !isNaN(parseInt(this.value)) ? parseInt(this.value) : U.MD.UI.calendar.CURRENTYEAR; /*把编辑input的内容赋值给日历title*/
break;
}
};
_titInp.onblur = function () { /*给日历标题文本框一个失去焦点*/
var _arr3 = U.MD.UI.calendar.changeDisplay(U.MD.UI.calendar.tit, this, 'inline-block'); /*同上*/
_arr3[0].innerText = U.MD.UI.calendar.year = !isNaN(parseInt(this.value)) ? parseInt(this.value) : U.MD.UI.calendar.CURRENTYEAR;
}
U.selectEl('#prevDate')[0].onclick = function () { /*给向左的小三角绑定点击事件*/
if (U.MD.UI.calendar.mark == 1) { _lessNum = -1 } /*标记数是1，-1月*/
else if (U.MD.UI.calendar.mark == 2) { _lessNum = -12 } /*标记数是2，-12月*/
else if (U.MD.UI.calendar.mark == 3) { _lessNum = -120 }; /*标记数是3， -120月*/
U.MD.UI.calendar.fullDate(_lessNum, false);
};
U.selectEl('#nextDate')[0].onclick = function () { /*给向右的小三角绑定点击事件*/
if (U.MD.UI.calendar.mark == 1) { _addNum = 1 } /*标记数是1，+1月*/
else if (U.MD.UI.calendar.mark == 2) { _addNum = 12 } /*标记数是1，+12月*/
else if (U.MD.UI.calendar.mark == 3) { _addNum = 120 }; /*标记数是1，+120月*/
U.MD.UI.calendar.fullDate(_addNum, true);
};
for (var i = 0; i < _mc.length; i++) { /*给选择月的模块li循环*/
_mc[i].onclick = function () { /*给每个绑定一个点击事件*/
U.MD.UI.calendar.changeDisplay($('#calendar_day')[0], U.selectEl('#calendar_month')[0]); /*选择天显示，选择月隐藏*/
U.MD.UI.calendar.month = parseInt(this.innerText) - 1; /*赋值选的月*/
U.MD.UI.calendar.showDay(); /*刷新数据*/
U.MD.UI.calendar.mark = 1; /*标记量赋值1*/
}
}
U.selectEl('#U_MD_UI_calendar_closeBtn')[0].onclick = function () { /*给关闭按钮绑定一个事件*/
U.UF.EV.stopBubble();
U.MD.UI.calendar.board.style.display = 'none'; /*让日历空间隐藏*/
}
}
/**
* 创建或更新选择天模块的内容
*/
U.MD.UI.calendar.showDay = function () { /*显示日期*/
_monthFristDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, 1).getDay(); /*当月第一天的星期*/
_lastMonthDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, 0).getDate(); /*上个月的最后一天*/
_fullDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, 0).getDate(); /*当月总天数*/
_totalDay = (_t = _monthFristDay + _fullDay) % 7 === 0 ? _t : _t + (7 - _t % 7); /*当月总共需要显示天数*/
_dayC = U.selectEl('#calendar_week_c')[0];
_dayC.innerHTML = '';
for (var _i = 0; _i < _totalDay; _i++) {
_li = $$('li', {}, _dayC);
if (_i < _monthFristDay) { /*如果小于当月第一天的星期，这里显示的是上月最后几天的号显示*/
$$('span', { "className": 'U_MD_UI_calendar_unavailable', innerText: (_lastMonthDay - _monthFristDay + _i + 1) }, _li);
} else if (_i < (_fullDay + _monthFristDay)) { /*如果小于（当月总天数 + 当月第一天的星期）*/
var _d = _i - _monthFristDay + 1,
_week = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, _d).getDay(),
_today = U.MD.UI.calendar.NOW.getDate() === _d && (U.MD.UI.calendar.CURRENTMONTH === U.MD.UI.calendar.month && U.MD.UI.calendar.CURRENTYEAR === U.MD.UI.calendar.year);
_dayV = _d;
if (_week === 6 || _week === 0) { /*如果是周末字体显示为红色，否则给黑色*/
_today ? $$('span', {
"className": 'U_MD_UI_calendar_day U_MD_UI_calendar_today U_MD_UI_calendar_weekend',
innerText: _d,
"onclick": function () {
U.MD.UI.calendar.day = this.innerText;
U.MD.UI.calendar.outPutDate()
}
}, _li) : $$('span', {
"className": 'U_MD_UI_calendar_day U_MD_UI_calendar_weekend',
innerText: _d,
"onclick": function () {
U.MD.UI.calendar.day = this.innerText;
U.MD.UI.calendar.outPutDate()
}
}, _li);
} else if (_today) { /*如果是今天，打重点*/
$$('span', {
"className": 'U_MD_UI_calendar_day U_MD_UI_calendar_today',
innerText: _d,
"onclick": function () {
U.MD.UI.calendar.day = this.innerText;
U.MD.UI.calendar.outPutDate()
}
}, _li)
} else { /*默认样式*/
$$('span', {
"className": 'U_MD_UI_calendar_day',
innerText: _d,
"onclick": function () {
U.MD.UI.calendar.day = this.innerText;
U.MD.UI.calendar.outPutDate()
}
}, _li)
}
} else { /*显示下个月的星期，给上字体是灰色的样式*/
$$('span', { "className": 'U_MD_UI_calendar_unavailable', innerText: (_i - (_fullDay + _monthFristDay) + 1) }, _li)
}
}
U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year + '-' + (U.MD.UI.calendar.month + 1) + '月'; /*转换格式，然后丢到日历标题文本框里*/
}
/**
* 年月控制器
* @param num 需要减的月数
* @param check 如果是true表示点击了向右的小三角，是false表示点击了向左的小三角
*/
U.MD.UI.calendar.fullDate = function (num, check) {
var _year = (_n = Math.abs(num) / 12) >= 1 ? _n >>> 0 : 0,
/*如果月份/12大于1，也就是超过12月或者说1年, _n>>>0取出整数部分*/
_month = Math.abs(num) % 12; /*月份膜上12剩下的就是月份*/
!check && (_month = -_month);
!check && (_year = -_year);
U.MD.UI.calendar.month += _month; /*月份加一或减一*/
U.MD.UI.calendar.year += _year; /*年份加一或减一*/
if (check) {
if (U.MD.UI.calendar.month > 11) { /*如果月份大于11*/
U.MD.UI.calendar.month = 0; /*月份清空*/
U.MD.UI.calendar.year++; /*年份加一*/
}
} else {
if (U.MD.UI.calendar.month < 0) { /*如果月份小于0*/
U.MD.UI.calendar.month = 11; /*可变月赋值11，即表示12月*/
U.MD.UI.calendar.year--; /*可变年减一*/
}
}
if (U.MD.UI.calendar.mark == 1) { U.MD.UI.calendar.showDay() }; /*更新日期显示*/
if (U.MD.UI.calendar.mark == 2) { U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year }; /*标记数是2，即代表在选择月模块，*/
if (U.MD.UI.calendar.mark == 3) { U.MD.UI.calendar.dateTenYear() }; /*标记数是3，即代表在选择年模块，*/
}
/**
* 转换输出格式
* @param symbol 分割符号
* @param isnow 【boolean】 是否获取当前时间
* @returns {*} 返回字符串
*/
U.MD.UI.calendar.formartDate = function (symbol, isnow) {
var _symbol, y, m, d, h, m, s;
_symbol = symbol || '-'
y = isnow ? U.MD.UI.calendar.CURRENTYEAR : U.MD.UI.calendar.year;
m = isnow ? U.MD.UI.calendar.CURRENTMONTH + 1 : U.MD.UI.calendar.month + 1;
d = isnow ? U.MD.UI.calendar.CURRENTDAY : U.MD.UI.calendar.day;
m = (m.toString())[1] ? m : '0' + m;
d = (d.toString())[1] ? d : '0' + d;
var _dateStr = y + _symbol + m + _symbol + d;
if (typeof U.MD.UI.calendar.datetimeformat == 'boolean' && U.MD.UI.calendar.datetimeformat) {
if (isnow) {
var _nowDate = new Date();
U.MD.UI.calendar.hour = _nowDate.getHours();
U.MD.UI.calendar.minute = _nowDate.getMinutes();
U.MD.UI.calendar.second = _nowDate.getSeconds();
}
h = (U.MD.UI.calendar.hour.toString())[1] ? U.MD.UI.calendar.hour : '0' + U.MD.UI.calendar.hour;
m = (U.MD.UI.calendar.minute.toString())[1] ? U.MD.UI.calendar.minute : '0' + U.MD.UI.calendar.minute;
s = (U.MD.UI.calendar.second.toString())[1] ? U.MD.UI.calendar.second : '0' + U.MD.UI.calendar.second;
_dateStr += " " + h + ":" + m + ":" + s;
}
return _dateStr;
}
/**
* 创建选择天时需要循环绑定的函数
*/
/*
U.MD.UI.calendar.outPutDate = function () {
if (U.MD.UI.calendar.fouseinp.value) {
U.MD.UI.calendar.fouseinp.value = U.MD.UI.calendar.formartDate(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, this.innerText);
} else {
U.MD.UI.calendar.fouseinp.innerText = U.MD.UI.calendar.formartDate(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, this.innerText);
}
U.MD.UI.calendar.board.style.display = 'none';
}
*/
/**
* 创建选择天时需要循环绑定的函数
*/
U.MD.UI.calendar.outPutDate = function (isNow) {
if (U.MD.UI.calendar.fouseinp.tagName === 'INPUT') {
U.MD.UI.calendar.fouseinp.value = U.MD.UI.calendar.formartDate('-', isNow); /*选择天后进入转换年月日输入格式函数*/
} else {
U.MD.UI.calendar.fouseinp.innerText = U.MD.UI.calendar.formartDate('-', isNow); /*选择天后进入转换年月日输入格式函数*/
}
U.MD.UI.calendar.CheckedDay && U.MD.UI.calendar.CheckedDay();
U.MD.UI.calendar.board.style.display = 'none'; /*隐藏日历控件*/
}
/**
* 显示与隐藏
* @param blockEl 需要显示的元素
* @param noneEl 需要隐藏的元素
* @param val 显示的方式
* @returns {*[]} 返回数组[显示元素，隐藏元素]
*/
U.MD.UI.calendar.changeDisplay = function (blockEl, noneEl, val) {
val = val || 'block'; /*默认block*/
if (blockEl && typeof blockEl === 'object') { blockEl.setAttribute('style', 'display:' + val) } /*如果blockEL存在且blockEl是个对象，进行属性的赋值*/
if (noneEl && typeof noneEl === 'object') { noneEl.setAttribute('style', 'display:none') }; /*如果noneEl存在且noneEl是个对象，进行属性的赋值*/
return [blockEl, noneEl];
}
/**
* 更新选择年的模块内容
*/
U.MD.UI.calendar.dateTenYear = function () {
_yearArr = U.selectEl('#calendar_year > ul > li'); /*获取选择年模块里的li*/
_startYear = U.MD.UI.calendar.year - (U.MD.UI.calendar.year % 10); /**/
for (var i = 0; i < _yearArr.length; i++) {
_yearArr[i].onclick = function () {
U.MD.UI.calendar.mark = 2; /*标记数赋值2*/
U.MD.UI.calendar.year = parseInt(this.innerText); /*修改年的的值*/
U.MD.UI.calendar.changeDisplay($('#calendar_month')[0], U.selectEl('#calendar_year')[0]); /*显示选择月板块，隐藏选择年的板块*/
U.MD.UI.calendar.tit.innerText = this.innerText; /*改变日历title显示格式*/
}
_yearArr[i].innerHTML = ''; /*清空li里面的内容*/
if (i == 0 || i == _yearArr.length - 1) { /*头尾年*/
$$('span', { "className": "U_MD_UI_calendar_unavailable", innerText: (_startYear + i - 1) }, _yearArr[i]);
} else if ((_startYear + i - 1) === U.MD.UI.calendar.CURRENTYEAR) { /*当前年*/
$$('span', { style: { "background-color": "#eed1bc" }, innerText: (_startYear + i - 1) }, _yearArr[i])
} else { /*默认输出*/
$$('span', { innerText: (_startYear + i - 1) }, _yearArr[i])
}
}
U.MD.UI.calendar.tit.innerText = (t = (U.MD.UI.calendar.year - (U.MD.UI.calendar.year % 10))) + '-' + (t + 9); /*改变日历title显示格式*/
}
/**
* 时分秒数据初始化
* @param deafultflag 【boolean】是否初始化数据
*/
U.MD.UI.calendar.ChooseDefault = function (deafultflag) {
if (U.MD.UI.calendar.datetimeformat) { //判断是否显示时分秒模板
if (deafultflag) { //是否初始化数据
U.MD.UI.calendar.hour = '00'; //重置
U.MD.UI.calendar.minute = '00'; //重置
U.MD.UI.calendar.second = '00'; //重置
U.selectEl(U.MD.UI.calendar.board).find('.U_MD_UI_calendar_timeRowActive').removeClass('U_MD_UI_calendar_timeRowActive'); //清除选中的样式
!$('#U_MD_UI_calendar_timeText').length && U.MD.UI.calendar.createChooseTime($('#calendar_timeChoose')[0]); //是否有加载时分秒模块
}
U.selectEl('#calendar_time')[0].style.display = "block"; //显示选择时间的功能区
U.selectEl('#calendar_timeChoose')[0].style.display = 'none'; //隐藏选择时分秒选择区
U.selectEl('#U_MD_UI_calendar_timeText')[0].innerText = "选择时间"; //重置
U.selectEl('#U_MD_UI_calendar_timeText').removeClass("U_MD_UI_calendar_timeTextClick"); //重置
} else {
U.selectEl('#calendar_time')[0].style.display = 'none'; //重置
U.selectEl('#calendar_timeChoose')[0].style.display = 'none'; //重置
}
}
U.MD.UI.calendar.SetCallBack = function (funcname, func) {
if (typeof func != 'function' || !"CheckedDay ".match(funcname + ' '))
return 0;
U.MD.UI.calendar[funcname] = func
};
///
Namespace.register("U.MD.UI.city");
/**
* [Control description] 城市控件接口
* @param {[html元素]} element [需要使用城市控件的元素(默认放置到element下面)]
*/
U.MD.UI.city = function (element) {
U.UF.EV.stopBubble(); //阻止事件冒泡 防止被body的事件覆盖
if (!element || !element.tagName) { //如果element存在tagName 则一定是html元素 否则不执行城市控件
return;
}
if (_cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0]) {
var _rect = element.getBoundingClientRect();
_cityBox.style.top = _rect.top + _rect.height + document.documentElement.scrollTop + "px";
//调整控件的top位置
_cityBox.style.left = _rect.left + document.documentElement.scrollLeft + "px";
//调整控件的left位置
U.selectEl(_cityBox).removeClass("U_MD_UI_city_hidden");
//删除掉hidden的class名(显示城市控件) 目的: 去除掉display为none的样式
U.MD.UI.city.Attr.inputNode = element; //获取最终结果的表单元素 可能会不同 因此 inputNode需要重新赋值
return;
}
var _city = U.MD.UI.city; //简写命名空间
_city.create(element); //将控件html代码添加到body上 并调整控件位置
_city.Attr = { //存放节点 与 变量 的json对象
"inputNode": element //判断是哪个表单点击的 为赋值所用
};
_city.init(); //函数初始化(添加js功能)
};
U.MD.UI.city.Attr = {}; //存放元素与变量的json全局变量 未赋值
U.MD.UI.city.usedCity = null; //存放常用市数据的变量
U.MD.UI.city.province = null; //存放省数据的变量
U.MD.UI.city.city = {}; //存放市数据的变量
U.MD.UI.city.area = {}; //存放区数据的变量
U.MD.UI.city.htmlTemplate = ' \n' +
'\n' +
'\n' +
' \n' +
' \n' +
' \n' +
' - 光明新区
\n' +
' \n' +
' \n' +
'
\n' +
'\n' +
'\n' +
' \n' +
'\n' +
'\n' +
' \n' +
'\n' +
'\n' +
' ';
//html代码
/**
* 添加html代码,并且判断html代码是否存在 若存在 则不添加
* @param {[html元素]} element [需要使用城市控件的元素(默认放置到element下面)]
*/
U.MD.UI.city.create = function (element) {
var _cityBox = $$("div", { id: 'U_MD_UI_city_cityBox', className: 'U_MD_UI_city_cityBox U_MD_UI_city_hidden' }, document.body);
_cityBox.innerHTML += U.MD.UI.city.htmlTemplate;
var _rect = element.getBoundingClientRect();
_cityBox.style.top = _rect.top + _rect.height + document.documentElement.scrollTop + "px";
//调整控件的top位置
_cityBox.style.left = _rect.left + document.documentElement.scrollLeft + "px";
//调整控件的left位置
U.MD.UI.city.Attr.inputNode = element;
//获取最终结果的表单元素 可能会不同 因此 inputNode需要重新赋值
U.selectEl(_cityBox).removeClass("U_MD_UI_city_hidden");
//删除掉hidden的class名(显示城市控件) 目的: 去除掉display为none的样式
};
/**
* 函数初始化
*/
U.MD.UI.city.init = function () {
var _city = U.MD.UI.city; //简写命名空间
_city.getUsedCity(); //获取常用市所有数据
_city.inputEvent(); //添加监听事件: 点击表单显示城市控件并发送后台请求数据 与 点击body区域隐藏城市控件
_city.menuEvent(); //添加监听事件: 点击菜单显示对应的内容
};
/**
* 为表单添加点击事件
*/
U.MD.UI.city.inputEvent = function () {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
var _cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0]; //城市控件总盒子节点
U.selectEl(document).bind('click', function () { //点击body时 隐藏城市控件
U.selectEl(_cityBox).addClass(_hidden);
//添加掉hidden的class名 目的: 添加display为none的样式
}, false);
U.selectEl(_cityBox).bind('click', function (e) { //防止点击城市控件时 被body的事件覆盖而隐藏 因此加上防止冒泡处理
U.UF.EV.stopBubble(e);
//阻止事件冒泡
});
U.selectEl("#U_MD_UI_city_areaCont")[0].onclick = function () {
if ($("#U_MD_UI_city_areaCont")[0]) {
U.selectEl("#U_MD_UI_city_cityBox")[0].style.display = "none";
}
}
};
/**
* 为每个菜单添加点击事件
*/
U.MD.UI.city.menuEvent = function () {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _menuAllNode = U.selectEl("[data-city-mark]"); //所有菜单节点;
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
for (var i = 0, len = _menuAllNode.length; i < len; i++) { //循环所有菜单元素
var _el = _menuAllNode[i]; //获取每个菜单 赋值给变量el
U.selectEl(_el).bind('click', function () { //添加点击事件
_city.menuClassControl(this, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //为每个菜单添加对应每个区域的事件
});
if (_el.id === "U_MD_UI_city_provinceMenu") { //如果点击的是 省/直辖市 菜单 则获取对应的数据
U.selectEl(_el).bind('click', function () {
_city.getProvince(); //省/直辖市菜单的点击事件 获取数据
})
}
}
};
/**
* 获取数据常用市的所有数据
*/
U.MD.UI.city.getUsedCity = function () {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _usedCityMenu = U.selectEl("#U_MD_UI_city_usedCityMenu")[0]; //常用市菜单按钮
var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0]; //要clone的li的模板
var _usedCityCont = U.selectEl("#U_MD_UI_city_usedCityCont")[0]; //常用市内容区域
if (!_city.usedCity) { //如果 常用市(_city.usedCity) 无数据 则发送请求到后台获取数据 并打印出来
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_UsedCity"], function (r) {
_city.usedCity = r.value;
_city.allDataPrint(_usedCityMenu, _city.usedCity, _liTemplate, "usedCity", _usedCityCont); //打印数据
});
}
};
/**
* 获取省/直辖市的所有数据
*/
U.MD.UI.city.getProvince = function () {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _provinceMenu = U.selectEl("#U_MD_UI_city_provinceMenu")[0]; //省菜单按钮
var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0]; //要clone的li的模板
var _provinceCont = U.selectEl("#U_MD_UI_city_provinceCont")[0]; //省内容区域
if (!_city.province) { //如果 省/直辖市(_city.province) 无数据 则发送请求到后台获取数据 并打印出来
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_Province"], function (r) {
_city.province = r.value;
_city.allDataPrint(_provinceMenu, _city.province, _liTemplate, "province", _provinceCont); //打印数据
});
}
};
/**
* 通过code 获取市的所有数据
* @param code 省级的id
*/
U.MD.UI.city.getCity = function (code) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _cityMenu = U.selectEl("#U_MD_UI_city_cityMenu")[0]; //市菜单按钮
var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0]; //要clone的li的模板
var _cityCont = U.selectEl("#U_MD_UI_city_cityCont")[0]; //市内容区域
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
if (!_city.city[code]) { //_city.city = json 而_city.city[code]则是对应的数组值 例如:我点击广东后 获取到了广东的id 则我要通过 广东的id 获取下级的市数据 因此如果json中没有该值 则向后台发送请求获取
_city.menuClassControl(_cityMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_PidFind", code, 1], function (r) {
_city.city[code] = r.value;
//_city.city = {}
//r.value = [{},{},{}]
//为了能判断该code下是否有数据 因此需要在_city.city下添加一个 以code为键名 r.value为值的数组
//例如:_city.city = {} code = 123 r.value = [{a:1}，{a:1}，{a:1}] 最后会变成 _city.city = {123:[{a:1}，{a:1}，{a:1}]}
_city.allDataPrint(_cityMenu, _city.city[code], _liTemplate, "city", _cityCont); //打印数据
});
} else { //如果json下有数据 则直接打印该数据
_city.menuClassControl(_cityMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //相当于点击菜单 将城市的菜单与内容区域 显示出来
_city.allDataPrint(_cityMenu, _city.city[code], _liTemplate, "city", _cityCont); //打印数据
}
};
/**
* 通过code 获取区级的所有数据 函数的意思可参看上面getCity的注释
* @param code 参数为市级的id
*/
U.MD.UI.city.getarea = function (code) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _areaMenu = U.selectEl("#U_MD_UI_city_areaMenu")[0]; //区菜单按钮
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0]; //要clone的li的模板
var _areaCont = U.selectEl("#U_MD_UI_city_areaCont")[0]; //区内容区域
if (!_city.area[code]) {
_city.menuClassControl(_areaMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_PidFind", code, 2], function (r) {
_city.area[code] = r.value;
_city.allDataPrint(_areaMenu, _city.area[code], _liTemplate, "area", _areaCont);
});
} else {
_city.menuClassControl(_areaMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
_city.allDataPrint(_areaMenu, _city.area[code], _liTemplate, "area", _areaCont);
}
};
/**
* 打印传过来的数组json数据
* @param {[type]} menu [与之对应的菜单元素]
* @param {[type]} data [是一个数组json]
* @param {[type]} template [是一个li模板 clone用的]
* @param {[type]} type [数据类型("province"、"usedCity"....) 为判断所用]
* @param {[type]} parent [父节点("cityCont,areaCont...") 也叫做内容区域 ]
*/
U.MD.UI.city.allDataPrint = function (menu, data, template, type, parent) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _usedCityMenu = U.selectEl("#U_MD_UI_city_usedCityMenu")[0]; //常用市菜单按钮
var _provinceMenu = U.selectEl("#U_MD_UI_city_provinceMenu")[0]; //省菜单按钮
var _len = data.length; //数组json的长度
var _menu = menu; //菜单元素 赋值给 _menu变量
for (var i = 0; i < _len; i++) {
// 遍历 data数据(数组json)
var _span = _city.dataPrint(data[i], template, type, parent);
//单个数据打印 PS：由于data是一个 数组json([{a:1},{a:2},{a:3}]) 因此 需要将获取对应的数据 并添加在 对应的 parent(内容区域) 上
_span.onclick = function () {
var _type = U.selectEl(this).attr("data-city-type");
//获取点击的span标签的属于哪一类型 (比如： 点击省的数据 是 province 市的数据 则时 city)
var _code = U.selectEl(this).attr("data-city-code");
//获取数据编码 为寻找下一层所用
U.selectEl(_menu.children[0]).addClass("U_MD_UI_city_menuoChecked");
//点击后为 对应的相对应的菜单添加红色小圆点样式 例如:点击省/直辖市菜单下的 广东后 省/直辖市就会多一个红色小圆点的样式
_menu.children[0].innerText = this.innerText;
//改变对应菜单的名字为：点击数据的值 例如：点击"省/直辖市"菜单 下的广东 则 菜单的名字则变为 广东 PS: children[0] 为 li下的span标签
U.selectEl(_menu).attr("data-city-res", this.innerText);
//给自定义属性 data-city-res 添加为: 点击数据的值 PS: 为获取最终值给表单所用
_city.contClassControl(this, "U_MD_UI_city_Cont_ochecked");
//给所选的内容数据添加红色背景 并且删除同一内容区域拥有红色背景的其他元素
switch (_type) {
//此处为 判断 点击 各类型数据需要做的动作 type为判断哪种类型 比如: type值为 "province" 则是 省/直辖市菜单下的 数据 点击这些数据后 就是要做的事情
case "province":
_city.getCity(_code);
//将数据的 code 值传入给 城市函数 来获取城市数据 PS: 获取市的数据需要获取他们的parentid 而code则是他们的parentid
_city.initAllClass(_usedCityMenu);
//点击省/直辖市下的数据的话 则初始化 常用市菜单 与 相对应的内容区域样式
break;
case "usedCity":
if (this.innerText === "重庆") { //由于重庆这个城市比较特殊 因此需要在常用市那将重庆转为省数据
_city.getCity(_code);
} else {
_city.getarea(_code);
}
//在将数据的 code 值传入给 城市函数 来获取城市数据 PS: 获取市的数据需要获取他们的parentid 而code则是他们的parentid
_city.initAllClass(_provinceMenu);
//点击常用市下的数据的话 则初始化 省/直辖市菜单 与 相对应的内容区域样式
break;
case "city":
_city.getarea(_code);
//在将数据的 code 值传入给 区函数 来获取区数据 PS: 获取区的数据需要获取他们的parentid 而code则是他们的parentid
break;
case "area":
_city.getRes("data-city-res");
//由于该控件是 省-市-区 因此 当点击区里的数据时 则调用获取最终值的函数
break;
}
}
}
};
/**
* 打印单个数据api(创建节点,赋id 赋innerText 等等)
* @param {[json对象]} data [json对象的数据]
* @param {[元素]} template [需要clone的li模板]
* @param {[字符串]} type [属于哪种城市类型]
* @param {[元素]} parent [父节点]
* @return {[元素]} [克隆完后的一条li下的span节点]
*/
U.MD.UI.city.dataPrint = function (data, template, type, parent) {
var _city = U.MD.UI.city; //简写命名空间
var _liNode = _city.clone(template), //克隆已建好的li模板
_spanNode = _liNode.children[0]; //获取li的span节点
var _shortName = data.short_name; //获取城市名字缩写
var _name = data.name; //获取名字全称
_liNode.id = type + data.id; //添加id
_spanNode.innerText = _shortName; //添加文字内容
if (_shortName === "北京" || _shortName === "上海" || _shortName === "天津" || _shortName === "重庆") { //由于这4个城市的 缩写 和省的名字相同 因此 需要将数据名 改成name 详见数据库
if (parent.id === "U_MD_UI_city_cityCont") {
_spanNode.innerText = _name; //添加文字内容
}
}
if (parent.id === "U_MD_UI_city_areaCont") { //由于区级数据库 的缩写少了一个区 例如：显示出来的 龙岗区 被缩成 龙岗 因此需要将值等于他们的全称
_spanNode.innerText = _name; //添加文字内容
}
_spanNode.id = "span_" + type + data.id;
U.selectEl(_spanNode).attr("data-city-code", data.id); //添加自定义属性 编号
U.selectEl(_spanNode).attr("data-city-type", type); //添加自定义属性 类型
parent.appendChild(_liNode); //添加到parent节点上
return _spanNode; //返回该元素
};
/**
* 添加选中时的class 并删除已有该class的元素
* @param {[元素]} el [点击菜单的元素]
* @param {[字符串]} cs [选中菜单时的class]
* @param {[字符串]} dataattr [菜单的自定义属性 与 对应内容区域的id相同]
* @param {[字符串]} hiddenCs [对应内容区域的class]
*/
U.MD.UI.city.menuClassControl = function (el, cs, dataattr, hiddenCs) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _cityMenu = U.selectEl("#U_MD_UI_city_cityMenu")[0]; //市菜单按钮
var _areaMenu = U.selectEl("#U_MD_UI_city_areaMenu")[0]; //区菜单按钮
var _cityCont = U.selectEl("#U_MD_UI_city_cityCont")[0]; //市内容区域
var _areaCont = U.selectEl("#U_MD_UI_city_areaCont")[0]; //区内容区域
var _oEl = U.selectEl("." + cs)[0];
//找到拥有该class的元素
if (_oEl) { U.selectEl(_oEl).removeClass(cs) };
//如果找的到该元素 则删除此元素的class
U.selectEl(el).addClass(cs);
//为el元素添加该class
var _oElCont = U.selectEl("#" + U.selectEl(_oEl).attr(dataattr))[0];
//找到拥有该class的菜单元素的自定义属性的值 并找到对应区域块的元素(区域块元素的id 与 自定义属性的值相等)
var _elCont = U.selectEl("#" + U.selectEl(el).attr(dataattr))[0];
//同上 找到点击菜单元素的自定义属性的值
U.selectEl(_oElCont).addClass(hiddenCs);
//添加名为hiddenCs 的className (添加与删除 display为none)
U.selectEl(_elCont).removeClass(hiddenCs);
//elCont元素的display为block
var _id = el.id;
switch (_id) { //以下为点击菜单时所作出的不同执行命令
case "U_MD_UI_city_usedCityMenu":
case "U_MD_UI_city_provinceMenu": //当为菜单常用市 或者 省直辖市时 将区 与 市菜单 与对应内容区域 清空初始化
U.selectEl(_cityMenu).addClass(hiddenCs);
U.selectEl(_areaMenu).addClass(hiddenCs);
U.selectEl(_cityCont).addClass(hiddenCs);
U.selectEl(_areaCont).addClass(hiddenCs);
_cityMenu.children[0].innerText = "请选择";
_areaMenu.children[0].innerText = "请选择";
_cityCont.innerHTML = "";
_areaCont.innerHTML = "";
U.selectEl(_cityMenu).attr("data-city-res", "");
U.selectEl(_areaMenu).attr("data-city-res", "");
break;
case "U_MD_UI_city_cityMenu": //当为市菜单时 将 区菜单 与对应内容区域 清空初始化
U.selectEl(el).removeClass(hiddenCs);
U.selectEl(_areaMenu).addClass(hiddenCs);
U.selectEl(_areaCont).addClass(hiddenCs);
_areaMenu.children[0].innerText = "请选择";
_areaCont.innerHTML = "";
break;
case "U_MD_UI_city_areaMenu":
U.selectEl(el).removeClass(hiddenCs);
break;
}
};
/**
* 内容区域的class 的控制函数 PS:添加红色背景的样式
* @param {[type]} el [所选中的数据元素]
* @param {[type]} ocheckcs [所需要对el添加的样式]
*/
U.MD.UI.city.contClassControl = function (el, ocheckcs) {
var _city = U.MD.UI.city; //简写命名空间
var _oEls = U.selectEl("." + ocheckcs);
//找到拥有该class的所有元素
var _type = U.selectEl(el).attr("data-city-type");
//获取他们的该元素的类型
for (var i = 0, len = _oEls.length; i < len; i++) { //遍历oEls
var _otype = U.selectEl(_oEls[i]).attr("data-city-type");
if (_oEls[i] && _otype === _type) {
//如果找的到该元素 并且还是同一内容区域的元素 则删除他的class 例如:(市内容区域下)点击深圳后 在点广州 则 广州的背景颜色为红色 深圳的背景颜色为初始颜色
U.selectEl(_oEls[i]).removeClass(ocheckcs)
}
}
U.selectEl(el).addClass(ocheckcs);
//为el元素添加该class
};
/**
* 此函数专门为 初始化 常用市 或者 省/直辖市的样式而写的 例如:点击常用市下的数据后 省/直辖市的菜单与对应的内容 样式初始化为不选中
* @param el 只能放 常用市菜单(元素) 和 省/直辖市菜单(元素)
*/
U.MD.UI.city.initAllClass = function (el) {
var _city = U.MD.UI.city; //简写命名空间
el.className = "U_MD_UI_city_filled"; //将菜单li的样式初始化 U_MD_UI_city_filled无样式属性 摆设占位置用
el.children[0].className = ""; //将li里的span样式也初始化
U.selectEl(el).attr("data-city-res", ""); //将span的自定义属性也初始化
var oEl = U.selectEl(".U_MD_UI_city_Cont_ochecked"); //获取内容区域中被选中的span元素
for (var i = 0; i < oEl.length; i++) {
U.selectEl(oEl[i]).removeClass("U_MD_UI_city_Cont_ochecked"); //判断是否存在此元素 如果存在 则删除被选中的样式
}
if (el.id === "U_MD_UI_city_provinceMenu") { //比如: 点完省/直辖市内容区域的数据时 传过来的el则会是常用市菜单元素 然后常用市菜单的innerText则会初始化回常用市
el.children[0].innerText = "省/直辖市";
}
if (el.id === "U_MD_UI_city_usedCityMenu") { //同上
el.children[0].innerText = "常用市";
}
};
/**
* 通过获取自定义属性的值 查出最终值
* @param dataattr 自定义属性的名字
*/
U.MD.UI.city.getRes = function (dataattr) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _inputNode = _attr.inputNode;
var _cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0]; //城市控件总盒子节点
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
var resAll = U.selectEl("[" + dataattr + "]"); //获取所有拥有该自定义属性的元素 得到一个数组
var _arr = []; //声明一个空数组 存放最终值
for (var i = 0, len = resAll.length; i < len; i++) { //遍历所有自定义元素
var _val = U.selectEl(resAll[i]).attr(dataattr); //获取他们的自定义值
if (_val) { //判断值是否存在
_arr.push(_val); //若存在 则将最终值依次添加到arr数组里
}
}
_inputNode.value = (_arr.join("-")); //最后分割数组用“-” 隔开 添加到表单上
U.selectEl(_cityBox).addClass(_hidden); //最后隐藏控件
};
U.MD.UI.city.clone = function (ele) { //克隆节点
var node = ele.cloneNode();
var child = ele.children;
for (var i = 0; i < child.length; i++) {
var childNode = child[i].cloneNode();
node.appendChild(childNode);
}
return node;
};;
///
//色板
Namespace.register("U.MD.UI.ColorPicker");
/**
* 创建颜色选区
* @barelement [object] 要插入表格的地方
* @ callfun [fun] 点击事件
*/
U.MD.UI.colorPicker = U.MD.UI.ColorPicker = function (barelement, callfun) {
var div = $$("div", {
style: {
width: "180px",
height: "140px",
border: "1px solid #CDCDCD",
backgroundColor: " #FFF",
padding: "10px 10px 10px 5px",
zIndex: 1
},
"className": "MD_ColorPicker"
}, barelement); //创建外部div对象
var _i,
_colorarea = [ //字体颜色区域
"#ffffff",
"#ffccc9",
"#ffce93",
"#fffc9e",
"#ffffc7",
"#9aff99",
"#96fffb",
"#cdffff",
"#cbcefb",
"#cfcfcf",
"#fd6864",
"#fe996b",
"#fffe65",
"#fcff2f",
"#67fd9a",
"#38fff8",
"#68fdff",
"#9698ed",
"#c0c0c0",
"#fe0000",
"#f8a102",
"#ffcc67",
"#f8ff00",
"#34ff34",
"#68cbd0",
"#34cdf9",
"#6665cd",
"#9b9b9b",
"#cb0000",
"#f56b00",
"#ffcb2f",
"#ffc702",
"#32cb00",
"#00d2cb",
"#3166ff",
"#6434fc",
"#656565",
"#9a0000",
"#ce6301",
"#cd9934",
"#999903",
"#009901",
"#329a9d",
"#3531ff",
"#6200c9",
"#343434",
"#680100",
"#963400",
"#986536",
"#646809",
"#036400",
"#34696d",
"#00009b",
"#303498",
"#000000",
"#330001",
"#643403",
"#663234",
"#343300",
"#013300",
"#003532",
"#010066",
"#340096"
];
var button; //定义一个变量
for (_i = 0; _i < _colorarea.length; _i++) { //创建循环，循环对象为创建的数组
button = $$('button', {
style: {
background: _colorarea[_i],
width: "15px",
height: "15px",
float: "left",
margin: "5px 0 0 5px",
border: " 1px solid transparent"
}
}, div); //创建button对象
button.onclick = function (e) {
div.style.display = 'none' /*选择完色块后隐藏色板*/
U.UF.EV.stopBubble(e); /*阻止事件冒泡*/
callfun(this.style.background);
} //设置点击事件
}
U.selectEl(document).bind('click', function () { /*绑定事件*/
if (div.style.display != 'none') /*点击别的地方隐藏*/
div.style.display = 'none'
});
U.UF.EV.stopBubble();
return div; //返回div对象
};
///
//工具空间，宝航字体、字号。。。
//字体
Namespace.register("U.MD.UI.Font");
//字号
Namespace.register("U.MD.UI.WordSize");
/*
* 字体选择框生成方法
*/
U.MD.UI.Font = function () {
var font = $$("select", { style: { fontFamily: "宋体", fontSize: "16px" }, "className": "MD_fontFamily" }); //创建select对象
$$("option", { value: "宋体", style: { fontFamily: "宋体" }, innerHTML: "宋体" }, font); //定义option对象宋体，附属select
$$("option", { value: "sans-serif", style: { fontFamily: "sans-serif" }, innerHTML: "sans-serif" }, font); //定义option对象sans-serif，附属select
$$("option", { value: "微软雅黑", style: { fontFamily: "微软雅黑" }, innerHTML: "微软雅黑" }, font); //定义option对象微软雅黑，附属select
$$("option", { value: "楷体", style: { fontFamily: "楷体" }, innerHTML: "楷体" }, font); //定义option对象楷体，附属select
$$("option", { value: "黑体", style: { fontFamily: "黑体" }, innerHTML: "黑体" }, font); //定义option对象黑体，附属select
$$("option", { value: "隶书", style: { fontFamily: "隶书" }, innerHTML: "隶书" }, font); //定义option对象隶书，附属select
$$("option", { value: "andale mono", style: { fontFamily: "andale mono" }, innerHTML: "andale mono" }, font); //定义option对象andale mono，附属select
$$("option", { value: "arial black", style: { fontFamily: "arial black" }, innerHTML: "arial black" }, font); //定义option对象arial black，附属select
return font; //返回select对象
}
/*
* 字号选择框生成方法
*/
U.MD.UI.WordSize = function () {
var fontsize = $$("select", { "className": "MD_fontSize" }); //创建select对象
$$("option", { value: "56px", style: { fontSize: "14px" }, innerHTML: "初号" }, fontsize); //定义option对象初号，附属select
$$("option", { value: "48px", style: { fontSize: "14px" }, innerHTML: "小初" }, fontsize); //定义option对象小初，附属select
$$("option", { value: "34.7px", style: { fontSize: "14px" }, innerHTML: "一号" }, fontsize); //定义option对象一号，附属select
$$("option", { value: "32px", style: { fontSize: "14px" }, innerHTML: "小一" }, fontsize); //定义option对象小一，附属select
$$("option", { value: "29.3px", style: { fontSize: "14px" }, innerHTML: "二号" }, fontsize); //定义option对象二号，附属select
$$("option", { value: "24px", style: { fontSize: "14px" }, innerHTML: "小二" }, fontsize); //定义option对象小二，附属select
$$("option", { value: "21.3px", style: { fontSize: "14px" }, innerHTML: "三号" }, fontsize); //定义option对象三号，附属select
$$("option", { value: "20px", style: { fontSize: "14px" }, innerHTML: "小三" }, fontsize); //定义option对象小三，附属select
$$("option", { value: "18.7px", style: { fontSize: "14px" }, innerHTML: "四号" }, fontsize); //定义option对象四号，附属select
$$("option", { value: "16px", style: { fontSize: "14px" }, innerHTML: "小四" }, fontsize); //定义option对象小四，附属select
$$("option", { value: "14px", style: { fontSize: "14px" }, innerHTML: "五号" }, fontsize); //定义option对象五号，附属select
$$("option", { value: "12px", style: { fontSize: "14px" }, innerHTML: "小五" }, fontsize); //定义option对象小五，附属select
$$("option", { value: "10px", style: { fontSize: "14px" }, innerHTML: "10" }, fontsize); //定义option对象10px，附属select
$$("option", { value: "12px", style: { fontSize: "14px" }, innerHTML: "12" }, fontsize); //定义option对象12px，附属select
$$("option", { value: "14px", style: { fontSize: "14px" }, innerHTML: "14" }, fontsize); //定义option对象14px，附属select
$$("option", { value: "16px", style: { fontSize: "14px" }, innerHTML: "16" }, fontsize); //定义option对象16px，附属select
$$("option", { value: "18px", style: { fontSize: "14px" }, innerHTML: "18" }, fontsize); //定义option对象18px，附属select
$$("option", { value: "20px", style: { fontSize: "14px" }, innerHTML: "20" }, fontsize); //定义option对象20px，附属select
$$("option", { value: "22px", style: { fontSize: "14px" }, innerHTML: "22" }, fontsize); //定义option对象22px，附属select
$$("option", { value: "24px", style: { fontSize: "14px" }, innerHTML: "24" }, fontsize); //定义option对象24px，附属select
$$("option", { value: "26px", style: { fontSize: "14px" }, innerHTML: "26" }, fontsize); //定义option对象26px，附属select
$$("option", { value: "28px", style: { fontSize: "14px" }, innerHTML: "28" }, fontsize); //定义option对象28px，附属select
$$("option", { value: "36px", style: { fontSize: "14px" }, innerHTML: "36" }, fontsize); //定义option对象36px，附属select
$$("option", { value: "42px", style: { fontSize: "14px" }, innerHTML: "42" }, fontsize); //定义option对象42px，附属select
$$("option", { value: "48px", style: { fontSize: "14px" }, innerHTML: "48" }, fontsize); //定义option对象48px，附属select
$$("option", { value: "72px", style: { fontSize: "14px" }, innerHTML: "72" }, fontsize); //定义option对象72px，附属select
return fontsize; //返回select对象
};
///
//#region alert弹窗代码、confirm对话框
//UI窗体区域
Namespace.register("U.UF.UI") //窗体的命名空间
//#region 对话框
/**
* 创建对话框
* @content {string/elemnet} 内容
* @determineFun {function} 确认回调函数
* @cancelFun {function} 取消回调函数
*/
U.UF.UI.Confirm = U.UF.UI.confirm = function (content, determineFun, cancelFun) {
//创建对话框主体元素
var _confirm = $$("div", { "style": { "cssText": "width: 100%; background: rgb(255,255,255);overflow:hidden; " } });
//创建内容区域
var _content = $$("div", { "style": { "cssText": "width: 100%;" } }, _confirm);
//判断内容是否为元素
if (U.UF.C.isElement(content)) {
//如果为元素则动态添加到对话框中
U.selectEl(_content).append(content);
} else {
_content.style.cssText = "text-align: center; margin: 10px;";
//如果为文字则修改inerHTML。
_content.innerHTML = content || '内容';
}
//创建页脚部分
var _footer = $$("div", { "style": { "cssText": "height:28px; margin:14px 0;" } }, _confirm);
//创建确定按钮 绑定点击事件，默认点击后执行关闭窗体函数
$$("div", {
"style": {
"cssText": "text-align: center; color: rgb(255,255,255); width: 92px; line-height:28px; background: rgb(48,126,208); float: right; margin-right:29px; "
},
innerHTML: "确定",
onclick: function () {
var _bool = true;
if (U.UF.C.isFunction(determineFun)) {
_bool = determineFun(); //判断是否存在回调 有则执行。
}
if (_bool !== false) {
U.UF.F.closeWindow(_form.form); //关闭窗口函数
}
}
}, _footer);
//创建取消按钮 绑定点击事件，默认点击后执行关闭窗体函数
$$("div", {
"style": {
"cssText": "text-align: center; color: rgb(255,255,255); width: 92px; line-height:28px; background: rgb(48,126,208); background: rgb(170,170,170); float: right; margin-right:21px;margin-left:29px;"
},
"innerHTML": "取消",
"onclick": function () {
U.UF.C.isFunction(cancelFun) && cancelFun(); //判断是否存在回调 有则执行。
U.UF.F.closeWindow(_form.form); //关闭窗口函数
}
}, _footer);
//调用Uform窗体创建函数将主体内容添加到窗体中
var _form = new U.UF.UI.form(
"提示",
_confirm, {
"style": {
"cssText": "font-size: 14px; background: rgb(255,255,255); width: 310px; position: absolute; box-shadow: 0 0 10px 3px rgb(0,0,0); "
}
}, {
"istop": true,
"isenlarge": false,
"isstretching": false,
"isnarrow": false
}, {
"style": {
"cssText": " background: rgb(59,88,120); padding: 5px; color: rgb(255,255,255); "
}
});
return _form;
}
/**
* 创建提示框
* @content {string/elemnet} 内容
* @callBackFun {function} 回调函数
*/
U.UF.UI.Dialog = U.UF.UI.Dialog = function (content, callBackFun) {
var _dialog = $$("div", { "style": { "cssText": "width: 100%; background: #fff; overflow:hidden; " } }); //创建提示框主体
var _content = $$("div", { "style": { "cssText": "text-align: center; margin: 30px 20px 30px 20px; " } }, _dialog); //创建内容区域
//判断内容是否为元素
if (U.UF.C.isElement(content)) {
U.selectEl(_content).append(content); //如果为元素则动态添加到对话框中
} else {
_content.innerHTML = content || '内容'; //如果为文字则修改inerHTML。
}
//创建页脚部分
var footer = $$("div", { "style": { "cssText": "height:45px;" } }, _dialog);
//调用Uform窗体创建函数将主体内容添加到窗体中
var _form = new U.UF.UI.form("提示框", _dialog, {
"style": {
"cssText": "font-size: 14px; width: 300px; background:#fff; position: absolute; top: 100px; left: 40%; box-shadow: 0 0 10px 3px black; "
}
},
null, {
"style": { "cssText": "background: #3b5878; padding: 10px; color:#fff;" }
});
//创建确定按钮 并绑定点击函数，默认点击后执行关闭窗体函数
$$("div", {
"style": {
"cssText": "text-align: center; color: #fff; width: 30%; padding: 5px; background: #307ed0; float: right; margin: 0 12px 12px 0;"
},
innerHTML: "确定", // 绑定innerHTML
onclick: function () {
U.UF.C.isFunction(callBackFun) && callBackFun(); //判断是否存在回调 有则执行。
U.UF.F.closeWindow(_form.form); //关闭窗口函数
}
}, footer);
}
//#endregion
//#region alert
/*
创建点击确认对话框
*/
U.UF.UI.alertClick = function (content, attr) {
//创建点击确认对话框的主体区域
var _content = $$("div", { "class": "USBalert_text", "style": { width: "100%" } });
//判断内容是否为元素
if (U.UF.C.isElement(content)) {
//如果为元素则动态添加到对话框中
U.selectEl(_content).append(content);
} else {
$$("div", { "style": { cssText: "text-align:center;padding:10px; margin:10px auto; word-break:break-word;" }, innerHTML: content || '内容' }, _content);
}
//创建页脚
var _footer = $$("div", { "class": "USBalert_onclicks", style: { height: "43px" } }, _content);
//调用Uform窗体创建函数将主体内容添加到窗体中
var _form = new U.UF.UI.form("提示框", _content, {
"style": {
"cssText": "font-size: 16px; width:320px; background: rgb(255,255,255);box-shadow: 0 0 10px 3px rgb(0,0,0); "
}
}, {
"isnarrow": false,
"isenlarge": false,
isstretching: false
}, {
"style": {
"cssText": "background: rgb(59,88,120); padding: 10px; color: rgb(255,255,255);"
}
});
//创建确定按钮 并绑定点击函数，默认点击后执行关闭窗体函数
$$("div", { "style": { "cssText": "text-align: center; color: #fff; width: 30%;max-width:150px; padding: 5px; background: #307ed0; float: right; margin: 0 12px 12px 0;" }, innerHTML: "确定", onclick: function () { U.UF.F.closeWindow(_form.form); } }, _footer);
}
/**
* 创建对话框
*/
U.Alert = U.alert = function (c, t) {
!t ? t = 3000 : "";
var bg = $$("div", {
"style": {
"cssText": "padding: 12px 25px 12px 25px;font-size: 16px;max-width:300px;min-width:100px;color: rgba(255,255,255,1);background: rgba(0,0,0,0.75);border-radius: 10px;position: absolute;top:20%;left:0px;right:0px;margin:0px auto;text-align:center; word-break: break-word; "
//white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis;
},
innerHTML: c
}, document.body);
U.UF.F.topWindow(bg);
setTimeout(function () {
bg.parentNode.removeChild(bg);
}, t);
}
//#endregion
//#endregion
;
///
//电脑端banner滑块控件命名空间
Namespace.register("U.MD.UI.email");
/**
电脑端banner滑块控件
*/
U.MD.UI.email = function () {
};
///
//PC端表情包
Namespace.register("U.MD.UI.face");
/*
** 添加表情包
** @param {element} button 插入表情包的元素
** @param {element} el 输入框的元素
*/
U.MD.UI.face = function (button, el) {
var i, _el1, _el2;
if ($("#U_MD_UI_face")[0]) { //判断是否存在表情包
if ($("#U_MD_UI_face")[0].style.display == "none") { //如果存在，判断是否隐藏
U.selectEl("#U_MD_UI_face")[0].style.display = "block"; //如果隐藏 则显示表情包
} else {
U.selectEl("#U_MD_UI_face")[0].style.display = "none"; //否则，隐藏
}
} else { //不存在表情包，创建表情包
var _el = $$("div", { "style": { "position": "relative" } }, U.selectEl(button)[0]); //创建表情包的总样式
_el1 = $$("div", { "id": "U_MD_UI_face", "className": "U_MD_UI_face", "onmousedown": U.UF.EV.stopBubble }, _el); //创建表情包的阻止冒泡事件
_el2 = $$("div", { "className": "U_MD_UI_face_H" }, _el1); //创建存放表情的父级元素
for (i = 0; i <= 104; i++) { //循环打印所有的表情包 共104个
$$("button", {
"className": "U_MD_UI_face_C",
"style": { "opacity": "0" },
"onclick": U.UF.C.closure(function (i) {
U.UF.EV.stopBubble();
U.MD.UI.face.printEmoticon(_el1, i, U.UF.E.getRangeAt(), el)
}, [i])
}, _el2); //创建单个表情，并且给每个表情赋值一个点击事件，参数为表情框元素，第几个表情，光标位置，输入框的位置，点击后打印表情到输入框的位置
}
//获取整个body部分的点击事件
U.selectEl('body').unbind('click', U.MD.UI.face.externalClick);
U.selectEl('body').bind('click', U.MD.UI.face.externalClick);
}
el.focus();
};
U.MD.UI.face.externalClick = function (e) {
if (window.event.srcElement.tagName != "BUTTON" && U.selectEl("#U_MD_UI_face")[0]) { //判断点击的是否是发送表情的按钮
U.selectEl("#U_MD_UI_face")[0].style.display = "none"; //如果不是，则隐藏掉表情包
}
}
/* 点击表情框处理
*
* @param {element} el1 表情框元素
* @param {number} i 第几个表情。通过i的值代表是哪个表情
* @param {range} range 光标的位置，先获取光标对象，然后通过光标对象获取光标位置
* @param {element}
对应路径 /img/ChatingFaceGif/[face](i).gif
*/
U.MD.UI.face.printEmoticon = function (el1, i, range, el) {
var _imageurl = "/img/ChatingFaceGif/[face](" + i + ").gif"; //表情路径
if (!range) {
$$("img", { "onerror": U.MD.C.imgError, "src": _imageurl, "contentEditable": "true" }, U.selectEl(el)[0]);
} else {
var img = '
';
U.UF.E.addRange(img, null, true);
}
U.selectEl(el1)[0].style.display = "none";
};
///
//#region 窗体
//UI窗体区域
Namespace.register("U.UF.UI") //窗体的命名空间
//#region 窗体
/** 初始化uform窗体,创建一个窗体，调用方式如下
* new new U.UF.UI.form(
* "测试内容",
* "中间内容",
* { "style": { "width": "570px", "height": "80%", "maxHeight": "700px"} },
* );
* @param string 头部标题 必填
* @param string|element 中间区域的内容 必填
* @param object 窗体的属性 {id :"1", style:{"width":"100px", "height":"100px"}} 选填 有默认的属性，原函数有注释
* @param object 窗体功能的属性 { istop: true, isdrag: true, isstretching:true,isenlarge:true,isnarrow:true,isclose:true } 选填
* @param object 头部的属性 {style:{"width":"100px"}} 选填 有默认的属性，原函数有注释
* @param object 内容的属性 { style:{"height":"100px"}} 选填 有默认属性，原函数有注释
* @param object 关闭、放大、缩小按钮区域的属性设置 { "style":{"left":"100px"}} 选填，有默认属性，原函数有注释
* @param element 窗体追加到制定的元素 选填 有默认的属性，原函数有注释
*/
U.UF.UI.form = function (title, content, formattr, formfun, headattr, contentattr, headbottomattr, parentel) {
var _this = this;
//所有的窗体中找到是否已经创建的窗体
if (formattr && U.UF.UI.form.allForm[formattr.id]) {
var _this = U.UF.UI.form.allForm[formattr.id]; //得到原来的窗体
}
//初始化未赋值，用到的变量
else {
//设置窗体唯一的识别
this.id = formattr && formattr.id ? formattr.id : Guid.newGuid();
//初始化成功后添加到所有窗体管理的对象中,以便于用户查找窗体和管理
U.UF.UI.form.allForm[this.id] = this;
}
_this.ififrame = (U.UF.C.isElement(_this.content) && ((_this.content.tagName == "IFRAME" && _this.content.src == content.src) || ($("iframe", _this.content)[0] && $("iframe", _this.content)[0].src == $("iframe", content)[0].src)));//窗口原本存在且是iframe
_this.form; //窗体
_this.header; //头部
_this.middle; //中间区域
_this.title = title; //窗体的标题
_this.content = _this.ififrame ? _this.content : content; //需要插入的元素，包含div和iframe等元素,以前站外应用的功能是靠这个方式去实现的
_this.formattr = formattr; //窗体的属性
_this.headattr = headattr; //头部的属性
_this.contentattr = contentattr; //内容的属性
_this.headbottomattr = headbottomattr; //头部功能区域整体的属性设置
//下面是用户功能处理包含是否允许一直置顶、是否允许拖动、是否拉伸、是否允许放大、是否允许缩小、是否允许关闭
//如果用户没有传入功能处理
if (formfun == null) {
formfun = {}; //初始化一个功能处理类
}
_this.istop = null;
if (formfun.istop != null) { //是否允许一直置顶
_this.istop = formfun.istop;
}
_this.isdrag = true;
if (formfun.isdrag != null) { //是否允许拖动
_this.isdrag = formfun.isdrag; //是否允许拖动
}
_this.isstretching = true;
if (formfun.isstretching != null) { //是否拉伸
_this.isstretching = formfun.isstretching;
}
_this.isenlarge = true;
if (formfun.isenlarge != null) { //是否允许放大
_this.isenlarge = formfun.isenlarge;
}
_this.isnarrow = true;
_this.narrowcallback = formfun.narrowcallback; //关闭回调
if (formfun.isnarrow != null) { //是否允许缩小
_this.isnarrow = formfun.isnarrow; //是否允许缩小
}
_this.isclose = true;
_this.closecallback = formfun.closecallback; //关闭回调
if (formfun.isclose != null) { //是否允许关闭
_this.isclose = formfun.isclose; //是否允许关闭
}
_this.parentel = parentel || document.body; //窗体添加到制定的元素处理
_this.create(); //重新添加处理
return _this; //返回处理
}
//所有给给创建的窗体管理
U.UF.UI.form.allForm = {};
//窗体的方法
U.UF.UI.form.prototype = {
/** 初始化uform窗体
*/
create: function () {
var i, //用于循环
_iframe, //iframe
_resizefun,
_formel, //窗体元素
_headel, //窗体头部元素
_contentel, //内容区域的元素
_contentchildel, //内容区域的
_stretchingel, //拉伸元素
_stretchinginfo, //拉伸的信息
_headbottom, //头部按钮区域
_enlargeel, //放大按钮
_mousedown, //
_formattr = this.formattr || {}, //窗体属性
_headattr = this.headattr || {}, //头部属性
_contentattr = this.contentattr || {}, //内容的属性
_replaceel = U.UF.UI.form.allForm[_formattr.id] ? U.UF.UI.form.allForm[_formattr.id].form : null //得到之前创建的窗体，如果窗体存在，那么下面创建后直接替换
;
if (!this.ififrame) {
//窗体的统一属性设置，默认属性
if (_formattr.style) {
_formattr.style.cssText = _formattr.style.cssText || "";
_formattr.style.cssText = "width: 70%; position: absolute; background-color: #fff; z-index: 10; border-radius: 1px; overflow: hidden; -moz-box-shadow:rgb(38 38 38) 0px 0px 12px 1px; -webkit-box-shadow:rgb(38 38 38) 0px 0px 12px 1px; box-shadow:rgb(38 38 38) 0px 0px 12px 1px; -moz- -webkit- border-radius:5px;" + _formattr.style.cssText;
} else {
_formattr.style = {
cssText: "width: 70%; position: absolute; background-color: #fff; z-index: 10; border-radius: 1px; overflow: hidden; -moz-box-shadow:rgb(38 38 38) 0px 0px 12px 1px; -webkit-box-shadow:rgb(38 38 38) 0px 0px 12px 1px; box-shadow:rgb(38 38 38) 0px 0px 12px 1px; -moz- -webkit- border-radius:5px;"
};
}
_formattr.close = U.UF.C.apply(this, function () { //关闭窗体;
U.UF.F.closeWindow(this.form); //关闭窗体
});
_formattr.usform = "true"; //设置窗体的属性，作为窗体的识别，有助于调用的用户通过js找到所有的窗体
_formattr.id = _formattr.id || ""; //窗体的id
_formattr.style = _formattr.style || {}; //窗体的样式
if (_formattr.onresize) {
_resizefun = _formattr.onresize;
_mousedown = _formattr.onmousedown;
_formattr.onresize = U.UF.C.apply(this, function () { //当窗体大小发生变化的处理
this.size(); //大小变化处理
if (_resizefun) {
_resizefun(); //大小变化回调
}
});
_formattr.onmousedown = U.UF.C.apply(this, function () {
//窗体点击置顶的处理
if (this.istop !== false) {
this.top(); //大小变化处理
}
if (_mousedown) {
_mousedown(); //大小变化回调
}
});
} else if (_formattr.onresize !== false) {
_formattr.onresize = U.UF.C.apply(this, function () { //当窗体大小发生变化的处理
this.size(); //大小变化处理
});
}
//创建大窗体，设置窗体属性
var _formel = $$("div", this.formattr);
//判断是否允许一直置顶
if (this.istop === true) {
_formel.style.zIndex = "9999";
_formel["__top__"] = "false"; //设置不允许点击切换置顶
} else if (this.istop === false) {
_formel["__top__"] = "false"; //设置不允许点击切换置顶
}
this.form = _formel; //窗体全局变量设置
//如果用户设置了false，那么就不加载头部
if (this.title !== false) {
//窗体头部属性统一设置
if (_headattr.style) {
_headattr.style.cssText = _headattr.style.cssText || "";
_headattr.style.cssText = "text-indent: 10px; color: White; line-height: inherit; font-size: 14px; height: 30px; line-height: 36px; background-color: rgb(48 48 48); overflow: hidden; color: White; font-size: 14px; overflow: hidden; " + _headattr.style.cssText;
} else {
_headattr.style = {
cssText: "text-indent: 10px; color: White; line-height: inherit; font-size: 14px; height: 30px; line-height: 36px; background-color: rgb(48 48 48); overflow: hidden; color: White; font-size: 14px; overflow: hidden; "
}
}
//设置头部有拖拽事件
if (this.isdrag) { //判断是否允许拖动窗体
_headattr.onmousedown = function () {
U.UF.F.drag(_formel); //拖动事件调用
};
}
//创建头部区域
_headel = $$("div", _headattr, _formel);
//如果是字符串的处理
if (U.UF.C.isString(this.title)) {
_headel.innerHTML = this.title;
}
//如果中间区域是元素的处理
else if (U.UF.C.isElement(this.title)) {
_headel.appendChild(this.title); //添加所选元素
}
this.header = _headel; //设置中间的全局变量
}
//创建中间
_contentel = $$("div", { "style": { "cssText": "width: 100%; position: relative;" } });
//中间的内容
_contentattr.usbody = "true";
//窗体头部属性统一设置
if (_contentattr.style) {
_contentattr.style.cssText = _contentattr.style.cssText || "";
//_contentattr.style.cssText = "text-align: left; overflow: auto;" + _contentattr.style.cssText;
_contentattr.style.cssText = "text-align: left; overflow: hidden;" + _contentattr.style.cssText;
} else {
_contentattr.style = {
cssText: "text-align: left; "
};
}
//创建中间内容元素
_contentchildel = $$("div", _contentattr, _contentel);
//如果是字符串的处理
if (U.UF.C.isString(this.content)) {
_contentchildel.innerHTML = this.content;
}
//如果中间区域是元素的处理
else if (U.UF.C.isElement(this.content)) {
_contentchildel.appendChild(this.content); //添加所选元素
}
this.middle = _contentchildel; //中间的内容
//在头部不存在的情况下，设置中间内容可以拖动
if (this.title === false && this.isdrag) {
_contentel.onmousedown = function () {
U.UF.F.drag(_formel); //拖动事件调用
};
}
//设置拉伸处理
if (this.isstretching !== false) {
//创建窗体拉伸
_stretchingel = $$("div", { style: { "cssText": "display: block;" } }, _formel);
//拉伸的信息 key代表样式的结尾,value代表拉伸的方向
_stretchinginfo = {
"top": "cursor: n-resize; left: 0px; top: 0px; width: 100%; height: 5px;",
"rightTop": "cursor: ne-resize; right: -2px; top: -2px; width: 12px; height: 12px;",
"leftTop": "cursor: nw-resize; top: 0px; left: 0px; width: 12px; height: 12px;",
"left": "cursor: w-resize; left: 0px; top: 0px; width: 5px; height: 100%;",
"right": "cursor: e-resize; right: 0px; top: 0px; width: 5px; height: 100%;",
"bottom": "cursor: s-resize; left: 0px; bottom: 0px; width: 100%; height: 5px;",
"leftBottom": "cursor: sw-resize; left: -2px; bottom: -2px; width: 12px; height: 12px;",
"rightBottom": "cursor: se-resize; right: -2px; bottom: -2px; width: 12px; height: 12px;"
}
//循环创建拉伸条，包含上、下、左、右、上左、下左、上右、下右
for (i in _stretchinginfo) {
$$("div", {
"style": {
"cssText": "position: absolute; overflow: hidden; display: block; z-index: 10;" + _stretchinginfo[i]
},
"onmousedown": U.UF.C.closure(function (scope, typename) {
//拉伸函数的调用
U.UF.F.stretching(_formel, typename, U.UF.C.apply(scope, scope.size));
}, [this, i])
}, _stretchingel);
}
}
//头部功能区域
if (this.title !== false) {
_headbottom = $$("div", {
"style": { "cssText": "position: absolute; top: 5px; right: 0px; width: 80px; display: table-cell; vertical-align: middle;" }
}, _formel);
}
if (this.isclose !== false) {
//关闭窗体的按钮
$$("div", {
"style": {
"cssText": "background-image:url(../../../img/close.png); _background-image:url(/img/close.png);width: 14px; height: 14px; background-repeat: no-repeat; background-size: 100%; float: right; margin-right: 5px;margin-top:6px; cursor: pointer;"
},
"title": "点击关闭",
"onmousedown": U.UF.EV.stopBubble,
"onclick": U.UF.C.apply(this, function () {
this.windowstate = "close";
U.UF.F.closeWindow(this.form); //调用窗体关闭函数
try {
//关闭任务栏处理
if (U.MD.D.T.taskbar.close) {
U.MD.D.T.taskbar.close({ "forms": _formel });
//U.MD.N.urlWrite("", "智慧课堂平台");
}
} catch (e) { }
//回调处理
if (U.UF.C.isFunction(this.closecallback)) {
this.closecallback();
}
})
}, _headbottom);
}
//是否允许放大
if (this.isenlarge !== false) {
//放大按钮
_enlargeel = $$("div", {
"style": {
"cssText": "background-image:url(../../../img/max.png); _background-image:url(/img/max.png); background-size: 100%; float: right; margin-right: 10px; width: 17px; height: 17px; cursor: pointer;margin-top: 4px;"
},
"title": "最大化",
"onmousedown": U.UF.EV.stopBubble,
//最大化点击事件处理
"onclick": function () {
this.windowstate = "max";
U.UF.F.windowZooming(_formel); //调用窗体最大化函数
}
}, _headbottom);
//如果有head头部的处理
if (_headel) {
//头部双击放大缩小处理处理
_headel.ondblclick = U.UF.C.apply(_headel, function () {
U.UF.EV.stopBubble(event);
//判断双击的元素是否在头部导航上，否则如果头部上有其他的按钮什么的双击了，也会触发放大方法
if (event.srcElement == this || U.UF.EL.isChild(this, event.srcElement)) {
_enlargeel.onclick(); //放大的处理
}
});
}
}
//是否允许最小化
if (this.isnarrow !== false) {
//最小化的按钮处理
$$("div", {
"style": {
"cssText": "background-image:url(../../../img/min.png); _background-image:url(/img/min.png);background-size: 100%; float: right; margin-right: 10px; margin-top: 3px; width: 20px; height: 20px; cursor: pointer;background-repeat: no-repeat;"
},
"title": "最小化",
"onmousedown": U.UF.EV.stopBubble,
"onclick": U.UF.C.apply(this, function () {
this.windowstate = "min";
U.UF.F.windowMinimize(_formel); //窗体最小化处理
//回调处理
if (U.UF.C.isFunction(this.narrowcallback)) {
this.narrowcallback();
}
})
}, _headbottom);
}
//如果窗体已经创建，那么直接替换
if (_replaceel && _replaceel.parentNode != null) {
_replaceel.parentNode.replaceChild(_formel, _replaceel);
}
//元素添加到制定的元素中
else {
this.parentel.appendChild(_formel);
}
_formel.appendChild(_contentel);
}
else {
//有特殊关闭处理的，需要重新加载
if (this.closecallback && this.windowstate == "close") {
try {
if (this.content.tagName == "IFRAME") {
this.content.src += '';
}
else {
$("iframe", _this.content)[0].src += '';
}
}
catch (e) {
}
}
_formel = _replaceel;
}
//如果没有设置top和left那么居中弹出
if (_formel.style.top == "" && _formel.style.left == "" && _formel.style.right == "" && _formel.style.bottom == "") {
//居中置顶弹出
U.UF.F.windowTopCenter(_formel);
}
//否则置顶
else {
U.UF.F.topWindow(_formel);
}
//初始化的时候默认设置大小
this.size();
},
/** 窗体每一次点击置顶
*/
top: function () {
U.UF.F.topWindow(this.form); //点击置顶的处理
},
/** 窗体大小处理
*/
size: function () {
var _headheight = 0; //head头部的高度
//如果存在head头部，那么获取head头部处理
if (this.header) {
_headheight = this.header.clientHeight;
}
//设置窗体content区域大小设置
if (this.header) {
this.middle.style.height = this.form.clientHeight - this.header.clientHeight + "px";
} else {
this.middle.style.height = this.form.clientHeight + "px";
}
}
}
/** 窗体大小处理
*/
U.UF.UI.form.windowResize = function () {
var i,
_style,
_bodywidth = US.width, //获取原本在窗体大小没有变化前的width
_bodyheight = US.height, //获取原本在窗体大小没有变化前的height
_sizeinfo, //大小信息
_width, //长度
_height, //高度
_formel, //窗体元素
_forms = U.UF.UI.form.allForm //获取所有的窗体
;
//循环所有的窗体
for (i in _forms) {
_formel = _forms[i].form; //获取窗体的处理
if ($(_formel).css("display") != "none") { //判断窗体是否隐藏
_style = {}; //设置位置
_width = U.selectEl(_formel).css("width"); //获取窗体的长
_height = U.selectEl(_formel).css("height"); //获取窗体的宽
//计算位置，如果有百分比，则按照百分比的方式进行计算，否则，得到百分比。
_width = _width.indexOf("%") > -1 ? _width.toInt() / 100 : _formel.offsetWidth / _bodywidth;
_height = _height.indexOf("%") > -1 ? _height.toInt() / 100 : _formel.offsetWidth / _bodyheight;
//设置位置,如果没有右对齐，则设置左对齐
if (_formel.style.right == "" || _formel.style.right == "auto") {
_style.left = _formel.offsetLeft + (document.body.offsetWidth - _bodywidth) * ((1 - _width) / 2) + "px";
}
//如果没有下对齐，则设置上对齐
if (_formel.style.bottom == "" || _formel.style.bottom == "auto") {
_style.top = _formel.offsetTop + (document.body.offsetHeight - _bodyheight) * ((1 - _height) / 2) + "px";
}
//设置值
U.selectEl(_formel).addAttrArray({ "style": _style });
}
}
}
/** 关闭所有的窗体
*/
U.UF.UI.form.closeWindows = function () {
var i;
for (i in U.UF.UI.form.allForm) {
if (U.UF.UI.form.allForm[i].isclose) {
U.UF.UI.form.allForm[i].form.close();
}
}
}
//#endregion
//#endregion;
///
Namespace.register("U.MD.UI.music");
/**
* [Control description] 音乐控件总函数
* @param {[type]} musicList [数组json 格式请看文档]
* @param {[type]} index [需要播放第几首歌(索引)]
* @param {[type]} autoplay [是否自动播放] 可填可不填 默认 false
* @param {[type]} parentEl 所需要添加到的父元素 可填可不填 默认document.body
*/
U.MD.UI.music = function (musicList, index, autoplay, parentEl) {
var _music = U.MD.UI.music; //简写命名空间
var _musicBox;
if (_musicBox = U.selectEl("#U_MD_UI_music_musicBox")[0]) {
// U.selectEl(_musicBox).removeClass('U_MD_UI_music_hidden');
// var _attr = _music.Attr; //简写全局属性json名
// var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
// _attr.musicList = musicList; //全局赋值
// _attr.musicIndex = index; //全局赋值
// _audio[0].src = musicList[index].src; //添加音乐路径
// var _Name = U.selectEl("#U_MD_UI_music_Name"); //音乐名字节点
// _Name[0].innerText = musicList[index].title; //音乐名字赋值
_musicBox.remove();
}
_music.create(parentEl); //创建音乐控件
_music.Attr = { //存放全局属性
'musicList': musicList, //所有数据
'musicIndex': index, //当前数据索引
'autoplay': autoplay, //第一首是否自动播放
'currentTime': null, //音乐当前时间未赋值
'endTime': null //音乐结束时间未赋值
};
_music.init(); //初始化函数
};
U.MD.UI.music.Attr = null; //存放元素与变量的json全局变量 未赋值
U.MD.UI.music.htmlTemplate = ' \n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'