/// Namespace.register("U.MD.UI.BTree"); //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"}] //}] //var json = [{ 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"}] //},{ id: "6", name: "文件夹", deep: 0, img_url: 'http://api.1473.cn/Uform/Image/tree/folder.png', child: [{ id: "8", name: "文件夹", deep: 6, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png", // child: [{ id: "9", name: "文件夹", deep: 8, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png"}] // }, // { id: "10", name: "文件夹", deep: 6, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png" }, //{ id: "11", name: "文件夹", deep: 6, img_url: "http://api.1473.cn/Uform/Image/tree/folder.png"}]},{ id: "7", name: "文件夹", deep: 0, img_url: 'http://api.1473.cn/Uform/Image/tree/folder.png',}]; /* 开始方法一,用来生成树和后台管理页面 arr {arr} 要解析的json arr对象 bookfun {function} 点击事件 dateDeleteFun {function} date的删除方法 dateUpdateFun {function} date的修改方法 dateInsertFun {function} date的添加方法 tree {object} 右侧要插入后台li的地方 directory {object} 要插入后台li的地方 list {object} 左侧放添加标签的的地方 listimg {String} 后台页面的img deteimg {String} 是否启用删除标签的图片 upimg {String} 是否启用修改标签的图片 */ U.MD.UI.BTree = function (arr, bookfun, dateDeleteFun, dateUpdateFun, dateInsertFun, tree, directory, list, listimg, deteimg, upimg) { U.MD.UI.BTree.jsonStartLeft(arr, tree[0], bookfun); //调用方法,生成树状图 U.MD.UI.BTree.jsonStartRight(tree[1], bookfun, dateDeleteFun, dateUpdateFun, dateInsertFun, directory, list, listimg, deteimg, upimg); //调用方法,生成管理页面 } /* 将二维数组转化为列表的方法 json {arr} 数据源json里面需要包含id,name,deep(依赖),img_url(显示图片源),child(附属目录),外部是数组 tree {object} 要插入列表的地方 bookfun {function} 没一行的点击事件 */ U.MD.UI.BTree.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.BTree.treeCreate(json[_i].child, _ul, onclickfun); //重新调用函数,参数为child的对象数组,ul对象,20的边距值,隐藏,改变的book对象 } } } /* 在json中查找指定id下的child json {arr} 要查找的arr对象 parentID {String} 要查找的id */ U.MD.UI.BTree.JsonSelect = function (json, parentID) { var _json = []; //创建一个变量_json,来接收筛选后的json for (var _i = 0; _i < json.length; _i++) {//创建循环,循环对象为json if (parentID == 0) { //判断parentID是否为0,如果是 return json; //返回json } //如果不是 if (json[_i].id == parentID) {//判断json中各个对象的id是否与parentID相等,如果是 _json = json[_i].child; //变量_json等于json中对应对象的child值 return _json; //返回变量_json } //如果不是 if (json[_i].child) { //判断json中对象是否有child值,如果有 var _return = U.MD.UI.BTree.JsonSelect(json[_i].child, parentID); //定义变量_return 值为调用方法本身的返回值 } } return _return; //返回_return } /* 创建查询管理目录的方法 json {arr} 要解析的json arr对象 tree {object} 左侧要插入后台li的地方 list {object} 左侧放添加标签的的地方 jsonpid {String} 添加标签的深度 jsondelete {function} json的删除方法 jsonupdate {function} json的修改方法 jsonadd {function} json的添加方法 deteurl {String} 是否启用删除标签的图片 upurl {String} 是否启用修改标签的图片 i {String} tree的对象值,控制下一级 j {String} tree的对象值,控制上一级 */ U.MD.UI.BTree.DirectoryCreate = function (json, tree, list, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i, j) { if (i == 0) { //判断是否载入第一层,如果是 list[1].style.display = "none"; //隐藏二级目录 list[2].style.display = "none"; //隐藏三级目录 } else { //如果不是载入第一层目录 list[2].style.display = "none"; //将三级目录隐藏 list[i].style.display = "block"; //显示对应级目录 } var _buttonText = "修改"; //定义变量_buttonText,代表修改按钮的默认值 var _button1Text = "删除"; //定义变量_button1Text,代表删除按钮的默认值 if (deteurl && upurl) { //进行判断,是否提供默认按钮,如果不是 _buttonText = ""; //消除_buttonText _button1Text = ""; //消除_button1Text } tree[i].innerHTML = ""; //将tree中的内容清空 list[i].parentID = jsonpid; //给list定义一个变量 list[i].deep = i + 1; //给list定义深度变量 if (j) { //判断是否有输入上一级 tree[j].innerHTML = ""; //如果有,清空上一级 } if (json) { //如果json存在 for (var _i = 0; _i < json.length; _i++) { //创建循环,循环对象为json var _ul = $$("ul", { className: "U_MD_UI_Tree_styleul", parentid: json[_i].parentID, deep: json[_i].deep }, tree[i]); //创建在tree中创建ul var _li = $$("li", { className: "U_MD_UI_Tree_styleli", innerHTML: json[_i].name, parentid: json[_i].id }, _ul); //创建li在tree的下一级中,css为styleli var _button = $$("input", { type: "button", pid: json[_i].id, parentid: json[_i].parentID, innerHTML: _buttonText, className: "U_MD_UI_Tree_button" }, _ul); //创建修改button在在li中,css为stylebutton var _button1 = $$("input", { type: "button", pid: json[_i].id, parentid: json[_i].parentID, innerHTML: _button1Text, className: "U_MD_UI_Tree_button1" }, _ul); //创建删除button在在li中,css为stylebutton //创建删除button在在li中,css为stylebutton _button.onclick = function () { //给修改按钮定义onclick事件 jsonupdate(this, tree, list, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //事件为调用jsonupdate方法,输入this为变量 } _button1.onclick = function () { //给删除按钮定义oncick事件 jsondelete(this, tree, list, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //事件为调用jsondelete方法,输入this为变量 } _li.onclick = function () { //给li定义onclick事件 if (j) { //判断j是否存在,如果存在 U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, this.parentid), tree, list, this.parentid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, j); //调用方法,创建下一级的下一级目录 } else { //如果不存在 if (i == 2) { //判断是否到三级目录 } else { //如果还没到 U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, this.parentid), tree, list, this.parentid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); //调用方法,创建下一级的下一级目录 } } } } } var add = U.selectEl(".U_MD_UI_Tree_add"); if (add[i]) { //进行判断,当添加标签已存在时 list[i].removeChild(add[i]); //销毁添加标签 } var _div = $$("div", { className: "U_MD_UI_Tree_add", innerHTML: "添加新分类" }, list[i]); //创建添加标签 _div.onclick = function () { //设置添加标签的点击事件 jsonadd(this, tree, list, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i); //调用添加方法,进行添加 } } /* 在json中插入json的方法 json {arr} 要被插入的json对象 addjson {json} 要查入的json对象 */ U.MD.UI.BTree.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.BTree.jsonAdd(json[_i].child, addjson); //定义函数,调用自己,变量为json的child,要插入的json json[_i].child = _return; //json的child等于返回的json } } return json; //返回json对象 } /* 开始方法二,生成后台管理页面 arr {arr} 要解析的json arr对象 bookfun {function} 点击事件 jsonDeleteFun {function} json的删除方法 jsonUpdateFun {function} json的修改方法 jsonInsertFun {function} json的添加方法 tree {object} 右侧要插入后台li的地方 directory {object} 要插入后台li的地方 mulu {object} 左侧放添加标签的的地方 muluimg {String} 后台页面的img deteimg {String} 是否启用删除标签的图片 upimg {String} 是否启用修改标签的图片 */ U.MD.UI.BTree.jsonStartA = function (arr, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, tree, directory, mulu, muluimg, deteimg, upimg) { json = []; //将外变量josn清空 var _json = arr; //定义局部变量_json,值为r for (var _i = 0; _i < _json.length; _i++) { //定义循环,循环对象为 U.MD.UI.BTree.jsonAdd(json, _json[_i]); //运行函数,生成json } tree.innerHTML = ""; //清空tree的内容 U.MD.UI.BTree.jsonStartRight(tree, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, directory, mulu, muluimg, deteimg, upimg); //调用方法,生成管理页面 } /* 生成后台管理页面及管理页面li tree {object} 右侧要插入后台li的地方 bookfun {function} 点击事件 jsonDeleteFun {function} json的删除方法 jsonUpdateFun {function} json的修改方法 jsonInsertFun {function} json的添加方法 directory {object} 要插入后台li的地方 mulu {object} 左侧放添加标签的的地方 muluimg {String} 后台页面的img deteimg {String} 是否启用删除标签的图片 upimg {String} 是否启用修改标签的图片 */ U.MD.UI.BTree.jsonStartRight = function (tree, bookfun, jsonDeleteFun, jsonUpdateFun, jsonInsertFun, directory, mulu, muluimg, deteimg, upimg) { var _ul = $$("ul", { className: "U_MD_UI_Tree_a " }, tree); //创建对象,在tree中创建ul var _li = $$("li", { className: "U_MD_UI_Tree_listyle", yid: "1" }, _ul); //创建对象,在ul中创建li,id为a+jsonid var _img = $$("img", { "onerror": U.MD.C.imgError, src: muluimg, className: "U_MD_UI_Tree_imgstyle" }, _li); //创建对象,在li中创建img var _span = $$("span", { innerHTML: "目录管理", className: "U_MD_UI_Tree_spanstyle" }, _li); //创建对象 在li中创建span _li.onclick = function () { //设置li的点击事件 bookfun(this); //先执行点击事件 U.MD.UI.BTree.DirectoryCreate(json, directory, mulu, 0, //运行方法,生成后台页面 function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) { var _ret = jsonDeleteFun(objects.pid); //运行删除方法 if (_ret) {//如果返回了方法 json = U.MD.UI.BTree.jsonDelete(json, objects.pid); //运行方法,修改json var _id = U.selectEl("#" + objects.pid)[0]; //获取修改对象 if (_id) { _id.parentNode.remove(); } //如果有对象,修删除 if (i == 1) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); } //刷新二级页面 if (i == 2) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2); } //刷新三级页面 if (i == 0) { U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0); } //修改一级页面 } }, function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) { var _ret = jsonUpdateFun(U.MD.UI.BTree.jsonSelectA(json, objects.pid)); //运行修改方法 json = U.MD.UI.BTree.jsonUpdate(json, _ret); //运行方法,修改json var _id = U.selectEl("#" + objects.pid)[0]; //获取修改对象 if (_id) { _id.childNodes[0].src = _ret.img_url; //修改对象 _id.childNodes[1].innerHTML = _ret.name; //修改对象 } if (i == 1) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); } //刷新二级页面 if (i == 2) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, objects.parentid), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2); } //刷新三级页面 if (i == 0) { U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0); } //修改一级页面 }, function (objects, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, i) { var _json = {}; //定义变量 _json.parentID = objects.parentNode.parentID; //获取添加的parentid _json.deep = objects.parentNode.deep; //获取添加的deep var _ret = jsonInsertFun(_json); //运行添加方法 var _post; //定义局部对象 if (_ret) {//如果有返回值 _post = U.selectEl(".U_MD_UI_Tree_a")[1]; if (_post) {//判断前台树是否存在 if (_ret.parentID == 0) {//如果要插入的是一级目录 _post = U.selectEl(".U_MD_UI_Tree_a")[0].parentNode; //获取一级对象 } else { _post = U.selectEl("#" + _ret.parentID)[0].parentNode; //获取对应对象 } _js = []; //定义局部对象 _js[0] = _ret; //给对象定值 U.MD.UI.BTree.treeCreate(_js, _post, bookfun); //创建li } json = U.MD.UI.BTree.jsonAdd(json, _ret); //刷新json if (i == 1) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, _json.parentID), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 1, 2); } //刷新二级页面 if (i == 2) { U.MD.UI.BTree.DirectoryCreate(U.MD.UI.BTree.JsonSelect(json, _json.parentID), tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 2); } //刷新三级页面 if (i == 0) { U.MD.UI.BTree.DirectoryCreate(json, tree, mulu, jsonpid, jsondelete, jsonupdate, jsonadd, deteurl, upurl, 0); } //修改一级页面 } }, deteimg, upimg, 0); //调用方法,生成一级目录 } } /* 生成左边树状图的方法 arr {arr} 要处理的arrjson对象 tree {object} 要插入树状图的地方 bookfun {function} 点击事件 */ U.MD.UI.BTree.jsonStartLeft = function (arr, tree, bookfun) { json = []; //将外变量josn清空 var _json = arr; //定义局部变量_json,值为r for (var _i = 0; _i < _json.length; _i++) { //定义循环,循环对象为 U.MD.UI.BTree.jsonAdd(json, _json[_i]); //运行函数,生成json } tree.innerHTML = ""; //清空tree的内容 U.MD.UI.BTree.treeCreate(json, tree, bookfun); //运行方法,在tree中生成树状图 } /* json的删除方法 json {arr} 要处理的arrjson对象 pid {String} 要删除的id */ U.MD.UI.BTree.jsonDelete = function (json, pid) { for (var _i = 0; _i < json.length; _i++) {//定义循环,循环对象为json if (json[_i].id == pid) {//进行判断,判断json[_i]是否为目标pid json.splice(_i, 1); //删除 return json; //返回json } else { if (json[_i].child) {//如果有child json[_i].child = U.MD.UI.BTree.jsonDelete(json[_i].child, pid); //重复调用方法 } } } return json; //返回json } /* json的搜索方法 json {arr} 要处理的arrjson对象 id {String} 要删除的id */ U.MD.UI.BTree.jsonSelectA = function (json, id) { for (var _i = 0; _i < json.length; _i++) {//定义循环,循环对象为json if (json[_i].id == id) {//进行判断,判断json[_i]是否为目标pid return json[_i]; //返回目标 } if (json[_i].child) {//如果有child var _return = U.MD.UI.BTree.jsonSelectA(json[_i].child, id); //重复调用方法 if (_return) {//当返回有值 return _return; //返回结果 } } } return false; } /* json的修改方法 json {arr} 要处理的arrjson对象 upjson {json}要插入的json */ U.MD.UI.BTree.jsonUpdate = function (json, upjson) { for (var _i = 0; _i < json.length; _i++) {//定义循环,循环对象为json if (json[_i].id == upjson.id) {//进行判断,判断json[_i]是否为目标pid json[_i] = upjson; //进行替换 return json; //返回json } if (json[_i].child) {//如果有child var _return = U.MD.UI.BTree.jsonUpdate(json[_i].child, upjson); //重复调用方法 if (_return) {//当返回有值 json[_i].child = _return; return json; //返回结果 } } } return false; } /* 搜索arr中最高的id方法 arr {arr} 要搜索的arr对象 */ U.MD.UI.BTree.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.editor"); /* 默认编辑器,嵌入到指定元素内 * @param parent {element} 创建在指定的父亲元素 * @param callback {function} 非必传 操作处理函数 * 操作处理函数 该函数默认第一个参数为操作记录。 * 格式形如 : { updateLine : [修改行ID, 修改行ID,], addLine : [添加行ID], deleteLine : [删除行ID] } * */ U.MD.UI.Editor = U.MD.UI.editor = function (parent, callback) { U.UF.DL.asynLoadCss({ "rel": "stylesheet", "type": "text/css", "href": "/css/Controls/Complex/Editor.css" }); // parent.innerHTML = ''; //清空区域内容 //!$(parent).find($('.editorBar'))[0] ? "" : U.selectEl('.editorBar').remove(); //_div = $$("div", { "className": "editorBar" }, parent); //创建div U.MD.UI.editor.createEditor(parent); //创建编辑区域 U.UF.E.initEditor($('.editor', parent)[0], callback); //初始化编辑区域 U.MD.UI.editor.EditorEventBind(parent); //绑定事件 U.MD.UI.editor.operateJson.editor = U.selectEl('.editor', parent)[0]; //把编辑区域赋值给editor return U.MD.UI.editor.operateJson; //返回可操作集合 } U.MD.UI.editor.operateJson = { /* * U.MD.UI.editor.loadContent 加载编辑器内容 * param1 text(str) 需要加载的文本内容 * */ loadContent: function (text) { this.editor.focus(); U.UF.E.onpaste(null, this.editor, text); // var _div = $$("div", { innerHTML: text, style: { display: "none"} }, document.body); // var _pdiv = U.UF.E.unifiedFormat(_div); // var _range = U.UF.E.getRangeAt(); // var _block = U.UF.E.getLineElement(_range.startContainer); // for (var i = 0; i < _pdiv.children.length; i++) { // _block.parentElement.appendChild(_pdiv.children[i]); // } // U.selectEl(_block).remove(); // U.selectEl(_div).remove(); }, /* * U.MD.UI.editor.getContent 得到编辑器内容 * */ getContent: function () { return this.editor.innerHTML; //直接返回编辑区域的内容 } }; /* U.MD.UI.editor.CreateEditor 创建HTML内容 param1 parent(elemt)父元素 */ U.MD.UI.editor.createEditor = function (parent) { parent.innerHTML = "
\n" + " \n" + " \n" + " \n" + "\n" + " \n" + "
" + " \n" + "\n" + " \n" + "
" + " \n" + "\n" + " \n" + " \n" + " \n" + " \n" + "\n" + " \n" + "
\n" + " \n" + " \n" + "
\n" + " \n" + "\n" + " \n" + "
\n" + " \n" + " \n" + "
\n" + " \n" + "\n" + " \n" + " \n" + " \n" + " \n" + " \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");; /// ;