ui.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. function hasKey(json, key) {
  2. if ($.isEmptyObject(json)) return false;
  3. if (json.hasOwnProperty(key)) {
  4. return true;
  5. } else {
  6. return false;
  7. };
  8. }
  9. //点击收起下拉框
  10. $(document).click(function () {
  11. $('.select').removeClass('in').children('ul').slideUp('fast');
  12. });
  13. window.ui = {
  14. //下拉框
  15. select : function (obj) {
  16. $.each(obj, function () {
  17. var _t = $(this);
  18. var div = _t.children('div');
  19. var input = _t.children('input');
  20. var ul = _t.find('ul');
  21. var span = _t.find('span');
  22. ul.not(ul.first()).each(function () {
  23. if($(this).children().length) $(this).prev('span').addClass('haschild').click(function () {
  24. event.stopPropagation();
  25. });
  26. })
  27. .children().each(function () {
  28. var t = $(this);
  29. var i = $('<i>└─ </i>');
  30. var ul = t.parentsUntil(_t, 'ul');
  31. t.children('span').prepend( i.css('margin-left', 20*(ul.length-2)) );
  32. });
  33. span.click(function () {
  34. var t = $(this);
  35. if (!t.hasClass('haschild')) {
  36. var html = t.clone();
  37. html.find('i').remove();
  38. htmlval = html.html();
  39. htmlrel = html.attr('rel');
  40. /*div.html(html);
  41. input.val(html);*/
  42. div.html(html);
  43. input.val(htmlrel);
  44. html=='请选择'?_t.removeClass('selected'):_t.addClass('selected');
  45. };
  46. });
  47. _t.click(function () {
  48. event.stopPropagation();
  49. $('.select').removeClass('in').children('ul').slideUp('fast');
  50. var t = $(this);
  51. var ul = t.children('ul');
  52. t.offset().top + t.outerHeight() + ul.outerHeight() - $(document).scrollTop() > $(window).height()?ul.addClass('top'):ul.removeClass('top');
  53. ul.is(':hidden')?(t.addClass('in'),ul.slideDown()):(t.removeClass('in'),ul.slideUp('fast'));
  54. });
  55. });
  56. },
  57. //表格
  58. table : function(obj) {
  59. if (ui.table.prototype) {
  60. ui.table.prototype.checked = function () {
  61. return obj.find('tbody tr:not(.last_tr) input[type=checkbox]:checked').parents('tr');
  62. }
  63. };
  64. obj.each(function () {
  65. var thead = $(this).find('thead');
  66. var tbody = $(this).find('tbody');
  67. var tr = tbody.find('tr').filter(function () {
  68. return !$(this).hasClass('last_tr');
  69. });
  70. var all_check = thead.find('input[type=checkbox]').add(tbody.find('.last_tr').find('input[type=checkbox]'));
  71. var check = tr.find('input[type=checkbox]');
  72. var sort = thead.find('.sort');
  73. check.click(function () {
  74. var t = $(this);
  75. t.is(':checked')?t.parents('tr').addClass('in'):t.parents('tr').removeClass('in');
  76. check.filter(':checked').length == tr.length?all_check.prop('checked', true):all_check.prop('checked', false);
  77. });
  78. all_check.click(function () {
  79. $(this).is(':checked')?(check.add(all_check).prop('checked', true),tr.addClass('in')):(check.add(all_check).prop('checked', false),tr.removeClass('in'));
  80. });
  81. tr.each(function (i) {
  82. $(this).attr('index', i);
  83. });
  84. sort.each(function () {
  85. $(this).children('span').append($('<div class="icon_sort"><i class="icon-sort-asc"></i><i class="icon-sort-desc"></i></div>'));
  86. })
  87. .click(function () {
  88. var t = $(this);
  89. var icon_sort = t.find('.icon_sort');
  90. var sort_rule = null;
  91. var arr = [];
  92. sort.not(t).find('.icon_sort').removeClass('asc desc')
  93. if (icon_sort.hasClass('asc')) {
  94. icon_sort.removeClass('asc').addClass('desc');
  95. sort_rule = 'desc';
  96. } else if(icon_sort.hasClass('desc')){
  97. icon_sort.removeClass('desc');
  98. }else{
  99. icon_sort.addClass('asc');
  100. sort_rule = 'asc';
  101. }
  102. if (sort_rule == null) {
  103. for (var i = 0; i < tr.length; i++) {
  104. tbody.prepend(tr.eq(tr.length-1-i));
  105. }
  106. } else {
  107. tr.each(function (i) {
  108. arr[i] = {};
  109. arr[i]['sort'] = $(this).children().eq(t.index()).html();
  110. arr[i]['index'] = $(this).attr('index');
  111. });
  112. arr.sort(function(x, y){
  113. return sort_rule == 'asc'?y['sort'].localeCompare(x['sort']):x['sort'].localeCompare(y['sort']);
  114. })
  115. for (var i = 0; i < arr.length; i++) {
  116. tbody.prepend(tr.eq(arr[i]['index']));
  117. }
  118. }
  119. });
  120. });
  121. },
  122. copy : function (obj) {
  123. if (window.getSelection) {
  124. var range = document.createRange();
  125. range.selectNode($(obj).prev()[0]);
  126. window.getSelection().removeAllRanges();
  127. window.getSelection().addRange(range);
  128. document.execCommand("Copy");
  129. }else if (window.clipboardData){
  130. window.clipboardData.setData('text',obj.innerHTML);
  131. }else{
  132. alert('浏览器不支持复制操作 请手动进行复制');
  133. }
  134. },
  135. mask : function (bool) {
  136. var obj = $('.mask');
  137. if (bool == false) {
  138. obj.remove();
  139. return false;
  140. };
  141. var div = $('<div class="mask"></div>');
  142. if (obj.length) {
  143. if (bool != true) obj.remove();
  144. }else{
  145. div.click(function () {
  146. $('.dialog').add(div).remove();
  147. });
  148. $('body').append(div);
  149. div.fadeTo('normal',0.7);
  150. };
  151. },
  152. prompt : function (bool, text) {
  153. if ($('.dialog').length > 0) return;
  154. ui.mask(true);
  155. var content = (bool == false)?'<i class="icon-exclamation-circle"></i><span class="text">请至少选择一个产品!</span>':'<i class="icon-check-circle"></i><span class="text">恭喜您,添加成功</span>';
  156. var div = $('<div class="dialog"><div class="dialog_tit"><span>系统提示</span><a class="dialog_close icon-cross" href="javascript:;"></a></div><div class="dialog_content ellipsis">'+content+'</div><div class="dialog_btn"><a class="dialog_confirm btn" href="javascript:;">确认</a></div></div>')
  157. if (text) div.find('.dialog_content').find('span').html(text);
  158. var dialog_close = div.find('.dialog_close');
  159. var dialog_confirm = div.find('.dialog_confirm');
  160. dialog_close.add(dialog_confirm).click(function () {
  161. div.remove();
  162. ui.mask(false);
  163. });
  164. $('body').append(div);
  165. div.fadeIn('fast');
  166. },
  167. dialog : function (json) {
  168. if ($('.dialog').length > 0) return;
  169. if (event.keyCode==13) return;
  170. ui.mask(true);
  171. var content = hasKey(json, 'text')?json.text:'<span class="text">删除后,您将无法恢复和常看该工单,请谨慎操作</span><p>您确认要删除该工单吗?</p>';
  172. var div = $('<div class="dialog dialog_prompt"><div class="dialog_tit"><span>系统提示</span><a class="dialog_close icon-cross" href="javascript:;"></a></div><div class="dialog_content ellipsis"><i class="icon-exclamation-circle"></i>'+content+'</div><div class="dialog_btn"><a class="dialog_cancel btn_aux" href="javascript:;">取消</a><a class="dialog_confirm btn" href="javascript:;">确认</a></div></div>')
  173. var dialog_close = div.find('.dialog_close');
  174. var dialog_cancel = div.find('.dialog_cancel');
  175. var dialog_confirm = div.find('.dialog_confirm');
  176. function close () {
  177. div.remove();
  178. ui.mask(false);
  179. };
  180. dialog_close.click(function () {
  181. close();
  182. });
  183. dialog_cancel.click(function () {
  184. close();
  185. if (hasKey(json, 'cancel') && typeof json.cancel == 'function') json.cancel();
  186. });
  187. dialog_confirm.click(function () {
  188. close();
  189. if (hasKey(json, 'confirm') && typeof json.confirm == 'function') json.confirm();
  190. });
  191. $('body').append(div);
  192. div.fadeIn('fast');
  193. },
  194. dialog_check : function (json) {
  195. if ($('.dialog').length > 0) return;
  196. ui.mask(true);
  197. var div = $('<div class="dialog dialog_prompt dialog_check"><div class="dialog_tit"><span>设置选项</span><a class="dialog_close icon-cross" href="javascript:;"></a></div><div class="dialog_content clearfix"><span class="dialog_check_tit">品牌</span><div class="dialog_check_box"><div class="dialog_check_content"><input type="text" name=""><a class="icon-plus-square" href="javascript:;"></a></div><p>点击 + 号输入选项名 , 再点击 + 号或回车完成添加</p></div></div><div class="dialog_btn"><a class="dialog_confirm btn" href="javascript:;">确认</a></div></div>')
  198. var dialog_close = div.find('.dialog_close');
  199. var dialog_confirm = div.find('.dialog_confirm');
  200. var dialog_plus = div.find('.icon-plus-square');
  201. var input = div.find('input');
  202. var arr = [];
  203. function close () {
  204. div.remove();
  205. ui.mask(false);
  206. };
  207. function push () {
  208. var val = input.val();
  209. var span = $('<span>'+input.val()+'<i></i></span>');
  210. span.children('i').click(function () {
  211. var parent = $(this).parent();
  212. var parent_text = parent.contents().filter(function() { return this.nodeType === 3; }).text();
  213. arr.splice($.inArray(parent_text, arr), 1);
  214. parent.remove();
  215. });
  216. if (val != '') {
  217. arr.push(val);
  218. input.before(span)
  219. };
  220. input.hide().val('');
  221. };
  222. dialog_close.on('click', close);
  223. dialog_confirm.click(function () {
  224. //console.log(arr);
  225. close();
  226. if (hasKey(json, 'confirm') && typeof json.confirm == 'function') json.confirm(arr);
  227. });
  228. dialog_plus.click(function () {
  229. if (input.is(':hidden')) {
  230. input.show().focus();
  231. } else {
  232. push ();
  233. }
  234. });
  235. input.keydown(function (event) {
  236. if (event.keyCode==13) push ();
  237. });
  238. $('body').append(div);
  239. div.fadeIn('fast');
  240. },
  241. sort : function (json) {
  242. var items = json.items || 'li';
  243. var not = json.not || '.close';
  244. window.getSelection().removeAllRanges();
  245. json.obj.on('mousedown', not, function (event) {
  246. event.stopPropagation();
  247. });
  248. json.obj.on('mousedown', items, function (event) {
  249. var t = $(this);
  250. function getscroll (fx) {
  251. var stop = 0;
  252. t.parents().each(function () {
  253. var num;
  254. if (fx == 'top') {
  255. num = $(this).scrollTop();
  256. };
  257. if (fx == 'left') {
  258. num = $(this).scrollLeft();
  259. };
  260. if (num != 0) {
  261. stop = num;
  262. return false;
  263. };
  264. });
  265. return stop;
  266. };
  267. var tWidth = t.outerWidth(),
  268. tHeight = t.outerHeight(),
  269. tLeft = t.position().left,
  270. tTop = t.position().top,
  271. tsLeft = tLeft + getscroll('left'),
  272. tsTop = tTop + getscroll('top'),
  273. sLeft = event.pageX - tsLeft,
  274. sTop = event.pageY - tsTop,
  275. index = t.index(),
  276. mbox = t.clone();
  277. t.css('visibility', 'hidden');
  278. mbox.css({
  279. position : 'absolute',
  280. opacity : 0.5,
  281. left : tsLeft,
  282. top : tsTop,
  283. width : tWidth
  284. });
  285. function move (event) {
  286. event.preventDefault()
  287. var mst = getscroll('top');
  288. var msl = getscroll('left');
  289. var left = event.pageX - sLeft,
  290. top = event.pageY - sTop;
  291. mbox.css({
  292. left : left,
  293. top : top
  294. });
  295. if ( top > (tTop + tHeight + mst) ) {
  296. t.next(items).after(t);
  297. tTop = t.position().top;
  298. };
  299. if ( (top + tHeight - mst) < tTop ) {
  300. t.prev(items).before(t);
  301. tTop = t.position().top;
  302. };
  303. if ( left > (tLeft + tWidth + msl) ) {
  304. t.next(items).after(t);
  305. tLeft = t.position().left;
  306. };
  307. if ( (left + tWidth - msl) < tLeft ) {
  308. t.prev(items).before(t);
  309. tLeft = t.position().left;
  310. };
  311. };
  312. function up () {
  313. $(this).off({
  314. 'mousemove' : move,
  315. 'mouseup' : up
  316. });
  317. mbox.remove();
  318. t.removeAttr('style');
  319. if (index != t.index() && typeof json.success == 'function') {
  320. json.success();
  321. };
  322. };
  323. $(document).on({
  324. 'mousemove': move,
  325. 'mouseup': up
  326. });
  327. t.parent().append(mbox);
  328. });
  329. },
  330. /*使用方法
  331. var throttled = ui.letter(function () {})
  332. $(window).scroll(throttled);
  333. */
  334. letter : function (fn) {
  335. if (typeof arguments[0] != 'function') return;
  336. fn();
  337. var times = typeof arguments[1] != 'number'?300:arguments[1];
  338. var timer = null;
  339. var st = new Date().getTime();
  340. return function () {
  341. var et = new Date().getTime();
  342. if (et - st < times) {
  343. clearTimeout(timer);
  344. timer = setTimeout(function () {
  345. //return fn.apply(this,arguments);
  346. fn();
  347. }, times);
  348. } else{
  349. clearTimeout(timer);
  350. st = et;
  351. fn();
  352. };
  353. };
  354. }
  355. };
  356. $.fn.imgAuto = function(co){
  357. $(this).each(function(){
  358. var t = $(this);
  359. t.css('opacity',0);
  360. var cover = t.attr('img-Auto')=='cover'||co?true:false;
  361. var img = new Image();
  362. img.src = t.attr('src');
  363. var _w = t.attr('width');
  364. var _h = t.attr('height');
  365. if (_w && _h) {
  366. var box = $('<div class="imgAuto_box"></div>');
  367. box.css({
  368. width:_w,
  369. height:_h,
  370. "text-align":'left',
  371. overflow:'hidden'
  372. })
  373. t.wrapAll(box);
  374. } else{
  375. var box = t.parent();
  376. };
  377. function move (){
  378. if (img.width>0 || img.height>0) {
  379. t.css({'display':'block','margin':0}).parent().css('overflow', 'hidden');
  380. var i_w = img.width;//原图宽
  381. var i_h = img.height;//原图高
  382. var b_w = box.width();//父元素宽
  383. var b_h = box.height();//父元素高
  384. var t_w = (b_h/i_h) * i_w;//实际显示的图片宽
  385. var t_h = (b_w/i_w) * i_h;//实际显示的图片高
  386. if ( i_w/i_h < b_w/b_h ) {
  387. if (cover) {
  388. t.css({'width':'100%','height':'auto'}).css('margin-top', -(t_h-b_h)/2);
  389. }else{
  390. t.css({'width':'auto','height':'100%'}).css('margin-left', (b_w-t_w)/2);
  391. };
  392. }else{
  393. if (cover) {
  394. t.css({'width':'auto','height':'100%'}).css('margin-left', -(t_w-b_w)/2);
  395. }else{
  396. t.css({'width':'100%','height':'auto'}).css('margin-top', (b_h-t_h)/2);
  397. };
  398. };
  399. }else{
  400. setTimeout(move);
  401. }
  402. };
  403. move();
  404. t.fadeTo(2000, 1);
  405. var throttled = ui.letter(move);
  406. $(window).resize(throttled);
  407. });
  408. return this;
  409. };