usky.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784
  1. /**
  2. * UskyJS
  3. * Create By yaoqiang2003@126.com
  4. */
  5. Date.prototype.Format = function(fmt)
  6. { //author: meizz
  7. var o = {
  8. "M+" : this.getMonth()+1, //月份
  9. "d+" : this.getDate(), //日
  10. "h+" : this.getHours(), //小时
  11. "m+" : this.getMinutes(), //分
  12. "s+" : this.getSeconds(), //秒
  13. "q+" : Math.floor((this.getMonth()+3)/3), //季度
  14. "S" : this.getMilliseconds() //毫秒
  15. };
  16. if(/(y+)/.test(fmt))
  17. fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
  18. for(var k in o)
  19. if(new RegExp("("+ k +")").test(fmt))
  20. fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
  21. return fmt;
  22. }
  23. var removeDIV=function(id){
  24. var obj = document.getElementById(id);
  25. var parent = obj.parentNode;
  26. parent.removeChild(obj);
  27. }
  28. var setDivPosition = function(div,left,top){
  29. if(div!=null){
  30. div.style.position = 'absolute';
  31. div.style.top =(div.parentNode.offsetTop+ Number(top))+'px';
  32. div.style.left =(div.parentNode.offsetLeft+ Number(left))+'px';
  33. }
  34. };
  35. var maxZIndex = function(div){
  36. var max = 0;
  37. var divs = div.children;
  38. for(var n=0;n<divs.length;n++){
  39. if(divs[n].style.zIndex!=undefined){
  40. if(divs[n].style.zIndex>max)
  41. max = divs[n].style.zIndex;
  42. }
  43. }
  44. return Number(max);
  45. }
  46. var createSubMenu = function(div,items,target,dir){
  47. var mdiv = div;//document.createElement('div');
  48. for(var n=0;n<items.length;n++){
  49. var item = items[n];
  50. if(item.type=='leaf'){
  51. var link = document.createElement('a');
  52. if((item.disabled!=undefined)&&(item.disabled=='disabled')){
  53. link.setAttribute('class','dropdown-item disabled');
  54. link.setAttribute('disabled','');
  55. }else{
  56. link.setAttribute('class','dropdown-item');
  57. if(item.action!=undefined)
  58. link.setAttribute('onclick',item.action);
  59. }
  60. link.setAttribute('href',item.href);
  61. link.setAttribute('target',target);
  62. link.innerHTML=item.name;
  63. mdiv.appendChild(link);
  64. }else if(item.type=='logout'){
  65. var link = document.createElement('div');
  66. if((item.disabled!=undefined)&&(item.disabled=='disabled')){
  67. link.setAttribute('class','dropdown-item disabled');
  68. link.setAttribute('disabled','');
  69. }else{
  70. link.setAttribute('class','dropdown-item');
  71. if(item.action!=undefined)
  72. link.setAttribute('onclick',item.action);
  73. }
  74. link.setAttribute('onclick','window.parent.document.location="'+baseUrl+'"');
  75. link.innerHTML=item.name;
  76. mdiv.appendChild(link);
  77. }else if(item.type=='checkbox'){
  78. var table = document.createElement('table');
  79. table.setAttribute('border',0);
  80. mdiv.appendChild(table);
  81. var tr = document.createElement('tr');
  82. table.appendChild(tr);
  83. var td1 = document.createElement('td');
  84. td1.setAttribute('item_id',item.id);
  85. if((item.disabled!=undefined)&&(item.disabled=='disabled')){
  86. td1.setAttribute('class','gray');
  87. td1.setAttribute('disabled','');
  88. }else{
  89. td1.setAttribute('onclick',item.action);
  90. }
  91. td1.setAttribute('style','width:32px;height:32px;background:url('+baseUrl+'res/img/common/'+(item.checked=='checked'?'check.gif':'uncheck.gif')+');background-repeat:no-repeat;background-position:center;');
  92. tr.appendChild(td1);
  93. var td2 = document.createElement('td');
  94. td2.setAttribute('item_id',item.id);
  95. td2.innerHTML=item.name;
  96. if((item.disabled!=undefined)&&(item.disabled=='disabled')){
  97. td2.setAttribute('disabled','');
  98. }else{
  99. td2.setAttribute('style','cursor:pointer;');
  100. td2.setAttribute('onclick',item.action);
  101. }
  102. tr.appendChild(td2);
  103. }else if(item.type=='group'){
  104. var subdiv = document.createElement('div');
  105. subdiv.setAttribute('class','dropdown '+dir+' dropdown-submenu');
  106. mdiv.appendChild(subdiv);
  107. var link = document.createElement('a');
  108. link.setAttribute('class','dropdown-item dropdown-toggle');
  109. link.innerHTML=item.name;
  110. subdiv.appendChild(link);
  111. var s_div = document.createElement('div');
  112. s_div.setAttribute('class','dropdown-menu');
  113. subdiv.appendChild(s_div);
  114. if(item.items!=undefined){
  115. createSubMenu(s_div,item.items,target,dir);
  116. }
  117. }
  118. }
  119. }
  120. var UNote = function(){
  121. this.id='';
  122. this.isMoving=false;
  123. this.config={
  124. title:'Title',
  125. titleColor:'#ffffff',
  126. titleBackgroundColor:'rgba(255,255,255,0.2)',
  127. backgroundColor:'rgba(255,255,255,0.1)',
  128. border:'1px solid #ffffff',
  129. borderRadius:'5px',
  130. position:'absolute',
  131. width:400,
  132. hieght:100,
  133. bottom:-100,
  134. right:100,
  135. zIndex:990,
  136. bodyText:'Test'
  137. }
  138. this.create=function(id,parentid,config){
  139. var found = false;
  140. var titlebar;
  141. var title_text;
  142. var close_icon;
  143. var body_html;
  144. if((id==undefined)||(parentid==undefined))
  145. return;
  146. if(config!=undefined)
  147. this.config=config;
  148. this.id=id;
  149. var parent = document.getElementById(parentid);
  150. if(parent==undefined)
  151. return;
  152. var self = document.getElementById(id);
  153. if(self!=undefined){
  154. if(self.parentNode!=parent){
  155. removeDIV(id);
  156. }else
  157. found = true;
  158. }
  159. if(!found){
  160. self = document.createElement('div');
  161. self.setAttribute('id',this.id);
  162. self.setAttribute('nativeheight',this.config.height);
  163. self.setAttribute('floding','false');
  164. self.setAttribute('flodable','false');
  165. parent.appendChild(self);
  166. title = document.createElement('div');
  167. title.setAttribute('id',this.id+'_titlebar');
  168. self.appendChild(title);
  169. body_html = document.createElement('div');
  170. body_html.setAttribute('id',this.id+'_bodytext');
  171. self.appendChild(body_html);
  172. body_html.innerHTML=this.config.bodyText;
  173. var table = document.createElement('table');
  174. table.border='0';
  175. table.style.border='0px solid #000';
  176. title.appendChild(table);
  177. var tr = document.createElement('tr');
  178. table.appendChild(tr);
  179. title_text = document.createElement('td');
  180. title_text.setAttribute('id',this.id+'_titlebar_text');
  181. title_text.setAttribute('widget_id',this.id);
  182. title_text.innerHTML=this.config.title;
  183. tr.appendChild(title_text);
  184. close_icon = document.createElement('td');
  185. close_icon.setAttribute('id',this.id+'_titlebar_close_icon');
  186. close_icon.innerHTML='<div style="width:16px;height:16px;background-image:url(../../res/img/common/close-tmp.gif)"></div>';
  187. close_icon.setAttribute('widget_id',this.id);
  188. close_icon.setAttribute('nativeBackgroundColor',this.config.titleBackgroundColor);
  189. close_icon.setAttribute('nativeColor',this.config.titleColor);
  190. tr.appendChild(close_icon);
  191. close_icon.onclick=function(){
  192. removeDIV('"'+this.widget_id+'"');
  193. }
  194. }
  195. var stylestr = 'width:'+this.config.width+'px;height:'+this.config.height+'px;position:'+this.config.position+((this.config.top!=undefined)?(';top:'+this.config.top+'px;'):(';bottom:'+this.config.bottom+'px;'))+((this.config.left!=undefined)?('left:'+this.config.left+'px;'):('right:'+this.config.right+'px;'))+'border:'+this.config.border+';border-radius:'+this.config.borderRadius+";background-color:"
  196. +this.config.backgroundColor+";display:none;z-index:"+this.config.zIndex+';overflow:hidden;background-image:'+this.config.backgroundImage+';'
  197. self.setAttribute('style',stylestr);
  198. title.setAttribute('style','width:'+(this.config.width-2)+'px;height:24px;position:absolute;top:0px;left:0px;background-color:'+this.config.titleBackgroundColor+';padding:5px 0px 0px 10px;border-radius:'+this.config.borderRadius+' '+this.config.borderRadius+' 0px 0px;font-size:11px;font-weight:bold;z-index:'+(this.config.zIndex+500)+';');
  199. body_html.setAttribute('style','width:'+(this.config.width-2)+'px;height:'+(this.config.height-26)+'px;position:absolute;top:24px;left:0px;padding:10px;border-radius:0px 0px '+this.config.borderRadius+' '+this.config.borderRadius+';z-index:0;');
  200. title_text.setAttribute('style','width:'+(this.config.width-30)+'px;color:'+this.config.titleColor+';overflow:hidden;cursor:pointer;font-size:12pt;font-weight:bold;');
  201. close_icon.setAttribute('style','color:'+this.config.titleBackgroundColor+';font-weight:bold;cursor:pointer;width:28px;text-align:center;');
  202. }
  203. this.setTitle=function(text){
  204. this.config.title=text;
  205. var title = document.getElementById(this.id+'_titlebar_text');
  206. if(title!=undefined)
  207. title.innerHTML=this.config.title;
  208. }
  209. this.setBody=function(text){
  210. this.config.bodyText=text;
  211. var bodyHtml = document.getElementById(this.id+'_bodytext');
  212. if(bodyHtml!=undefined)
  213. bodyHtml.innerHTML=this.config.bodyText;
  214. }
  215. this.show=function(){
  216. var self = document.getElementById(this.id);
  217. if(self!=undefined)
  218. self.style.display='block';
  219. }
  220. }
  221. var UWindow = function(){
  222. this.id='';
  223. this.isMoving=false;
  224. this.config={
  225. title:'Title',
  226. titleColor:'#ffffff',
  227. titleIconColor:'#ffffff',
  228. titleBackgroundColor:'rgba(255,255,255,0.2)',
  229. backgroundColor: 'rgba(255,255,255,0.1)',
  230. border: '1px solid #ffffff',
  231. borderRadius:'5px',
  232. position:'absolute',
  233. width:400,
  234. height:300,
  235. top:0,
  236. left:0,
  237. zIndex:200,
  238. bodyText:'测试内容'
  239. }
  240. this.create=function(id,parentid,config){
  241. var found = false;
  242. var titlebar;
  243. var title_text;
  244. var close_icon;
  245. var body_html;
  246. if((id==undefined)||(parentid==undefined))
  247. return;
  248. if(config!=undefined)
  249. this.config=config;
  250. this.id=id;
  251. var parent = document.getElementById(parentid);
  252. if(parent==undefined)
  253. return;
  254. var self = document.getElementById(id);
  255. if(self!=undefined){
  256. if(self.parentNode!=parent){
  257. removeDIV(id);
  258. }else
  259. found = true;
  260. }
  261. if(!found){
  262. self = document.createElement('div');
  263. self.setAttribute('id',this.id);
  264. self.setAttribute('nativeheight',this.config.height);
  265. self.setAttribute('floding','false');
  266. self.setAttribute('flodable','false');
  267. parent.appendChild(self);
  268. title = document.createElement('div');
  269. title.setAttribute('id',this.id+'_titlebar');
  270. self.appendChild(title);
  271. body_html = document.createElement('div');
  272. body_html.setAttribute('id',this.id+'_bodytext');
  273. self.appendChild(body_html);
  274. body_html.innerHTML=this.config.bodyText;
  275. var table = document.createElement('table');
  276. table.border='0';
  277. table.style.border='0px solid #000';
  278. title.appendChild(table);
  279. var tr = document.createElement('tr');
  280. table.appendChild(tr);
  281. title_text = document.createElement('td');
  282. title_text.setAttribute('id',this.id+'_titlebar_text');
  283. title_text.setAttribute('widget_id',this.id);
  284. title_text.innerHTML=this.config.title;
  285. tr.appendChild(title_text);
  286. close_icon = document.createElement('td');
  287. close_icon.setAttribute('id',this.id+'_titlebar_close_icon');
  288. close_icon.innerHTML='▲';
  289. close_icon.setAttribute('widget_id',this.id);
  290. close_icon.setAttribute('nativeBackgroundColor',this.config.titleBackgroundColor);
  291. close_icon.setAttribute('nativeColor',this.config.titleColor);
  292. tr.appendChild(close_icon);
  293. close_icon.onclick=function(){
  294. var id = this.getAttribute('widget_id');
  295. var floding = $("#"+id).attr('floding');
  296. if(floding=='true'){
  297. $("#"+id+'_titlebar_close_icon').html('▲');
  298. $("#"+id).attr('floding','false');
  299. $("#"+id).attr('flodable','false');
  300. $("#"+id+"-title-hiden").css({
  301. display:'none'
  302. });
  303. $("#"+id+"-label-hidden").css({
  304. display:"none"
  305. });
  306. $("#"+id).animate({
  307. height:($("#"+id).attr('nativeheight')+'px')
  308. },250);
  309. }else{
  310. $("#"+id+'_titlebar_close_icon').html('▼');
  311. $("#"+id).attr('floding','true');
  312. $("#"+id).attr('flodable','true');
  313. $("#"+id+"-title-hiden").css({
  314. display:'block'
  315. });
  316. $("#"+id+"-label-hidden").css({
  317. display:"block"
  318. });
  319. $("#"+id).animate({
  320. height:'34px'
  321. },250);
  322. }
  323. }
  324. title_text.onmouseover=function(){
  325. var id = this.getAttribute('widget_id');
  326. var floding = $("#"+id).attr('floding');
  327. var flodable = $("#"+id).attr('flodable');
  328. if(flodable=='true'){
  329. if(floding=='true'){
  330. $("#"+id).animate({
  331. height:($("#"+id).attr('nativeheight')+'px')
  332. },250);
  333. }
  334. }
  335. }
  336. title_text.onmouseout=function(){
  337. var id = this.getAttribute('widget_id');
  338. var floding = $("#"+id).attr('floding');
  339. var flodable = $("#"+id).attr('flodable');
  340. if(flodable=='true'){
  341. if(floding=='false'){
  342. $("#"+id).animate({
  343. height:'34px'
  344. },250);
  345. }
  346. }
  347. }
  348. }
  349. var stylestr = 'width:'+this.config.width+'px;height:'+this.config.height+'px;position:'+this.config.position+((this.config.top!=undefined)?(';top:'+this.config.top+'px;'):(';bottom:'+this.config.bottom+'px;'))+((this.config.left!=undefined)?('left:'+this.config.left+'px;'):('right:'+this.config.right+'px;'))+'border:'+this.config.border+';border-radius:'+this.config.borderRadius+";background-color:"
  350. +this.config.backgroundColor+";display:none;z-index:"+this.config.zIndex+';overflow:hidden;background-image:'+this.config.backgroundImage+';'
  351. self.setAttribute('style',stylestr);
  352. title.setAttribute('style','width:'+(this.config.width-2)+'px;height:24px;position:absolute;top:0px;left:0px;background-color:'+this.config.titleBackgroundColor+';padding:5px 0px 0px 10px;border-radius:'+this.config.borderRadius+' '+this.config.borderRadius+' 0px 0px;font-size:11px;font-weight:bold;z-index:'+(this.config.zIndex+500)+';');
  353. body_html.setAttribute('style','width:'+(this.config.width-2)+'px;height:'+(this.config.height-26)+'px;position:absolute;top:24px;left:0px;padding:10px;border-radius:0px 0px '+this.config.borderRadius+' '+this.config.borderRadius+';z-index:0;');
  354. title_text.setAttribute('style','width:'+(this.config.width-30)+'px;color:'+this.config.titleColor+';overflow:hidden;cursor:pointer;font-size:12pt;font-weight:bold;');
  355. close_icon.setAttribute('style','color:'+this.config.titleBackgroundColor+';font-weight:bold;cursor:pointer;width:28px;text-align:center;');
  356. title_text.onmousedown=function(e){
  357. var e = e || window.event;
  358. var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
  359. var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
  360. var boxX = pageX - self.offsetLeft;
  361. var boxY = pageY - self.offsetTop;
  362. document.onmousemove = function(e){
  363. var e = e || window.event;
  364. var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
  365. var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
  366. self.style.left = pageX - boxX +'px';
  367. self.style.top = pageY - boxY + 'px';
  368. }
  369. document.onmouseup = function () {
  370. document.onmousemove = null;
  371. };
  372. }
  373. title_text.onmouseover=function(){
  374. self.style.zIndex = maxZIndex(self.parentNode)+1;
  375. var id = this.getAttribute('widget_id');
  376. var color = $("#"+id+"_titlebar_close_icon").attr('nativeColor');
  377. $("#"+id+"_titlebar_close_icon").css('color',color);
  378. $("#"+id).attr('BorderSet', $("#"+id).css('border'));
  379. $("#"+id).css({
  380. border:'1px solid #007bff'
  381. });
  382. }
  383. title_text.onmouseout=function(){
  384. var id = this.getAttribute('widget_id');
  385. var color = $("#"+id+"_titlebar_close_icon").attr('nativeBackgroundColor');
  386. $("#"+id+"_titlebar_close_icon").css('color',color);
  387. $("#"+id).css({
  388. border: $("#"+id).attr('BorderSet')
  389. });
  390. }
  391. close_icon.onmouseover=function(){
  392. self.style.zIndex = maxZIndex(self.parentNode)+1;
  393. var id = this.getAttribute('id');
  394. var color = $("#"+id).attr('nativeColor');
  395. $("#"+id).css('color',color);
  396. $("#"+this.getAttribute('widget_id')).attr('BorderSet', $("#"+id).css('border'));
  397. $("#"+this.getAttribute('widget_id')).css({
  398. border:'1px solid #007bff'
  399. });
  400. }
  401. close_icon.onmouseout=function(){
  402. var id = this.getAttribute('id');
  403. var color = $("#"+id).attr('nativeBackgroundColor');
  404. $("#"+id).css('color',color);
  405. $("#"+this.getAttribute('widget_id')).css({
  406. border: $("#"+this.getAttribute('widget_id')).attr('BorderSet')
  407. });
  408. }
  409. if((this.config.floding!=undefined)&&(this.config.floding=='true')){
  410. $("#"+id+'_titlebar_close_icon').html('▼');
  411. $("#"+id).attr('floding','true');
  412. $("#"+id).attr('flodable','true');
  413. $("#"+id).css({
  414. height:'34px'
  415. });
  416. $("#"+id+"-title-hiden").css({
  417. display:'block'
  418. });
  419. $("#"+id+"-label-hidden").css({
  420. display:"block"
  421. });
  422. }
  423. }
  424. this.setTitle=function(text){
  425. this.config.title=text;
  426. var title = document.getElementById(this.id+'_titlebar_text');
  427. if(title!=undefined)
  428. title.innerHTML=this.config.title;
  429. }
  430. this.setBody=function(text){
  431. this.config.bodyText=text;
  432. var bodyHtml = document.getElementById(this.id+'_bodytext');
  433. if(bodyHtml!=undefined)
  434. bodyHtml.innerHTML=this.config.bodyText;
  435. }
  436. this.show=function(){
  437. var self = document.getElementById(this.id);
  438. if(self!=undefined)
  439. self.style.display='block';
  440. }
  441. }
  442. var UTabBar = function(){
  443. var found = false;
  444. this.id='';
  445. this.isflodable=true;
  446. this.isfloding=false;
  447. this.config={
  448. title:'Title',
  449. titleColor:'#ffffff',
  450. titleBackgroundColor:'rgba(255,255,255,0.2)',
  451. backgroundColor: 'rgba(255,255,255,0.1)',
  452. dockside:'left',
  453. border: '1px solid #ffffff',
  454. borderRadius:'5px',
  455. position:'absolute',
  456. top:500,
  457. width:400,
  458. height:300,
  459. zIndex:200,
  460. bodyText:'测试内容'
  461. }
  462. this.create=function(id,parentid,config){
  463. var title_text;
  464. var close_icon;
  465. if((id==undefined)||(parentid==undefined))
  466. return;
  467. if(config!=undefined)
  468. this.config=config;
  469. this.id=id;
  470. if((this.config.dockside!='right')&&(this.config.dockside!='left'))
  471. return;
  472. var parent = document.getElementById(parentid);
  473. if(parent==undefined)
  474. return;
  475. var self = document.getElementById(id);
  476. if(self!=undefined){
  477. if(self.parentNode!=parent){
  478. removeDIV(id);
  479. }else
  480. found = true;
  481. }
  482. if(!found){
  483. self = document.createElement('div');
  484. self.setAttribute('id',this.id);
  485. self.setAttribute('flodable','false');
  486. self.setAttribute('floding','false');
  487. self.setAttribute('nativewidth',this.config.width);
  488. parent.appendChild(self);
  489. title = document.createElement('div');
  490. title.setAttribute('id',this.id+'_titlebar');
  491. self.appendChild(title);
  492. close_icon = document.createElement('div');
  493. close_icon.setAttribute('id',this.id+'_titlebar_close_icon');
  494. if(this.config.dockside=='left')
  495. close_icon.innerHTML='◄';
  496. else
  497. close_icon.innerHTML='►';
  498. close_icon.setAttribute('nativeBackgroundColor',this.config.titleBackgroundColor);
  499. close_icon.setAttribute('nativeColor',this.config.titleColor);
  500. close_icon.setAttribute('widget_id',this.id);
  501. title.appendChild(close_icon);
  502. close_icon.setAttribute('style','position:absolute;top:0px;left:0px;width:24px;height:24px;padding:3px;cursor:pointer;color:'+this.config.titleBackgroundColor+';')
  503. title_text = document.createElement('div');
  504. title_text.setAttribute('id',this.id+'_titlebar_text');
  505. title_text.setAttribute('widget_id',this.id);
  506. title.appendChild(title_text);
  507. title_text.setAttribute('style','position:absolute;top:24px;left:0px;width:24px;height:'+(this.config.height-26)+'px;padding:10px 3px;cursor:pointer;')
  508. body_html = document.createElement('div');
  509. body_html.setAttribute('id',this.id+'_bodytext');
  510. self.appendChild(body_html);
  511. title_text.innerHTML=this.config.title;
  512. body_html.innerHTML=this.config.bodyText;
  513. close_icon.onclick=function(){
  514. var flodable = self.getAttribute('flodable');
  515. var floding = self.getAttribute('floding');
  516. if(floding=='true'){
  517. var id = this.getAttribute('widget_id');
  518. $("#"+id).attr('flodable','false');
  519. $("#"+id).attr('floding','false');
  520. if($("#"+id).css('left')=='0px')
  521. $("#"+id+'_titlebar_close_icon').html('◄');
  522. else
  523. $("#"+id+'_titlebar_close_icon').html('►');
  524. $("#"+id).animate({
  525. width:($("#"+id).attr('nativewidth')+'px')
  526. },250);
  527. }else{
  528. var id = this.getAttribute('widget_id');
  529. $("#"+id).attr('flodable','true');
  530. $("#"+id).attr('floding','true');
  531. if($("#"+id).css('left')=='0px')
  532. $("#"+id+'_titlebar_close_icon').html('►');
  533. else
  534. $("#"+id+'_titlebar_close_icon').html('◄');
  535. $("#"+id).animate({
  536. width:'24px'
  537. },250);
  538. }
  539. }
  540. close_icon.onmouseover=function(){
  541. var id = this.getAttribute('id');
  542. var color = $("#"+id).attr('nativeColor');
  543. $("#"+id).css('color',color);
  544. }
  545. close_icon.onmouseout=function(){
  546. var id = this.getAttribute('id');
  547. var color = $("#"+id).attr('nativeBackgroundColor');
  548. $("#"+id).css('color',color);
  549. }
  550. title_text.onmouseover=function(){
  551. var flodable = self.getAttribute('flodable');
  552. var floding = self.getAttribute('floding');
  553. var id = this.getAttribute('widget_id');
  554. if(flodable=='true'){
  555. if(floding=='true'){
  556. $("#"+id).attr('floding','false');
  557. $("#"+id).animate({
  558. width:($("#"+id).attr('nativewidth')+'px')
  559. },250);
  560. }
  561. }
  562. var color = $("#"+id+"_titlebar_close_icon").attr('nativeColor');
  563. $("#"+id+"_titlebar_close_icon").css('color',color);
  564. self.style.zIndex = maxZIndex(self.parentNode)+1;
  565. }
  566. title_text.onmouseout=function(){
  567. var flodable = self.getAttribute('flodable');
  568. var floding = self.getAttribute('floding');
  569. var id = this.getAttribute('widget_id');
  570. if(flodable=='true'){
  571. if(floding=='false'){
  572. $("#"+id).attr('floding','true');
  573. $("#"+id).animate({
  574. width:'24px'
  575. },250);
  576. }
  577. }
  578. var color = $("#"+id+"_titlebar_close_icon").attr('nativeBackgroundColor');
  579. $("#"+id+"_titlebar_close_icon").css('color',color);
  580. }
  581. title_text.onmousedown=function(e){
  582. var e = e || window.event;
  583. var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
  584. var boxY = pageY - self.offsetTop;
  585. document.onmousemove = function(e){
  586. var e = e || window.event;
  587. var pageY = e.pageY || e.clientY + document.documentElement.scrollTop;
  588. self.style.top = pageY - boxY + 'px';
  589. }
  590. document.onmouseup = function () {
  591. document.onmousemove = null;
  592. };
  593. }
  594. }
  595. self.setAttribute('style','width:'+this.config.width+'px;height:'+this.config.height+'px;position:absolute;top:'+this.config.top+'px;overflow:hidden;'
  596. +((this.config.dockside=='left')?'left:0px;':(this.config.dockside=='right')?'right:0px;':'')+'background-color:'+this.config.backgroundColor+';'
  597. +'border:'+this.config.border+';border-radius:0px '+this.config.borderRadius+' '+this.config.borderRadius+' 0px;display:none;z-index:'+this.config.zIndex+';');
  598. if(this.config.dockside=='left'){
  599. title.setAttribute('style','text-align:center;width:24px;height:'+this.config.height+'px;position:absolute;left:0px;top:0px;background-color:'+this.config.titleBackgroundColor+';color:'+this.config.titleColor+';overflow:hidden;font-size:11px;font-weight:bold;');
  600. body_html.setAttribute('style','width:'+(this.config.width-26)+'px;height:'+this.config.height+'px;padding:10px;position:absolute;left:24px;top:0px;border:'+this.config.border+';border-radius:0px '+this.config.borderRadius+' '+this.config.borderRadius+' 0px;border-width:1px;border-style:solid;border-top-color:#707070;border-right-color:#e0e0e0;border-bottom-color:#e0e0e0;border-left-color:#707070;border-radius:0px '+this.config.borderRadius+' '+this.config.borderRadius+' 0px;')
  601. }else if(this.config.dockside=='right'){
  602. title.setAttribute('style','text-align:center;width:24px;height:'+this.config.height+'px;position:absolute;right:0px;top:0px;background-color:'+this.config.titleBackgroundColor+';color:'+this.config.titleColor+';overflow:hidden;font-size:11px;font-weight:bold;');
  603. body_html.setAttribute('style','width:'+(this.config.width-26)+'px;height:'+this.config.height+'px;padding:10px;position:absolute;right:24px;top:0px;border:'+this.config.border+';border-radius:0px '+this.config.borderRadius+' '+this.config.borderRadius+' 0px;border-width:1px;border-style:solid;border-top-color:#707070;border-right-color:#e0e0e0;border-bottom-color:#e0e0e0;border-left-color:#707070;border-radius:0px '+this.config.borderRadius+' '+this.config.borderRadius+' 0px;')
  604. }
  605. }
  606. this.setTitle=function(text){
  607. this.config.title=text;
  608. var title_text = document.getElementById(this.id+'_titlebar_text');
  609. if(title_text!=undefined)
  610. title_text.innerHTML=this.config.title;
  611. }
  612. this.setBody=function(text){
  613. this.config.bodyText=text;
  614. var bodyHtml = document.getElementById(this.id+'_bodytext');
  615. if(bodyHtml!=undefined)
  616. bodyHtml.innerHTML=this.config.bodyText;
  617. }
  618. this.show=function(){
  619. var self = document.getElementById(this.id);
  620. if(self!=undefined)
  621. self.style.display='block';
  622. }
  623. this.hide=function(){
  624. var self = document.getElementById(this.id);
  625. if(self!=undefined)
  626. self.style.display='none';
  627. }
  628. }
  629. var UMenuBar = function(){
  630. this.config={
  631. id:'menubar',
  632. target:'mainframe',
  633. brand_icon:{
  634. url:'logo.png',
  635. width:160,
  636. height:20
  637. },
  638. items:[{
  639. name:'菜单组一',
  640. type:'group',
  641. side:'left',
  642. items:[{
  643. name:'菜单一',
  644. type:'leaf',
  645. href:'http://www.baidu.com'
  646. },{
  647. name:'菜单二',
  648. type:'leaf',
  649. href:'http://www.yahoo.com'
  650. }]
  651. },{
  652. name:'菜单三',
  653. type:'leaf',
  654. side:'split',
  655. href:'http://www.sohu.com'
  656. },{
  657. name:'菜单组二',
  658. type:'group',
  659. side:'right',
  660. items:[{
  661. name:'菜单四',
  662. type:'leaf',
  663. href:'http://www.baidu.com'
  664. },{
  665. name:'菜单五',
  666. type:'leaf',
  667. href:'http://www.yahoo.com'
  668. }]
  669. }]
  670. }
  671. this.create=function(config){
  672. if(config!=undefined)
  673. this.config = config;
  674. var mroot = document.getElementById(this.config.id);
  675. if(mroot==undefined)
  676. return;
  677. var nav = document.createElement('nav');
  678. nav.setAttribute('class','navbar navbar-expand-md navbar-dark bg-dark');
  679. mroot.appendChild(nav);
  680. if(this.config.brand_icon!=undefined){
  681. var link = document.createElement('a');
  682. link.href='#';
  683. link.setAttribute('class','navbar-brand');
  684. link.setAttribute('style','margin-top:-15px;')
  685. nav.appendChild(link);
  686. var brand_icon = document.createElement('img');
  687. brand_icon.src=this.config.brand_icon.url;
  688. brand_icon.width=this.config.brand_icon.width;
  689. brand_icon.height=this.config.brand_icon.height;
  690. brand_icon.setAttribute('style','opacity:0.4;filter:alpha(opacity=40);')
  691. link.appendChild(brand_icon);
  692. var btn = document.createElement('button');
  693. btn.setAttribute('class','navbar-toggler');
  694. btn.setAttribute('type','button');
  695. btn.setAttribute('data-toggle','collapse');
  696. btn.setAttribute('data-target','.navbar-collapse');
  697. nav.appendChild(btn);
  698. var span = document.createElement('span');
  699. span.setAttribute('class','navbar-toggler-icon');
  700. btn.appendChild(span);
  701. }
  702. if(this.config.items!=undefined){
  703. var menus = this.config.items;
  704. var div = document.createElement('div');
  705. div.setAttribute('class','collapse navbar-collapse');
  706. nav.appendChild(div);
  707. for(var n=0;n<menus.length;n++){
  708. var ul = document.createElement('ul');
  709. if((menus[n].side!=undefined)&&(menus[n].side=='split'))
  710. ul.setAttribute('class','navbar-nav mr-auto');
  711. else
  712. ul.setAttribute('class','navbar-nav');
  713. div.appendChild(ul);
  714. if(menus[n].type=='leaf'){
  715. var li = document.createElement('li');
  716. li.setAttribute('class','nav-item');
  717. ul.appendChild(li);
  718. var link = document.createElement('a');
  719. if((menus[n].disabled!=undefined)&&(menus[n].disabled=='disabled')){
  720. link.setAttribute('class','nav-link disabled');
  721. link.setAttribute('disabled','');
  722. }else{
  723. link.setAttribute('class','nav-link');
  724. if(menus[n].action!=undefined)
  725. link.setAttribute('onclick',menus[n].action);
  726. }
  727. link.setAttribute('target',this.config.target);
  728. link.setAttribute('href',menus[n].href);
  729. link.innerHTML=menus[n].name;
  730. li.appendChild(link);
  731. }else if(menus[n].type=='systitle_label'){
  732. var li = document.createElement('li');
  733. li.setAttribute('class','nav-item');
  734. ul.appendChild(li);
  735. var datediv = document.createElement('a');
  736. datediv.setAttribute('class','nav-link active');
  737. datediv.innerHTML='<span id="'+menus[n].divid+'" style="margin-top:-25px;font-size:14pt;font-weight:bold;">'+menus[n].name+'</span>';
  738. datediv.disabled='disabled';
  739. li.appendChild(datediv);
  740. }else if(menus[n].type=='systime_label'){
  741. var li = document.createElement('li');
  742. li.setAttribute('class','nav-item');
  743. ul.appendChild(li);
  744. var datediv = document.createElement('a');
  745. datediv.setAttribute('class','nav-link active');
  746. datediv.innerHTML='<span id="'+menus[n].divid+'">'+(new Date()).Format("yyyy-MM-dd hh:mm:ss")+'</span>';
  747. datediv.disabled='disabled';
  748. li.appendChild(datediv);
  749. }else if(menus[n].type=='group'){
  750. var dir = (menus[n].side=='right')?'dropleft':'dropright';
  751. var li = document.createElement('li');
  752. li.setAttribute('class','nav-item dropdown');
  753. ul.appendChild(li);
  754. var link = document.createElement('a');
  755. link.setAttribute('class','nav-link dropdown-toggle');
  756. link.setAttribute('data-toggle','dropdown');
  757. link.setAttribute('data-submenu','');
  758. link.innerHTML=menus[n].name;
  759. li.appendChild(link);
  760. var subdiv = document.createElement('div');
  761. if(menus[n].side=='right')
  762. subdiv.setAttribute('class','dropdown-menu dropdown-menu-right');
  763. else
  764. subdiv.setAttribute('class','dropdown-menu');
  765. li.appendChild(subdiv);
  766. if(menus[n].items!=undefined){
  767. createSubMenu(subdiv,menus[n].items,this.config.target,dir);
  768. }
  769. }
  770. }
  771. }
  772. }
  773. }
  774. var UDockBar = function(){
  775. }