///<jscompress sourcefile="Banner.js" />
//电脑端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];
};
///<jscompress sourcefile="Calendar.js" />
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模板块*/
/*功能*/
'<div class="U_MD_UI_calendar_features">' +
'<div class="U_MD_UI_calendar_closeBtn" id="U_MD_UI_calendar_closeBtn">关闭</div>' +
'<div class="U_MD_UI_calendar_features_a">' +
'<div class="U_MD_UI_calendar_prev U_MD_UI_calendar_btn" id="prevDate"></div>' +
'<div class="U_MD_UI_calendar_tit" id="calendar_tit"></div>' +
'<input type="text" id="calendar_tit_btn" style="display: none;">' +
'<div class="U_MD_UI_calendar_next U_MD_UI_calendar_btn" id="nextDate"></div>' +
'</div>' +
'<i></i>' +
'</div>',
/*星期*/
'<div id="calendar_day">' +
'<ul class="U_MD_UI_calendar_week">' +
'<li>日</li>' +
'<li>一</li>' +
'<li>二</li>' +
'<li>三</li>' +
'<li>四</li>' +
'<li>五</li>' +
'<li>六</li>' +
'</ul>' +
'<ul class="U_MD_UI_calendar_c" id="calendar_week_c"></ul>' +
'</div>',
/*选择月*/
'<div class="U_MD_UI_calendar_month" id="calendar_month" style="display: none">' +
'<ul class="U_MD_UI_calendar_month_c">' +
'<li><span>1月</span></li>' +
'<li><span>2月</span></li>' +
'<li><span>3月</span></li>' +
'<li><span>4月</span></li>' +
'<li><span>5月</span></li>' +
'<li><span>6月</span></li>' +
'<li><span>7月</span></li>' +
'<li><span>8月</span></li>' +
'<li><span>9月</span></li>' +
'<li><span>10月</span></li>' +
'<li><span>11月</span></li>' +
'<li><span>12月</span></li>' +
'</ul>' +
'</div>',
/*选择年*/
'<div id="calendar_year" class="U_MD_UI_calendar_month" style="display: none">' +
'<ul class="U_MD_UI_calendar_month_c">' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'<li></li>' +
'</ul>' +
'</div>',
/*选择时间*/
'<span id="U_MD_UI_calendar_timeText" class="U_MD_UI_calendar_timeText">选择时间</span>' +
'<div class="U_MD_UI_calendar_timeBox">' +
'<div id="U_MD_UI_calendar_clearText" class="U_MD_UI_calendar_timeBtn">清空</div>' +
'<div id="U_MD_UI_calendar_nowTime" class="U_MD_UI_calendar_timeBtn">现在</div>' +
'<div id="U_MD_UI_calendar_okBtn" class="U_MD_UI_calendar_timeBtn">确定</div>' +
'</div>',
/*选择时间内容*/
'<div id="calendar_timeChoose" class="U_MD_UI_calendar_timeChoose" style="display: none">' +
'</div>'
];
/**
* 创建日历的壳
* @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
};
///<jscompress sourcefile="City.js" />
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 = ' <ul class="U_MD_UI_city_menuBox"> <!--控件的头部-->\n' +
'\n' +
' <!--U_MD_UI_city_menuChecked 选中菜单的按钮时所用的"className":红色-->\n' +
' <!--U_MD_UI_city_filled 表示待填写class 为增删class占位置 防出错 以下都是-->\n' +
' <!--U_MD_UI_city_menuoChecked 选择城市后所添加的class 红色小圆点-->\n' +
' <li id="U_MD_UI_city_usedCityMenu" data-city-mark="U_MD_UI_city_usedCityCont" class="U_MD_UI_city_menuChecked" data-city-res="">\n' +
' <span>常用市</span>\n' +
' </li>\n' +
'\n' +
' <li id="U_MD_UI_city_provinceMenu" data-city-mark="U_MD_UI_city_provinceCont" class="U_MD_UI_city_filled" data-city-res="">\n' +
' <span>省/直辖市</span>\n' +
' </li>\n' +
'\n' +
' <li id="U_MD_UI_city_cityMenu" data-city-mark="U_MD_UI_city_cityCont" class="U_MD_UI_city_filled U_MD_UI_city_hidden" data-city-res="">\n' +
' <span>请选择</span>\n' +
' </li>\n' +
'\n' +
' <li id="U_MD_UI_city_areaMenu" data-city-mark="U_MD_UI_city_areaCont" class="U_MD_UI_city_filled U_MD_UI_city_hidden" data-city-res="">\n' +
' <span>请选择</span>\n' +
' </li>\n' +
' </ul>\n' +
'\n' +
'\n' +
' <!--以下为主要内容区域-->\n' +
' <!-- ----------------------------------------------------------------------------- -->\n' +
' <ul id="U_MD_UI_city_usedCityCont" class="U_MD_UI_city_filled U_MD_UI_city_Cont"> <!-- <!–常用城市盒子节点–> -->\n' +
' <li id="U_MD_UI_city_liTemplate"><span>光明新区</span></li>\n' +
' <!-- U_MD_UI_city_liTemplate 为内容区域的li的模板 可无视 已display为none -->\n' +
' <!--U_MD_UI_city_Cont_ochecked 选中城市的按钮时所用的"className":红色-->\n' +
' </ul>\n' +
'\n' +
'\n' +
' <ul class="U_MD_UI_city_filled U_MD_UI_city_Cont U_MD_UI_city_hidden" id="U_MD_UI_city_provinceCont"> <!-- <!–存放省的盒子节点–> -->\n' +
' </ul>\n' +
'\n' +
'\n' +
' <ul class="U_MD_UI_city_filled U_MD_UI_city_Cont U_MD_UI_city_hidden" id="U_MD_UI_city_cityCont"> <!-- <!–存放市的盒子节点–> -->\n' +
' </ul>\n' +
'\n' +
'\n' +
' <ul class="U_MD_UI_city_filled U_MD_UI_city_Cont U_MD_UI_city_hidden" id="U_MD_UI_city_areaCont"> <!-- <!–存放地区的盒子节点–> -->\n' +
' </ul>';
//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;
};;
///<jscompress sourcefile="Color.js" />
//色板
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对象
};
///<jscompress sourcefile="Common.js" />
//工具空间，宝航字体、字号。。。
//字体
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对象
};
///<jscompress sourcefile="Dialog.js" />
//#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
;
///<jscompress sourcefile="Email.js" />
//电脑端banner滑块控件命名空间
Namespace.register("U.MD.UI.email");
/**
电脑端banner滑块控件
*/
U.MD.UI.email = function () {
};
///<jscompress sourcefile="Face.js" />
//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 = '<img contentEditable="true" src="' + _imageurl + '">';
U.UF.E.addRange(img, null, true);
}
U.selectEl(el1)[0].style.display = "none";
};
///<jscompress sourcefile="Form.js" />
//#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;
///<jscompress sourcefile="Music.js" />
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 = ' <div class="U_MD_UI_music_leftCont">\n' +
' <div class="U_MD_UI_music_CoverBox">\n' +
' <img src="/img/Controls/Audio/pc/电脑图标.png" alt="" id="U_MD_UI_music_Cover">\n' +
' </div> <!-- 音乐封面图片 -->\n' +
' </div>\n' +
' <div class="U_MD_UI_music_rightCont">\n' +
' <div class="U_MD_UI_music_Name" id="U_MD_UI_music_Name"></div> <!-- 音乐名字 -->\n' +
' <div class="U_MD_UI_music_leftBtn" id="U_MD_UI_music_leftBtn"></div> <!-- 左按钮 -->\n' +
' <div class="U_MD_UI_music_pauseBtn U_MD_UI_music_playBtn" id="U_MD_UI_music_playBtn"></div> <!-- 播放/暂停 按钮 -->\n' +
' <div class="U_MD_UI_music_rightBtn" id="U_MD_UI_music_rightBtn"></div> <!-- 右按钮 -->\n' +
' <div class="U_MD_UI_music_soundOpen" id="U_MD_UI_music_soundSwitch"></div> <!-- 声音开关按钮 -->\n' +
' <div class="U_MD_UI_music_soundBox" id="U_MD_UI_music_soundBox"> <!-- 声音条盒子节点 -->\n' +
' <div class="U_MD_UI_music_soundBar" id="U_MD_UI_music_soundBar" style="width: 31px;"></div> <!-- 声音条 -->\n' +
' <div class="U_MD_UI_music_soundBall" id="U_MD_UI_music_soundBall" style="left: 31px;"></div> <!-- 声音球 -->\n' +
' </div>\n' +
' <div class="U_MD_UI_music_listBtn"></div> <!-- 右上角的列表按钮 -->\n' +
' <div class="U_MD_UI_music_shrinkBtn" id="U_MD_UI_music_shrinkBtn"></div> <!-- 右上角的缩小按钮 -->\n' +
' <div class="U_MD_UI_music_closeBtn" id="U_MD_UI_music_closeBtn"></div> <!-- 右上角的关闭按钮 -->\n' +
' </div>\n' +
' <div class="U_MD_UI_music_progressBox" id="U_MD_UI_music_progressBox"> <!-- 时间条盒子节点 -->\n' +
' <div class="U_MD_UI_music_progressBar" id="U_MD_UI_music_progressBar" style="width: 0.64px;"></div> <!-- 时间条 -->\n' +
' <div class="U_MD_UI_music_progressBall" id="U_MD_UI_music_progressBall" style="left: 0.64px;"></div> <!-- 时间球 -->\n' +
' </div>\n' +
' <audio id="U_MD_UI_music_audio" autoplay="" src=""></audio>';
/**
* 添加音乐控件html代码 并且判断是否存在html 防止多次添加
*/
U.MD.UI.music.create = function (parentEl) {
var _parentEl = parentEl || document.body;
var _formclass = { "style": { "border": "none" }, "id": "U_MD_UI_music_musicBox", "className": "U_MD_UI_music_musicBox" };
var _formattr = { isclose: false, isstretching: false, isenlarge: false, isnarrow: false };
var _headclass = { "style": { "height": "13px", "background-color": "#cc5b5b" } };
U.MD.UI.music.player = new U.UF.UI.form(false, U.MD.UI.music.htmlTemplate, _formclass, _formattr, _headclass);
U.selectEl("#U_MD_UI_music_musicBox")[0].style.overflow = "";
// U.UF.F.windowMinimize(_formel);
};
/**
* 音乐控件初始化
*/
U.MD.UI.music.init = function () {
var _music = U.MD.UI.music; //简写命名空间
var _attr = _music.Attr; //简写全局属性json名
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
var _musicList = _attr.musicList; //音乐列表数组
var _musicIndex = _attr.musicIndex; //需要播放的音乐(数组中的第index个)
_audio[0].src = _musicList[_musicIndex].src; //添加音乐路径
var _playBtn = U.selectEl("#U_MD_UI_music_playBtn"); //暂停播放按钮节点
var _Name = U.selectEl("#U_MD_UI_music_Name"); //音乐名字节点
var _corver = U.selectEl("#U_MD_UI_music_Cover"); //封面图片节点
if (!_attr.autoplay) { //若autoplay属性 = false 则第一首音乐暂停
_audio[0].pause();
}
_music.openBtnEvent(); //按钮点击开关 音乐控件隐藏
_music.shrinkBtnEvent(); //缩小事件绑定
_music.soundControl(); //声音控制器
_music.playEvent(); //音乐播放与暂停控制器
_music.switchMusic(); //切换音乐按钮
_music.progressControl(); //音乐进度条控制器*/
_audio.bind('durationchange', function () { //当音乐时长已改变时 给节点赋值
_attr.endTime = this.duration; //总时长赋值
_musicIndex = _attr.musicIndex; //音乐索引位置重赋值
_Name[0].innerText = _musicList[_musicIndex].title; //音乐名字赋值
});
_audio.bind("ended", function () { //音乐结束后切换下一首
_musicIndex = _attr.musicIndex; //由于_attr.musicIndex是一个变量 因此 需要重新赋值
var _listLength = _musicList.length - 1; //获取数组中音乐的长度
if (_musicIndex === _listLength) { //当音乐在数组中为最后一首时 下一首则为第一首 也就是索引 0
_attr.musicIndex = 0;
_musicIndex = _attr.musicIndex;
_audio[0].src = _musicList[_musicIndex].src;
} else { //否则则索引+1
_attr.musicIndex++;
_musicIndex = _attr.musicIndex;
_audio[0].src = _musicList[_musicIndex].src;
}
});
};
/**
* 关闭按钮点击事件
*/
U.MD.UI.music.openBtnEvent = function () {
var _music = U.MD.UI.music; //简写命名空间
// var _attr = _music.Attr; //简写全局属性json名
// var _musicBox = U.selectEl("#U_MD_UI_music_musicBox"); //获取音乐控件盒子
// var _closeBtn = U.selectEl("#U_MD_UI_music_closeBtn"); //获取关闭按钮 在控件里 右上角的 叉叉
U.selectEl("#U_MD_UI_music_closeBtn").bind('click', function () {
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
if (!_audio[0].paused) {
U.selectEl("#U_MD_UI_music_playBtn").addClass('U_MD_UI_music_playBtn'); //暂停音乐并修改图标
_audio[0].pause();
}
U.UF.F.closeWindow(_music.player.form); //调用窗体关闭函数
U.selectEl('#U_MD_D_T_taskbar_music').remove();
// _musicBox.addClass("U_MD_UI_music_hidden"); //点击关闭按钮后 隐藏音乐控件
// _musicBox.addClass("U_MD_UI_music_hidden"); //点击关闭按钮后 隐藏音乐控件
});
};
/**
* 缩小按钮事件绑定
*/
U.MD.UI.music.shrinkBtnEvent = function () {
U.selectEl('#U_MD_UI_music_shrinkBtn').bind('click', function () {
U.UF.F.windowMinimize(U.MD.UI.music.player.form); //窗体最小化处理
});
};
/**
* 播放/暂停 的点击事件
*/
U.MD.UI.music.playEvent = function () {
var _music = U.MD.UI.music; //简写命名空间
var _attr = _music.Attr; //简写全局属性json名
var _playbtn = U.selectEl("#U_MD_UI_music_playBtn"); //暂停/播放 按钮
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
_playbtn.bind('click', function () {
if (!_audio[0].paused) { //如在 无暂停状态(播放状态)
_playbtn.addClass('U_MD_UI_music_playBtn'); //暂停音乐并修改图标
_audio[0].pause();
} else { //否则则时 暂停状态时
_playbtn.removeClass('U_MD_UI_music_playBtn');
_audio[0].play(); //播放音乐并修改图标
}
});
};
/**
* 音乐按钮切换(上一首 下一首)
*/
U.MD.UI.music.switchMusic = function () {
var _music = U.MD.UI.music; //简写命名空间
var _attr = _music.Attr; //简写全局属性json名
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
var _rightBtn = U.selectEl("#U_MD_UI_music_rightBtn"); //获取下一首的按钮
var _leftBtn = U.selectEl("#U_MD_UI_music_leftBtn"); //获取上一首的按钮
var _musicList = _attr.musicList; //获取音乐数组数据
var _musicIndex = _attr.musicIndex; //获取当前需要播放音乐 的数组索引
var _listLength = _musicList.length - 1; //获取音乐的数量
_rightBtn.bind('click', function () { //当点击右边(下一首)的按钮时
_musicIndex = _attr.musicIndex; //由于_attr.musicIndex是一个变量 因此 需要重新赋值
if (_musicIndex === _listLength) { //如果当前的歌曲是最后一首时
_attr.musicIndex = 0; //则条转到第一首歌
_musicIndex = _attr.musicIndex; //给全局属性赋值
_audio[0].src = _musicList[_musicIndex].src; //并修改音乐路径
} else { //否则跳转到下一首歌
_attr.musicIndex++; //数组索引加1
_musicIndex = _attr.musicIndex; //给全局属性赋值
_audio[0].src = _musicList[_musicIndex].src; //并修改音乐路径
}
});
_leftBtn.bind('click', function () { //同上 此处是左按钮(上一首)
_musicIndex = _attr.musicIndex; //由于_attr.musicIndex是一个变量 因此 需要重新赋值
if (_musicIndex === 0) {
_attr.musicIndex = _listLength;
_musicIndex = _attr.musicIndex;
_audio[0].src = _musicList[_musicIndex].src;
} else {
_attr.musicIndex--;
_musicIndex = _attr.musicIndex;
_audio[0].src = _musicList[_musicIndex].src;
}
});
};
/**
* 声音事件控制 总函数
*/
U.MD.UI.music.soundControl = function () {
var _music = U.MD.UI.music; //简写命名空间
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
var _soundBox = U.selectEl("#U_MD_UI_music_soundBox"); //声音盒子节点
var _soundBall = U.selectEl("#U_MD_UI_music_soundBall"); //音量球
var _soundBar = U.selectEl("#U_MD_UI_music_soundBar"); //声音条
var _boxWidth = _soundBox[0].clientWidth; //获取盒子宽度 = 声音球位置的最大值
var _volume = 0.5; //声音初始大小
var _soundSwitch = U.selectEl("#U_MD_UI_music_soundSwitch"); //声音开关图标
_audio[0].volume = _volume; //给audio标签添加声音
_soundBall[0].style.left = (_boxWidth * _volume) + "px"; //调整音量球位置 = 总宽度*百分比
_soundBar[0].style.width = (_boxWidth * _volume) + "px"; //调整声音条宽度 = 总宽度*百分比
_soundSwitch.bind('click', function () { //声音开关控制函数
_music.toggleClass(this, 'U_MD_UI_music_soundClose'); //每点击一次 切换样式
if ($(this).hasClass('U_MD_UI_music_soundClose')) { //判断如果样式为关闭时(静音状态)
this._volume = _audio[0].volume; //记录原有的声音值
this._soundBallX = parseFloat(_soundBall.css("left")); //获取音量球的 left值
this._soundBarW = parseFloat(_soundBar.css("width")); //获取音量条的 宽
_soundBall[0].style.left = 0; //音量球的left为0
_soundBar[0].style.width = 0; //音量条的宽为 0
_audio[0].volume = 0; //audio声音也为0
} else { //播放状态
if (!this._volume) { //如果this._volume不存在 则声音赋值时会报错
return;
}
_audio[0].volume = this._volume; //在点一遍开关后 复原到之前记录的值
_soundBall[0].style.left = this._soundBallX + "px"; //给音量球的left赋值
_soundBar[0].style.width = this._soundBarW + "px"; //给音量条的宽赋值
}
});
_soundBox.bind('mousedown', function (e) { //点击进度条后 音量球跳转到鼠标点击位置 并且声音跟随增大或减小
var _boxLeft = _music.getOffsetLeft(this); //body距离盒子左端的left值 = 声音球left的最小值
var _boxRight = _boxLeft + _boxWidth; //body距离盒子右端的left值 = 声音球left的最大值
var _mouseX = e.pageX; //获取鼠标按下时的X坐标
_mouseX = Math.max(_mouseX, _boxLeft); //mouseX 与 boxLeft距离不能小于0 因此 获取两数最大值 原因:声音不能小于0
_mouseX = Math.min(_mouseX, _boxRight); //mouseX 与 boxRight因此 获取两数最大值 原因:声音不能大于1
var _dis = _mouseX - _boxLeft; //鼠标划过的距离
_volume = Math.round(parseFloat(_dis / _boxWidth) * 100) / 100; //距离相对于盒子宽度的值 = 声音百分比大小(此处为保留两位小数点）
_soundBall[0].style.left = (_boxWidth * _volume) + "px"; //音量球left值 改变成 = 总宽*百分比
_soundBar[0].style.width = (_boxWidth * _volume) + "px"; //音量条width 改变成 = 总宽*百分比
_audio[0].volume = _volume; //改变audio标签值
if (_audio[0].volume <= 0) { //如果声音小于=0 时 则改变成 静音状态时的样式 否则则是非静音状态样式
_soundSwitch.addClass('U_MD_UI_music_soundClose');
} else {
_soundSwitch.removeClass('U_MD_UI_music_soundClose');
}
});
_soundBall.bind('mousedown', function (e) { //音量球拖拽效果
U.UF.EV.stopBubble(e); //阻止冒泡
var _oMouseX = e.pageX; //获取鼠标按下时的X坐标
var _soundDrapMove = function (e) { //拖拽时移动用的函数
U.UF.EV.stopDefault(e); //取消默认拖拽
var _mouseX = e.pageX; //鼠标移动时的x坐标
var _dis = _mouseX - _oMouseX + _oX; //移动的距离
_dis = Math.max(0, _dis); //限制音量球left不得小于0
_dis = Math.min(_boxWidth, _dis); //限制音量球left不得大于盒子宽度
_soundBall[0].style.left = _dis + "px"; //音量球位置
_soundBar[0].style.width = _dis + "px"; //音量条宽度
_volume = Math.round(parseFloat(_dis / _boxWidth) * 100) / 100; //声音球距离盒子宽度的left值 = 声音百分比大小(此处为保留两位小数点）
_audio[0].volume = _volume; //音乐的声音赋值
if (_audio[0].volume <= 0) { //判断声音小于0则改成静音图标
_soundSwitch.addClass('U_MD_UI_music_soundClose');
} else { //否则该成非静音图标
_soundSwitch.removeClass('U_MD_UI_music_soundClose');
}
};
var _soundDragUp = function () { //拖拽时松开用的函数
U.selectEl(document).unbind('mousemove', _soundDrapMove);
U.selectEl(document).unbind('mouseup', _soundDragUp);
};
var _oX = parseFloat(_soundBall.css("left")); //获取鼠标按下时音量球的坐标
U.selectEl(document).bind('mousemove', _soundDrapMove);
U.selectEl(document).bind('mouseup', _soundDragUp)
});
};
/**
* 进度条控制 事件总函数
*/
U.MD.UI.music.progressControl = function () {
var _music = U.MD.UI.music; //简写命名空间
var _attr = _music.Attr; //简写全局属性json名
var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
var _progressBox = U.selectEl("#U_MD_UI_music_progressBox"); //时间盒子节点
var _progressBall = U.selectEl("#U_MD_UI_music_progressBall"); //时间球
var _progressBar = U.selectEl("#U_MD_UI_music_progressBar"); //时间条
var _playbtn = U.selectEl("#U_MD_UI_music_playBtn"); //播放/暂停 按钮
var _boxWidth = _progressBox[0].clientWidth; //时间盒子宽度 = 时间球位置的最大值
var _barFlag = true,
_currentTime; //声明两个全局变量 为更新时间条所用
_audio.bind('timeupdate', function () {
if (!this.paused) { //如在 无暂停状态(播放状态)
_playbtn.removeClass('U_MD_UI_music_playBtn'); //修改成 播放时用的图标
} else { //否则 为暂停状态
_playbtn.addClass('U_MD_UI_music_playBtn'); //修改成暂停用的图标
}
if (_barFlag) { //barFlag = true 为 时间球不在拖拽状态时
_currentTime = this.currentTime; //获取音乐当前播放时间
var _speed = Math.round(parseFloat(_currentTime / _attr.endTime) * 10000) / 10000; //_speed = 当前时间相对于总时长的 百分比
_progressBall[0].style.left = (_boxWidth * _speed) + "px"; //时间球的left = _speed(百分比)*总宽度
_progressBar[0].style.width = (_boxWidth * _speed) + "px"; //时间条的width = _speed(百分比)*总宽度
}
});
_progressBox.bind('mousedown', function (e) { //点击进度条后 时间球跳转到鼠标点击位置 时间跟随改变
var _boxLeft = _music.getOffsetLeft(this); //body距离盒子左端的left值 = 时间球left的最小值
var _boxRight = _boxLeft + _boxWidth; //body距离盒子右端的left值 = 时间球left的最大值
var _mouseX = e.pageX; //获取鼠标按下时的X坐标
_mouseX = Math.max(_mouseX, _boxLeft); //mouseX 与 boxLeft距离不能小于0 因此 获取两数最大值 原因:声音不能小于0
_mouseX = Math.min(_mouseX, _boxRight); //mouseX 与 boxRight因此 获取两数最大值 原因:声音不能大于1
var _dis = _mouseX - _boxLeft; //鼠标划过的距离
_speed = Math.round(parseFloat(_dis / _boxWidth) * 10000) / 10000; //时间球距离盒子宽度的left值 = 时间当前值/总时长(此处为保留4位小数点）
_progressBall[0].style.left = (_boxWidth * _speed) + "px";
_progressBar[0].style.width = (_boxWidth * _speed) + "px";
_audio[0].currentTime = _attr.endTime * _speed;
});
_progressBall.bind('mousedown', function (e) { //时间球拖拽效果
_barFlag = false; //拖拽时 时间球跟随声音播放向前移动状态暂时屏蔽 详细见 timeupdate监听
U.UF.EV.stopBubble(e); //阻止冒泡
var _oMouseX = e.pageX; //获取鼠标按下时的X坐标
var _progressDrapMove = function (e) { //拖拽移动时的函数
U.UF.EV.stopDefault(e); //取消默认拖拽
var _mouseX = e.pageX; //鼠标移动时的x坐标
var _dis = _mouseX - _oMouseX + _oX; //移动的距离
_dis = Math.max(0, _dis); //限制音量球left不得小于0
_dis = Math.min(_boxWidth, _dis); //限制音量球left不得大于盒子宽度
_progressBall[0].style.left = _dis + "px"; //音量球位置
_progressBar[0].style.width = _dis + "px"; //音量条宽度
_speed = Math.round(parseFloat(_dis / _boxWidth) * 10000) / 10000; //时间球距离盒子宽度的left值 = 时间当前值/总时长(此处为保留4位小数点）
_progressBall[0].style.left = (_boxWidth * _speed) + "px"; //时间球的left = 总宽*百分比
_progressBar[0].style.width = (_boxWidth * _speed) + "px"; //时间条的width = 总宽*百分比
_currentTime = _attr.endTime * _speed; //当前时间 = 音乐总时长*百分比
};
var _progressDragUp = function () { //拖拽松开后的函数
_barFlag = true; //拖拽后松开时 时间球跟随声音播放向前移动
_audio[0].currentTime = _currentTime; //当前重新赋值
U.selectEl(document).unbind('mousemove', _progressDrapMove); //删除 mousemove的监听事件
U.selectEl(document).unbind('mouseup', _progressDragUp); //删除mouseup的监听事件
};
var _oX = parseFloat(_progressBall.css("left")); //获取鼠标按下时音量球的坐标
U.selectEl(document).bind('mousemove', _progressDrapMove);
U.selectEl(document).bind('mouseup', _progressDragUp)
});
};
U.MD.UI.music.getOffsetLeft = function (obj) {
var tmp = obj.offsetLeft;
var val = obj.offsetParent;
while (val != null) {
tmp += val.offsetLeft;
val = val.offsetParent;
}
return tmp;
};
U.MD.UI.music.secondToDate = function (result) {
var m = Math.floor((result / 60 % 60));
var s = Math.floor((result % 60));
if (m < 10) {
m = "0" + m;
}
if (s < 10) {
s = "0" + s;
}
return result = m + ":" + s;
};
U.MD.UI.music.toggleClass = function (ele, cls) { //如果存在(不存在)，就删除(添加)一个样式
if ($(ele).hasClass(cls)) {
U.selectEl(ele).removeClass(cls);
} else {
U.selectEl(ele).addClass(cls);
}
};;
///<jscompress sourcefile="Page.js" />
//窗体功能命名空间
Namespace.register("U.UF.P");
/*
* 作用：给不同的域添加this的指定方向
* @param {function} fun 执行函数
* @param {array} arr 执行函数的参数数组
* @param {element} el 用于指向域
*/
U.UF.P.apply = function (fun, arr, el) {
return function () {
fun.apply(el, arr);
}
}
U.UF.P.pagepId = 0; //全局变量 分页控件数量
/*
** @param {element} el 需要插入分页控件的位置
** @param {number} num 数据的数量
** @param {number} pagenum 一页中数据量的多少
** @param {number} page 显示当前是第几页
** @param {function} fun 回调函数
*/
U.UF.P.PPage = U.UF.P.page = function (el, num, pagenum, page, fun) {
this.PageNum = 0; // 全局变量 当前页
this.Index = 0; //全局变量 索引
this.Pageall = 0; //全局变量 总页数
this.init(el, num, pagenum, page, fun); //初始化函数
}
U.UF.P.page.prototype = {
init: function (el, num, pagenum, page, fun) {
this.PageNum = page; //获取当前页面
this.Index = page - 1; //获取当前页码的索引
var _el = U.selectEl(el)[0]; //获取需要插入分页控件的元素
var _pagesum = Math.ceil(num / pagenum); //获取总页数，数据的数量/一页中的数量，向上取整
this.Pageall = _pagesum; //获取总页数
//判断是否拥有分页控件
if (_el.getElementsByClassName('U_MD_F_Y')[0]) {
return false; //有的话就不添加新的分页控件
}
U.UF.P.pagepId++;
var _page = $$("div", { "className": "U_MD_F_Y" }, _el); //创建分页控件的整体部分
var _pagenode = $$("div", { "className": "U_MD_F_YL" }, _page); //创建分页控件的父级
var _firstEle = $$("div", { "className": "U_MD_F_YLO U_MD_F_Y_Button", "innerHTML": "首页", "title": "首页", "pid": U.UF.P.pagepId + "1" }, _pagenode); //创建分页的首页功能
var _previousEle = $$("div", { "className": "U_MD_F_YLT U_MD_F_Y_Button", "title": "上一页", "pid": U.UF.P.pagepId + "3" }, _pagenode); //创建分页的上一页功能
var _pagenum = $$("div", { "className": "U_MD_F_YN" }, _pagenode); //创建中间页码数的整体 , "style": { "cssText": "float:left"}
var _startpage;
var _endpage = Math.min(_pagesum, Math.max(page + 5, 10));
for (_startpage = Math.max(1, Math.min(page - 5, _pagesum - 10)); _startpage <= _endpage; _startpage++) {
(function (i, el) {
//创建中间的页码数，最高十页的页码数
//"className": "list" + U.UF.P.pagepId,
//"style": { "text-align": "center", "line-height": "31px;" },
var _centerEle = $$("div", {
"innerHTML": i,
"pid": U.UF.P.pagepId + "5"
}, _pagenum); //创建中间的页码数
i == page && (_centerEle.className = "U_MD_F_Y_Button_Active");
_centerEle.onclick = U.UF.P.apply(function (i) { //给每一个页码数添加一个点击事件
U.UF.P.centerEle(el, _centerEle); //实现点击页码进行跳转
}, [_startpage], el)
})(_startpage, this);
}
// var j = 0;
// for (j; j < _forpagesum && i <= _pagesum; j++) {//循环有多少个页码，并且进行创建
// (function (i, el) {
// //创建中间的页码数，最高十页的页码数
// //"className": "list" + U.UF.P.pagepId,
// //"style": { "text-align": "center", "line-height": "31px;" },
// var _centerEle = $$("div", {
// "innerHTML": i, "pid": U.UF.P.pagepId + "5"
// }, _pagenum); //创建中间的页码数
// i == page && (_centerEle.className = "U_MD_F_Y_Button_Active");
// _centerEle.onclick = U.UF.P.apply(function (i) {//给每一个页码数添加一个点击事件
// U.UF.P.centerEle(el, _centerEle); //实现点击页码进行跳转
// }, [i], el)
// })(i, this);
// i++;
// }
var _nextEle = $$("div", { "className": "U_MD_F_YLS U_MD_F_Y_Button", "title": "下一页", "pid": U.UF.P.pagepId + "4" }, _pagenode); //创建下一页功能
var _lastEle = $$("div", { "className": "U_MD_F_YLF U_MD_F_Y_Button", "innerHTML": "尾页", "title": "尾页", "pid": U.UF.P.pagepId + "2" }, _pagenode); //创建尾页功能
var _pages = $$("div", { "className": "U_MD_F_YR" }, _page); //创建跳转页面的整体
// var _pagesk = $$("div", { "className": "U_MD_F_YRL" }, _pages); //创建跳转页面的父级
$$("span", { "innerHTML": "到" }, _pages); //创建跳转元素
// var _pagejump = $$("div", {}, _pages); //创建页码输入框的父级
var _input = $$("input", { "type": "text" }, _pages); //创建页码输入框
$$("span", { "innerHTML": "页" }, _pages); //创建跳转元素
var _rightEle = $$("div", { "className": "U_MD_F_YRZ", "pid": U.UF.P.pagepId + "6", "innerHTML": "确定" }, _pages); //创建确定按钮
if (this.PageNum < _pagesum + 1) { //获取当前页面是否小于总页数
var _list = U.selectEl(".list" + U.UF.P.pagepId); //获取所有的中间页码数
for (var j = 1; j < _list.length + 1; j++) { //循环所有的中间页码数
if (this.PageNum == j) { //判断当前页码数是否等于中间页码数的一个
U.selectEl(_list[this.PageNum - 1]).addClass("U_MD_F_Y_Button_Active");
}
}
}
_firstEle.onclick = U.UF.P.apply(this.fPage, [_firstEle, _pagesum, fun], this); //首页功能
_previousEle.onclick = U.UF.P.apply(this.fPage, [_previousEle, _pagesum, fun], this); //上一页功能
//中间点击页码跳转功能 参数一：el 指向U.UF.P.page这个域 参数二：el1 点击中间页码的元素
U.UF.P.centerEle = function (el, el1) {
U.UF.P.apply(el.fPage, [el1, _pagesum, fun], el)(); //执行点击中间页码的功能
}
_nextEle.onclick = U.UF.P.apply(this.fPage, [_nextEle, _pagesum, fun], this); //下一页功能
_lastEle.onclick = U.UF.P.apply(this.fPage, [_lastEle, _pagesum, fun], this); //尾页功能
_rightEle.onclick = U.UF.P.apply(this.fPage, [_rightEle, _pagesum, fun, _input], this); //跳页功能
_input.onkeyup = function () { //做一个键盘按下的功能
if (event.keyCode == "13") { //判断是否是回车键
_rightEle.onclick(); //如果是回车键，则 执行确定按钮功能
}
}
},
/*
** 作用：用于首页 上一页 下一页 尾页 输入框跳转 点击中间页码数的功能实现
** @param {element} el 获取当前元素
** @param {number} pagesum 总页数
** @param {function} fun 回调函数
** @param {element} input 获取输入框的元素
*/
fPage: function (el, pagesum, fun, input) {
_el1 = el.pid; //获取点击元素的pid，用于判断是首页 上一页 下一页 尾页 输入框跳转 点击中间页码数的功能
_el = _el1.charAt(_el1.length - 1); //截取pid最后一个数字，用于判断是首页 上一页 下一页 尾页 输入框跳转 点击中间页码数的功能
if (_el == 5) { //判断是否是点击中间页码
_list = U.selectEl($(el).Parent()).Parent().children[2].children; //获取点击中间页码的该元素的所有页码元素
} else if (_el == 6) { //判断是否是确定或者是回车按钮的点击
_list = U.selectEl($(el).Parent()).Parent().children[0].children[2].children; //获取确定或回车按钮的点击的该元素的所有页码元素
} else { //如果既不是中间页码，也不是回车或者是确定按钮的点击
_list = U.selectEl(el).Parent().children[2].children; //获取该元素所有的页码元素
}
U.selectEl(".U_MD_F_Y_Button_Active", U.selectEl(el).Parent(3)).removeClass("U_MD_F_Y_Button_Active"); //清空所有页码的点击样式
if (_el == 1) { //pid为1时，执行首页的功能
if (this.Index == 0) { this.Index++ } //判断当前索引是否为0，如果是 则执行索引++
if (this.PageNum > 1) { //判断当前页数是否大于1
U.selectEl(_list[0]).addClass("U_MD_F_Y_Button_Active");
this.Index = 0; //获取索引为0
this.PageNum = 1 //获取当前页数为1
this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
return;
}
U.selectEl(_list[--this.Index]).addClass("U_MD_F_Y_Button_Active");
} else if (_el == 2) { //pid为2时，执行尾页功能
if (this.PageNum < this.Pageall) { //判断当前页码是否小于总页数
this.Index = pagesum; //获取索引值为总页数
this.PageNum = this.Pageall; //获取全局变量的当前页为总页数
this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
return
} else {
U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active");
}
} else if (_el == 3) { //pid为3时，执行上一页功能
if (this.Index > 0) { //判断当前索引是否大于0
U.selectEl(_list[--this.Index]).addClass("U_MD_F_Y_Button_Active"); //获取当前页的上一个页码的点击样式
this.PageNum--; //并且当前页减一
this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
return
} else { // 判断第一页
U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active");
}
} else if (_el == 4) { //pid为4时，执行下一页功能
if (this.PageNum < this.Pageall) { //判断当前页码是否小于总页数
U.selectEl(_list[++this.Index]).addClass("U_MD_F_Y_Button_Active"); //获取当前页的下一个页码的点击样式
this.PageNum++; //并且当前页码加一
this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
return
} else { // 判断最后一页
U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active"); //获取最后一页的点击样式
}
} else if (_el == 5) { //pid为5时，执行点击中间页码跳转功能
this.pagefun(el, _list, el); //执行页码跳转功能
fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
return
} else if (_el == 6) { //pid为6时，执行输入框功能
var _number = new RegExp("^[0-9]*$") //写一个正则表达式，只能够输入数字
if (input.value.match(_number)) { //判断输入的是否是数字
if (input.value >= 1 && input.value <= this.Pageall) { //判断输入的数字是否大于等于1，并且，输入的数字小于等于总页数
this.PageNum = input.value; //输入的值为当前页码数
this.pagefun(this.PageNum, _list, el); //执行页码跳转功能
fun(this.PageNum); //执行数据的跳转 this.PageNum 当前页数
} else { //如果输入的不是数字
U.alert("无效的输入"); //则弹窗提示
U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active"); //并且点击样式不改变
}
}
}
},
/*
** 作用：用于首页、上一页、下一页、尾页、输入框、点击页码进行页码跳转的功能
** @param {element} el 当前页码数
*/
pagefun: function (el, list, pel) {
var _list = list; //获取所有的中间页码数
var elNum = parseInt(el.innerHTML) || el; // 获取当前点击页码
U.selectEl(".U_MD_F_Y_Button_Active", pel).removeClass("U_MD_F_Y_Button_Active"); //清空所有的中间页码数的点击样式
var _listLength = Math.ceil(_list.length / 2); // 获取页码长度的一半
var Index; // 记录点击时的页码的索引
var preIndex = this.Index; // 上一个页码索引
var difference = null; // 计算当前页码跟所点击的页码的差异
var lastPage = parseInt($(_list)[$(_list).length - 1].innerText); // 当前页码的最后一个数的页码
//判断当前点击页码是否小于页码长度的一半，或者当前点击页码大于当前页码的最后一个数的页码减去页码长度的一半并且当前点击页码小于等于总页码数
if (!(elNum < _listLength || (elNum > this.Pageall - _listLength && elNum <= this.Pageall))) { //这里有个取反
// 点击页码中间以后的页码处理 例如 1 2 3 4 .... 8 9 则 5以后的页码点击处理事件
//判断当前页码的最后一个数除以当前点击页码，向上取整，是否小于当前页码的最后一个数减去当前点击页码，并且索引值不为0
if (!(Math.ceil(lastPage / elNum) < lastPage - elNum) && this.Index != 0) { //这里有一个取反
difference = elNum - parseInt(_list[_listLength - 1].innerText); // 计算差异
[].__proto__.forEach.apply($(_list), [function (value, index, ar) { //forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
value.innerText = parseInt(value.innerText) + difference; // 跟中间的值进行比较
}])
this.Index = _listLength - 1; // 记录索引
} else {
// 向页码中间以前的页码点击处理事件
difference = elNum - parseInt(_list[_listLength - 1].innerText); //计算当前页码跟所点击的页码的差异
[].__proto__.forEach.apply($(_list), [function (value, index, ar) { //forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
value.innerText = parseInt(value.innerText) + difference; // 跟中间的值进行比较
}])
this.Index = _listLength - 1; // 记录索引
}
} else if (elNum > this.Pageall - _listLength && elNum <= this.Pageall) { // 最大页码设置
var elthis = this;
[].__proto__.forEach.apply($(_list), [
function (value, index, ar) { //forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
value.innerText = elthis.Pageall + 1 - ar.length + index;
}
])
} else if (elNum < _listLength) { // 最小页码设置
[].__proto__.forEach.apply($(_list), [function (value, index, ar) { //forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
value.innerText = index + 1; // 跟中间的值进行比较
}])
}
// 页码点击处理事件
[].__proto__.forEach.apply(_list, [function (value, index, ar) { //forEach循环数组，循环所有获取到的中间页码数，并且获取数组中的每一个元素的索引
if (parseInt(value.innerHTML) == elNum) { //判断循环出来的元素的值是否为当前点击页码
Index = index;
} //获取索引
}])
this.Index = Index; //获取当前索引
this.PageNum = elNum; // 修改当前页数
U.selectEl(_list[this.Index]).addClass("U_MD_F_Y_Button_Active"); //并且点击样式不改变
}
}
///<jscompress sourcefile="Picture.js" />
Namespace.register("U.MD.UI.picture");
/**
* 图片控件调用接口函数
* @arr {Array || Object} 图片信息数组
* 形如：
* ['//img/1.jpg',
* '//img/2.jpg',
* '//img/3.jpg',
* '//img/4.jpg',
* '//img/5.jpeg',
* '//img/6.jpg']
*/
U.MD.UI.picture = function (arr, startPicNum) {
if ($('#U_MD_UI_PictureForm')[0]) { /*判断窗体是否存在*/
if ($('#U_MD_UI_PictureForm')[0].style.display === 'none') /*重新将窗体显示到页面中*/
U.selectEl('#U_MD_UI_PictureForm')[0].style.display = 'block';
U.MD.UI.picture.DIVBOX = {
"USERPICS": arr,
"PICAREA": U.selectEl('#U_MD_UI_Picture_picArea')[0],
/*获取拖拽的元素*/
"PICBOX": U.selectEl('#U_MD_UI_Picture_picBox')[0],
/*获取控件最外层元素*/
'FA': U.selectEl('#U_MD_UI_Picture_fa')[0] /*获取功能栏目元素*/
};
U.MD.UI.picture.initloadPic(arr, startPicNum)
return;
}
if (!arr.length)
return
U.MD.UI.picture.create(arr, startPicNum); /*创建控件的内容*/
U.MD.UI.picture.DIVBOX.PICAREA.onmousedown = function (e) { U.MD.UI.picture.mDown(U.MD.UI.picture.DIVBOX.PICAREA, U.MD.UI.picture.DIVBOX.PICBOX, e) }
U.MD.UI.picture.wheel(); /*定义滚轮事件*/
}
/*定义功能栏目的图片*/
U.MD.UI.picture.FA = [
{ src: "/img/pictureView/add.png", id: "U_MD_UI_Picture_add" }, //放大按钮图片素材
{ src: "/img/pictureView/narrow.png", id: "U_MD_UI_Picture_narrow" }, //缩小按钮图片素材
{ src: "/img/pictureView/prev.png", id: "U_MD_UI_Picture_prev" }, //上一张按钮图片素材
{ src: "/img/pictureView/next.png", id: "U_MD_UI_Picture_next" }, //下一张按钮图片素材
{ src: "/img/pictureView/turnLeft.png", id: "U_MD_UI_Picture_turnLeft" }, //左旋转按钮图片素材
{ src: "/img/pictureView/turnRight.png", id: "U_MD_UI_Picture_turnRight" } //右旋转按钮图片素材
];
U.MD.UI.picture.picnumber = 0; /*定义图片数*/
U.MD.UI.picture.rotatenum = 0; /*定义旋转数*/
U.MD.UI.picture.originalSize = [] /*定义原始图片尺寸大小的数组*/
U.MD.UI.picture.pics = []; /*定义存放图片的数组*/
U.MD.UI.picture.scalingvalue = 50; /*定义缩放大小单位：px*/
U.MD.UI.picture.focuspicsrc = ''; /*当前图片的src*/
U.MD.UI.picture.focuspicsize = ''; /*当前图片的文件大小*/
/**
* 图片控件创建函数
* @arr {Array || Object} 图片信息数组
*/
U.MD.UI.picture.create = function (arr, startPicNum) {
var _c = $$('div', { style: { height: "100%", "overflow": "hidden" }, id: "U_MD_UI_Picture_bossBox" }); /*创建控件最外层元素*/
var _box = $$('div', { id: "U_MD_UI_Picture_picBox", className: 'U_MD_UI_Picture_picBox' }, _c);
$$('div', { id: 'U_MD_UI_Picture_picArea', className: 'U_MD_UI_Picture_picArea' }, _box); /*创建控件第二层元素，也是拖拽时所要触发的元素*/
var _functionalarea = $$('div', { style: { height: "60px", width: "100%", position: "absolute", bottom: "0", "background-color": "#ffffff", "text-align": "center" }, id: "U_MD_UI_Picture_fa" }, _c); /*创建控件的功能栏目*/
new U.UF.UI.form(
"<span id='U_MD_UI_Picture_imgInfo'></span> - <span id='U_MD_UI_Picture_r'>100%</span>",
_c, { style: { width: document.documentElement.clientWidth / 1.5 + 'px', height: document.documentElement.clientHeight / 1.5 + 'px', position: "absolute" }, id: "U_MD_UI_PictureForm" }, { isdrag: true, isstretching: true, isenlarge: true, isclose: true, isnarrow: true }, { style: { "padding": "10px", "background-color": "#22508c" } }
); /*调用窗体*/
_box.style.height = _box.clientHeight - 60 + 'px'; /*让可拖拽区域的宽-60px*/
// 全局属性
U.MD.UI.picture.DIVBOX = {
"USERPICS": arr,
"PICAREA": U.selectEl('#U_MD_UI_Picture_picArea')[0],
/*获取拖拽的元素*/
"PICBOX": U.selectEl('#U_MD_UI_Picture_picBox')[0],
/*获取控件最外层元素*/
'FA': U.selectEl('#U_MD_UI_Picture_fa')[0] /*获取功能栏目元素*/
};
/*创建功能栏目子节点*/
var _oDiv = $$('div', { style: { display: "inline-block", "line-height": "40px", "margin-top": "10px" } }, U.MD.UI.picture.DIVBOX.FA);
/*循环功能栏目里面的图片*/
for (var j = 0; j < U.MD.UI.picture.FA.length; j++) {
/*创建span*/
var _span = $$('span', { style: { "background-image": "url(" + U.MD.UI.picture.FA[j].src + ")", width: "40px", height: "40px", display: "inline-block", margin: "0 15px" }, id: U.MD.UI.picture.FA[j].id }, _oDiv);
}
U.MD.UI.picture.initloadPic(null, startPicNum);
/*给上放大的点击事件*/
U.selectEl('#U_MD_UI_Picture_add')[0].onclick = U.UF.C.apply(this, function () {
this.changeSize(U.MD.UI.picture.scalingvalue, U.MD.UI.picture.rotatenum)
});
/*给上缩小的点击事件*/
U.selectEl('#U_MD_UI_Picture_narrow')[0].onclick = U.UF.C.apply(this, function () {
this.changeSize(-U.MD.UI.picture.scalingvalue, U.MD.UI.picture.rotatenum)
});
/*给上上一张图片的点击事件*/
U.selectEl('#U_MD_UI_Picture_prev')[0].onclick = U.UF.C.apply(this, function () {
this.prevPic(0)
});
/*给上下一张图片的点击事件*/
U.selectEl('#U_MD_UI_Picture_next')[0].onclick = U.UF.C.apply(this, function () {
this.prevPic(1)
});
/*给上左旋转的点击事件*/
U.selectEl('#U_MD_UI_Picture_turnLeft')[0].onclick = U.UF.C.apply(this, function () {
this.turn(1)
});
/*给上有旋转的点击事件*/
U.selectEl('#U_MD_UI_Picture_turnRight')[0].onclick = U.UF.C.apply(this, function () {
this.turn(0)
});
_c.onresize = function () {
_box.style.height = _c.clientHeight - 60 + 'px';
};
_box.onresize = function () {
U.MD.UI.picture.checkHeight();
}
}
U.MD.UI.picture.initloadPic = function (arr, startPicNum) {
if (arr) {
U.MD.UI.picture.DIVBOX.PICAREA.innerHTML = "";
U.MD.UI.picture.DIVBOX.PICAREA.style = null;
U.MD.UI.picture.picnumber = startPicNum || 0; /*定义图片数*/
U.MD.UI.picture.rotatenum = 0; /*定义旋转数*/
U.MD.UI.picture.DIVBOX.USERPICS = arr
} else {
U.MD.UI.picture.picnumber = startPicNum >= 0 ? startPicNum : 0;
}
//调用创建方法
U.MD.UI.picture.createPic();
/*获取所有的图片并赋值*/
U.MD.UI.picture.pics = U.selectEl('#U_MD_UI_Picture_picArea > ul > li > img');
U.MD.UI.picture.pics[U.MD.UI.picture.picnumber].onload = U.UF.C.apply(this, function () {
/*获取当前图片的原始大小并赋值*/
this.originalSize = this.getImgNaturalDimensions(U.MD.UI.picture.pics[U.MD.UI.picture.picnumber]);
/*调整大小，位置*/
this.checkHeight();
});
}
U.MD.UI.picture.createPic = function () {
/*创建ul*/
var _ul = $$('ul', { id: "ul" }, U.MD.UI.picture.DIVBOX.PICAREA);
/*循环数据源*/
for (var i = 0; i < U.MD.UI.picture.DIVBOX.USERPICS.length; i++) {
/*创建li*/
var _li = $$('li', {}, _ul);
if (typeof U.MD.UI.picture.DIVBOX.USERPICS[i] === 'object') {
/*如果是第一张，初始化控件一般都是第一张显示*/
if (i === U.MD.UI.picture.picnumber) {
$$('img', { "onerror": U.MD.C.imgError, src: U.MD.UI.picture.DIVBOX.USERPICS[i].src }, _li);
U.MD.UI.picture.focuspicsrc = U.MD.UI.picture.DIVBOX.USERPICS[i].src;
if (U.MD.UI.picture.DIVBOX.USERPICS[i].size)
U.MD.UI.picture.focuspicsize = U.MD.UI.picture.DIVBOX.USERPICS[i].size;
} else {
$$('img', { "onerror": U.MD.C.imgError, src: U.MD.UI.picture.DIVBOX.USERPICS[i].src, style: { display: "none" } }, _li);
}
} else if (typeof U.MD.UI.picture.DIVBOX.USERPICS[i] === 'string') {
if (i === U.MD.UI.picture.picnumber) {
/*如果是第一张，初始化控件一般都是第一张显示*/
$$('img', { "onerror": U.MD.C.imgError, src: U.MD.UI.picture.DIVBOX.USERPICS[i] }, _li);
U.MD.UI.picture.focuspicsrc = U.MD.UI.picture.DIVBOX.USERPICS[i];
} else {
$$('img', { "onerror": U.MD.C.imgError, src: U.MD.UI.picture.DIVBOX.USERPICS[i], style: { display: "none" } }, _li);
}
}
}
}
/**
* 旋转检测
* @param num 为整数
* 如果是0也就是false，调用右旋转。如果是1也就是true，调用左旋转。因为有万恶的ie8，所以要滤镜旋转 0-0°，1-90°，2-180°，3-270°，如果需要任意角度旋转去学习阵矩。
*
*/
U.MD.UI.picture.turn = function (num) {
/*判断是左旋，还是右旋，为什么要这么打应该晓得吧*/
if (num) {
U.MD.UI.picture.rotatenum--;
U.MD.UI.picture.rotatenum < 0 ? U.MD.UI.picture.rotatenum = 3 : U.MD.UI.picture.rotatenum;
} else {
U.MD.UI.picture.rotatenum++;
U.MD.UI.picture.rotatenum > 3 ? U.MD.UI.picture.rotatenum = 0 : U.MD.UI.picture.rotatenum;
}
U.MD.UI.picture.rotating();
}
/**
* 执行旋转
*/
U.MD.UI.picture.rotating = function () {
/*定义常规游览器旋转属性字符*/
var val = "rotate(" + U.MD.UI.picture.rotatenum * 90 + "deg)";
/*U.MD.UI.picture.rotatenum % 2 !== 0 判断是否选转90°或者270°*/
if (U.MD.UI.picture.rotatenum % 2 !== 0) {
/*赋值大小，-20px是为了留间隙*/
U.MD.UI.picture.DIVBOX.PICAREA.style.width = U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - 20 + 'px';
/*开始旋转*/
U.MD.UI.picture.compatibleRotate(U.MD.UI.picture.DIVBOX.PICAREA, val);
/*调整位置*/
U.MD.UI.picture.DIVBOX.PICAREA.style.top = (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / 2) + 10 + 'px';
/*调整位置，以至于中心缩放*/
U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth / 2 + 'px';
/*检测是否是ie8 or ie7*/
if ((navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i) == "8.") || (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i) == "7.")) {
U.MD.UI.picture.DIVBOX.PICAREA.style.top = "10px";
U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / 2 + 'px';
}
} else {
/*清空拖拽元素的style*/
U.MD.UI.picture.DIVBOX.PICAREA.setAttribute('style', '');
/*开始旋转*/
U.MD.UI.picture.compatibleRotate(U.MD.UI.picture.DIVBOX.PICAREA, val);
/*改变长度*/
U.MD.UI.picture.DIVBOX.PICAREA.style.width = U.MD.UI.picture.originalSize[0] > U.MD.UI.picture.DIVBOX.PICAREA.clientWidth + 150 ? '1290px' : U.MD.UI.picture.DIVBOX.PICAREA.clientWidth + 150;
/*调整图片大小*/
U.MD.UI.picture.checkHeight();
}
/*改变左上角的title的缩放比*/
U.selectEl('#U_MD_UI_Picture_r')[0].innerText = Math.round((U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / U.MD.UI.picture.originalSize[1]) * 100) + '%';
}
/**
* 兼容旋转
* @param el 旋转的元素
* @param val 旋转的属性值
*/
U.MD.UI.picture.compatibleRotate = function (el, val) {
//定义属性
el.style.webkitTransform = val;
el.style.MozTransform = val;
el.style.mturnsTransform = val;
el.style.OTransform = val;
el.style.transform = val;
/*检测是否是ie8 or ie7*/
if ((navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i) == "8.") || (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i) == "7."))
el.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + Math.abs(U.MD.UI.picture.rotatenum) + ")";
}
/**
* 图片切换
* @param num 整数orTRUE,FALSE
* true代表下一张，false代表上一张
*/
U.MD.UI.picture.prevPic = function (num) {
/*在切换图片先把正在显示的图片隐藏掉*/
U.MD.UI.picture.pics[U.MD.UI.picture.picnumber].style.display = 'none';
if (num) {
/*图片位置数++*/
U.MD.UI.picture.picnumber++;
/*如果是最后一张，跳到第一张*/
if (U.MD.UI.picture.picnumber > U.MD.UI.picture.pics.length - 1)
U.MD.UI.picture.picnumber = 0;
} else {
/*图片位置数--*/
U.MD.UI.picture.picnumber--;
/*如果是第一张，跳到最后一张*/
if (U.MD.UI.picture.picnumber < 0)
U.MD.UI.picture.picnumber = U.MD.UI.picture.pics.length - 1;
}
if (U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].size)
U.MD.UI.picture.focuspicsize = U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].size;
if (U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].src)
U.MD.UI.picture.focuspicsrc = U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].src;
/*显示需要显示的图片*/
U.MD.UI.picture.pics[U.MD.UI.picture.picnumber].style.display = 'block';
/*获取该图片的初始大小*/
U.MD.UI.picture.originalSize = U.MD.UI.picture.getImgNaturalDimensions(U.MD.UI.picture.pics[U.MD.UI.picture.picnumber]);
/*清空拖拽元素的style值*/
U.MD.UI.picture.DIVBOX.PICAREA.setAttribute('style', '');
/*调整大小，位置*/
U.MD.UI.picture.checkHeight();
/*旋转数初始0*/
U.MD.UI.picture.rotatenum = 0;
}
/**
* 功能：调整图片的大小，图片居中显示，改变左上角的title缩放比例
*/
U.MD.UI.picture.checkHeight = function () {
/*长宽比例*/
var _proportion = U.MD.UI.picture.originalSize[0] / U.MD.UI.picture.originalSize[1];
/*如果原始图片的宽比显示框的宽要大，进行调整*/
if (U.MD.UI.picture.originalSize[1] > U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - 40 || U.MD.UI.picture.originalSize[0] > U.MD.UI.picture.DIVBOX.PICBOX.clientWidth) {
/*-40px上下留白*/
U.MD.UI.picture.DIVBOX.PICAREA.style.width = Math.floor((U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - 40) * _proportion) + 'px';
} else {
/*原比例显示*/
U.MD.UI.picture.DIVBOX.PICAREA.style.width = U.MD.UI.picture.originalSize[0] + 'px';
//U.MD.UI.picture.DIVBOX.PICAREA.style.height = U.MD.UI.picture.originalSize[1] + 'px';
}
/*居中显示*/
U.MD.UI.picture.DIVBOX.PICAREA.style.left = (U.MD.UI.picture.DIVBOX.PICBOX.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
U.MD.UI.picture.DIVBOX.PICAREA.style.top = (U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
if (typeof U.MD.UI.picture.DIVBOX.USERPICS[0] === 'object')
U.selectEl('#U_MD_UI_Picture_imgInfo')[0].innerText = U.MD.UI.picture.focuspicsrc.toLowerCase().split('/').splice(-1)[0] + "(" + U.MD.UI.picture.originalSize[0] + "*" + U.MD.UI.picture.originalSize[1] + "px " + U.MD.UI.picture.focuspicsize + ")";
else if (typeof U.MD.UI.picture.DIVBOX.USERPICS[0] === 'string')
U.selectEl('#U_MD_UI_Picture_imgInfo')[0].innerText = U.MD.UI.picture.DIVBOX.USERPICS[U.MD.UI.picture.picnumber].toLowerCase().split('/').splice(-1)[0] + "(" + U.MD.UI.picture.originalSize[0] + "*" + U.MD.UI.picture.originalSize[1] + "px)";
U.selectEl('#U_MD_UI_Picture_r')[0].innerText = Math.round((U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / U.MD.UI.picture.originalSize[1]) * 100) + '%';
}
/**
* 获取图片的原来的大小
* @param img
* @returns {*[]} 返回值1：原始长度，值2：原始宽度
*/
U.MD.UI.picture.getImgNaturalDimensions = function (img) {
var nWidth, nHeight;
if (img.naturalWidth) { // 现代浏览器
nWidth = img.naturalWidth;
nHeight = img.naturalHeight
} else { // IE6/7/8
var image = new Image();
image.src = img.src;
nWidth = image.width;
nHeight = image.height;
}
return [nWidth, nHeight]
}
/**
* 拖拽
* @param dragEl 拖拽的元素
* @param bossEl 拖拽限制的范围元素
*/
U.MD.UI.picture.drag = function (dragEl, bossEl) {
dragEl.onmousedown = function (e) {
U.MD.UI.picture.mDown(dragEl, bossEl, e)
}
}
/**
* 点击图片所触发的事件
* @param {[object]} dragEl [拖拽的元素]
* @param {[object]} bossEl [拖拽限制的范围元素]
* @param {[event]} e []
*/
U.MD.UI.picture.mDown = function (dragEl, bossEl, e) {
e = e || window.event;
/*定义拖拽元素到父级的X距离*/
var _distanceX = e.clientX - dragEl.offsetLeft;
/*定义拖拽元素到父级的Y距离*/
var _distanceY = e.clientY - dragEl.offsetTop;
bossEl.onmousemove = function (e) {
U.MD.UI.picture.mMove(dragEl, bossEl, _distanceX, _distanceY, e);
}
/*鼠标放开，移除事件*/
bossEl.onmouseup = function (e) {
bossEl.onmousemove = null;
bossEl.onmouseup = null;
};
/*禁用默认事件*/
if (e.preventDefault) {
/*常规游览器*/
e.preventDefault();
} else {
/*ie8*/
dragEl.ondragstart = function () {
return false;
};
dragEl.onselectstart = function () {
return false;
};
}
}
/**
* 点击拖动图片时触发的事件
* @param {[object]} dragEl [拖拽的元素]
* @param {[object]} bossEl [拖拽限制的范围元素]
* @param {[object]} _distanceX [拖拽元素到父级的X距离]
* @param {[object]} _distanceY [拖拽元素到父级的Y距离]
* @param {[event]} e []
*/
U.MD.UI.picture.mMove = function (dragEl, bossEl, _distanceX, _distanceY, e) {
e = e || window.event;
/*移动距离*/
var _left = e.clientX - _distanceX,
_top = e.clientY - _distanceY;
/*判断是否是最顶部，默认显示窗体宽的1/8*/
_left = U.MD.UI.picture.rotatenum % 2 === 0 ? Math.min(bossEl.clientWidth - bossEl.clientWidth / 8, _left) : Math.min(bossEl.clientWidth - bossEl.clientWidth / 8 - dragEl.clientWidth / 2 + dragEl.clientHeight / 2, _left);
/*判断是否是最底部，默认显示窗体宽的1/8*/
_left = U.MD.UI.picture.rotatenum % 2 === 0 ? Math.max(-dragEl.clientWidth + bossEl.clientWidth / 8, _left) : Math.max(-dragEl.clientWidth + bossEl.clientWidth / 8 + dragEl.clientWidth / 2 - dragEl.clientHeight / 2, _left);
/*判断是否是最左部，默认显示窗体长的1/8*/
_top = U.MD.UI.picture.rotatenum % 2 === 0 ? Math.min(bossEl.clientHeight - bossEl.clientHeight / 8, _top) : Math.min(bossEl.clientHeight - bossEl.clientHeight / 8 + (dragEl.clientWidth - dragEl.clientHeight) / 2, _top);
/*判断是否是最右部，默认显示窗体长的1/8*/
_top = U.MD.UI.picture.rotatenum % 2 === 0 ? Math.max(-dragEl.clientHeight + bossEl.clientHeight / 8, _top) : Math.max(-dragEl.clientHeight + bossEl.clientHeight / 8 - (dragEl.clientWidth - dragEl.clientHeight) / 2, _top);
/*赋值*/
dragEl.style.left = _left + 'px';
dragEl.style.top = _top + 'px';
}
/**
* 滚轮事件
*/
U.MD.UI.picture.wheel = function () {
U.MD.UI.picture.DIVBOX.PICBOX.onmousewheel = function () {
this.getWheelDalta()
}.bind(this);
}
/**
* 滚轮事件
* @param e
*/
U.MD.UI.picture.getWheelDalta = function (e) {
e = e || window.event;
var delta = 0;
// delta的返回值为正时，表示向前滚动；delta的返回值为负时，表示向后滚动；
if (e.wheelDelta) {
// IE中，鼠标滚轮信息存放在wheelDelta属性中；向前滚动时，wheelDelta的值是120的倍数；向后滚动时，wheelDelta的值是-120的倍数；
delta = e.wheelDelta / 120;
if (window.opera) delta = -delta;
} else if (e.detail) {
// Firefox的鼠标滚轮信息存放在detail属性中；向前滚动，detail的值是-3的倍数；向后滚动，detail的值是3的倍数；
delta = -e.detail / 3;
}
// 执行滚轮事件函数
if (delta > 0) {
U.MD.UI.picture.changeSize(U.MD.UI.picture.scalingvalue);
} else {
U.MD.UI.picture.changeSize(-U.MD.UI.picture.scalingvalue);
}
// 阻止默认行为，防止当页面本身就存在滚动条时出现的异常
prevent(event);
function prevent(evt) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
}
}
/**
* 改变图片大小
* @param multiple 缩放大小
*/
U.MD.UI.picture.changeSize = function (multiple) {
/*添加缩放后， 添加缩放前的宽， 添加缩放前的长*/
var _addOver, _afterH, _afterW;
/*赋值*/
_afterH = U.MD.UI.picture.DIVBOX.PICAREA.clientHeight;
_afterW = U.MD.UI.picture.DIVBOX.PICAREA.clientWidth;
_addOver = U.MD.UI.picture.DIVBOX.PICAREA.clientWidth + multiple;
/*最小缩放长400px*/
if ((_addOver / U.MD.UI.picture.originalSize[0]) * 100 < 20 && _addOver < 200) {
return;
} else if (((U.MD.UI.picture.DIVBOX.PICAREA.clientHeight + multiple) / U.MD.UI.picture.originalSize[1]) * 100 > 1000) { /*最大缩放1000%*/
return
}
/*赋值长*/
U.MD.UI.picture.DIVBOX.PICAREA.style.width = _addOver + 'px';
/*中心缩放*/
U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop - (U.MD.UI.picture.DIVBOX.PICAREA.clientHeight - _afterH) / 2 + 'px';
U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft - multiple / 2 + 'px';
/*ie8，7,中心缩放位移*/
if (((navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i) == "8.") || (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i) == "7.")) && U.MD.UI.picture.rotatenum % 2 !== 0) {
U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / 2 + 'px';
U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth / 2 + 'px';
}
/*下面都是防止缩放时偏移到窗体外面*/
var topY = U.MD.UI.picture.DIVBOX.PICAREA.clientHeight + U.MD.UI.picture.DIVBOX.PICAREA.offsetTop <= U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 8 ||
((U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + U.MD.UI.picture.DIVBOX.PICAREA.offsetTop <= U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 8) && U.MD.UI.picture.rotatenum % 2 !== 0),
bottomY = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop >= U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 8 ||
((Math.abs(U.MD.UI.picture.DIVBOX.PICBOX.clientHeight - (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 - U.MD.UI.picture.DIVBOX.PICAREA.offsetTop) <= U.MD.UI.picture.DIVBOX.PICBOX.clientHeight / 8) && U.MD.UI.picture.rotatenum % 2 !== 0),
leftX = U.MD.UI.picture.DIVBOX.PICAREA.clientWidth + U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft <= U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 8 ||
(U.MD.UI.picture.DIVBOX.PICAREA.clientHeight + (U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft + (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight / 2) <= U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 8 && U.MD.UI.picture.rotatenum % 2 !== 0),
rightX = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft >= U.MD.UI.picture.DIVBOX.PICBOX.clientWidth - U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 8 ||
((U.MD.UI.picture.DIVBOX.PICBOX.clientWidth - (U.MD.UI.picture.DIVBOX.PICAREA.clientWidth - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 - U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft) <= U.MD.UI.picture.DIVBOX.PICBOX.clientWidth / 8 && U.MD.UI.picture.rotatenum % 2 !== 0);
if (topY) {
if (U.MD.UI.picture.rotatenum % 2 === 0) {
U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop + (_afterH - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
} else {
U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop + (_afterW - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
}
}
if (bottomY) {
if (U.MD.UI.picture.rotatenum % 2 === 0) {
U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop - (_afterH - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
} else {
U.MD.UI.picture.DIVBOX.PICAREA.style.top = U.MD.UI.picture.DIVBOX.PICAREA.offsetTop - (_afterW - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
}
}
if (leftX) {
if (U.MD.UI.picture.rotatenum % 2 === 0) {
U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft + (_afterW - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
} else {
U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft + (_afterH - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
}
}
if (rightX) {
if (U.MD.UI.picture.rotatenum % 2 === 0) {
U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft - (_afterW - U.MD.UI.picture.DIVBOX.PICAREA.clientWidth) / 2 + 'px';
} else {
U.MD.UI.picture.DIVBOX.PICAREA.style.left = U.MD.UI.picture.DIVBOX.PICAREA.offsetLeft - (_afterH - U.MD.UI.picture.DIVBOX.PICAREA.clientHeight) / 2 + 'px';
}
}
U.selectEl('#U_MD_UI_Picture_r')[0].innerText = Math.floor((U.MD.UI.picture.DIVBOX.PICAREA.clientWidth / U.MD.UI.picture.originalSize[0]) * 100) + '%';
};
///<jscompress sourcefile="Video.js" />
Namespace.register("U.MD.UI.video"); //注册命名空间
/**
* 创建视频
* @param src 资源地址
* @param width 视频宽度
* @param height 视频高度
* @param autoplay 是否自动播放
* @param parent 生成在哪个元素
*/
U.MD.UI.video = function (src, width, height, autoplay, parent) {
var _autoplay = autoplay || false; //检测自动播放
var _intervalTemp = null; //用于记录interval的值
var _volumeTemp = null; //用于记录临时音量（静音与取消静音用）
var _moving = false; //记录是否有移动
var _tempHeight = ""; //全屏恢复的临时高度
var _tempWidth = ""; //全屏恢复的临时宽度
var _fullscreen = false; //记录是否处于全屏状态
/*生成元素*/
var _els = U.MD.UI.video.appendEle(src, width, height, _autoplay, parent);
/*添加事件*/
U.MD.UI.video.addEvent(_els, _intervalTemp, _volumeTemp, _moving, height, width, _fullscreen);
return _els;
};
/**
* 生成元素
* @param src 视频资源地址
* @param width 视频宽度
* @param height 视频高度
* @param autoplay 是否自动播放
* @param parent 父元素
*/
U.MD.UI.video.appendEle = function (src, width, height, autoplay, parent) {
var els = {};
//包括视频和控制器的大div
els.videoDiv = $$("div", { "className": "U_MD_UI_video_VideoDiv", "style": { "width": width + "px", "height": height + "px" } }, parent);
//视频主体
els.video = $$("video", {
"src": src, //视频资源地址
"className": "U_MD_UI_video_VideoMain", //视频class
"autoplay": autoplay, //是否自动播放
"preload": "auto" //是否预加载（默认自动）
}, els.videoDiv);
//控制器主体
els.controls = $$("div", { "className": "U_MD_UI_video_VideoControls" }, els.videoDiv);
//暂停/播放按钮
els.playPauseBtn = $$("div", { "className": "U_MD_UI_video_PlayPauseButton U_MD_UI_video_PlayIcon" }, els.controls);
//显示当前时间的div
els.currentTimeDiv = $$("div", { "className": "U_MD_UI_video_Time", "innerHTML": "00:00" }, els.controls);
//进度条
els.progress = $$("div", { "className": "U_MD_UI_video_Progress" }, els.controls);
//进度条实际进度
els.progressCurrentTime = $$("div", { "className": "U_MD_UI_video_ProgressCurrentTime" }, els.progress);
//进度条上的圆点
els.progressCircle = $$("div", { "className": "U_MD_UI_video_ProgressCircle" }, els.progressCurrentTime);
//显示实际时间的div
els.DurationDiv = $$("div", {
"className": "U_MD_UI_video_Time", //设置class
"innerHTML": "00:00", //设置默认值
"onselectstart": "return false;" //禁止选择
}, els.controls);
//音量按钮
els.soundControls = $$("div", { "className": "U_MD_UI_video_SoundControls" }, els.controls);
//音量
els.soundProgress = $$("div", { "className": "U_MD_UI_video_SoundProgress" }, els.controls);
//真实音量
els.soundProgressCurrent = $$("div", { "className": "U_MD_UI_video_SoundProgressCurrent", "style": { "width": "100%" } }, els.soundProgress); //设置class
//全屏按钮
els.fullScreenBtn = $$("div", { "className": "U_MD_UI_video_FullScreen" }, els.controls);
return els;
};
/**
* 给元素添加事件
* @param els 传入所有元素
* @param intervalTemp 传入intervalTemp
* @param volumeTemp 传入volumeTemp
* @param moving 传入moving
* @param tempHeight 传入tempHeight
* @param tempWidth 传入tempWidth
* @param fullscreen 传入fullscreen
*/
U.MD.UI.video.addEvent = function (els, intervalTemp, volumeTemp, moving, tempHeight, tempWidth, fullscreen) {
//给暂停/播放按钮添加事件
els.playPauseBtn.onclick = function (event) {
U.MD.UI.playPauseBtnClick(event, els);
};
if (els.videoDiv.onwebkitfullscreenchange !== undefined) { //设置全屏状态事件（webkit）
els.videoDiv.onwebkitfullscreenchange = function () {
var rtn = U.MD.UI.video.fullscreenChange(fullscreen, tempHeight, tempWidth, els);
fullscreen = rtn[0];
tempHeight = rtn[1];
tempWidth = rtn[2];
}
} else if (els.videoDiv.onfullscreenchange !== undefined) { //设置全屏状态事件（w3）
els.videoDiv.onfullscreenchange = function () {
var rtn = U.MD.UI.video.fullscreenChange(fullscreen, tempHeight, tempWidth, els); //设置全屏状态事件（w3）
fullscreen = rtn[0];
tempHeight = rtn[1];
tempWidth = rtn[2];
}
} else if (els.videoDiv.onmozfullscreenchange !== undefined) { //设置全屏状态事件（moz）
els.videoDiv.onmozfullscreenchange = function () {
var rtn = U.MD.UI.video.fullscreenChange(fullscreen, tempHeight, tempWidth, els);
fullscreen = rtn[0];
tempHeight = rtn[1];
tempWidth = rtn[2];
}
}
/**
* 全屏按钮单击事件
*/
els.fullScreenBtn.onclick = function () {
U.MD.UI.video.fullscreenClick(fullscreen, els);
};
/**
* 进度条圆点按下事件
* @param event 按下事件
*/
els.progressCircle.onmousedown = function (event) {
U.MD.UI.video.circleMove(event, moving, els);
};
/**
* 音量条鼠标按下事件
* @param event 事件
*/
els.soundProgress.onmousedown = function (event) {
U.MD.UI.video.soundProgressMove(event, els, moving); //执行soundProgressMove函数
};
/**
* 进度条鼠标按下事件
* @param event 事件
*/
els.progress.onmousedown = function (event) {
U.MD.UI.video.progressMove(event, els, moving); //进度条按下移动函数（点击进度条除圆点以外的地方）
};
/**
* 视频暂停事件，用于设置暂停按钮与停止刷新
*/
els.video.onpause = function () {
els.playPauseBtn.className = "U_MD_UI_video_PlayPauseButton U_MD_UI_video_PlayIcon"; //设置暂停按钮的icon（修改class）
clearInterval(intervalTemp); //清除刷新的interval
};
/**
* 视频播放事件，用于设置播放按钮与启动刷新
*/
els.video.onplay = function () {
els.playPauseBtn.className = "U_MD_UI_video_PlayPauseButton U_MD_UI_video_PauseIcon"; //设置开始按钮的icon（修改class）
intervalTemp = U.MD.UI.video.setInterval(moving, els); //启动刷新
};
/**
* 视频可以播放，刷新数据
*/
els.video.oncanplay = function () {
U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息
};
/**
* 静音按钮事件函数
*/
els.soundControls.onclick = function () {
volumeTemp = U.MD.UI.video.muteClick(els, volumeTemp, moving);
};
/**
* 控制栏显示/隐藏控制
*/
els.videoDiv.onclick = function () {
//U.MD.UI.video.displayControls(event, els);
};
};
/**
* 让控制栏可以隐藏
* @param event 视频点击事件
* @param els 元素集合
*/
U.MD.UI.video.displayControls = function (event, els) {
var _target = event.target; //获取目标
if (_target === els.video || _target === els.videoDiv) { //判断目标点击后是否可以隐藏/显示
if (els.controls.style.display === "none") { //如果已设置隐藏状态则显示
els.controls.style.display = "block";
} else { //否则隐藏控制栏
els.controls.style.display = "none";
}
}
};
U.MD.UI.playPauseBtnClick = function (event, els) {
var _el = event.target; //获取到按钮本身
if (_el.className === "U_MD_UI_video_PlayPauseButton U_MD_UI_video_PlayIcon") { //暂停状态
els.video.play(); //开始播放
} else { //播放状态
els.video.pause(); //暂停播放
}
};
/**
* 静音按钮
* @param els 元素集合
* @param volumeTemp 临时记录音量
* @param moving 记录是否正在移动（刷新数据用）
* @returns {*} 返回volumeTemp
*/
U.MD.UI.video.muteClick = function (els, volumeTemp, moving) {
if (els.video.volume !== 0) { //音量非零，静音
volumeTemp = els.video.volume; //记录当前音量
els.video.volume = 0; //静音
U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息
} else if (els.video.volume === 0 && volumeTemp !== null) { //如果音量等于0（即静音），且用户没有按过静音键
els.video.volume = volumeTemp; //设置音量
volumeTemp = null; //将变量值重置
U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息
}
return volumeTemp; //返回volumeTemp
};
/**
* 全屏按钮点击事件
* @param fullscreen 是否全屏
* @param els 元素集合
*/
U.MD.UI.video.fullscreenClick = function (fullscreen, els) {
if (!fullscreen) { //如果没全屏
if (els.videoDiv.requestFullScreen) { //请求全屏(w3)
els.videoDiv.requestFullScreen(); //请求全屏(w3)
} else if (els.videoDiv.webkitRequestFullScreen) { //请求全屏(webkit)
els.videoDiv.webkitRequestFullScreen(); //请求全屏(webkit)
} else if (els.videoDiv.mozRequestFullScreen) { //请求全屏(moz)
els.videoDiv.mozRequestFullScreen(); //请求全屏(moz)
}
} else { //如果已全屏
if (document.exitFullScreen) { //取消全屏(w3)
document.exitFullScreen(); //取消全屏(w3)
} else if (document.webkitCancelFullScreen) { //取消全屏(webkit)
document.webkitCancelFullScreen(); //取消全屏(webkit)
} else if (document.webkitExitFullscreen) { //取消全屏(webkit)
document.webkitExitFullscreen(); //取消全屏(webkit)
} else if (document.mozExitFullScreen) { //取消全屏(moz)
document.mozExitFullScreen(); //取消全屏(moz)
}
}
};
/**
* 全屏状态改变事件
* @param fullscreen 记录是否全屏
* @param tempHeight 临时高度
* @param tempWidth 临时宽度
* @param els 元素集合
* @returns {*[]} 返回部分改变后的变量
*/
U.MD.UI.video.fullscreenChange = function (fullscreen, tempHeight, tempWidth, els) {
if (!fullscreen) { //如果没全屏，则进行全屏准备操作
//tempHeight = els.videoDiv.offsetHeight + "px";//备份视频div高度
//tempWidth = els.videoDiv.offsetWidth + "px";//备份视频div宽度
els.videoDiv.style.height = "100vh"; //100vh为覆盖整个页面
els.videoDiv.style.width = "100vw"; //100vw为覆盖整个页面
els.videoDiv.style.position = "absolute"; //将视频设置绝对定位
els.videoDiv.style.top = "0"; //移动到最上
els.videoDiv.style.left = "0"; //移动到最左
els.videoDiv.style.zIndex = "999"; //设置zIndex最高
} else { //退出全屏
els.videoDiv.style.height = tempHeight + "px"; //恢复高度
els.videoDiv.style.width = tempWidth + "px"; //恢复宽度
els.videoDiv.style.position = ""; //清除绝对定位
els.videoDiv.style.top = ""; //清除top属性
els.videoDiv.style.left = ""; //清除left属性
els.videoDiv.style.zIndex = ""; //清除zIndex属性
}
fullscreen = !fullscreen; //设置全屏状态
return [fullscreen, tempHeight, tempWidth];
};
/**
* 时间格式化（数字秒转换成00:00的格式）
* @param time 待转换的时间（秒） 例:30
* @returns {string} 返回的时间 例:00:30
*/
U.MD.UI.video.timeFormat = function (time) {
var _sec = parseInt(time % 60); //计算秒
var _min = parseInt(parseInt(time) / 60); //计算分钟
(_sec < 10) ? _sec = "0" + _sec : _sec; //秒补零
(_min < 10) ? _min = "0" + _min : _min; //分钟补零
return _min + ":" + _sec; //返回生成的时间
};
/**
* 刷新数据
* @param moving 是否正在移动（用于判断要不要刷新）
* @param currentTimeDiv 当前时间元素
* @param DurationDiv 视频总长度元素
* @param progressCurrentTime 进度条当前长度
* @param soundProgressCurrent 音量当前长度
* @param video 视频元素
*/
U.MD.UI.video.flushInfo = function (moving, currentTimeDiv, DurationDiv, progressCurrentTime, soundProgressCurrent, video) {
if (moving) return; //如果在拖动则不刷新
currentTimeDiv.innerHTML = U.MD.UI.video.timeFormat(video.currentTime); //当前时间刷新
DurationDiv.innerHTML = U.MD.UI.video.timeFormat(video.duration); //视频总长度刷新
progressCurrentTime.style.width = video.currentTime / video.duration * 100 + "%"; //进度条刷新
soundProgressCurrent.style.width = video.volume * 100 + "%"; //音量刷新
};
/**
* 获取当前元素左边到屏幕最左边的距离
* @param el 元素
* @returns {number} 返回距离（不包括单位）
*/
U.MD.UI.video.getScreenLeft = function (el) {
var _rtnLeft = el.offsetLeft; //定义一个左边长度
var _parent = el.offsetParent; //定义这个元素的父元素
while (_parent != null) { //如果父元素不为空，则进入循环
_rtnLeft += _parent.offsetLeft; //记录左边距离
_parent = _parent.offsetParent; //重新定义父元素
}
return _rtnLeft; //返回距离
};
/**
* 循环刷新信息
* @param _moving 是否正在移动
* @param _els 元素
* @returns {number} interval
*/
U.MD.UI.video.setInterval = function (_moving, _els) {
return setInterval(function () { //设置定时器
U.MD.UI.video.flushInfo(_moving, _els.currentTimeDiv, _els.DurationDiv, _els.progressCurrentTime, _els.soundProgressCurrent, _els.video); //刷新信息
}, 500); //每半秒刷新一次
};
/**
* 进度条（圆点）移动事件函数
* @param event 鼠标按下事件
* @param moving 是否正在移动
* @param els 元素
*/
U.MD.UI.video.circleMove = function (event, moving, els) { //进度条移动函数（圆点）
moving = true; //设置移动状态
var _e = event; //读取event
var _content = event.currentTarget; //获取目标
var _startX = _e.pageX; //设置一个开始的x点
var _currentProgress = _content.parentElement; //获取当前进度条元素
var _progress = _currentProgress.parentElement; //获取进度条元素
els.videoDiv.onmousemove = function (e) {
if (e.pageX - U.MD.UI.video.getScreenLeft(_progress) < 0 || e.pageX - U.MD.UI.video.getScreenLeft(_progress) > _progress.offsetWidth) { //如果鼠标位置不在有效范围内则不继续
return;
}
var _iL = e.pageX - _startX; //移动的距离
//根据实际进度与进度条长度对比进行判断
if (!(_currentProgress.offsetWidth + _iL > _progress.offsetWidth || _currentProgress.offsetWidth + _iL < 0) && (e.currentTarget.children[0].offsetWidth <= e.currentTarget.children[0].offsetWidth)) {
//设置进度条位置
_currentProgress.style.width = (_currentProgress.offsetWidth + _iL) / _progress.offsetWidth * 100 + "%";
//设置视频位置
els.video.currentTime = (_currentProgress.offsetWidth + _iL) / _progress.offsetWidth * els.video.duration;
}
_startX = e.pageX; //重置开始的x点
};
els.videoDiv.onmouseup = function () { //清除事件
moving = false; //恢复移动状态
els.videoDiv.onmousemove = function () { //清除移动事件
};
els.videoDiv.onmouseup = function () { //清除mouseup事件
};
};
};
/**
* 声音进度条拖动函数
* @param event 事件
* @param els 元素集合
* @param moving 是否正在移动
*/
U.MD.UI.video.soundProgressMove = function (event, els, moving) { //注释见move函数
event.preventDefault(); //取消事件的默认动作
var _e = event; //声明event
var _content = event.currentTarget; //获取soundprogress
var _startX = _e.pageX; //设置一个开始的x点
var _currentSound = els.soundProgressCurrent; //当前的音量条元素
var _x = event.offsetX; //获取现在鼠标相对于音量条的x点
var _length = _content.offsetWidth; //获取音量条的长度
els.video.volume = _x / _length; //设置视频音量
U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息
/**
* mousemove函数
* @param e 事件
*/
els.videoDiv.onmousemove = function (e) {
if (e.pageX - U.MD.UI.video.getScreenLeft(els.soundProgress) < 0 || e.pageX - U.MD.UI.video.getScreenLeft(els.soundProgress) > els.soundProgress.offsetWidth) { //如果鼠标位置不在有效范围内则不继续
return; //返回
}
var _iL = e.pageX - _startX; //移动的长度
if (!(_currentSound.offsetWidth + _iL > _content.offsetWidth || _currentSound.offsetWidth + _iL < 0)) { //判断是否应该移动
_currentSound.style.width = (_currentSound.offsetWidth + _iL) / _content.offsetWidth * 100 + "%"; //设置样式(进度条长度)
els.video.volume = _currentSound.offsetWidth / _content.offsetWidth; //设置音量
}
_startX = e.pageX; //重置开始的x点
};
els.videoDiv.onmouseup = function (e) {
els.videoDiv.onmousemove = function () { //清除mousemove事件
};
els.videoDiv.onmouseup = function () { //清除mouseup事件
};
};
};
/**
* 进度条拖动函数
* @param event 事件
* @param els 元素集合
* @param moving 是否正在移动
*/
U.MD.UI.video.progressMove = function (event, els, moving) { //部分注释见move函数
event.preventDefault(); //清除默认事件
if (event.target.className === "U_MD_UI_video_ProgressCircle") { //如果class是圆点的话返回
return;
}
var _e = event; //记录event
var _content = event.currentTarget; //获取进度条元素
var _startX = _e.pageX; //定义起点
var _currentProgress = els.progressCurrentTime; //定义进度条（当前）元素
var _x = event.layerX || event.offsetX; //鼠标点击的点
var _length = _content.offsetWidth; //进度条长度
els.video.currentTime = els.video.duration * (_x / _length); //计算出百分比并设置时间
U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息
els.videoDiv.onmousemove = function (e) { //鼠标移动事件
if (e.pageX - U.MD.UI.video.getScreenLeft(els.progress) < 0 || e.pageX - U.MD.UI.video.getScreenLeft(els.progress) > els.progress.offsetWidth) { //鼠标不在范围内则不继续
return;
}
moving = true; //设置移动状态
var _iL = e.pageX - _startX; //移动的长度
if (!(_currentProgress.offsetWidth + _iL > els.progress.offsetWidth || _currentProgress.offsetWidth + _iL < 0)) { //判断加上移动距离后是否合理
_currentProgress.style.width = (_currentProgress.offsetWidth + _iL) / els.progress.offsetWidth * 100 + "%"; //设置当前进度条的样式（宽度）
els.video.currentTime = (_currentProgress.offsetWidth + _iL) / els.progress.offsetWidth * els.video.duration; //设置视频现在播放时间
}
_startX = e.pageX; //重新设置开始的点
};
els.videoDiv.onmouseup = function () { //鼠标点击事件
moving = false; //设置移动状态
U.MD.UI.video.flushInfo(moving, els.currentTimeDiv, els.DurationDiv, els.progressCurrentTime, els.soundProgressCurrent, els.video); //刷新信息
els.videoDiv.onmousemove = function () { //清除事件
};
els.videoDiv.onmouseup = function () { //清除事件
};
};
};
;