///
//电脑端banner滑块控件命名空间
Namespace.register("U.MD.UI.slider");
/**
电脑端banner滑块控件
*/
/**
@box {object} 存放控件的div的id
@imgarr {array} 存放图片的数组
@speed {string} 轮播速度
@cut {bool} 判断左右切换按钮是否出现
@dot {bool} 判断小圆点是否出现
@cb {回调callback} 引用方法
**/
U.MD.UI.slider = function(box, imgarr, attr) {
//定义传输进来的参数
var _speed = attr.speed;
var _arrow = attr.arrow;
var _dot = attr.dot;
var _moveFun = attr.moveFun;
//快速创建存放图片的ul
var _sliderimgul = $$("ul", { className: 'U_MD_UI_slider_ImgList' }, box);
//在数组的第一个插入最后一张图片
imgarr.unshift(imgarr[imgarr.length - 1]);
//在arrImg[]最后放第一张图片
imgarr.push(imgarr[1]);
//for循环创建需要的li
for (i = 0; i < imgarr.length; i++) {
var _sliderimgli = $$("li", { className: '' }, _sliderimgul),
_sliderImg = $$("img", { className: '', src: imgarr[i] }, _sliderimgli); //"onerror": U.MD.C.imgError,
}
//快速创建存放左右按钮的ul
var _sliderbtnul = $$("ul", { className: 'U_MD_UI_slider_Btn' }, box),
_sliderbtnlil = $$("li", { className: 'U_MD_UI_slider_Left', innerHTML: '<' }, _sliderbtnul),
_sliderbtnlir = $$("li", { className: 'U_MD_UI_slider_Right', innerHTML: '>' }, _sliderbtnul);
//快速创建存放小圆点的ul
var _sliderpointul = $$("ul", { className: 'U_MD_UI_slider_Point' }, box);
//快速创建li,li的长度为图片的减两张（补图法）
for (i = 0; i < imgarr.length - 3; i++) {
//第一个li时，定义第一个li的class
if (i == 0) {
$$("li", { className: 'U_MD_UI_slider_On' }, _sliderpointul)[0];
}
$$("li", { className: '' }, _sliderpointul)[i];
}
//定义父元素的宽度
var _boxidwidth = box.offsetWidth;
//定义父元素的高度
var _boxidheight = box.offsetHeight;
//定义class为U_MD_UI_slider_ImgList
var _sliderimglist = box.getElementsByClassName("U_MD_UI_slider_ImgList")[0];
var _sliderimgli = _sliderimglist.getElementsByTagName("li");
//定义class为U_MD_UI_slider_Btn
var _sliderbtn = document.getElementsByClassName("U_MD_UI_slider_Btn")[0];
//定义class为U_MD_UI_slider_Point
var _sliderpoint = box.getElementsByClassName('U_MD_UI_slider_Point')[0];
//定义class为_sliderbtn的所有li
var _btnli = _sliderbtn.getElementsByTagName("li");
//定义class为_sliderimglist的li长度
var _listlen = _sliderimglist.getElementsByTagName("li").length;
//定义图片索引为1
var _listindex = 1;
//定义_sliderpoint里的li
var _pointdot = _sliderpoint.getElementsByTagName("li");
//定义_pointdot.length
var _dotlen = _pointdot.length;
//定义小圆点索引为0
var _dotindex = 0;
//初始化timer
var timer = null;
//如果obj.dot为true则显示小圆点
if (_dot) {
_sliderpoint.style.display = "block";
} else {
_sliderpoint.style.display = "none";
}
/** Banner宽度和高度跟随父元素 **/
//定义_sliderimglist里的li
var _sliderli = _sliderimglist.getElementsByTagName("li");
//所有图片的高宽等于盒子
for (var i = 0; i < _sliderli.length; i++) {
_sliderli[i].style.width = _boxidwidth + "px";
_sliderli[i].style.height = _boxidheight + "px";
}
//存放图片的ul的总宽度（盒子长度*图片数量）
_sliderimglist.style.width = (_boxidwidth * imgarr.length) + "px";
//第一张图片的位置
_sliderimglist.style.left = -_boxidwidth + "px";
//左右切换按钮宽度跟随盒子宽度
_sliderbtn.style.width = _boxidwidth + "px";
/** 鼠标停留计时器停止或启动、左右按钮显示 **/
//鼠标停留
box.onmouseover = function() {
//如果obj.cut为true则显示按钮
if (_arrow) {
_sliderbtn.style.display = "block";
} else {
_sliderbtn.style.display = "none";
}
//清除计时器
clearInterval(timer);
}
//鼠标离开
box.onmouseout = function() {
_sliderbtn.style.display = "none";
//启动计时器
timer = setInterval(auto, _speed);
}
//定义当前时间
var sTime = new Date();
//左边按钮
_btnli[0].onclick = function() {
//定义点击后的时间
var nTime = new Date();
//点击后时间距离下次点击要大于500ms才能继续下次点击
if (nTime - sTime > 500) {
//图片索引和小圆点索引减少
_listindex--;
_dotindex--;
if (_listindex == 0) {
//调用move函数
move(_sliderimglist, { left: -_boxidwidth * _listindex }, function() {
_listindex = _listlen - 2;
this.style.left = -_listindex * _boxidwidth + "px";
});
} else {
move(_sliderimglist, { left: -_boxidwidth * _listindex });
}
//小圆点移动
_dotindex = _dotindex == -1 ? _dotlen - 1 : _dotindex;
moveBtn(_dotindex);
_moveFun && _moveFun(_dotindex + 1);
}
sTime = new Date();
}
//右边按钮
_btnli[1].onclick = function() {
//定义点击后的时间
var nTime = new Date();
//点击后时间距离下次点击要大于500ms才能继续下次点击
if (nTime - sTime > 500) {
//图片索引和小圆点索引增加
_listindex++;
_dotindex++;
//小圆点索引清零
_dotindex = _dotindex % _dotlen;
//图片到最后一张时索引清零重新计算
if (_listindex == _listlen - 1) {
move(_sliderimglist, { left: -_boxidwidth * _listindex }, function() {
_listindex = 1;
this.style.left = -_listindex * _boxidwidth + "px";
});
} else {
move(_sliderimglist, { left: -_boxidwidth * _listindex });
}
//小圆点移动
moveBtn(_dotindex);
_moveFun && _moveFun(_dotindex + 1);
}
sTime = new Date();
}
//定义自动轮播
timer = setInterval(auto, _speed);
if (_dotindex == 0) {
console.log(_dotindex + 1);
}
//自动轮播
function auto() {
/* for (var i = 0; i < _sliderimgli.length; i++) {
_sliderimgli[i]._listindex = i;
//点击小圆点
//_listindex = this._listindex;
console.log(_listindex+1);
}*/
//图片索引和小圆点索引
_listindex = ++_listindex % _listlen;
_dotindex++;
//小圆点索引清零
_dotindex = _dotindex % _dotlen;
//图片到最后一张时索引清零重新计算
if (_listindex == _listlen - 1) {
move(_sliderimglist, { left: -_boxidwidth * _listindex }, function() {
_listindex = 1;
this.style.left = -_listindex * _boxidwidth + "px";
});
} else {
move(_sliderimglist, { left: -_boxidwidth * _listindex });
}
moveBtn(_dotindex);
_moveFun && _moveFun(_dotindex + 1);
}
//遍历小圆点
for (var i = 0; i < _dotlen; i++) {
_pointdot[i]._listindex = i;
//点击小圆点
_pointdot[i].onclick = function() {
_dotindex = this._listindex;
_listindex = _dotindex + 1;
move(_sliderimglist, { left: -_boxidwidth * _listindex });
moveBtn(_dotindex);
//console.log(_dotindex);
}
}
//小圆点样式
function moveBtn(_dotindex) {
for (var j = 0; j < _dotlen; j++) {
_pointdot[j].className = "";
}
_pointdot[_dotindex].className = "U_MD_UI_slider_On";
}
}
/*
切换过程函数
@dom {object} 需要移动的对象
@json {Array}向某个方向移动的距离
@callback {回调callback}
*/
function move(dom, json, callback) {
//清除计时器
clearInterval(dom.timer);
dom.timer = setInterval(function() {
//true这个计时器用来标记json中所有的attr已到达target目标
var mark = true;
for (var attr in json) {
var cur = null;
if (attr == "opacity") {
cur = getStyle(dom, attr) * 100;
} else {
cur = parseInt(getStyle(dom, attr)) || 0;
}
var target = json[attr];
// console.log(target);
// console.log(cur);
var speed = (target - cur) * .2;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cur != target) {
if (attr == "opacity") {
dom.style.filter = "alpha(opacity = " + (cur + speed) + ")"; //ie
dom.style[attr] = (cur + speed) / 100; //0~1
} else {
dom.style[attr] = cur + speed + "px";
}
//false表明当前的这个attr没有达到目标
mark = false;
}
//console.log(cur);
//console.log(1);
}
if (mark) {
clearInterval(dom.timer);
callback && callback.call(dom);
}
}, 100 / 3);
}
function getStyle(dom, attr) {
return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, null)[attr];
};
///
Namespace.register("U.MD.UI.calendar");
/**
* 日历控件调用API函数
* @param el 对象元素
* @param parentnode 添加到的父元素
* @param datetimeboolean 【boolean】是否显示选择时分秒功能
*/
U.MD.UI.Calendar = U.MD.UI.calendar = function(el, parentnode, datetimeboolean) {
if (!el)
return
if (typeof datetimeboolean == 'boolean' && datetimeboolean == false) {
U.MD.UI.calendar.datetimeformat = datetimeboolean
} else {
U.MD.UI.calendar.datetimeformat = true;
}
U.MD.UI.calendar.create(el, parentnode);
}
U.MD.UI.calendar.NOW = new Date(); /*获取当天时间*/
U.MD.UI.calendar.CURRENTYEAR = U.MD.UI.calendar.NOW.getFullYear(); /*今年*/
U.MD.UI.calendar.CURRENTMONTH = U.MD.UI.calendar.NOW.getMonth(); /*今月*/
U.MD.UI.calendar.CURRENTDAY = U.MD.UI.calendar.NOW.getDate(); /*今日*/
U.MD.UI.calendar.year = U.MD.UI.calendar.CURRENTYEAR; /*可变年*/
U.MD.UI.calendar.month = U.MD.UI.calendar.CURRENTMONTH; /*可变月*/
U.MD.UI.calendar.day = U.MD.UI.calendar.CURRENTDAY; /*可变日*/
U.MD.UI.calendar.hour = '00'; /*时*/
U.MD.UI.calendar.minute = '00'; /*分*/
U.MD.UI.calendar.second = '00'; /*秒*/
U.MD.UI.calendar.datetimeformat = true; /*是否以时分秒时间格式输出*/
U.MD.UI.calendar.fouseinp = null; /*当前聚焦的input*/
U.MD.UI.calendar.board = null; /*最外层div*/
U.MD.UI.calendar.tit = null; /*日期标题*/
U.MD.UI.calendar.mark = 1; /*标记量*/
U.MD.UI.calendar.template = [ /*html模板块*/
/*功能*/
'' +
'
关闭
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'
' +
'- 日
' +
'- 一
' +
'- 二
' +
'- 三
' +
'- 四
' +
'- 五
' +
'- 六
' +
'
' +
'
' +
'
' +
'
' +
'- 1月
' +
'- 2月
' +
'- 3月
' +
'- 4月
' +
'- 5月
' +
'- 6月
' +
'- 7月
' +
'- 8月
' +
'- 9月
' +
'- 10月
' +
'- 11月
' +
'- 12月
' +
'
' +
'
' +
'
' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'
' +
'
' +
'
清空
' +
'
现在
' +
'
确定
' +
'
' +
'
'
];
/**
* 创建日历的壳
* @param els 对象元素
* @param els 父元素
*/
U.MD.UI.calendar.create = function(els, parentnode) {
if (els == U.MD.UI.calendar.fouseinp && U.MD.UI.calendar.board.style.display == 'block')
return
if (parentnode && U.MD.UI.calendar.board) {
U.MD.UI.calendar.board.parentNode.removeChild(U.MD.UI.calendar.board);
U.MD.UI.calendar.board = null;
}
var _top = document.documentElement.scrollTop || document.body.scrollTop,
_left = document.documentElement.scrollLeft || document.body.scrollLeft;
var _offsetHtml = [Math.abs(els.getBoundingClientRect().left) + _left, Math.abs(els.getBoundingClientRect().top) + _top]; /*获取元素相对于html文档的距离*/
U.MD.UI.calendar.fouseinp = els; /*当前聚焦的input*/
if (!U.MD.UI.calendar.board) { /*判断是否有创建日历内容*/
U.MD.UI.calendar.showBoard(els, _offsetHtml, parentnode); /*创建日历内容*/
} else {
U.MD.UI.calendar.resetData(_offsetHtml);
}
U.MD.UI.calendar.showDay(); /*日期显示*/
}
/**
* 时分秒模板控制
* @param that 对象元素
* @param text 改变的文字
*/
U.MD.UI.calendar.toggleChooseText = function(that) {
var _child = U.selectEl('.U_MD_UI_calendar_c_a')[0].children, //模板元素
_len = _child.length; //长度
if (that.innerText == '返回日期') { //点击的字
U.MD.UI.calendar.changeDisplay(_lastTemplate, _child[_len - 1]); //切换模板
that.innerText = "选择时间"; //改变文字
U.selectEl(that).removeClass("U_MD_UI_calendar_timeTextClick"); //删除选中class
return; //调出函数
}
for (var i = 0; i < _len - 1; i++) { //循环模板
_child[i].style.display != 'none' && (_child[i].style.display = 'none', _lastTemplate = _child[i]); //隐藏
}
_child[_len - 1].style.display = 'block'; //显示选择时分秒模板
that.innerText = "返回日期"; //改变文字
U.selectEl(that).addClass("U_MD_UI_calendar_timeTextClick"); //添加class
}
/**
* 数据重置
* @param offsethtml 偏移量
*/
U.MD.UI.calendar.resetData = function(offsethtml) {
U.MD.UI.calendar.board.style.display = 'block'; /*让日历显示*/
U.MD.UI.calendar.mark = 1;
U.selectEl('#calendar_day')[0].style.display = 'block';
U.selectEl('#calendar_month')[0].style.display = 'none';
U.selectEl('#calendar_year')[0].style.display = 'none';
U.MD.UI.calendar.board.style.left = offsethtml[0] + 'px'; /*改变日历显示的x轴*/
U.MD.UI.calendar.board.style.top = offsethtml[1] + U.MD.UI.calendar.fouseinp.clientHeight + 10 + 'px'; /*改变日历显示的y轴*/
U.MD.UI.calendar.year = U.MD.UI.calendar.CURRENTYEAR;
U.MD.UI.calendar.month = U.MD.UI.calendar.CURRENTMONTH;
U.MD.UI.calendar.ChooseDefault(true);
}
/**
* 创建时间选择模块
* @param addel 添加父元素
*/
U.MD.UI.calendar.createChooseTime = function(addel) {
var _dataObj = [
["时", "分", "秒"],
[24, 60, 60],
["hour", "minute", "second"]
],
_lastTemplate;
var _ct = $$('div', { id: 'calendar_time', className: 'U_MD_UI_calendar_time', innerHTML: U.MD.UI.calendar.template[4] }, U.MD.UI.calendar.board);
for (var i = 0; i < _dataObj[0].length; i++) {
var _row = $$('div', { className: "U_MD_UI_calendar_timeRow" }, addel);
$$('span', { className: "U_MD_UI_calendar_timeRowText", innerText: _dataObj[0][i] }, _row);
var _rowCon = $$('div', { className: "U_MD_UI_calendar_timeRowCon" }, _row),
_ul = $$('ul', { className: "U_MD_UI_calendar_timeRowUl", name: _dataObj[2][i] }, _rowCon);
for (var j = 0; j < _dataObj[1][i]; j++) {
var _text = j.toString().length == 1 ? '0' + j : j;
$$('li', {
innerText: _text,
onclick: function() {
var _parentUl = this.parentNode,
_activeLi = _parentUl.querySelector('.U_MD_UI_calendar_timeRowActive');
U.selectEl(_activeLi).removeClass('U_MD_UI_calendar_timeRowActive');
U.selectEl(this).addClass('U_MD_UI_calendar_timeRowActive');
switch (_parentUl.name) {
case 'hour':
U.MD.UI.calendar.hour = this.innerText;
break;
case 'minute':
U.MD.UI.calendar.minute = this.innerText;
break;
case 'second':
U.MD.UI.calendar.second = this.innerText;
break;
}
}
}, _ul);
}
}
if (!U.MD.UI.calendar.datetimeformat) {
_ct.style.display = 'none';
}
U.selectEl('#U_MD_UI_calendar_timeText')[0].onclick = function() { //绑定进入选择时分秒的模块时间
U.MD.UI.calendar.toggleChooseText(this)
}
U.selectEl('#U_MD_UI_calendar_clearText')[0].onclick = function() { //绑定清空事件
U.MD.UI.calendar.fouseinp.value ? U.MD.UI.calendar.fouseinp.value = '' : U.MD.UI.calendar.fouseinp.innerText = '';
U.MD.UI.calendar.ChooseDefault(true);
U.MD.UI.calendar.board.style.display = 'none';
}
U.selectEl('#U_MD_UI_calendar_nowTime')[0].onclick = function() { //绑定输出今天事件
U.MD.UI.calendar.outPutDate(true);
}
U.selectEl('#U_MD_UI_calendar_okBtn')[0].onclick = function() { //绑定确定事件
U.MD.UI.calendar.outPutDate(false);
}
}
/**
* 创建日历
* @param input 当前聚焦的input
* @param offsetHtml 元素相对于html文档的距离
*/
U.MD.UI.calendar.showBoard = function(input, offsetHtml, parentnode) {
var _template = U.MD.UI.calendar.template,
/*转局部变量*/
_parentNode = parentnode || document.body,
_templateHTML = _template[1] + _template[2] + _template[3] + _template[5];
if (!parentnode) {
U.MD.UI.calendar.board = $$('div', { "className": "U_MD_UI_calendar_bigboard", style: { left: offsetHtml[0] + "px", top: offsetHtml[1] + input.clientHeight + 10 + "px" } }, _parentNode); /*创建日历元素*/
} else {
U.MD.UI.calendar.board = $$('div', { "className": "U_MD_UI_calendar_bigboard" }, parentnode);
}
U.MD.UI.calendar.board.innerHTML = _template[0]; /*给上html模板的第一个*/
_dayC = $$('div', { "className": 'U_MD_UI_calendar_c_a', innerHTML: _templateHTML }, U.MD.UI.calendar.board); /*创建剩下的内容，把html模板内容丢进去*/
U.MD.UI.calendar.tit = U.selectEl('#calendar_tit')[0]; /*获取日历标题*/
_mc = U.selectEl('#calendar_month > ul > li'); /*获取选择月模块的li*/
_titInp = U.selectEl('#calendar_tit_btn')[0]; /*获取日历标题的input*/
_timer = null; /*定义一个定时器*/
U.MD.UI.calendar.createChooseTime($('#calendar_timeChoose')[0]);
U.MD.UI.calendar.tit.onclick = function() { /*给日历标题绑定点击事件*/
clearTimeout(_timer); /*清除定时器*/
if (U.MD.UI.calendar.mark == 1) { /*标记数是1*/
U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year; /*日历标题赋值可变月*/
U.MD.UI.calendar.changeDisplay($('#calendar_month')[0], U.selectEl('#calendar_day')[0]); /*选择月显示，选择天隐藏*/
U.MD.UI.calendar.mark = 2; /*标记数赋值2，以表示当前停留在选择月模块*/
U.MD.UI.calendar.ChooseDefault();
} else if (U.MD.UI.calendar.mark == 2) { /*标记数是2*/
_timer = setTimeout(function() { /*赋值一个定时器*/
U.MD.UI.calendar.changeDisplay($('#calendar_year')[0], U.selectEl('#calendar_month')[0]); /*选择年显示，选择月隐藏*/
U.MD.UI.calendar.dateTenYear(); /*调用显示10年内容函数*/
U.MD.UI.calendar.mark = 3; /*标记数复制3，以表示档期那停球在选择年模块*/
U.MD.UI.calendar.ChooseDefault();
}, 250); /*0.25秒后执行*/
}
}
U.MD.UI.calendar.tit.ondblclick = function() { /*给日历标题绑定双击事件*/
clearTimeout(_timer); /*清除定时器，防止进入单击事件*/
if (U.MD.UI.calendar.mark === 2) { /*标记数是2*/
_obj = U.MD.UI.calendar.changeDisplay(_titInp, this, 'inline-block'); /*日历标题文本框显示，日历标题隐藏*/
_obj[0].value = this.innerText; /*把日历title赋值给编辑input*/
_obj[0].focus(); /*编辑input给上聚焦*/
}
}
_titInp.onkeydown = function(e) { /*给日历标题文本框一个键盘事件*/
switch (e.keyCode) {
case 13:
/*编辑input 回车来更改内容*/
var _arr2 = U.MD.UI.calendar.changeDisplay(U.MD.UI.calendar.tit, this, 'inline-block'); /*显示日历title， 隐藏编辑input*/
_arr2[0].innerText = U.MD.UI.calendar.year = !isNaN(parseInt(this.value)) ? parseInt(this.value) : U.MD.UI.calendar.CURRENTYEAR; /*把编辑input的内容赋值给日历title*/
break;
}
};
_titInp.onblur = function() { /*给日历标题文本框一个失去焦点*/
var _arr3 = U.MD.UI.calendar.changeDisplay(U.MD.UI.calendar.tit, this, 'inline-block'); /*同上*/
_arr3[0].innerText = U.MD.UI.calendar.year = !isNaN(parseInt(this.value)) ? parseInt(this.value) : U.MD.UI.calendar.CURRENTYEAR;
}
U.selectEl('#prevDate')[0].onclick = function() { /*给向左的小三角绑定点击事件*/
if (U.MD.UI.calendar.mark == 1) { _lessNum = -1 } /*标记数是1，-1月*/
else if (U.MD.UI.calendar.mark == 2) { _lessNum = -12 } /*标记数是2，-12月*/
else if (U.MD.UI.calendar.mark == 3) { _lessNum = -120 }; /*标记数是3， -120月*/
U.MD.UI.calendar.fullDate(_lessNum, false);
};
U.selectEl('#nextDate')[0].onclick = function() { /*给向右的小三角绑定点击事件*/
if (U.MD.UI.calendar.mark == 1) { _addNum = 1 } /*标记数是1，+1月*/
else if (U.MD.UI.calendar.mark == 2) { _addNum = 12 } /*标记数是1，+12月*/
else if (U.MD.UI.calendar.mark == 3) { _addNum = 120 }; /*标记数是1，+120月*/
U.MD.UI.calendar.fullDate(_addNum, true);
};
for (var i = 0; i < _mc.length; i++) { /*给选择月的模块li循环*/
_mc[i].onclick = function() { /*给每个绑定一个点击事件*/
U.MD.UI.calendar.changeDisplay($('#calendar_day')[0], U.selectEl('#calendar_month')[0]); /*选择天显示，选择月隐藏*/
U.MD.UI.calendar.month = parseInt(this.innerText) - 1; /*赋值选的月*/
U.MD.UI.calendar.showDay(); /*刷新数据*/
U.MD.UI.calendar.mark = 1; /*标记量赋值1*/
}
}
U.selectEl('#U_MD_UI_calendar_closeBtn')[0].onclick = function() { /*给关闭按钮绑定一个事件*/
U.UF.EV.stopBubble();
U.MD.UI.calendar.board.style.display = 'none'; /*让日历空间隐藏*/
}
}
/**
* 创建或更新选择天模块的内容
*/
U.MD.UI.calendar.showDay = function() { /*显示日期*/
_monthFristDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, 1).getDay(); /*当月第一天的星期*/
_lastMonthDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, 0).getDate(); /*上个月的最后一天*/
_fullDay = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, 0).getDate(); /*当月总天数*/
_totalDay = (_t = _monthFristDay + _fullDay) % 7 === 0 ? _t : _t + (7 - _t % 7); /*当月总共需要显示天数*/
_dayC = U.selectEl('#calendar_week_c')[0];
_dayC.innerHTML = '';
for (var _i = 0; _i < _totalDay; _i++) {
_li = $$('li', {}, _dayC);
if (_i < _monthFristDay) { /*如果小于当月第一天的星期，这里显示的是上月最后几天的号显示*/
$$('span', { "className": 'U_MD_UI_calendar_unavailable', innerText: (_lastMonthDay - _monthFristDay + _i + 1) }, _li);
} else if (_i < (_fullDay + _monthFristDay)) { /*如果小于（当月总天数 + 当月第一天的星期）*/
var _d = _i - _monthFristDay + 1,
_week = new Date(U.MD.UI.calendar.year, U.MD.UI.calendar.month, _d).getDay(),
_today = U.MD.UI.calendar.NOW.getDate() === _d && (U.MD.UI.calendar.CURRENTMONTH === U.MD.UI.calendar.month && U.MD.UI.calendar.CURRENTYEAR === U.MD.UI.calendar.year);
_dayV = _d;
if (_week === 6 || _week === 0) { /*如果是周末字体显示为红色，否则给黑色*/
_today ? $$('span', { "className": 'U_MD_UI_calendar_day U_MD_UI_calendar_today U_MD_UI_calendar_weekend', innerText: _d, "onclick": function() { U.MD.UI.calendar.day = this.innerText;
U.MD.UI.calendar.outPutDate() } }, _li) : $$('span', { "className": 'U_MD_UI_calendar_day U_MD_UI_calendar_weekend', innerText: _d, "onclick": function() { U.MD.UI.calendar.day = this.innerText;
U.MD.UI.calendar.outPutDate() } }, _li);
} else if (_today) { /*如果是今天，打重点*/
$$('span', { "className": 'U_MD_UI_calendar_day U_MD_UI_calendar_today', innerText: _d, "onclick": function() { U.MD.UI.calendar.day = this.innerText;
U.MD.UI.calendar.outPutDate() } }, _li)
} else { /*默认样式*/
$$('span', { "className": 'U_MD_UI_calendar_day', innerText: _d, "onclick": function() { U.MD.UI.calendar.day = this.innerText;
U.MD.UI.calendar.outPutDate() } }, _li)
}
} else { /*显示下个月的星期，给上字体是灰色的样式*/
$$('span', { "className": 'U_MD_UI_calendar_unavailable', innerText: (_i - (_fullDay + _monthFristDay) + 1) }, _li)
}
}
U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year + '-' + (U.MD.UI.calendar.month + 1) + '月'; /*转换格式，然后丢到日历标题文本框里*/
}
/**
* 年月控制器
* @param num 需要减的月数
* @param check 如果是true表示点击了向右的小三角，是false表示点击了向左的小三角
*/
U.MD.UI.calendar.fullDate = function(num, check) {
var _year = (_n = Math.abs(num) / 12) >= 1 ? _n >>> 0 : 0,
/*如果月份/12大于1，也就是超过12月或者说1年, _n>>>0取出整数部分*/
_month = Math.abs(num) % 12; /*月份膜上12剩下的就是月份*/
!check && (_month = -_month);
!check && (_year = -_year);
U.MD.UI.calendar.month += _month; /*月份加一或减一*/
U.MD.UI.calendar.year += _year; /*年份加一或减一*/
if (check) {
if (U.MD.UI.calendar.month > 11) { /*如果月份大于11*/
U.MD.UI.calendar.month = 0; /*月份清空*/
U.MD.UI.calendar.year++; /*年份加一*/
}
} else {
if (U.MD.UI.calendar.month < 0) { /*如果月份小于0*/
U.MD.UI.calendar.month = 11; /*可变月赋值11，即表示12月*/
U.MD.UI.calendar.year--; /*可变年减一*/
}
}
if (U.MD.UI.calendar.mark == 1) { U.MD.UI.calendar.showDay() }; /*更新日期显示*/
if (U.MD.UI.calendar.mark == 2) { U.MD.UI.calendar.tit.innerText = U.MD.UI.calendar.year }; /*标记数是2，即代表在选择月模块，*/
if (U.MD.UI.calendar.mark == 3) { U.MD.UI.calendar.dateTenYear() }; /*标记数是3，即代表在选择年模块，*/
}
/**
* 转换输出格式
* @param symbol 分割符号
* @param isnow 【boolean】 是否获取当前时间
* @returns {*} 返回字符串
*/
U.MD.UI.calendar.formartDate = function(symbol, isnow) {
var _symbol, y, m, d, h, m, s;
_symbol = symbol || '-'
y = isnow ? U.MD.UI.calendar.CURRENTYEAR : U.MD.UI.calendar.year;
m = isnow ? U.MD.UI.calendar.CURRENTMONTH + 1 : U.MD.UI.calendar.month + 1;
d = isnow ? U.MD.UI.calendar.CURRENTDAY : U.MD.UI.calendar.day;
m = (m.toString())[1] ? m : '0' + m;
d = (d.toString())[1] ? d : '0' + d;
var _dateStr = y + _symbol + m + _symbol + d;
if (typeof U.MD.UI.calendar.datetimeformat == 'boolean' && U.MD.UI.calendar.datetimeformat) {
if (isnow) {
var _nowDate = new Date();
U.MD.UI.calendar.hour = _nowDate.getHours();
U.MD.UI.calendar.minute = _nowDate.getMinutes();
U.MD.UI.calendar.second = _nowDate.getSeconds();
}
h = (U.MD.UI.calendar.hour.toString())[1] ? U.MD.UI.calendar.hour : '0' + U.MD.UI.calendar.hour;
m = (U.MD.UI.calendar.minute.toString())[1] ? U.MD.UI.calendar.minute : '0' + U.MD.UI.calendar.minute;
s = (U.MD.UI.calendar.second.toString())[1] ? U.MD.UI.calendar.second : '0' + U.MD.UI.calendar.second;
_dateStr += " " + h + ":" + m + ":" + s;
}
return _dateStr;
}
/**
* 创建选择天时需要循环绑定的函数
*/
/*
U.MD.UI.calendar.outPutDate = function () {
if (U.MD.UI.calendar.fouseinp.value) {
U.MD.UI.calendar.fouseinp.value = U.MD.UI.calendar.formartDate(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, this.innerText);
} else {
U.MD.UI.calendar.fouseinp.innerText = U.MD.UI.calendar.formartDate(U.MD.UI.calendar.year, U.MD.UI.calendar.month + 1, this.innerText);
}
U.MD.UI.calendar.board.style.display = 'none';
}
*/
/**
* 创建选择天时需要循环绑定的函数
*/
U.MD.UI.calendar.outPutDate = function(isNow) {
if (U.MD.UI.calendar.fouseinp.tagName === 'INPUT') {
U.MD.UI.calendar.fouseinp.value = U.MD.UI.calendar.formartDate('-', isNow); /*选择天后进入转换年月日输入格式函数*/
} else {
U.MD.UI.calendar.fouseinp.innerText = U.MD.UI.calendar.formartDate('-', isNow); /*选择天后进入转换年月日输入格式函数*/
}
U.MD.UI.calendar.CheckedDay && U.MD.UI.calendar.CheckedDay();
U.MD.UI.calendar.board.style.display = 'none'; /*隐藏日历控件*/
}
/**
* 显示与隐藏
* @param blockEl 需要显示的元素
* @param noneEl 需要隐藏的元素
* @param val 显示的方式
* @returns {*[]} 返回数组[显示元素，隐藏元素]
*/
U.MD.UI.calendar.changeDisplay = function(blockEl, noneEl, val) {
val = val || 'block'; /*默认block*/
if (blockEl && typeof blockEl === 'object') { blockEl.setAttribute('style', 'display:' + val) } /*如果blockEL存在且blockEl是个对象，进行属性的赋值*/
if (noneEl && typeof noneEl === 'object') { noneEl.setAttribute('style', 'display:none') }; /*如果noneEl存在且noneEl是个对象，进行属性的赋值*/
return [blockEl, noneEl];
}
/**
* 更新选择年的模块内容
*/
U.MD.UI.calendar.dateTenYear = function() {
_yearArr = U.selectEl('#calendar_year > ul > li'); /*获取选择年模块里的li*/
_startYear = U.MD.UI.calendar.year - (U.MD.UI.calendar.year % 10); /**/
for (var i = 0; i < _yearArr.length; i++) {
_yearArr[i].onclick = function() {
U.MD.UI.calendar.mark = 2; /*标记数赋值2*/
U.MD.UI.calendar.year = parseInt(this.innerText); /*修改年的的值*/
U.MD.UI.calendar.changeDisplay($('#calendar_month')[0], U.selectEl('#calendar_year')[0]); /*显示选择月板块，隐藏选择年的板块*/
U.MD.UI.calendar.tit.innerText = this.innerText; /*改变日历title显示格式*/
}
_yearArr[i].innerHTML = ''; /*清空li里面的内容*/
if (i == 0 || i == _yearArr.length - 1) { /*头尾年*/
$$('span', { "className": "U_MD_UI_calendar_unavailable", innerText: (_startYear + i - 1) }, _yearArr[i]);
} else if ((_startYear + i - 1) === U.MD.UI.calendar.CURRENTYEAR) { /*当前年*/
$$('span', { style: { "background-color": "#eed1bc" }, innerText: (_startYear + i - 1) }, _yearArr[i])
} else { /*默认输出*/
$$('span', { innerText: (_startYear + i - 1) }, _yearArr[i])
}
}
U.MD.UI.calendar.tit.innerText = (t = (U.MD.UI.calendar.year - (U.MD.UI.calendar.year % 10))) + '-' + (t + 9); /*改变日历title显示格式*/
}
/**
* 时分秒数据初始化
* @param deafultflag 【boolean】是否初始化数据
*/
U.MD.UI.calendar.ChooseDefault = function(deafultflag) {
if (U.MD.UI.calendar.datetimeformat) { //判断是否显示时分秒模板
if (deafultflag) { //是否初始化数据
U.MD.UI.calendar.hour = '00'; //重置
U.MD.UI.calendar.minute = '00'; //重置
U.MD.UI.calendar.second = '00'; //重置
U.selectEl(U.MD.UI.calendar.board).find('.U_MD_UI_calendar_timeRowActive').removeClass('U_MD_UI_calendar_timeRowActive'); //清除选中的样式
!$('#U_MD_UI_calendar_timeText').length && U.MD.UI.calendar.createChooseTime($('#calendar_timeChoose')[0]); //是否有加载时分秒模块
}
U.selectEl('#calendar_time')[0].style.display = "block"; //显示选择时间的功能区
U.selectEl('#calendar_timeChoose')[0].style.display = 'none'; //隐藏选择时分秒选择区
U.selectEl('#U_MD_UI_calendar_timeText')[0].innerText = "选择时间"; //重置
U.selectEl('#U_MD_UI_calendar_timeText').removeClass("U_MD_UI_calendar_timeTextClick"); //重置
} else {
U.selectEl('#calendar_time')[0].style.display = 'none'; //重置
U.selectEl('#calendar_timeChoose')[0].style.display = 'none'; //重置
}
}
U.MD.UI.calendar.SetCallBack = function(funcname, func) {
if (typeof func != 'function' || !"CheckedDay ".match(funcname + ' '))
return 0;
U.MD.UI.calendar[funcname] = func
};
///
Namespace.register("U.MD.UI.city");
/**
* [Control description] 城市控件接口
* @param {[html元素]} element [需要使用城市控件的元素(默认放置到element下面)]
*/
U.MD.UI.city = function(element) {
U.UF.EV.stopBubble(); //阻止事件冒泡 防止被body的事件覆盖
if (!element || !element.tagName) { //如果element存在tagName 则一定是html元素 否则不执行城市控件
return;
}
if (_cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0]) {
var _rect = element.getBoundingClientRect();
_cityBox.style.top = _rect.top + _rect.height + document.documentElement.scrollTop + "px";
//调整控件的top位置
_cityBox.style.left = _rect.left + document.documentElement.scrollLeft + "px";
//调整控件的left位置
U.selectEl(_cityBox).removeClass("U_MD_UI_city_hidden");
//删除掉hidden的class名(显示城市控件) 目的: 去除掉display为none的样式
U.MD.UI.city.Attr.inputNode = element; //获取最终结果的表单元素 可能会不同 因此 inputNode需要重新赋值
return;
}
var _city = U.MD.UI.city; //简写命名空间
_city.create(element); //将控件html代码添加到body上 并调整控件位置
_city.Attr = { //存放节点 与 变量 的json对象
"inputNode": element //判断是哪个表单点击的 为赋值所用
};
_city.init(); //函数初始化(添加js功能)
};
U.MD.UI.city.Attr = {}; //存放元素与变量的json全局变量 未赋值
U.MD.UI.city.usedCity = null; //存放常用市数据的变量
U.MD.UI.city.province = null; //存放省数据的变量
U.MD.UI.city.city = {}; //存放市数据的变量
U.MD.UI.city.area = {}; //存放区数据的变量
U.MD.UI.city.htmlTemplate = ' \n' +
'\n' +
'\n' +
' \n' +
' \n' +
' \n' +
' - 光明新区
\n' +
' \n' +
' \n' +
'
\n' +
'\n' +
'\n' +
' \n' +
'\n' +
'\n' +
' \n' +
'\n' +
'\n' +
' ';
//html代码
/**
* 添加html代码,并且判断html代码是否存在 若存在 则不添加
* @param {[html元素]} element [需要使用城市控件的元素(默认放置到element下面)]
*/
U.MD.UI.city.create = function(element) {
var _cityBox = $$("div", { id: 'U_MD_UI_city_cityBox', className: 'U_MD_UI_city_cityBox U_MD_UI_city_hidden' }, document.body);
_cityBox.innerHTML += U.MD.UI.city.htmlTemplate;
var _rect = element.getBoundingClientRect();
_cityBox.style.top = _rect.top + _rect.height + document.documentElement.scrollTop + "px";
//调整控件的top位置
_cityBox.style.left = _rect.left + document.documentElement.scrollLeft + "px";
//调整控件的left位置
U.MD.UI.city.Attr.inputNode = element;
//获取最终结果的表单元素 可能会不同 因此 inputNode需要重新赋值
U.selectEl(_cityBox).removeClass("U_MD_UI_city_hidden");
//删除掉hidden的class名(显示城市控件) 目的: 去除掉display为none的样式
};
/**
* 函数初始化
*/
U.MD.UI.city.init = function() {
var _city = U.MD.UI.city; //简写命名空间
_city.getUsedCity(); //获取常用市所有数据
_city.inputEvent(); //添加监听事件: 点击表单显示城市控件并发送后台请求数据 与 点击body区域隐藏城市控件
_city.menuEvent(); //添加监听事件: 点击菜单显示对应的内容
};
/**
* 为表单添加点击事件
*/
U.MD.UI.city.inputEvent = function() {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
var _cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0]; //城市控件总盒子节点
U.selectEl(document).bind('click', function() { //点击body时 隐藏城市控件
U.selectEl(_cityBox).addClass(_hidden);
//添加掉hidden的class名 目的: 添加display为none的样式
}, false);
U.selectEl(_cityBox).bind('click', function(e) { //防止点击城市控件时 被body的事件覆盖而隐藏 因此加上防止冒泡处理
U.UF.EV.stopBubble(e);
//阻止事件冒泡
});
U.selectEl("#U_MD_UI_city_areaCont")[0].onclick = function() {
if ($("#U_MD_UI_city_areaCont")[0]) {
U.selectEl("#U_MD_UI_city_cityBox")[0].style.display = "none";
}
}
};
/**
* 为每个菜单添加点击事件
*/
U.MD.UI.city.menuEvent = function() {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _menuAllNode = U.selectEl("[data-city-mark]"); //所有菜单节点;
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
for (var i = 0, len = _menuAllNode.length; i < len; i++) { //循环所有菜单元素
var _el = _menuAllNode[i]; //获取每个菜单 赋值给变量el
U.selectEl(_el).bind('click', function() { //添加点击事件
_city.menuClassControl(this, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //为每个菜单添加对应每个区域的事件
});
if (_el.id === "U_MD_UI_city_provinceMenu") { //如果点击的是 省/直辖市 菜单 则获取对应的数据
U.selectEl(_el).bind('click', function() {
_city.getProvince(); //省/直辖市菜单的点击事件 获取数据
})
}
}
};
/**
* 获取数据常用市的所有数据
*/
U.MD.UI.city.getUsedCity = function() {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _usedCityMenu = U.selectEl("#U_MD_UI_city_usedCityMenu")[0]; //常用市菜单按钮
var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0]; //要clone的li的模板
var _usedCityCont = U.selectEl("#U_MD_UI_city_usedCityCont")[0]; //常用市内容区域
if (!_city.usedCity) { //如果 常用市(_city.usedCity) 无数据 则发送请求到后台获取数据 并打印出来
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_UsedCity"], function(r) {
_city.usedCity = r.value;
_city.allDataPrint(_usedCityMenu, _city.usedCity, _liTemplate, "usedCity", _usedCityCont); //打印数据
});
}
};
/**
* 获取省/直辖市的所有数据
*/
U.MD.UI.city.getProvince = function() {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _provinceMenu = U.selectEl("#U_MD_UI_city_provinceMenu")[0]; //省菜单按钮
var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0]; //要clone的li的模板
var _provinceCont = U.selectEl("#U_MD_UI_city_provinceCont")[0]; //省内容区域
if (!_city.province) { //如果 省/直辖市(_city.province) 无数据 则发送请求到后台获取数据 并打印出来
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_Province"], function(r) {
_city.province = r.value;
_city.allDataPrint(_provinceMenu, _city.province, _liTemplate, "province", _provinceCont); //打印数据
});
}
};
/**
* 通过code 获取市的所有数据
* @param code 省级的id
*/
U.MD.UI.city.getCity = function(code) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _cityMenu = U.selectEl("#U_MD_UI_city_cityMenu")[0]; //市菜单按钮
var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0]; //要clone的li的模板
var _cityCont = U.selectEl("#U_MD_UI_city_cityCont")[0]; //市内容区域
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
if (!_city.city[code]) { //_city.city = json 而_city.city[code]则是对应的数组值 例如:我点击广东后 获取到了广东的id 则我要通过 广东的id 获取下级的市数据 因此如果json中没有该值 则向后台发送请求获取
_city.menuClassControl(_cityMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_PidFind", code, 1], function(r) {
_city.city[code] = r.value;
//_city.city = {}
//r.value = [{},{},{}]
//为了能判断该code下是否有数据 因此需要在_city.city下添加一个 以code为键名 r.value为值的数组
//例如:_city.city = {} code = 123 r.value = [{a:1}，{a:1}，{a:1}] 最后会变成 _city.city = {123:[{a:1}，{a:1}，{a:1}]}
_city.allDataPrint(_cityMenu, _city.city[code], _liTemplate, "city", _cityCont); //打印数据
});
} else { //如果json下有数据 则直接打印该数据
_city.menuClassControl(_cityMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //相当于点击菜单 将城市的菜单与内容区域 显示出来
_city.allDataPrint(_cityMenu, _city.city[code], _liTemplate, "city", _cityCont); //打印数据
}
};
/**
* 通过code 获取区级的所有数据 函数的意思可参看上面getCity的注释
* @param code 参数为市级的id
*/
U.MD.UI.city.getarea = function(code) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _areaMenu = U.selectEl("#U_MD_UI_city_areaMenu")[0]; //区菜单按钮
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
var _liTemplate = U.selectEl("#U_MD_UI_city_liTemplate")[0]; //要clone的li的模板
var _areaCont = U.selectEl("#U_MD_UI_city_areaCont")[0]; //区内容区域
if (!_city.area[code]) {
_city.menuClassControl(_areaMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Controls", "City_PidFind", code, 2], function(r) {
_city.area[code] = r.value;
_city.allDataPrint(_areaMenu, _city.area[code], _liTemplate, "area", _areaCont);
});
} else {
_city.menuClassControl(_areaMenu, "U_MD_UI_city_menuChecked", "data-city-mark", _hidden); //相当于点击菜单 将城市的菜单于内容 "先"显示出来 再加载数据 防止多次点击
_city.allDataPrint(_areaMenu, _city.area[code], _liTemplate, "area", _areaCont);
}
};
/**
* 打印传过来的数组json数据
* @param {[type]} menu [与之对应的菜单元素]
* @param {[type]} data [是一个数组json]
* @param {[type]} template [是一个li模板 clone用的]
* @param {[type]} type [数据类型("province"、"usedCity"....) 为判断所用]
* @param {[type]} parent [父节点("cityCont,areaCont...") 也叫做内容区域 ]
*/
U.MD.UI.city.allDataPrint = function(menu, data, template, type, parent) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _usedCityMenu = U.selectEl("#U_MD_UI_city_usedCityMenu")[0]; //常用市菜单按钮
var _provinceMenu = U.selectEl("#U_MD_UI_city_provinceMenu")[0]; //省菜单按钮
var _len = data.length; //数组json的长度
var _menu = menu; //菜单元素 赋值给 _menu变量
for (var i = 0; i < _len; i++) {
// 遍历 data数据(数组json)
var _span = _city.dataPrint(data[i], template, type, parent);
//单个数据打印 PS：由于data是一个 数组json([{a:1},{a:2},{a:3}]) 因此 需要将获取对应的数据 并添加在 对应的 parent(内容区域) 上
_span.onclick = function() {
var _type = U.selectEl(this).attr("data-city-type");
//获取点击的span标签的属于哪一类型 (比如： 点击省的数据 是 province 市的数据 则时 city)
var _code = U.selectEl(this).attr("data-city-code");
//获取数据编码 为寻找下一层所用
U.selectEl(_menu.children[0]).addClass("U_MD_UI_city_menuoChecked");
//点击后为 对应的相对应的菜单添加红色小圆点样式 例如:点击省/直辖市菜单下的 广东后 省/直辖市就会多一个红色小圆点的样式
_menu.children[0].innerText = this.innerText;
//改变对应菜单的名字为：点击数据的值 例如：点击"省/直辖市"菜单 下的广东 则 菜单的名字则变为 广东 PS: children[0] 为 li下的span标签
U.selectEl(_menu).attr("data-city-res", this.innerText);
//给自定义属性 data-city-res 添加为: 点击数据的值 PS: 为获取最终值给表单所用
_city.contClassControl(this, "U_MD_UI_city_Cont_ochecked");
//给所选的内容数据添加红色背景 并且删除同一内容区域拥有红色背景的其他元素
switch (_type) {
//此处为 判断 点击 各类型数据需要做的动作 type为判断哪种类型 比如: type值为 "province" 则是 省/直辖市菜单下的 数据 点击这些数据后 就是要做的事情
case "province":
_city.getCity(_code);
//将数据的 code 值传入给 城市函数 来获取城市数据 PS: 获取市的数据需要获取他们的parentid 而code则是他们的parentid
_city.initAllClass(_usedCityMenu);
//点击省/直辖市下的数据的话 则初始化 常用市菜单 与 相对应的内容区域样式
break;
case "usedCity":
if (this.innerText === "重庆") { //由于重庆这个城市比较特殊 因此需要在常用市那将重庆转为省数据
_city.getCity(_code);
} else {
_city.getarea(_code);
}
//在将数据的 code 值传入给 城市函数 来获取城市数据 PS: 获取市的数据需要获取他们的parentid 而code则是他们的parentid
_city.initAllClass(_provinceMenu);
//点击常用市下的数据的话 则初始化 省/直辖市菜单 与 相对应的内容区域样式
break;
case "city":
_city.getarea(_code);
//在将数据的 code 值传入给 区函数 来获取区数据 PS: 获取区的数据需要获取他们的parentid 而code则是他们的parentid
break;
case "area":
_city.getRes("data-city-res");
//由于该控件是 省-市-区 因此 当点击区里的数据时 则调用获取最终值的函数
break;
}
}
}
};
/**
* 打印单个数据api(创建节点,赋id 赋innerText 等等)
* @param {[json对象]} data [json对象的数据]
* @param {[元素]} template [需要clone的li模板]
* @param {[字符串]} type [属于哪种城市类型]
* @param {[元素]} parent [父节点]
* @return {[元素]} [克隆完后的一条li下的span节点]
*/
U.MD.UI.city.dataPrint = function(data, template, type, parent) {
var _city = U.MD.UI.city; //简写命名空间
var _liNode = _city.clone(template), //克隆已建好的li模板
_spanNode = _liNode.children[0]; //获取li的span节点
var _shortName = data.short_name; //获取城市名字缩写
var _name = data.name; //获取名字全称
_liNode.id = type + data.id; //添加id
_spanNode.innerText = _shortName; //添加文字内容
if (_shortName === "北京" || _shortName === "上海" || _shortName === "天津" || _shortName === "重庆") { //由于这4个城市的 缩写 和省的名字相同 因此 需要将数据名 改成name 详见数据库
if (parent.id === "U_MD_UI_city_cityCont") {
_spanNode.innerText = _name; //添加文字内容
}
}
if (parent.id === "U_MD_UI_city_areaCont") { //由于区级数据库 的缩写少了一个区 例如：显示出来的 龙岗区 被缩成 龙岗 因此需要将值等于他们的全称
_spanNode.innerText = _name; //添加文字内容
}
_spanNode.id = "span_" + type + data.id;
U.selectEl(_spanNode).attr("data-city-code", data.id); //添加自定义属性 编号
U.selectEl(_spanNode).attr("data-city-type", type); //添加自定义属性 类型
parent.appendChild(_liNode); //添加到parent节点上
return _spanNode; //返回该元素
};
/**
* 添加选中时的class 并删除已有该class的元素
* @param {[元素]} el [点击菜单的元素]
* @param {[字符串]} cs [选中菜单时的class]
* @param {[字符串]} dataattr [菜单的自定义属性 与 对应内容区域的id相同]
* @param {[字符串]} hiddenCs [对应内容区域的class]
*/
U.MD.UI.city.menuClassControl = function(el, cs, dataattr, hiddenCs) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _cityMenu = U.selectEl("#U_MD_UI_city_cityMenu")[0]; //市菜单按钮
var _areaMenu = U.selectEl("#U_MD_UI_city_areaMenu")[0]; //区菜单按钮
var _cityCont = U.selectEl("#U_MD_UI_city_cityCont")[0]; //市内容区域
var _areaCont = U.selectEl("#U_MD_UI_city_areaCont")[0]; //区内容区域
var _oEl = U.selectEl("." + cs)[0];
//找到拥有该class的元素
if (_oEl) { U.selectEl(_oEl).removeClass(cs) };
//如果找的到该元素 则删除此元素的class
U.selectEl(el).addClass(cs);
//为el元素添加该class
var _oElCont = U.selectEl("#" + U.selectEl(_oEl).attr(dataattr))[0];
//找到拥有该class的菜单元素的自定义属性的值 并找到对应区域块的元素(区域块元素的id 与 自定义属性的值相等)
var _elCont = U.selectEl("#" + U.selectEl(el).attr(dataattr))[0];
//同上 找到点击菜单元素的自定义属性的值
U.selectEl(_oElCont).addClass(hiddenCs);
//添加名为hiddenCs 的className (添加与删除 display为none)
U.selectEl(_elCont).removeClass(hiddenCs);
//elCont元素的display为block
var _id = el.id;
switch (_id) { //以下为点击菜单时所作出的不同执行命令
case "U_MD_UI_city_usedCityMenu":
case "U_MD_UI_city_provinceMenu": //当为菜单常用市 或者 省直辖市时 将区 与 市菜单 与对应内容区域 清空初始化
U.selectEl(_cityMenu).addClass(hiddenCs);
U.selectEl(_areaMenu).addClass(hiddenCs);
U.selectEl(_cityCont).addClass(hiddenCs);
U.selectEl(_areaCont).addClass(hiddenCs);
_cityMenu.children[0].innerText = "请选择";
_areaMenu.children[0].innerText = "请选择";
_cityCont.innerHTML = "";
_areaCont.innerHTML = "";
U.selectEl(_cityMenu).attr("data-city-res", "");
U.selectEl(_areaMenu).attr("data-city-res", "");
break;
case "U_MD_UI_city_cityMenu": //当为市菜单时 将 区菜单 与对应内容区域 清空初始化
U.selectEl(el).removeClass(hiddenCs);
U.selectEl(_areaMenu).addClass(hiddenCs);
U.selectEl(_areaCont).addClass(hiddenCs);
_areaMenu.children[0].innerText = "请选择";
_areaCont.innerHTML = "";
break;
case "U_MD_UI_city_areaMenu":
U.selectEl(el).removeClass(hiddenCs);
break;
}
};
/**
* 内容区域的class 的控制函数 PS:添加红色背景的样式
* @param {[type]} el [所选中的数据元素]
* @param {[type]} ocheckcs [所需要对el添加的样式]
*/
U.MD.UI.city.contClassControl = function(el, ocheckcs) {
var _city = U.MD.UI.city; //简写命名空间
var _oEls = U.selectEl("." + ocheckcs);
//找到拥有该class的所有元素
var _type = U.selectEl(el).attr("data-city-type");
//获取他们的该元素的类型
for (var i = 0, len = _oEls.length; i < len; i++) { //遍历oEls
var _otype = U.selectEl(_oEls[i]).attr("data-city-type");
if (_oEls[i] && _otype === _type) {
//如果找的到该元素 并且还是同一内容区域的元素 则删除他的class 例如:(市内容区域下)点击深圳后 在点广州 则 广州的背景颜色为红色 深圳的背景颜色为初始颜色
U.selectEl(_oEls[i]).removeClass(ocheckcs)
}
}
U.selectEl(el).addClass(ocheckcs);
//为el元素添加该class
};
/**
* 此函数专门为 初始化 常用市 或者 省/直辖市的样式而写的 例如:点击常用市下的数据后 省/直辖市的菜单与对应的内容 样式初始化为不选中
* @param el 只能放 常用市菜单(元素) 和 省/直辖市菜单(元素)
*/
U.MD.UI.city.initAllClass = function(el) {
var _city = U.MD.UI.city; //简写命名空间
el.className = "U_MD_UI_city_filled"; //将菜单li的样式初始化 U_MD_UI_city_filled无样式属性 摆设占位置用
el.children[0].className = ""; //将li里的span样式也初始化
U.selectEl(el).attr("data-city-res", ""); //将span的自定义属性也初始化
var oEl = U.selectEl(".U_MD_UI_city_Cont_ochecked"); //获取内容区域中被选中的span元素
for (var i = 0; i < oEl.length; i++) {
U.selectEl(oEl[i]).removeClass("U_MD_UI_city_Cont_ochecked"); //判断是否存在此元素 如果存在 则删除被选中的样式
}
if (el.id === "U_MD_UI_city_provinceMenu") { //比如: 点完省/直辖市内容区域的数据时 传过来的el则会是常用市菜单元素 然后常用市菜单的innerText则会初始化回常用市
el.children[0].innerText = "省/直辖市";
}
if (el.id === "U_MD_UI_city_usedCityMenu") { //同上
el.children[0].innerText = "常用市";
}
};
/**
* 通过获取自定义属性的值 查出最终值
* @param dataattr 自定义属性的名字
*/
U.MD.UI.city.getRes = function(dataattr) {
var _city = U.MD.UI.city; //简写命名空间
var _attr = _city.Attr; //简写全局属性json名
var _inputNode = _attr.inputNode;
var _cityBox = U.selectEl("#U_MD_UI_city_cityBox")[0]; //城市控件总盒子节点
var _hidden = "U_MD_UI_city_hidden"; //class样式名 由于太长赋值给变量 _hidden 控制元素display的样式
var resAll = U.selectEl("[" + dataattr + "]"); //获取所有拥有该自定义属性的元素 得到一个数组
var _arr = []; //声明一个空数组 存放最终值
for (var i = 0, len = resAll.length; i < len; i++) { //遍历所有自定义元素
var _val = U.selectEl(resAll[i]).attr(dataattr); //获取他们的自定义值
if (_val) { //判断值是否存在
_arr.push(_val); //若存在 则将最终值依次添加到arr数组里
}
}
_inputNode.value = (_arr.join("-")); //最后分割数组用“-” 隔开 添加到表单上
U.selectEl(_cityBox).addClass(_hidden); //最后隐藏控件
};
U.MD.UI.city.clone = function(ele) { //克隆节点
var node = ele.cloneNode();
var child = ele.children;
for (var i = 0; i < child.length; i++) {
var childNode = child[i].cloneNode();
node.appendChild(childNode);
}
return node;
};;
///
//色板
Namespace.register("U.MD.UI.ColorPicker");
/**
* 创建颜色选区
* @barelement [object] 要插入表格的地方
* @ callfun [fun] 点击事件
*/
U.MD.UI.colorPicker = U.MD.UI.ColorPicker = function(barelement, callfun) {
var div = $$("div", {
style: {
width: "180px",
height: "140px",
border: "1px solid #CDCDCD",
backgroundColor: " #FFF",
padding: "10px 10px 10px 5px",
zIndex: 1
},
"className": "MD_ColorPicker"
}, barelement); //创建外部div对象
var _i,
_colorarea = [ //字体颜色区域
"#ffffff",
"#ffccc9",
"#ffce93",
"#fffc9e",
"#ffffc7",
"#9aff99",
"#96fffb",
"#cdffff",
"#cbcefb",
"#cfcfcf",
"#fd6864",
"#fe996b",
"#fffe65",
"#fcff2f",
"#67fd9a",
"#38fff8",
"#68fdff",
"#9698ed",
"#c0c0c0",
"#fe0000",
"#f8a102",
"#ffcc67",
"#f8ff00",
"#34ff34",
"#68cbd0",
"#34cdf9",
"#6665cd",
"#9b9b9b",
"#cb0000",
"#f56b00",
"#ffcb2f",
"#ffc702",
"#32cb00",
"#00d2cb",
"#3166ff",
"#6434fc",
"#656565",
"#9a0000",
"#ce6301",
"#cd9934",
"#999903",
"#009901",
"#329a9d",
"#3531ff",
"#6200c9",
"#343434",
"#680100",
"#963400",
"#986536",
"#646809",
"#036400",
"#34696d",
"#00009b",
"#303498",
"#000000",
"#330001",
"#643403",
"#663234",
"#343300",
"#013300",
"#003532",
"#010066",
"#340096"
];
var button; //定义一个变量
for (_i = 0; _i < _colorarea.length; _i++) { //创建循环，循环对象为创建的数组
button = $$('button', {
style: {
background: _colorarea[_i],
width: "15px",
height: "15px",
float: "left",
margin: "5px 0 0 5px",
border: " 1px solid transparent"
}
}, div); //创建button对象
button.onclick = function(e) {
div.style.display = 'none' /*选择完色块后隐藏色板*/
U.UF.EV.stopBubble(e); /*阻止事件冒泡*/
callfun(this.style.background);
} //设置点击事件
}
U.selectEl(document).bind('click', function() { /*绑定事件*/
if (div.style.display != 'none') /*点击别的地方隐藏*/
div.style.display = 'none'
});
U.UF.EV.stopBubble();
return div; //返回div对象
};
///
//工具空间，宝航字体、字号。。。
//字体
Namespace.register("U.MD.UI.Font");
//字号
Namespace.register("U.MD.UI.WordSize");
/*
* 字体选择框生成方法
*/
U.MD.UI.Font = function() {
var font = $$("select", { style: { fontFamily: "宋体", fontSize: "16px" }, "className": "MD_fontFamily" }); //创建select对象
$$("option", { value: "宋体", style: { fontFamily: "宋体" }, innerHTML: "宋体" }, font); //定义option对象宋体，附属select
$$("option", { value: "sans-serif", style: { fontFamily: "sans-serif" }, innerHTML: "sans-serif" }, font); //定义option对象sans-serif，附属select
$$("option", { value: "微软雅黑", style: { fontFamily: "微软雅黑" }, innerHTML: "微软雅黑" }, font); //定义option对象微软雅黑，附属select
$$("option", { value: "楷体", style: { fontFamily: "楷体" }, innerHTML: "楷体" }, font); //定义option对象楷体，附属select
$$("option", { value: "黑体", style: { fontFamily: "黑体" }, innerHTML: "黑体" }, font); //定义option对象黑体，附属select
$$("option", { value: "隶书", style: { fontFamily: "隶书" }, innerHTML: "隶书" }, font); //定义option对象隶书，附属select
$$("option", { value: "andale mono", style: { fontFamily: "andale mono" }, innerHTML: "andale mono" }, font); //定义option对象andale mono，附属select
$$("option", { value: "arial black", style: { fontFamily: "arial black" }, innerHTML: "arial black" }, font); //定义option对象arial black，附属select
return font; //返回select对象
}
/*
* 字号选择框生成方法
*/
U.MD.UI.WordSize = function() {
var fontsize = $$("select", { "className": "MD_fontSize" }); //创建select对象
$$("option", { value: "56px", style: { fontSize: "14px" }, innerHTML: "初号" }, fontsize); //定义option对象初号，附属select
$$("option", { value: "48px", style: { fontSize: "14px" }, innerHTML: "小初" }, fontsize); //定义option对象小初，附属select
$$("option", { value: "34.7px", style: { fontSize: "14px" }, innerHTML: "一号" }, fontsize); //定义option对象一号，附属select
$$("option", { value: "32px", style: { fontSize: "14px" }, innerHTML: "小一" }, fontsize); //定义option对象小一，附属select
$$("option", { value: "29.3px", style: { fontSize: "14px" }, innerHTML: "二号" }, fontsize); //定义option对象二号，附属select
$$("option", { value: "24px", style: { fontSize: "14px" }, innerHTML: "小二" }, fontsize); //定义option对象小二，附属select
$$("option", { value: "21.3px", style: { fontSize: "14px" }, innerHTML: "三号" }, fontsize); //定义option对象三号，附属select
$$("option", { value: "20px", style: { fontSize: "14px" }, innerHTML: "小三" }, fontsize); //定义option对象小三，附属select
$$("option", { value: "18.7px", style: { fontSize: "14px" }, innerHTML: "四号" }, fontsize); //定义option对象四号，附属select
$$("option", { value: "16px", style: { fontSize: "14px" }, innerHTML: "小四" }, fontsize); //定义option对象小四，附属select
$$("option", { value: "14px", style: { fontSize: "14px" }, innerHTML: "五号" }, fontsize); //定义option对象五号，附属select
$$("option", { value: "12px", style: { fontSize: "14px" }, innerHTML: "小五" }, fontsize); //定义option对象小五，附属select
$$("option", { value: "10px", style: { fontSize: "14px" }, innerHTML: "10" }, fontsize); //定义option对象10px，附属select
$$("option", { value: "12px", style: { fontSize: "14px" }, innerHTML: "12" }, fontsize); //定义option对象12px，附属select
$$("option", { value: "14px", style: { fontSize: "14px" }, innerHTML: "14" }, fontsize); //定义option对象14px，附属select
$$("option", { value: "16px", style: { fontSize: "14px" }, innerHTML: "16" }, fontsize); //定义option对象16px，附属select
$$("option", { value: "18px", style: { fontSize: "14px" }, innerHTML: "18" }, fontsize); //定义option对象18px，附属select
$$("option", { value: "20px", style: { fontSize: "14px" }, innerHTML: "20" }, fontsize); //定义option对象20px，附属select
$$("option", { value: "22px", style: { fontSize: "14px" }, innerHTML: "22" }, fontsize); //定义option对象22px，附属select
$$("option", { value: "24px", style: { fontSize: "14px" }, innerHTML: "24" }, fontsize); //定义option对象24px，附属select
$$("option", { value: "26px", style: { fontSize: "14px" }, innerHTML: "26" }, fontsize); //定义option对象26px，附属select
$$("option", { value: "28px", style: { fontSize: "14px" }, innerHTML: "28" }, fontsize); //定义option对象28px，附属select
$$("option", { value: "36px", style: { fontSize: "14px" }, innerHTML: "36" }, fontsize); //定义option对象36px，附属select
$$("option", { value: "42px", style: { fontSize: "14px" }, innerHTML: "42" }, fontsize); //定义option对象42px，附属select
$$("option", { value: "48px", style: { fontSize: "14px" }, innerHTML: "48" }, fontsize); //定义option对象48px，附属select
$$("option", { value: "72px", style: { fontSize: "14px" }, innerHTML: "72" }, fontsize); //定义option对象72px，附属select
return fontsize; //返回select对象
};
///
//#region alert弹窗代码、confirm对话框
//UI窗体区域
Namespace.register("U.UF.UI") //窗体的命名空间
//#region 对话框
/**
* 创建对话框
* @content {string/elemnet} 内容
* @determineFun {function} 确认回调函数
* @cancelFun {function} 取消回调函数
*/
U.UF.UI.Confirm = U.UF.UI.confirm = function(content, determineFun, cancelFun) {
//创建对话框主体元素
var _confirm = $$("div", { "style": { "cssText": "width: 100%; background: rgb(255,255,255);overflow:hidden; " } });
//创建内容区域
var _content = $$("div", { "style": { "cssText": "width: 100%;" } }, _confirm);
//判断内容是否为元素
if (U.UF.C.isElement(content)) {
//如果为元素则动态添加到对话框中
U.selectEl(_content).append(content);
} else {
_content.style.cssText = "text-align: center; margin: 10px;";
//如果为文字则修改inerHTML。
_content.innerHTML = content || '内容';
}
//创建页脚部分
var _footer = $$("div", { "style": { "cssText": "height:28px; margin:14px 0;" } }, _confirm);
//创建确定按钮 绑定点击事件，默认点击后执行关闭窗体函数
$$("div", {
"style": {
"cssText": "text-align: center; color: rgb(255,255,255); width: 92px; line-height:28px; background: rgb(48,126,208); border-radius: 5px;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); border-radius: 5px;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: fixed; box-shadow: 0 0 10px 3px rgb(0,0,0); border-radius: 5px;"
}
}, {
"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: fixed; top: 100px; left: 40%; box-shadow: 0 0 10px 3px black; border-radius: 5px;"
}
},
null, {
"style": { "cssText": "background: #3b5878; padding: 10px; color:#fff;" }
});
//创建确定按钮 并绑定点击函数，默认点击后执行关闭窗体函数
$$("div", {
"style": {
"cssText": "text-align: center; color: #fff; width: 30%; padding: 5px; background: #307ed0; border-radius: 5px;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); border-radius: 5px;"
}
}, {
"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; border-radius: 5px;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: fixed;top:20%;left:0px;right:0px;margin:0px auto;text-align:center; word-break: break-word; "
//white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis;
},
innerHTML: c
}, document.body);
U.UF.F.topWindow(bg);
setTimeout(function() {
bg.parentNode.removeChild(bg);
}, t);
}
//#endregion
//#endregion
;
///
//电脑端banner滑块控件命名空间
Namespace.register("U.MD.UI.email");
/**
电脑端banner滑块控件
*/
U.MD.UI.email = function() {
};
///
//PC端表情包
Namespace.register("U.MD.UI.face");
/*
** 添加表情包
** @param {element} button 插入表情包的元素
** @param {element} el 输入框的元素
*/
U.MD.UI.face = function(button, el) {
var i, _el1, _el2;
if ($("#U_MD_UI_face")[0]) { //判断是否存在表情包
if ($("#U_MD_UI_face")[0].style.display == "none") { //如果存在，判断是否隐藏
U.selectEl("#U_MD_UI_face")[0].style.display = "block"; //如果隐藏 则显示表情包
} else {
U.selectEl("#U_MD_UI_face")[0].style.display = "none"; //否则，隐藏
}
} else { //不存在表情包，创建表情包
var _el = $$("div", { "style": { "position": "relative" } }, U.selectEl(button)[0]); //创建表情包的总样式
_el1 = $$("div", { "id": "U_MD_UI_face", "className": "U_MD_UI_face", "onmousedown": U.UF.EV.stopBubble }, _el); //创建表情包的阻止冒泡事件
_el2 = $$("div", { "className": "U_MD_UI_face_H" }, _el1); //创建存放表情的父级元素
for (i = 0; i <= 104; i++) { //循环打印所有的表情包 共104个
$$("button", {
"className": "U_MD_UI_face_C",
"style": { "opacity": "0" },
"onclick": U.UF.C.closure(function(i) {
U.UF.EV.stopBubble();
U.MD.UI.face.printEmoticon(_el1, i, U.UF.E.getRangeAt(), el)
}, [i])
}, _el2); //创建单个表情，并且给每个表情赋值一个点击事件，参数为表情框元素，第几个表情，光标位置，输入框的位置，点击后打印表情到输入框的位置
}
//获取整个body部分的点击事件
U.selectEl('body').unbind('click', U.MD.UI.face.externalClick);
U.selectEl('body').bind('click', U.MD.UI.face.externalClick);
}
el.focus();
};
U.MD.UI.face.externalClick = function(e) {
if (window.event.srcElement.tagName != "BUTTON" && U.selectEl("#U_MD_UI_face")[0]) { //判断点击的是否是发送表情的按钮
U.selectEl("#U_MD_UI_face")[0].style.display = "none"; //如果不是，则隐藏掉表情包
}
}
/* 点击表情框处理
*
* @param {element} el1 表情框元素
* @param {number} i 第几个表情。通过i的值代表是哪个表情
* @param {range} range 光标的位置，先获取光标对象，然后通过光标对象获取光标位置
* @param {element}
对应路径 /img/ChatingFaceGif/[face](i).gif
*/
U.MD.UI.face.printEmoticon = function(el1, i, range, el) {
var _imageurl = "/img/ChatingFaceGif/[face](" + i + ").gif"; //表情路径
if (!range) {
$$("img", { "onerror": U.MD.C.imgError, "src": _imageurl, "contentEditable": "true" }, U.selectEl(el)[0]);
} else {
var img = '
';
U.UF.E.addRange(img, null, true);
}
U.selectEl(el1)[0].style.display = "none";
};
///
//#region 窗体
//UI窗体区域
Namespace.register("U.UF.UI") //窗体的命名空间
//#region 窗体
/** 初始化uform窗体,创建一个窗体，调用方式如下
* new new U.UF.UI.form(
* "测试内容",
* "中间内容",
* { "style": { "width": "570px", "height": "80%", "maxHeight": "700px"} },
* );
* @param string 头部标题 必填
* @param string|element 中间区域的内容 必填
* @param object 窗体的属性 {id :"1", style:{"width":"100px", "height":"100px"}} 选填 有默认的属性，原函数有注释
* @param object 窗体功能的属性 { istop: true, isdrag: true, isstretching:true,isenlarge:true,isnarrow:true,isclose:true } 选填
* @param object 头部的属性 {style:{"width":"100px"}} 选填 有默认的属性，原函数有注释
* @param object 内容的属性 { style:{"height":"100px"}} 选填 有默认属性，原函数有注释
* @param object 关闭、放大、缩小按钮区域的属性设置 { "style":{"left":"100px"}} 选填，有默认属性，原函数有注释
* @param element 窗体追加到制定的元素 选填 有默认的属性，原函数有注释
*/
U.UF.UI.form = function(title, content, formattr, formfun, headattr, contentattr, headbottomattr, parentel) {
var _this = this;
//所有的窗体中找到是否已经创建的窗体
if (formattr && U.UF.UI.form.allForm[formattr.id]) {
var _this = U.UF.UI.form.allForm[formattr.id]; //得到原来的窗体
}
//初始化未赋值，用到的变量
else {
//设置窗体唯一的识别
this.id = formattr && formattr.id ? formattr.id : Guid.newGuid();
//初始化成功后添加到所有窗体管理的对象中,以便于用户查找窗体和管理
U.UF.UI.form.allForm[this.id] = this;
}
_this.form; //窗体
_this.header; //头部
_this.middle; //中间区域
_this.title = title; //窗体的标题
_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;
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, //用于循环
_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 (_formattr.style) {
_formattr.style.cssText = _formattr.style.cssText || "";
_formattr.style.cssText = "width: 70%; position: fixed; border: 1px solid #444; background-color: #fff; z-index: 10; border-radius: 1px; overflow: hidden; -moz-box-shadow:0 0 30px 5px #555; -webkit-box-shadow:0 0 30px 5px #555; box-shadow:0 0 30px 5px #555; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius:5px;" + _formattr.style.cssText;
} else {
_formattr.style = {
cssText: "width: 70%; position: fixed; border: 1px solid #444; background-color: #fff; z-index: 10; border-radius: 1px; overflow: hidden; -moz-box-shadow:0 0 30px 5px #555; -webkit-box-shadow:0 0 30px 5px #555; box-shadow:0 0 30px 5px #555; -moz-border-radius: 5px; -webkit-border-radius: 5px; 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: 30px; background-color: #2967A7; 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: 30px; background-color: #2967A7; 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%; height:100%; position: relative;" } }, _formel);
//中间的内容
_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; overflow: auto;"
};
}
//创建中间内容元素
_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: 3px; 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() {
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() {
U.UF.F.windowZooming(_formel); //调用窗体最大化函数
}
}, _headbottom);
//如果有head头部的处理
if (_headel) {
//头部双击放大缩小处理处理
_headel.ondblclick = U.UF.C.apply(_headel, function() {
//判断双击的元素是否在头部导航上，否则如果头部上有其他的按钮什么的双击了，也会触发放大方法
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": function() {
U.UF.F.windowMinimize(_formel); //窗体最小化处理
}
}, _headbottom);
}
//如果窗体已经创建，那么直接替换
if (_replaceel && _replaceel.parentNode != null) {
_replaceel.parentNode.replaceChild(_formel, _replaceel);
}
//元素添加到制定的元素中
else {
this.parentel.appendChild(_formel);
}
//如果没有设置top和left那么居中弹出
if (_formel.style.top == "" && _formel.style.left == "" && _formel.style.right == "" && _formel.style.bottom == "") {
//居中置顶弹出
U.UF.F.windowTopCenter(_formel);
}
//否则置顶
else {
U.UF.F.topWindow(_formel);
}
//初始化的时候默认设置大小
this.size();
},
/** 窗体每一次点击置顶
*/
top: function() {
U.UF.F.topWindow(this.form); //点击置顶的处理
},
/** 窗体大小处理
*/
size: function() {
var _headheight = 0; //head头部的高度
//如果存在head头部，那么获取head头部处理
if (this.header) {
_headheight = this.header.clientHeight;
}
//设置窗体content区域大小设置
if (this.header) {
this.middle.style.height = this.form.clientHeight - this.header.clientHeight + "px";
} else {
this.middle.style.height = this.form.clientHeight + "px";
}
}
}
/** 窗体大小处理
*/
U.UF.UI.form.windowResize = function() {
var i,
_style,
_bodywidth = US.width, //获取原本在窗体大小没有变化前的width
_bodyheight = US.height, //获取原本在窗体大小没有变化前的height
_sizeinfo, //大小信息
_width, //长度
_height, //高度
_formel, //窗体元素
_forms = U.UF.UI.form.allForm //获取所有的窗体
;
//循环所有的窗体
for (i in _forms) {
_formel = _forms[i].form; //获取窗体的处理
if ($(_formel).css("display") != "none") { //判断窗体是否隐藏
_style = {}; //设置位置
_width = U.selectEl(_formel).css("width"); //获取窗体的长
_height = U.selectEl(_formel).css("height"); //获取窗体的宽
//计算位置，如果有百分比，则按照百分比的方式进行计算，否则，得到百分比。
_width = _width.indexOf("%") > -1 ? _width.toInt() / 100 : _formel.offsetWidth / _bodywidth;
_height = _height.indexOf("%") > -1 ? _height.toInt() / 100 : _formel.offsetWidth / _bodyheight;
//设置位置,如果没有右对齐，则设置左对齐
if (_formel.style.right == "" || _formel.style.right == "auto") {
_style.left = _formel.offsetLeft + (document.body.offsetWidth - _bodywidth) * ((1 - _width) / 2) + "px";
}
//如果没有下对齐，则设置上对齐
if (_formel.style.bottom == "" || _formel.style.bottom == "auto") {
_style.top = _formel.offsetTop + (document.body.offsetHeight - _bodyheight) * ((1 - _height) / 2) + "px";
}
//设置值
U.selectEl(_formel).addAttrArray({ "style": _style });
}
}
}
/** 关闭所有的窗体
*/
U.UF.UI.form.closeWindows = function() {
var i;
for (i in U.UF.UI.form.allForm) {
if (U.UF.UI.form.allForm[i].isclose) {
U.UF.UI.form.allForm[i].form.close();
}
}
}
//#endregion
//#endregion;
///
Namespace.register("U.MD.UI.music");
/**
* [Control description] 音乐控件总函数
* @param {[type]} musicList [数组json 格式请看文档]
* @param {[type]} index [需要播放第几首歌(索引)]
* @param {[type]} autoplay [是否自动播放] 可填可不填 默认 false
* @param {[type]} parentEl 所需要添加到的父元素 可填可不填 默认document.body
*/
U.MD.UI.music = function(musicList, index, autoplay, parentEl) {
var _music = U.MD.UI.music; //简写命名空间
var _musicBox;
if (_musicBox = U.selectEl("#U_MD_UI_music_musicBox")[0]) {
// U.selectEl(_musicBox).removeClass('U_MD_UI_music_hidden');
// var _attr = _music.Attr; //简写全局属性json名
// var _audio = U.selectEl("#U_MD_UI_music_audio"); //audio标签
// _attr.musicList = musicList; //全局赋值
// _attr.musicIndex = index; //全局赋值
// _audio[0].src = musicList[index].src; //添加音乐路径
// var _Name = U.selectEl("#U_MD_UI_music_Name"); //音乐名字节点
// _Name[0].innerText = musicList[index].title; //音乐名字赋值
_musicBox.remove();
}
_music.create(parentEl); //创建音乐控件
_music.Attr = { //存放全局属性
'musicList': musicList, //所有数据
'musicIndex': index, //当前数据索引
'autoplay': autoplay, //第一首是否自动播放
'currentTime': null, //音乐当前时间未赋值
'endTime': null //音乐结束时间未赋值
};
_music.init(); //初始化函数
};
U.MD.UI.music.Attr = null; //存放元素与变量的json全局变量 未赋值
U.MD.UI.music.htmlTemplate = ' \n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n' +
'
\n" +
"
";
U.selectEl('input.picUpload[type="file"]', parent)[0].onchange = function() {
U.UF.E.picture(this, U.selectEl('.editor', parent)[0])
}
U.selectEl('input.attachmentUpload[type="file"]', parent)[0].onchange = function() {
U.UF.E.attachment(this, U.selectEl('.editor', parent)[0])
}
};
/*
U.MD.UI.editor.EditorEventBind 创建绑定事件
param1 parent(elemt) 范围
*/
U.MD.UI.editor.EditorEventBind = function(parent) {
//绑定图片拉伸
// U.UF.E.key($('.editor', parent));
//绑定键盘事件
var _font = U.MD.UI.Font();
//生成字体下拉框
_font.style.cssText += "vertical-align: super;";
var _size = U.MD.UI.WordSize();
//生成字体大小下拉框
_size.style.cssText += "vertical-align: super;";
U.selectEl('.setFont', parent).append(_font);
_font.onchange = function() {
U.UF.E.setRangeStyle({ 'font-family': _font.value });
};
//设置字体样式
U.selectEl('.setSize', parent).append(_size);
_size.onchange = function() {
U.UF.E.setRangeStyle({ 'font-size': _size.value });
};
//设置图片上传点击
U.selectEl('.pic', parent)[0].onclick = function() {
U.selectEl('.picUpload', parent)[0].click();
};
//设置附件上传点击
U.selectEl('.attachment', parent)[0].onclick = function() {
U.selectEl('.attachmentUpload', parent)[0].click();
};
//图片点击
U.selectEl('.bIcon', parent)[0].onclick = function() {
U.UF.E.setRangeStyle({ 'font-weight': 'bold' });
};
//加粗
U.selectEl('.iIcon', parent)[0].onclick = function() {
U.UF.E.setRangeStyle({ 'font-style': 'italic' });
};
//斜体
U.selectEl('.UIcon', parent)[0].onclick = function() {
U.UF.E.setRangeStyle({ 'text-decoration': 'underline' });
};
//下划线
U.selectEl('.SIcon', parent)[0].onclick = function() {
U.UF.E.setRangeStyle({ 'text-decoration': 'line-through' });
};
//删除线
U.selectEl('.fontColor', parent).bind('click', function() {
//修改字体颜色
if ($('.fontColorBar', parent).css('display') == "none") {
U.MD.UI.colorPicker($('.fontColorBar', parent)[0], function(r) {
U.selectEl('.MD_ColorPicker', U.selectEl('.fontColorBar', parent)[0]).remove();
U.selectEl('.fontColorBar', parent).hide();
U.UF.E.setRangeStyle({ 'color': r });
});
U.selectEl('.fontColorBar', parent).show();
}
});
U.selectEl('.backgroundColor', parent).bind('click', function() {
//修改背景颜色
if ($('.backgroundColorBar', parent).css('display') == "none") {
U.MD.UI.colorPicker($('.backgroundColorBar', parent)[0], function(r) {
U.selectEl('.MD_ColorPicker', U.selectEl('.backgroundColorBar', parent)[0]).remove();
U.selectEl('.backgroundColorBar', parent).hide();
U.UF.E.setRangeStyle({ 'backgroundColor': r });
});
U.selectEl('.backgroundColorBar', parent).show();
}
});
// U.selectEl('.upload', parent)[0].onchange = function () {
// U.UF.E.picture(this);
//// 上传图片
// var _this = this;
// U.UF.UP.inputUpload([_this], 'http://disk.1473.cn/USUpfile.ashx?typename=UseStudioEditor&UserId=FA92AAC5-4134-449F-9659-0DC12F4F68E9', function (r) {
// var img = '
';
// U.UF.E.addRange(img);
// _this.value = '';
// });
// }
/*$('.editor', parent)[0].onpaste = function (e) {
//绑定粘贴
var _text = e.clipboardData.getData('text/html') || event.clipboardData.getData("text/plain");
var _div = $$("div", { innerHTML: _text, style: { display: "none"} }, document.body);
U.UF.E.unifiedFormat(_div);
document.body.removeChild(_div);
};*/
U.selectEl('.a', parent).bind('click', function() {
U.UF.E.addHref();
});
//添加a标签
U.selectEl('.c', parent).bind('click', function() {
U.UF.E.clearStyle(U.UF.E.getRangeAt());
});
//清除格式
U.selectEl('.textLeft', parent).bind('click', function() {
U.UF.E.setLineStyle({ 'text-align': 'left' });
});
//居左
U.selectEl('.textCenter', parent).bind('click', function() {
U.UF.E.setLineStyle({ 'text-align': 'center' });
});
//居中
U.selectEl('.textRight', parent).bind('click', function() {
U.UF.E.setLineStyle({ 'text-align': 'right' });
});
//居右
};
/**
* 下拉框
* @param choosecon 【object】必选 若需要value值使用集合({'11111111':'aaaaaaaa','2222222':'bbbbbbbb','33333333':'cccccccc'})键名为value值
* @param selattr 【object】必选 设置最外层div的属性值
* @param optionevent 【function】必选 给每个选择区域的点击后回调函数，参数一：value值或者文本值
* @param parentnode 【element】可选 添加到里面的元素
* @returns {*} 【element】 返回出创建好的下拉控件
* @constructor
*/
U.MD.UI.editor.Select = function(choosecon, selattr, optionevent, parentnode) {
var _id = "";
selattr.id && (_id = selattr.id) && (delete selattr.id);
var _selectEl = $$('div', { id: _id }, parentnode || null), //创建最外层
_value = $$('div', selattr, _selectEl),
_textarea = $$('div', {}, _value); //创建最第二层
$$('div', { style: { cssText: 'border-width: 6px 4px; border-style: solid; border-color: rgb(166, 178, 192) transparent transparent; width: 0; position: absolute; right: 4px; top: 50%; margin-top: -3px' } }, _value); //小三角
//_text = $$('div', { style: { cssText: "padding-left: 6px; overflow: hidden; height:100%;cursor: pointer;"} }, _textarea), //创建显示文本内容div
var _con = $$('div', {
datacontent: '',
style: { cssText: 'display: none;position: absolute; margin-top:-1px; min-width: 100%; max-width: 280px; max-height: 200px ;border: 1px solid silver; overflow-x: hidden; cursor: pointer;' }
}, _selectEl), //创建选择区域
_range;
/*默认属性*/
// !selattr.style.border ? _selectEl.style.border = '1px solid #000' : '';
// !selattr.style.background ? _selectEl.style.background = '#fff' : '';
// !selattr.style.width ? _selectEl.style.width = "122px" : '';
// !selattr.style.height ? _selectEl.style.height = '24px' : '';
(selattr.style && !selattr.style.position) ? _selectEl.style.position = 'relative': '';
(selattr.style && !selattr.style.textIndent) ? _textarea.style.textIndent = '6px': '';
// !selattr.style.overflow ? _selectEl.style.overflow = 'hidden' : '';
_textarea.style.whiteSpace = 'pre';
_textarea.style.overflow = 'hidden'
_textarea.style.width = _selectEl.offsetWidth - 15 + "px";
for (var i in choosecon) { //循环集合
$$('div', {
value: i,
innerText: choosecon[i], //创建选择内容
style: { cssText: 'padding: 4px 6px; background: #fff' },
onmouseover: function() { /*绑定光标移入事件*/
this.style.background = '#ccc'
},
onmouseout: function() { /*绑定光标移除事件*/
this.style.background = '#fff'
},
onclick: function() { /*绑定点击事件*/
_textarea.innerText = this.innerText; /*改变问题*/
U.UF.E.reSelectRange(_range) /*重新聚焦光标*/
optionevent(this.value || this.innerText); /*回调*/
}
}, _con);
}
for (var i in choosecon) { // 第一个及默认值
_textarea.innerText = choosecon[i];
break;
}
_textarea.style.lineHeight = parseInt(_textarea.style.height) + 'px'; //使显示文本居中
_selectEl.onclick = function() { //绑定点击事件
var _el = this.querySelector('div[datacontent]');
U.UF.E.reSelectRange(_range) /*重新聚焦光标*/
_el.style.display === 'block' ? _el.style.display = 'none' : _el.style.display = 'block'; /*显示隐藏*/
};
U.selectEl(document).bind('click', function() { /*绑定事件*/
if (_con.style.display != 'none')
_con.style.display = 'none'
if ($(".BD_BorderPicker")[0]) {
if ($(".BD_BorderPicker")[0].style.display != 'none')
U.selectEl(".BD_BorderPicker")[0].style.display = 'none'
}
}, false);
U.selectEl(_selectEl).bind('click', function(e) { /*绑定事件*/
U.UF.EV.stopBubble(e);
//阻止事件冒泡
});
_selectEl.onmousedown = function() { /*绑定事件*/
_range = U.UF.E.getRangeAt() /*获取光标位置*/
}
return _selectEl; //返回创建元素
};
;
///
//excel控件
Namespace.register("U.MD.UI.excel");;
///
Namespace.register("U.MD.R");
/**
* 评论控件全局变量
* PID // 项目id，请查看api文档说明，找到你所在项目的id。
* AID // 对应的文章id，获取url网址的主机，加上url网址的目录，形成的文章id。
* URL // 文章对应的url地址。
* PageIndex // 当前页数
* PageSize // 一页请求数
* AllCount // 此文章对应的有多少数据
* */
U.MD.R.data = {
PID: "",
AID: "",
URL: "",
PageIndex: 1,
PageSize: 20,
AllCount: "",
CB: null
}
/**
* 评论控件初始化函数，调用函数
* @param {object} 参数。
* obj={
* pid // 项目id，请查看api文档说明，找到你所在项目的id。
* type //引用方式为弹窗还是嵌入式，true 为嵌入式方式，false 为窗体。
* el // 评论控件追加的元素。注意：当控件为嵌入式时，才需要填写此参数，如果为弹窗时，不需要填写此参数。
* }
*/
U.MD.R.reply = function(obj) {
//alert();
//定义变量，获取调用方式、控件追加的元素、以及项目id.
U.MD.R.login.cookieLogin(function() {
var _type = obj.type,
_el = obj.el,
_cb = obj.cb;
U.MD.R.data.PID = obj.pid; //项目id全局设置
U.MD.R.data.AID = U.MD.R.reply.getUrlHash(); //文章id全局设置
U.MD.R.data.URL = U.MD.R.reply.getUrl(); //文章url全局设置
U.MD.R.data.CB = _cb;
//调用类型判断
if (!_type) { //如果调用方式是窗体，那么先创建一个窗体，并且重新更新变量_el的值。
_el = new U.UF.UI.form('', $$("div"), {
"style": {
"width": "800px",
"height": "800px"
}
}).content;
}
U.MD.R.reply.init(_el); //控件初始化
U.UF.DL.asynLoadCss({
"href": "/css/Controls/Basic/Picture.css",
type: "text/css",
rel: "stylesheet"
}); //动态添加css文件
U.UF.DL.asynLoadJs({ type: "text/javascript", src: "/js/Controls/Basic/Picture.js" });
}); //cookie自动登录
}
/**
* 评论控件初始化函数，调用函数
* @param {element} 追加元素
*/
U.MD.R.reply.init = function(el) {
var _pageindex = U.MD.R.data.PageIndex, //当前页数
_pagesize = U.MD.R.data.PageSize; //一页请求数
U.MD.R.initPrintHtml(el); //创建基础html
U.MD.R.getReplyData(_pageindex, _pagesize, function(data) { //获取评论数据
U.MD.R.data.AllCount = data[0][0] ? Math.ceil(data[0][0].allcount / U.MD.R.data.PageSize) : ""; //取数完成之后进行将页数全局赋值给id。
U.MD.R.printComment($("#U_MD_R_content_user_comment")[0], 1, data, false, false, false); //打印数据
U.MD.R.initLoadMoreBtn(data[0]); //创建
});
}
/**
* 获取url地址
*/
U.MD.R.reply.getUrl = function() {
return window.location.href;
}
/**
* 获取url网址的主机，加上url网址的目录
*/
U.MD.R.reply.getUrlHash = function() {
return U.UF.EC.SparkMD5.hash(window.location.href);
}
/**
* 获取评论数据
* @param {number} 页码数
* @param {number} 一页的请求量
* @param {function} 回调函数
*/
U.MD.R.getReplyData = function(pageindex, pagesize, cb) {
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Reply", "test", U.MD.R.data.AID, "1", "", pageindex, pagesize], function(r) { //获取数据
cb && cb(r.value); //执行回调函数，并且返回数据。
});
}
/**
* 初始化创建回复元素
* @param {element} 追加元素
*/
U.MD.R.initPrintHtml = function(el) {
var _el = el,
_comment,
_content,
_content_operation,
_userhead,
_headimg,
_operation,
_username,
_editorbox,
_bottom,
_picturewarp,
_picture,
_clear,
_emoji_frame,
_input,
_button,
_img_warp,
_box;
_comment = $$("div", { "className": "U_MD_R_comment" }, _el); //创建最外成元素
_content = $$("div", { "className": "U_MD_R_content" }, _comment); //创建评论内容元素最外元素
_content_operation = $$("div", { "className": "U_MD_R_content_operation" }, _content); //创建用户评论区域最外成元素
_userhead = $$("div", { className: "U_MD_R_content_operation_userhead U_MD_R_Reply_Header" }, _content_operation); //创建头像最外成元素
_headimg = $$("img", { //创建头像img元素
"className": "img",
"src": "/img/UserHead/UseHead.jpg",
"onerror": function() { this.src = '/img/UserHead/UseHead.jpg' }
}, _userhead);
_operation = $$("div", {
"className": "U_MD_R_content_operation_right",
style: { width: "calc(100% - 40px - 20px )" }
}, _content_operation); //创建内容框架div
U.selectEl(_operation).attr({
"data-RPID": null,
"data-RD": 1,
"data-RPUID": null
});
_username = $$("div", { //创建用户名元素
"innerHTML": "登录/注册",
"className": "U_MD_R_content_operation_userlogin U_MD_R_Reply_Name"
}, _operation);
//判断是否登录
if (US.userInfo.userid) { //已登录
_username.innerHTML = US.userInfo.UserName; //设置用户名
_headimg.src = 'http://fs.1473.cn/' + US.userInfo.UserThumbnailImageHead; //设置头像
} else { //未登录
_username.onclick = function() {
U.MD.R.login();
}
}
_editorbox = $$("div", {
"id": "editorbox",
"className": "U_MD_R_Reply_Content",
"contenteditable": "true",
"style": { "min-height": "100px", "background": "#fff", "border": "1px solid black" }
}, _operation) //创建编辑器容器
var _scrolltop = document.documentElement.scrollTop;
U.UF.E.initEditor(_editorbox); //调用函数
document.documentElement.scrollTop = _scrolltop;
_bottom = $$("div", { "className": "U_MD_R_content_operation_right_bottom" }, _operation); //创建用户评论底部区域
$$("div", { //创建表情包按钮
"className": "U_MD_R_content_operation_right_bottom_emoji",
"onclick": function() {
U.UF.EV.stopBubble();
U.MD.UI.face(this, U.selectEl('#editorbox')[0]);
//$(this)[0].append($("#U_MD_UI_face")[0]);
//$(this)[0].append($("#U_MD_UI_face")[0]);
U.selectEl("#U_MD_UI_face").css({ "position": "relative", "height": "140px", "overflow-y": "scroll", "top": "-150px", "width": "450px", "display": "block" });
}
}, _bottom);
_picturewarp = $$("div", { "className": "U_MD_R_content_operation_right_bottom_picturewarp" }, _bottom); //图片最外成
_picture = $$("img", { src: "/img/reply/img.png" }, _picturewarp);
_input = $$("input", { "type": "file" }, _picturewarp); //上传
_button = $$("div", {
"className": "U_MD_R_content_operation_right_bottom_release",
"innerHTML": "发表评论"
}, _bottom); //内容发布
_button.onclick = function() {
if ($(".U_MD_R_Reply_Content")[0].textContent != '' || U.selectEl(".U_MD_R_Reply_Content")[0].innerHTML != '') {
U.MD.R.release(_operation, 1, false, 1);
} else {
U.alert("评论不能为空！");
}
}
_img_warp = $$("div", { "className": "U_MD_R_content_operation_right_bottom_imgloadbox U_MD_R_Reply_Image" }, _operation); //图片加载
_box = $$("div", { "className": "U_MD_R_content_comment", "id": "U_MD_R_content_user_comment" }, _content); //内容盒子
_input.onchange = function() {
U.MD.R.uploadImages(this, _img_warp);
}
U.MD.R.data.CB && U.MD.R.data.CB();
}
/**
* 创建加载更多按钮
*/
U.MD.R.initLoadMoreBtn = function(data) {
var _btn = $$("div", { "className": "U_MD_R_content_loading" }, U.selectEl(".U_MD_R_comment")[0]);
if (data.length > 0) {
if (U.MD.R.data.PageIndex < U.MD.R.data.AllCount) {
_btn.innerHTML = "点击加载更多评论";
_btn.onclick = function() {
var _pageindex = ++U.MD.R.data.PageIndex,
_pagesize = U.MD.R.data.PageSize;
if (U.MD.R.data.PageIndex <= U.MD.R.data.AllCount) {
U.MD.R.getReplyData(_pageindex, _pagesize, function(data) { //获取评论数据
U.MD.R.data.AllCount = Math.ceil(data[0][0].allcount / U.MD.R.data.PageSize);
U.MD.R.printComment($("#U_MD_R_content_user_comment")[0], 1, data, false, false, false); //打印数据
});
} else {
U.selectEl(_btn).hide();
}
}
}
} else {
// _btn.innerHTML = "还没有人评论";
}
}
/**
* 打印一级评论
* @param {object} 评论数据
* @param {element} 追加元素
* @param {number} 用于判断层级而显示指定内容
* @param {boolean}元素插入类型
* @param {boolean} 是否需要回复功能，默认为false
* @param {boolean} 是否需要查看更多，用于区分设置查看更多类型
*/
U.MD.R.printComment = function(el, type, data, appendtype, isreply, readmore) {
var _count = U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Reply", "Reply_SelectTypeReplyEnable", U.MD.R.data.PID]);
if (_count.value[0].ProjectReplyEnable == 1) {
var _el = el,
_type = type,
_data = data,
_appendtype = appendtype,
_isreply = isreply,
_readmore = readmore,
_shownum;
for (var i = 0; i < data[0].length; i++) { //遍历评论数据
if (readmore) {
_shownum = data[0][i].TopReplyNum;
} else {
_shownum = U.Json.select(_data[2], { ReplyID: _data[0][i].ReplyID }).length > 0 ? U.Json.select(_data[2], { ReplyID: _data[0][i].ReplyID })[0].AllReplyNum : "0"; //评论子集（所有子集）的评论数
}
U.MD.R.printCommentHtml(_el, _type, {
rid: _data[0][i].ReplyID, //评论id
rpid: _data[0][i].ReplyParentID, //评论父级id
deep: _data[0][i].ReplyDeep, //评论深度
topid: _data[0][i].ReplyID, //评论顶级id
uid: _data[0][i].UserID, //评论用户id
un: _data[0][i].UserName, //评论用户名
tx: _data[0][i].ReplyUserThumbnailImageHead, //评论用户头像
time: _data[0][i].ReplyAddTime, //评论时间
content: _data[0][i].ReplyContent, //评论内容
shownum: _shownum,
likesnum: _type == 2 ? U.Json.select(_data[4], { ReplyID: _data[0][i].ReplyID })[0] : U.Json.select(_data[1], { ReplyID: _data[0][i].ReplyID })[0]
}, _appendtype, _isreply, _readmore);
}
} else {
var _btn = $$("div", { "className": "U_MD_R_content_loading" }, U.selectEl(".U_MD_R_comment")[0]);
_btn.innerHTML = "该评论系统已关闭";
U.selectEl("#U_MD_R_content_loading")[0].innerHTML = '';
}
}
/**
* 打印二级评论，用于区分用户点击回复或者查看更多。
* @param {sring} 评论id
* @param {boolean} 是否需要查看更多，用于区分设置查看更多类型
*/
U.MD.R.viewComment = function(rid, type) {
if (US.userInfo.userid) {
var
_rid = rid, //父级id
_form, //窗体变量
_data, //数据
_firstbox, //一级评论内容区域
_secondbox, //二级评论内容区域
_thirdbox, //三级评论内容区域
_type = type;
_form = new U.UF.UI.form('', $$("div", { "style": { "padding": "20px" } }), {
"style": {
"width": "800px",
"height": "600px"
}
});
U.A.Request("http://cd.1473.cn/php", ["db.1473.cn", "UseStudio_Reply", "Reply_SelectThisReply", _rid], function(r) { //根据评论id，获取此评论，此评论点赞数，以及子目录下所有的评论还有点赞数
_data = r.value;
U.MD.R.printComment(_form.content, 2, _data, true, true, true); //打印一级目录
if (_type) {
U.selectEl(_form.content).find(".U_MD_R_content_box_content_edit").show();
}
_firstbox = $$("div", { "className": "U_MD_R_content_warp_box" }, _form.content);
//创建二级目录
for (var i = 0; i < _data[1].length; i++) {
_secondbox = U.MD.R.printCommentHtml(_firstbox, 2, {
rid: _data[1][i].ReplyID,
rpid: _data[1][i].ReplyParentID,
deep: _data[1][i].ReplyDeep,
topid: _data[1][i].ReplyTopID,
uid: _data[1][i].UserID,
tx: _data[1][i].ReplyUserThumbnailImageHead,
un: _data[1][i].UserName,
time: _data[1][i].ReplyAddTime,
content: _data[1][i].ReplyContent,
likesnum: U.Json.select(_data[3], { ReplyID: _data[1][i].ReplyID })[0]
}, false, true, true);
//创建三级以下目录（包括三级）
_thirdbox = $$("div", { "className": "U_MD_R_content_warp_box" }, _secondbox);
U.selectEl(_thirdbox).attr({ "data-replyid": _data[1][i].ReplyID });
for (var j = 0; j < _data[2].length; j++) {
if (_data[1][i].ReplyID == _data[2][j].ReplyParentID) {
U.MD.R.printCommentHtml(_thirdbox, 3, {
rid: _data[2][j].ReplyID,
rpid: _data[2][j].ReplyParentID,
deep: _data[2][j].ReplyDeep,
topid: _data[2][j].ReplyTopID,
uid: _data[2][j].UserID,
tx: _data[2][j].ReplyUserThumbnailImageHead,
un: _data[2][j].UserName,
time: _data[2][j].ReplyAddTime,
content: _data[2][j].ReplyContent,
likesnum: U.Json.select(_data[3], { ReplyID: _data[2][j].ReplyID })[0],
replyinfo: {
uid: _data[2][j].uid, //评论的用户id
un: _data[2][j].un, //评论的用户名
tx: _data[2][j].tx //评论的头像
}
}, false, true, true);
}
}
}
});
} else {
U.Alert("请先登录");
}
}
/**
* 打印评论数据内容
* @param {object} 评论数据
* @param {element} 追加元素
* @param {object} 用于判断层级而显示指定内容
* object={
* rid,//评论id
* rpid,//评论父级id
* deep,//评论深度
* topid,//评论顶级id
* uid,//评论用户id
* un,//评论用户名
* tx,//评论用户头像
* time,//评论时间
* content,//评论内容
* likesnum,//评论点赞数
* shownum,//评论子集（所有子集）的评论数
* }
* @param {boolean} 元素插入类型
* @param {boolean} 是否需要回复功能，默认为false
* @param {boolean} 是否需要查看更多，用于区分设置查看更多类型
*/
U.MD.R.printCommentHtml = function(el, type, data, appendtype, isreply, readmore) {
var _data = data,
_el = el,
_type = type,
// _eltype = obj.eltype ? obj.eltype : false,
// _showmore = obj.showmore,
_rid = _data.rid, //评论id
_rpid = _data.rpid, //评论父级id
_deep = _data.deep, //评论顶级id
_topid = _data.topid, //评论顶级id
_uid = _data.uid, //评论用户id
_tx = _data.tx, //评论用户名
_un = _data.un, //评论用户头像
_time = _data.time, //评论时间
_datacontent = _data.content, //评论内容
_likesnumjson = _data.likesnum, //点赞数
_showmoretxtjson = _data.shownum, //评论子集（所有子集）的评论数
_replyinfo_uid = _data.replyinfo ? _data.replyinfo.uid : "", //评论的用户id
_replyinfo_un = _data.replyinfo ? _data.replyinfo.un : "", //评论的用户名
_replyinfo_tx = _data.replyinfo ? _data.replyinfo.tx : "", //评论的头像
_appendtype = appendtype, //评论插入的方式，如果为true，那么就插入到所有评论的第一个（用于以及评论和二级评论），如果为false，那么就插入到最后一个
_isreply = isreply, //点击回复按钮，是否是弹出回复框，还是弹出查看更多，默认为false,
_readmore = readmore, //点击获取是
_box, //评论最外层元素
_info, //评论内层元素
_head, //评论用户头像最外层
_headimg, //评论用户头像
_content, //评论头像右侧内容
_content_top, //评论右侧内容-头部用户名区域
_username, //评论右侧内容-头部用户名区域-用户名
_commenttime, //评论右侧内容-头部用户名区域-评论时间
_text,
_content_bottom, //评论右侧内容-底部区域
_likeswarp, //评论右侧内容-底部区域-点赞最外层
_likesimg, //评论右侧内容-底部区域-点赞图片
_likesnum, //评论右侧内容-底部区域-点赞数
_replywarp, //评论右侧内容-底部区域-回复最外层
_showmorewarp, //评论右侧内容-底部区域-查看更多最外层
_showmoretext, //评论右侧内容-底部区域-查看更多文字元素
_position,
_contenteditable, //创建子集评论-评论操作区域最外层
_bottom, //创建子集评论-评论操作区域内层
_picturewarp, //创建子集评论-评论操作区域-图片最外层
_picture, //创建子集评论-评论操作区域-图片元素
_input, //创建子集评论-评论操作区域-上传input
_button, //创建子集评论-评论操作区域-发布按钮
_img_warp, //创建子集评论-评论操作区域-图片显示区域
_childrenbox; //用于存放子集评论
_box = $$("div", { "className": "U_MD_R_content_box" }); //创建内容盒子
if (_appendtype) { //判断插入类型是否为true，如果为true，那么就插入到所有评论的第一个（用于以及评论和二级评论），如果为false，那么就插入到最后一个
U.selectEl(_el).append(_box, 0, U.selectEl(_el)[0].firstChild);
} else { //如果为false，那么就插入到最后一个
U.selectEl(_el).append(_box);
}
_info = $$("div", { "className": "U_MD_R_content_box_warp" }, _box); //创建信息div
U.selectEl(_info).attr({ //给评论内层设置评论id、评论父级id、评论深度、评论顶级id、评论用户id。用于回复时获取信息。
"data-rid": _rid, //评论id
"data-RPID": _rpid, //评论父级id
"data-RD": _deep, //评论深度
"data-RBID": _topid, //评论顶级id
"data-RPUID": _uid //评论用户id
});
_head = $$("div", { "className": "U_MD_R_content_box_userhead" }, _info); //评论用户头像最外层
_headimg = $$("img", { //评论用户头像
"src": _tx,
onerror: "U.MD.R.imgError(this)"
}, _head);
_content = $$("div", { //评论头像右侧内容
"className": "U_MD_R_content_box_content",
style: { width: "calc(100% - 40px - 20px )" }
}, _info); //创建右侧div
_content_top = $$("div", { "className": "U_MD_R_content_box_content_top" }, _content); //评论右侧内容-头部用户名区域
_username = $$("div", { //评论右侧内容-头部用户名区域-用户名
"className": "U_MD_R_content_box_content_top_name",
"innerHTML": _un
}, _content_top);
if (_type == 3) { //如果为三级目录以下，那么就修改显示的用户名
_username.innerHTML = _un + '回复@' + _replyinfo_un;
}
_commenttime = $$("div", { //评论右侧内容-头部用户名区域-评论时间
"className": "U_MD_R_content_box_content_top_time",
"innerHTML": _time
}, _content_top);
_text = $$("div", { "className": "U_MD_R_content_box_content_text", "innerHTML": _datacontent }, _content); //创建内容区域
if ($(_text).find("img").length > 0) {
U.selectEl(_text).find("img")[0].onclick = function() {
// U.MD.UI.picture([this.src, this.src, this.src], 2);
U.MD.UI.picture([this.src], 0);
U.selectEl("#U_MD_UI_PictureForm").css("position", "fixed");
U.UF.F.topWindow($('#U_MD_UI_PictureForm')[0], true);
}
}
_content_bottom = $$("div", { "className": "U_MD_R_content_box_content_bottom" }, _content); //评论右侧内容-底部区域
_likeswarp = $$("div", { "className": "U_MD_R_content_box_content_bottom_likeswarp" }, _content_bottom); //评论右侧内容-底部区域-点赞最外层
_likeswarp.onclick = function() { //设置点赞事件
U.MD.R.like(this, _rid, US.userInfo.userid);
}
_likesimg = $$("img", { "src": "/img/reply/NOFabulous.png" }, _likeswarp); //评论右侧内容-底部区域-点赞图片
_likesnum = $$("div", { //评论右侧内容-底部区域-点赞数
"className": "U_MD_R_content_box_content_bottom_likeswarp_text",
"innerHTML": 0
}, _likeswarp);
if (_likesnumjson) { //如果有点赞数据，那么修改点赞数，并且修改图片。
_likesnum.innerHTML = _likesnumjson.ReplyNum;
U.A.Request("http://cd.1473.cn/net", ["db.1473.cn", "UseStudio_Reply", "Reply_SelectRepeatLikes_Moblie", _rid, US.userInfo.userid], function(r) {
if (r.value[0].mode == 1) {
_likesimg.src = "/img/reply/NOFabulous.png";
} else if (r.value[0].mode == 0) {
_likesimg.src = "/img/reply/Fabulous.png";
} else {
_likesimg.src = "/img/reply/NOFabulous.png";
}
})
//_likesimg.src = "/img/reply/Fabulous.png";
}
_replywarp = $$("div", { "className": "U_MD_R_content_box_content_bottom_replywarp" }, _content_bottom); //评论右侧内容-底部区域-回复最外层
if (_readmore) { //点击回复按钮，是否是弹出回复框，还是弹出查看更多，默认为false。如果为true,在元素下方显示出评论操作元素。
_replywarp.onclick = function() {
U.MD.R.subsetReply(this);
}
} else {
_replywarp.onclick = function() { //如果为false，弹出一个窗体。
U.MD.R.viewComment(_rid, true);
}
}
$$("img", { //创建回复图片
"src": "/img/reply/reply.png"
}, _replywarp);
$$("div", { //创建回复按钮
"innerHTML": "回复",
"className": "U_MD_R_content_box_content_bottom_replywarp_text"
}, _replywarp);
if (_type == 1) { //如果类型为1，并且点击回复后弹出窗体的，那么显示查看更多。
_showmorewarp = $$("div", { "className": "U_MD_R_content_box_content_bottom_showmorewarp" }, _content_bottom);
$$("img", {
"src": "/img/reply/list.png"
}, _showmorewarp);
_showmoretext = $$("div", {
"className": "U_MD_R_content_box_content_bottom_showmore_text"
}, _showmorewarp);
if (_readmore) {
_showmoretext.className = "U_MD_R_content_box_content_bottom_showmore_text U_MD_R_content_box_content_bottom_showmore_text_secondary"
_showmoretext.innerHTML = _showmoretxtjson ? "共有（" + "" + _showmoretxtjson + "" + "）条评论" : "没有评论(" + "0" + ")";
} else {
_showmoretext.className = "U_MD_R_content_box_content_bottom_showmore_text U_MD_R_content_box_content_bottom_showmore_text_important"
_showmoretext.innerHTML = _showmoretxtjson ? "查看更多（" + "" + _showmoretxtjson + "" + "）" : "查看更多(" + "" + 0 + "" + "）";
_showmorewarp.onclick = function() {
U.MD.R.viewComment(_rid, false);
}
}
}
if (_type == 1 && !readmore && U.selectEl(".U_MD_R_content_loading")[0]) {
if (U.MD.R.data.PageIndex < U.MD.R.data.AllCount) {
U.selectEl(".U_MD_R_content_loading")[0].innerHTML = "点击加载更多评论";
} else {
U.selectEl(".U_MD_R_content_loading").hide();
}
}
if (_type == 2 || _type == 3 || (_type == 1 && readmore)) { //如果是2级和3级以下，那么就创建操作区域。
_contenteditable = $$("div", { //创建子集评论-评论操作区域最外层
"className": "U_MD_R_content_box_content_edit",
"style": { "display": "none" }
}, _content);
_replyinput = $$("div", { "className": "U_MD_R_Reply_Content", "contenteditable": "true" }, _contenteditable); //创建回复元素
_bottom = $$("div", { "className": "U_MD_R_content_operation_right_bottom" }, _contenteditable); //创建子集评论-评论操作区域内层
$$("div", { //创建表情包按钮
"className": "U_MD_R_content_operation_right_bottom_emoji",
"onclick": function() {
U.UF.EV.stopBubble();
U.MD.UI.face(this, _replyinput);
U.selectEl(this)[0].append($("#U_MD_UI_face")[0]);
U.selectEl("#U_MD_UI_face").css({ "position": "relative", "height": "140px", "overflow-y": "scroll", "top": "-150px", "width": "450px", "display": "block" });
}
}, _bottom);
_picturewarp = $$("div", { "className": "U_MD_R_content_operation_right_bottom_picturewarp" }, _bottom); //创建子集评论-评论操作区域-图片最外层
_picture = $$("img", { src: "/img/reply/img.png" }, _picturewarp); //创建子集评论-评论操作区域-图片元素
_input = $$("input", { "type": "file" }, _picturewarp); //创建子集评论-评论操作区域-上传input
_input.onchange = function() { //赋予上传事件
U.MD.R.uploadImages(this, _img_warp);
}
_button = $$("div", { ////创建子集评论-评论操作区域-发布按钮
"className": "U_MD_R_content_operation_right_bottom_release",
"innerHTML": "发表评论"
}, _bottom); //内容发布
_button.onclick = function() { //赋予时间
if (_type == 1) {
_position = 2;
} else if (_type == 2) {
_position = 3;
} else if (_type == 3) {
_position = 4;
}
U.MD.R.release(_info, _type, false, _position);
}
_img_warp = $$("div", { "className": "U_MD_R_content_operation_right_bottom_imgloadbox U_MD_R_Reply_Image" }, _contenteditable); //创建子集评论-评论操作区域-图片显示区域
if (_type != 3) {
_childrenbox = $$("div", { "className": "U_MD_R_content_comment" }, _box); //内容盒子
}
return _childrenbox; //返回元素
}
}
/**
* 图片上传函数
* @param {element} input 元素
* @param {element} 上传成功后，图片插入的位置。
*/
U.MD.R.uploadImages = function(input, el) {
var _el = el,
_imgwarp, _img, _filetype, _imgtype = /.*(jpg|png|gif|jpeg|JPG|PNG|GIF|JPEG)$/;
U.selectEl(_el)[0].innerHTML = "";
_imgwarp = $$("div", {}, _el);
_img = $$("img", { //创建img
"src": "/img/Reply/loading.gif",
"style": { "width": "100px", "height": "100px", "margin-right": "10px" }
}, _imgwarp);
U.UF.UP.inputUpload([input], "http://disk.1473.cn/USUpfile.ashx?typename=UseStudioEditor&UserId=FA92AAC5-4134-449F-9659-0DC12F4F68E9", function(r) {
_filetype = r.value[0].split(".")[1];
if (_filetype.match(_imgtype)) { //如果获取的文件是符合的文件类型进行上传
U.selectEl(_imgwarp).remove();
_imgwarp = $$("div", { "className": "U_MD_R_content_operation_right_bottom_imgloadbox_warp" }, _el);
$$("img", { "src": "http://fs.1473.cn/" + r.value[0] }, _imgwarp); //创建img
$$("div", { "className": "closebtn", "onclick": "U.MD.R.uploadImages.close(this)" }, _imgwarp);
U.alert("上传成功");
} else { //否则提醒用户选择上传图片文件
U.alert("请上传图片文件");
return;
}
}, []);
}
/**
* 图片关闭函数
* @param {element} 事件源
*/
U.MD.R.uploadImages.close = function(el) {
U.selectEl(el).Parent().remove();
}
/**
* 二级以下（包括二级、三级等等）评论点击回复后显示隐藏操作区域
* @param {element} 事件源
*/
U.MD.R.subsetReply = function(el) {
// U.selectEl(el)
var _el = U.selectEl($(el).Parent(2)).find(".U_MD_R_content_box_content_edit");
if (_el[0].style.display == "block") {
_el.hide();
} else {
_el.show();
}
}
/**
* 发表评论插入函数
*/
U.MD.R.release = function(el, type, isreply, position) { //发表评论函数
if (US.userInfo.userid) {
var _el = el,
_type = type,
_isreply = isreply,
_position = position,
_content = U.selectEl(_el).find(".U_MD_R_Reply_Content")[0],
_imgwarp = U.selectEl(_el).find(".U_MD_R_Reply_Image"),
_uid = US.userInfo.userid,
_un = US.userInfo.UserName,
_utx = "http://fs.1473.cn/" + US.userInfo.UserImageHead,
_box;
if (_content.innerHTML.trim() != "" || _imgwarp.find("img").length > 0) {
var _rid = Guid.newGuid(),
_rpid = U.selectEl(el).attr("data-rid"),
_pid = U.MD.R.data.PID,
_aid = U.MD.R.data.AID,
_rc = "",
_rip = US.userInfo.RegisterIP,
_url = U.MD.R.data.URL,
_ra = null,
_rd = U.selectEl(el).attr("data-rd"),
_rbid = U.selectEl(el).attr("data-rbid"),
_rpuid = U.selectEl(el).attr("data-rpuid"),
_re = 1;
if (position == 1) {
_rd = 1;
} else if (position == 2 || position == 3) {
_rd = parseInt($(el).attr("data-rd")) + 1;
} else {
_rd = 3;
_rpid = U.selectEl(el).attr("data-rpid");
}
if ($(_imgwarp).find("img").length > 0) {
_rc = _content.innerHTML.trim() + _imgwarp.find("img")[0].outerHTML;
} else {
_rc = _content.innerHTML;
}
U.A.Request("http://cd.1473.cn/net", ["db.1473.cn", "UseStudio_Reply", "Reply_InsertReply", _rid, _rpid, _pid, _aid, _uid, _un, _utx, _rc, _rip, _url, _ra, _rd, _rpuid, _re, U.MD.R.getNowFormatDate()], function(r) {
var _data = r.value[0],
_appendtype, _readmore,
_more = U.selectEl("div[data-rid='" + _data.ReplyParentID + "']").find(".U_MD_R_content_box_content_bottom_showmore_text_important span")[0],
_more1 = U.selectEl("div[data-rid='" + _data.ReplyParentID + "']").find(".U_MD_R_content_box_content_bottom_showmore_text_secondary span")[0];
U.selectEl(_el).find(".U_MD_R_Reply_Content")[0].innerHTML = "";
U.UF.E.initEditor($(_el).find(".U_MD_R_Reply_Content")[0]); //调用函数
U.selectEl(_el).find(".U_MD_R_Reply_Image")[0].innerHTML = "";
if (_position == 1) {
_readmore = false;
_appendtype = true;
_el = U.selectEl("#U_MD_R_content_user_comment")[0];
} else {
_readmore = true;
_val = _more.innerText;
// _val1 = _more1.innerText;
if (_position == 2) {
_el = U.selectEl(_el).Parent().nextSibling;
_type = 2;
_appendtype = true;
}
if (_position == 3) {
if ($($(_el)[0].nextSibling).find(".U_MD_R_content_warp_box").length > 0) {
_el = U.selectEl($(_el)[0].nextSibling).find(".U_MD_R_content_warp_box");
} else {
_el = $$("div", { "className": "U_MD_R_content_warp_box" }, U.selectEl($(_el)[0].nextSibling)[0]);
//$(_el).attr({"data-replyid": _data[1][i].ReplyID});
}
_type = 2;
}
if (_position == 4) {
_el = U.selectEl($(_el).Parent()).Parent();
_type = 3;
}
_more.innerText = ++_val;
//_more1.innerText = ++_val1;
U.selectEl($(_content).Parent()).hide();
}
var _box = U.MD.R.printCommentHtml(_el, _type, {
rid: _data.ReplyID,
rpid: _data.ReplyParentID,
deep: _data.ReplyDeep,
topid: _data.ReplyTopID,
uid: _data.UserID,
tx: _data.ReplyUserThumbnailImageHead,
un: _data.UserName,
time: U.MD.R.getNowFormatDate() + '.0',
content: _data.ReplyContent,
replyinfo: {
uid: _data.uid, //评论的用户id
un: _data.un, //评论的用户名
tx: _data.tx //评论的头像
}
}, _appendtype, _isreply, _readmore);
// if (_position == 3) {
// var _box1 = $$("div", {"className": "U_MD_R_content_warp_box"}, _box);
// U.selectEl(_box1).attr({"data-replyid": _data[1][i].ReplyID});
// }
U.alert("评论成功");
});
} else {
U.alert("请输入评论内容");
}
} else {
U.Alert("请先登录");
}
}
/**
* 点赞函数
* @param {element} 事件源
* @param {string} 评论id
* @param {string} 用户id
*/
U.MD.R.like = function(e, rid, uid) {
if (US.userInfo.userid) {
var _el = e,
_rid = rid,
_uid = uid;
U.A.Request("http://cd.1473.cn/net", ["db.1473.cn", "UseStudio_Reply", "Reply_SelectRepeatLikes", _rid, _uid], function(r) {
var _img = U.selectEl(_el).find("img")[0],
_text = U.selectEl(_el).find(".U_MD_R_content_box_content_bottom_likeswarp_text")[0],
_val = parseInt(_text.innerHTML);
if (r.value[0].mode == 0) {
_img.src = "/img/reply/NOFabulous.png";
_text.innerHTML = --_val;
} else {
_img.src = "/img/reply/Fabulous.png";
_text.innerHTML = ++_val;
}
});
} else {
U.Alert("请先登录");
}
}
/**
* 图片错误所执行的函数
* @param {element} 事件源
*/
U.MD.R.imgError = function(el) {
U.selectEl(el)[0].src = "/img/UserHead/UseHead.jpg";
}
/**
* 函数作用：调用登录函数
*/
U.MD.R.login = function() {
if ($("#U_MD_HomeC_Pop")[0]) {
U.UF.F.windowTopCenter($("#U_MD_HomeC_Pop")[0]);
} else {
U.UF.CD.loadPageCrossDomain(function() {});
U.MD.U.L.setLoginCallBack(function() {
U.MD.R.login.cb();
});
}
}
/**
* cookie登录，如果登录成功，则修改头像以及用户名
*/
U.MD.R.login.cookieLogin = function(cb) {
if (U.UF.Cookie.get("usestudiosso") && U.UF.Cookie.get("usestudiosso", "userid")[0]) {
U.UF.CD.loadPageCrossDomain(function() {
U.MD.U.L.loginCallBack = function() {
cb && cb();
U.selectEl(".U_MD_R_content_operation_userhead img")[0].src = 'http://fs.1473.cn/' + US.userInfo.UserThumbnailImageHead; //用户登录后的操作
U.selectEl(".U_MD_R_content_operation_userlogin")[0].innerHTML = US.userInfo.UserName; //设置登录用户头像，登录用户名等操作
}
});
} else {
cb && cb();
}
}
/**
* 登录之后的回调函数
*/
U.MD.R.login.cb = function() {
U.selectEl(".U_MD_R_content_operation_userhead img")[0].src = 'http://fs.1473.cn/' + US.userInfo.UserThumbnailImageHead; //用户登录后的操作
U.selectEl(".U_MD_R_content_operation_userlogin")[0].innerHTML = US.userInfo.UserName; //设置登录用户头像，登录用户名等操作
}
//获取当前时间
U.MD.R.getNowFormatDate = function() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate +
" " + date.getHours() + seperator2 + date.getMinutes() +
seperator2 + date.getSeconds();
return currentdate;
}
;
///
Namespace.register("U.MD.UI.table");
/*
表格控件的基础函数
param1 datasource 数据源是一个object类型数组。
param2 titles 标题是一个json类型数据
param3 css 样式是一个json类型数据
param4 parent 父元素
*/
U.MD.UI.table = function(datasource, titles, css, parent) {
U.MD.UI.table.thead(datasource, titles, css, parent);
//创建表格
}
/*
表格控件的头部函数
param1 {json} datasource 数据源是一个object类型数组。
param2 {json} titles 标题是一个json类型数据
param3 {json} css 宽度是一个json类型数据
param4 {element} parent 父元素
param5 {number} index 默认页面
param6 {number} prows 页面
*/
U.MD.UI.table.thead = function(datasource, titles, css, parent, index, prows) {
if (!index) {
//index默认为一
index = 1;
//prwos默认为数据源的长度
prows = datasource.length;
}
var _table, _thead, _tr, _tbody;
//申明变量
_table = $$("table", {
style: {
"text-align": "center",
"position": "relative",
"width": " 100%",
"border-collapse": " collapse",
"border-width": " 1px",
"border-style": " solid",
"border-color": " rgb(213, 213, 213)",
"border-image": " initial",
"display": "table"
}
}, parent);
//创建table标签
_thead = $$("thead", {}, _table);
//创建thead标签
_tr = $$("tr", {}, _thead);
//创建tr标签
for (var num in titles) {
//遍历titles
if (typeof titles[num] === "object") {
//判断是否有绑定事件
$$("th", {
innerHTML: titles[num].name,
style: {
"cssText": css[num],
"padding": "10px 0",
"font-weight": "normal",
"border": "1px solid #d5d5d5"
},
id: "th"
}, _tr);
//生成th
} else {
$$("th", {
innerHTML: titles[num],
style: {
"cssText": css[num],
"padding": "10px 0",
"font-weight": "normal",
"border": "1px solid #d5d5d5"
},
id: "th"
}, _tr);
//生成th
}
}
_tbody = $$("tbody", { style: { cssText: "width:100%;" }, id: "tbody" }, _table);
//生成tbody
U.MD.UI.table.tbody(_tbody, datasource, titles, css, index, prows);
//运行tbody函数
return _tbody;
//返回tbody
}
/*
表格控件的身体函数
param1 {element} parent 父元素,表格生成的地方
param2 {json} datasource 数据源是一个object类型数组。
param3 {json} titles 标题是一个json类型数据
param4 {json} css 宽度是一个json类型数据
param5 {number} index 默认页面
param6 {number} prows 页面行数
*/
U.MD.UI.table.tbody = function(parent, datasource, titles, css, index, prows) {
var _tr, _td, _div, _neirong;
//申明变量
for (var num = (index - 1) * prows; num < index * prows && num < datasource.length; num++) {
//建立一个循环，以(index - 1) * prows为初始值，index * prows为终点进行循环
if (num % 2 != 0) {
//判断table列表的行数是否是单数
_tr = $$("tr", { style: { cssText: "background-color: #FFF;" }, id: "tr" }, parent);
//行数是单的背景颜色是白色
} else {
_tr = $$("tr", { style: { cssText: "background-color: #dde4ee;" }, id: "tr" }, parent);
//行数是双的背景颜色是#dde4ee
}
for (var name in titles) {
//遍历titles
_td = $$("td", { id: "td" }, _tr);
//生成td
if (titles[name].content) {
for (var k = 0; k < titles[name].content.length; k++) {
//遍历添加的元素
_div = U.MD.UI.table.printDiv(_td, titles[name].content[k]);
//生成div
if (titles[name].content[k].onclick) {
U.MD.UI.table.onclick(_div, datasource[num], titles[name].content[k].onclick);
}
//添加点击事件
}
} else {
_div = $$("div", { innerHTML: datasource[num][name], style: { "overflow": "hidden", "cssText": css[name] } }, _td);
if (titles[name].id) { //判断是否需要给td添加id
_div.id = datasource[num][titles[name].id];
}
}
}
}
}
/*
表格控件的分页表格函数
param1 {json} datasource 数据源 json
param2 {json} titles 标题是一个json类型数据
param3 {json} css 宽度是一个json类型数据
param4 {number} prows 页面行数 int
param5 {number} index 默认页面 int
param6 {element} parent 父元素
*/
U.MD.UI.table.pageTable = function(datasource, titles, css, prows, index, parent) {
var _div = $$("div", {
"style": {
"left": "0px",
"right": "0px",
"width": "100%",
"margin": "0 auto",
"top": "200px"
}
}, parent);
//生成一个大div放表格和分页
var _tdiv = $$("div", {}, _div);
//生成一个div 放表格
var _tbody = U.MD.UI.table.thead(datasource, titles, css, _tdiv, index, prows);
//生成表格，放_tdiv里
var _pdiv = $$("div", { "style": { "width": "650px", "margin": "20px auto 0 auto" } }, _div); //生成一个div 放分页按钮
new U.UF.P.page(_pdiv, datasource.length, prows, index, function(page) {
//生成分页控件,当点击其他页面是触发匿名波函数
U.MD.UI.table.delChild(_tbody);
//当点击下一页时，首先删除tbody 下全部子元
U.MD.UI.table.tbody(_tbody, datasource, titles, css, page, prows);
//生成tbody
});
}
/*
删除子元素函数
param {element}obj 删除子元素的函数
*/
U.MD.UI.table.delChild = function(obj) {
for (var num = obj.children.length - 1; num >= 0; num--) {
//得到元素底下的全部子元素
obj.removeChild(obj.children[num])
//删除子元素
}
}
/*
点击事件函数
param1 {element} obj 点击事件的触发对象
param2 {json} datasource 展示的数据
*/
U.MD.UI.table.onclick = function(obj, datasource, fun) {
obj.onclick = function() {
//绑定事件
fun(datasource);
}
}
/*
打印div
param2 {sting || element} content 生成内容（字符串或者元素）
param1 {element} parent 生成的父元素
*/
U.MD.UI.table.printDiv = function(parent, content) {
var _div;
//判断content类型是否是字符串
if (typeof content.name == "string") {
//是字符串的生成div，打印内容
_div = $$("div", { "innerHTML": content.name }, parent);
}
//如果content类型是object类型
if (typeof content.name == "object") {
//就克隆Contet
var _dd = content.name.cloneNode(true);
parent.appendChild(_dd);
_div = _dd;
}
return _div;
};
///
Namespace.register("U.MD.UI.Tree");
//json要求：
//里面需要包含id，name，deep（依赖），img_url（显示图片源），child（附属目录），为一个数值，每一个值为一个json，child的格式也是一样
//案例
// [{ id: "1", name: "文件夹", deep: 0, img_url: 'http://api.1473.cn/Uform/Image/tree/folder.png',
//child: [{ id: "2", name: "文件夹", deep: 1, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png",
// child: [{ id: "5", name: "文件夹", deep: 2, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png"}]
// },
//{ id: "3", name: "文件夹", deep: 1, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png" },
//{ id: "4", name: "文件夹", deep: 1, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png"}]
//}]
/*
将二维数组转化为列表的方法
arr {arr} 数据源json里面需要包含id，name，deep（依赖），img_url（显示图片源），child（附属目录），外部是数组
tree {object} 要插入列表的地方
bookfun {function} 每一行目录的点击事件
leftfun {function} 右键事件
*/
U.MD.UI.Tree = function(arr, treeaction, bookfun, leftfun) {
json = []; //将外变量josn清空
var _json = arr; //定义局部变量_json，值为r
for (var _i = 0; _i < _json.length; _i++) { //定义循环，循环对象为
U.MD.UI.Tree.jsonAdd(json, _json[_i]); //运行函数，生成json
}
treeaction.innerHTML = ""; //清空tree的内容
U.MD.UI.Tree.treeCreate(json, treeaction, bookfun); //运行方法，在tree中生成树状图
treeaction.oncontextmenu = function(e) {
e.preventDefault(); //去掉默认的contextmenu事件，否则会和右键事件同时出现。
};
treeaction.onmousedown = function(e) { //设置树状图的右键点击事件
if (e.button == 2) {
leftfun(e, bookfun); //运行右键事件
}
}
}
/*
将二维数组转化为列表的方法
json {arr} 数据源json里面需要包含id，name，deep（依赖），img_url（显示图片源），child（附属目录），外部是数组
tree {object} 要插入列表的地方
bookfun {function} 没一行的点击事件
*/
U.MD.UI.Tree.treeCreate = function(json, tree, onclickfun) {
for (var _i = 0; _i < json.length; _i++) { //创建循环，解析json数组，得到每一个json
var _ul = $$("ul", { className: "U_MD_UI_Tree_a " + json[_i].parentID }, tree); //创建var对象，在tree中创建ul
var _li = $$("li", { id: json[_i].id, parentid: json[_i].parentid, className: "U_MD_UI_Tree_listyle", parentid: json[_i].id, deep: json[_i].deep }, _ul); //创建var对象，在ul中创建li，id为a+jsonid
var _img = $$("img", { "onerror": U.MD.C.imgError, src: json[_i].img_url, className: "U_MD_UI_Tree_imgstyle" }, _li); //创建var对象，在li中创建img
var _span = $$("span", { innerHTML: json[_i].name, className: "spanstyle" }, _li); //创建var对象，在li中创建span，内容为json的name
_ul.style.display = "none";
if (json[_i].deep == "1") { _ul.style.display = "block" } //进行判断，判断是否为一级目录，不是的先隐藏
_img.aa = false; //定义img的一个变量，用来控制列表的展开和关闭
var _liobj = document.getElementsByClassName("U_MD_UI_Tree_a " + json[_i].parentID)[0]; //定义一个let对象为获取到的对应的li对象
_ul.style.display = _liobj.style.display; //如果是展开状态，显示ul
_li.onclick = function() { //定义li的点击事件
onclickfun(this); //执行bookconlick函数，改变book对象的内容
_liobj = document.getElementsByClassName("U_MD_UI_Tree_a " + this.parentid);
if (_img.aa === true) { //如果img.aa等于true
_img.aa = false; //修改img.aa对象为false
for (var _ii = 0; _ii < _liobj.length; _ii++) { //定义循环，循环对象为获取到的li对象集合
_liobj[_ii].style.display = "none"; //将集合隐藏
}
} else { //如果img.aa等于false
_img.aa = true; //修改img.aa等于true
for (var _ii = 0; _ii < _liobj.length; _ii++) { //定义循环，循环对象为获取到的li对象集合
_liobj[_ii].style.display = "block"; //将集合显示
}
}
}
if (json[_i].child) {
U.MD.UI.Tree.treeCreate(json[_i].child, _ul, onclickfun); //重新调用函数，参数为child的对象数组，ul对象，20的边距值，隐藏，改变的book对象
}
}
}
/*
在json中插入json的方法
json {arr} 要被插入的json对象
addjson {json} 要查入的json对象
*/
U.MD.UI.Tree.jsonAdd = function(json, addjson) {
var _addid = addjson.parentID; //定义要目的地id，等于插入json的parentID值
if (_addid == "0") { //进行判断，判断目的地id是否在第一层（0）
json[json.length] = addjson; //如果在，直接在json的第一层中加入要插入的json
return json; //结束方法，返回json对象
}
for (var _i = 0; _i < json.length; _i++) { //创建循环，解析json数组，得到每一个json
if (json[_i].id == _addid) { //进行判断，判断json的id是否等于获取到的目的地id，如果是
if (json[_i].child) { //进行判断，判断json的child有没有值
json[_i].child[json[_i].child.length] = addjson; //如果有，就在其中添加插入对象
return json; //结束方法，返回json对象
} else { //如果json中没有child
json[_i].child = [];
json[_i].child[json[_i].child.length] = addjson; //将json的child等于插入的对象
return json; //结束方法，返回json对象
}
}
if (json[_i].child) { //如果json的id不与目的地id相等且json中存在child
var _return = U.MD.UI.Tree.jsonAdd(json[_i].child, addjson); //定义函数，调用自己，变量为json的child，要插入的json
json[_i].child = _return; //json的child等于返回的json
}
}
return json; //返回json对象
}
/*
rightButton {object} 要插入li的右键对象
e {json} 点击事件的信息
*/
U.MD.UI.Tree.rightOnclick = function(rightButton, e) {
var _li = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "新建文件夹", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep) + 1 }, rightButton); //在右键菜单中添加li
var _li1 = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "重命名", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep) + 1 }, rightButton); //在右键菜单中添加li
var _li2 = $$("li", { className: "U_MD_UI_Tree_rightli", innerHTML: "删除", parentid: e.path[1].parentid, deep: parseInt(e.path[1].deep + 1) }, rightButton); //在右键菜单中添加li
var _return = [];
_return[0] = _li;
_return[1] = _li1;
_return[2] = _li2;
return _return;
}
/*
搜索arr中最高的id方法
arr {arr} 要搜索的arr对象
*/
U.MD.UI.Tree.createID = function(arr) {
var _return = 0; //定义变量
for (var _i = 0; _i < arr.length; _i++) { //定义循环，循环对象为arr
if (parseInt(arr[_i].id) > _return) { //进行判断，如果arr的id比_return大
_return = parseInt(arr[_i].id); //修改_return的值
}
}
return _return; //返回变量
};
///
//编辑器
Namespace.register("U.MD.UI.txt");;
///
;