ligerLayout.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731
  1. /**
  2. * jQuery ligerUI 1.1.9
  3. *
  4. * http://ligerui.com
  5. *
  6. * Author daomi 2012 [ gd_star@163.com ]
  7. *
  8. */
  9. (function ($)
  10. {
  11. $.fn.ligerLayout = function (options)
  12. {
  13. return $.ligerui.run.call(this, "ligerLayout", arguments);
  14. };
  15. $.fn.ligerGetLayoutManager = function ()
  16. {
  17. return $.ligerui.run.call(this, "ligerGetLayoutManager", arguments);
  18. };
  19. $.ligerDefaults.Layout = {
  20. topHeight: 50,
  21. bottomHeight: 50,
  22. leftWidth: 110,
  23. centerWidth: 300,
  24. rightWidth: 170,
  25. InWindow: true, //是否以窗口的高度为准 height设置为百分比时可用
  26. heightDiff: 0, //高度补差
  27. height: '100%', //高度
  28. onHeightChanged: null,
  29. isLeftCollapse: false, //初始化时 左边是否隐藏
  30. isRightCollapse: false, //初始化时 右边是否隐藏
  31. allowLeftCollapse: true, //是否允许 左边可以隐藏
  32. allowRightCollapse: true, //是否允许 右边可以隐藏
  33. allowLeftResize: true, //是否允许 左边可以调整大小
  34. allowRightResize: true, //是否允许 右边可以调整大小
  35. allowTopResize: true, //是否允许 头部可以调整大小
  36. allowBottomResize: true, //是否允许 底部可以调整大小
  37. space: 3, //间隔
  38. onEndResize: null, //调整大小结束事件
  39. minLeftWidth: 80, //调整左侧宽度时的最小允许宽度
  40. minRightWidth: 80 //调整右侧宽度时的最小允许宽度
  41. };
  42. $.ligerMethos.Layout = {};
  43. $.ligerui.controls.Layout = function (element, options)
  44. {
  45. $.ligerui.controls.Layout.base.constructor.call(this, element, options);
  46. };
  47. $.ligerui.controls.Layout.ligerExtend($.ligerui.core.UIComponent, {
  48. __getType: function ()
  49. {
  50. return 'Layout';
  51. },
  52. __idPrev: function ()
  53. {
  54. return 'Layout';
  55. },
  56. _extendMethods: function ()
  57. {
  58. return $.ligerMethos.Layout;
  59. },
  60. _render: function ()
  61. {
  62. var g = this, p = this.options;
  63. g.layout = $(this.element);
  64. g.layout.addClass("l-layout");
  65. g.width = g.layout.width();
  66. //top
  67. if ($("> div[position=top]", g.layout).length > 0)
  68. {
  69. g.top = $("> div[position=top]", g.layout).wrap('<div class="l-layout-top" style="top:0px;"></div>').parent();
  70. g.top.content = $("> div[position=top]", g.top);
  71. if (!g.top.content.hasClass("l-layout-content"))
  72. g.top.content.addClass("l-layout-content");
  73. g.topHeight = p.topHeight;
  74. if (g.topHeight)
  75. {
  76. g.top.height(g.topHeight);
  77. }
  78. }
  79. //bottom
  80. if ($("> div[position=bottom]", g.layout).length > 0)
  81. {
  82. g.bottom = $("> div[position=bottom]", g.layout).wrap('<div class="l-layout-bottom"></div>').parent();
  83. g.bottom.content = $("> div[position=bottom]", g.bottom);
  84. if (!g.bottom.content.hasClass("l-layout-content"))
  85. g.bottom.content.addClass("l-layout-content");
  86. g.bottomHeight = p.bottomHeight;
  87. if (g.bottomHeight)
  88. {
  89. g.bottom.height(g.bottomHeight);
  90. }
  91. //set title
  92. var bottomtitle = g.bottom.content.attr("title");
  93. if (bottomtitle)
  94. {
  95. g.bottom.header = $('<div class="l-layout-header"></div>');
  96. g.bottom.prepend(g.bottom.header);
  97. g.bottom.header.html(bottomtitle);
  98. g.bottom.content.attr("title", "");
  99. }
  100. }
  101. //left
  102. if ($("> div[position=left]", g.layout).length > 0)
  103. {
  104. g.left = $("> div[position=left]", g.layout).wrap('<div class="l-layout-left" style="left:0px,top:30px;"></div>').parent();
  105. g.left.header = $('<div class="l-layout-header"><div class="l-layout-header-toggle"></div><div class="l-layout-header-inner"></div></div>');
  106. g.left.prepend(g.left.header);
  107. g.left.header.toggle = $(".l-layout-header-toggle", g.left.header);
  108. g.left.content = $("> div[position=left]", g.left);
  109. if (!g.left.content.hasClass("l-layout-content"))
  110. g.left.content.addClass("l-layout-content");
  111. if (!p.allowLeftCollapse) $(".l-layout-header-toggle", g.left.header).remove();
  112. //set title
  113. var lefttitle = g.left.content.attr("title");
  114. if (lefttitle)
  115. {
  116. g.left.content.attr("title", "");
  117. $(".l-layout-header-inner", g.left.header).html(lefttitle);
  118. }
  119. //set width
  120. g.leftWidth = p.leftWidth;
  121. if (g.leftWidth)
  122. g.left.width(g.leftWidth);
  123. }
  124. //center
  125. if ($("> div[position=center]", g.layout).length > 0)
  126. {
  127. g.center = $("> div[position=center]", g.layout).wrap('<div class="l-layout-center" ></div>').parent();
  128. g.center.content = $("> div[position=center]", g.center);
  129. g.center.content.addClass("l-layout-content");
  130. //set title
  131. var centertitle = g.center.content.attr("title");
  132. if (centertitle)
  133. {
  134. g.center.content.attr("title", "");
  135. g.center.header = $('<div class="l-layout-header"></div>');
  136. g.center.prepend(g.center.header);
  137. g.center.header.html(centertitle);
  138. }
  139. //set width
  140. g.centerWidth = p.centerWidth;
  141. if (g.centerWidth)
  142. g.center.width(g.centerWidth);
  143. }
  144. //right
  145. if ($("> div[position=right]", g.layout).length > 0)
  146. {
  147. g.right = $("> div[position=right]", g.layout).wrap('<div class="l-layout-right"></div>').parent();
  148. g.right.header = $('<div class="l-layout-header"><div class="l-layout-header-toggle"></div><div class="l-layout-header-inner"></div></div>');
  149. g.right.prepend(g.right.header);
  150. g.right.header.toggle = $(".l-layout-header-toggle", g.right.header);
  151. if (!p.allowRightCollapse) $(".l-layout-header-toggle", g.right.header).remove();
  152. g.right.content = $("> div[position=right]", g.right);
  153. if (!g.right.content.hasClass("l-layout-content"))
  154. g.right.content.addClass("l-layout-content");
  155. //set title
  156. var righttitle = g.right.content.attr("title");
  157. if (righttitle)
  158. {
  159. g.right.content.attr("title", "");
  160. $(".l-layout-header-inner", g.right.header).html(righttitle);
  161. }
  162. //set width
  163. g.rightWidth = p.rightWidth;
  164. if (g.rightWidth)
  165. g.right.width(g.rightWidth);
  166. }
  167. //lock
  168. g.layout.lock = $("<div class='l-layout-lock'></div>");
  169. g.layout.append(g.layout.lock);
  170. //DropHandle
  171. g._addDropHandle();
  172. //Collapse
  173. g.isLeftCollapse = p.isLeftCollapse;
  174. g.isRightCollapse = p.isRightCollapse;
  175. g.leftCollapse = $('<div class="l-layout-collapse-left" style="display: none; "><div class="l-layout-collapse-left-toggle"></div></div>');
  176. g.rightCollapse = $('<div class="l-layout-collapse-right" style="display: none; "><div class="l-layout-collapse-right-toggle"></div></div>');
  177. g.layout.append(g.leftCollapse).append(g.rightCollapse);
  178. g.leftCollapse.toggle = $("> .l-layout-collapse-left-toggle", g.leftCollapse);
  179. g.rightCollapse.toggle = $("> .l-layout-collapse-right-toggle", g.rightCollapse);
  180. g._setCollapse();
  181. //init
  182. g._bulid();
  183. $(window).resize(function ()
  184. {
  185. g._onResize();
  186. });
  187. g.set(p);
  188. },
  189. setLeftCollapse: function (isCollapse)
  190. {
  191. var g = this, p = this.options;
  192. if (!g.left) return false;
  193. g.isLeftCollapse = isCollapse;
  194. if (g.isLeftCollapse)
  195. {
  196. g.leftCollapse.show();
  197. g.leftDropHandle && g.leftDropHandle.hide();
  198. g.left.hide();
  199. }
  200. else
  201. {
  202. g.leftCollapse.hide();
  203. g.leftDropHandle && g.leftDropHandle.show();
  204. g.left.show();
  205. }
  206. g._onResize();
  207. },
  208. setRightCollapse: function (isCollapse)
  209. {
  210. var g = this, p = this.options;
  211. if (!g.right) return false;
  212. g.isRightCollapse = isCollapse;
  213. g._onResize();
  214. if (g.isRightCollapse)
  215. {
  216. g.rightCollapse.show();
  217. g.rightDropHandle && g.rightDropHandle.hide();
  218. g.right.hide();
  219. }
  220. else
  221. {
  222. g.rightCollapse.hide();
  223. g.rightDropHandle && g.rightDropHandle.show();
  224. g.right.show();
  225. }
  226. g._onResize();
  227. },
  228. _bulid: function ()
  229. {
  230. var g = this, p = this.options;
  231. $("> .l-layout-left .l-layout-header,> .l-layout-right .l-layout-header", g.layout).hover(function ()
  232. {
  233. $(this).addClass("l-layout-header-over");
  234. }, function ()
  235. {
  236. $(this).removeClass("l-layout-header-over");
  237. });
  238. $(".l-layout-header-toggle", g.layout).hover(function ()
  239. {
  240. $(this).addClass("l-layout-header-toggle-over");
  241. }, function ()
  242. {
  243. $(this).removeClass("l-layout-header-toggle-over");
  244. });
  245. $(".l-layout-header-toggle", g.left).click(function ()
  246. {
  247. g.setLeftCollapse(true);
  248. });
  249. $(".l-layout-header-toggle", g.right).click(function ()
  250. {
  251. g.setRightCollapse(true);
  252. });
  253. //set top
  254. g.middleTop = 0;
  255. if (g.top)
  256. {
  257. g.middleTop += g.top.height();
  258. if(g.top.css('borderTopWidth')){
  259. var borderTopWidth=parseInt(g.top.css('borderTopWidth'));
  260. if(!isNaN(borderTopWidth)){
  261. g.middleTop += parseInt(g.top.css('borderTopWidth'));
  262. }
  263. }
  264. if(g.top.css('borderBottomWidth')){
  265. var borderBottomWidth=parseInt(g.top.css('borderBottomWidth'));
  266. if(!isNaN(borderBottomWidth)){
  267. g.middleTop += parseInt(g.top.css('borderBottomWidth'));
  268. }
  269. }
  270. g.middleTop += p.space;
  271. }
  272. if (g.left)
  273. {
  274. g.left.css({ top: g.middleTop });
  275. g.leftCollapse.css({ top: g.middleTop });
  276. }
  277. if (g.center) g.center.css({ top: g.middleTop });
  278. if (g.right)
  279. {
  280. g.right.css({ top: g.middleTop });
  281. g.rightCollapse.css({ top: g.middleTop });
  282. }
  283. //set left
  284. if (g.left) g.left.css({ left: 0 });
  285. g._onResize();
  286. g._onResize();
  287. },
  288. _setCollapse: function ()
  289. {
  290. var g = this, p = this.options;
  291. g.leftCollapse.hover(function ()
  292. {
  293. $(this).addClass("l-layout-collapse-left-over");
  294. }, function ()
  295. {
  296. $(this).removeClass("l-layout-collapse-left-over");
  297. });
  298. g.leftCollapse.toggle.hover(function ()
  299. {
  300. $(this).addClass("l-layout-collapse-left-toggle-over");
  301. }, function ()
  302. {
  303. $(this).removeClass("l-layout-collapse-left-toggle-over");
  304. });
  305. g.rightCollapse.hover(function ()
  306. {
  307. $(this).addClass("l-layout-collapse-right-over");
  308. }, function ()
  309. {
  310. $(this).removeClass("l-layout-collapse-right-over");
  311. });
  312. g.rightCollapse.toggle.hover(function ()
  313. {
  314. $(this).addClass("l-layout-collapse-right-toggle-over");
  315. }, function ()
  316. {
  317. $(this).removeClass("l-layout-collapse-right-toggle-over");
  318. });
  319. g.leftCollapse.toggle.click(function ()
  320. {
  321. g.setLeftCollapse(false);
  322. });
  323. g.rightCollapse.toggle.click(function ()
  324. {
  325. g.setRightCollapse(false);
  326. });
  327. if (g.left && g.isLeftCollapse)
  328. {
  329. g.leftCollapse.show();
  330. g.leftDropHandle && g.leftDropHandle.hide();
  331. g.left.hide();
  332. }
  333. if (g.right && g.isRightCollapse)
  334. {
  335. g.rightCollapse.show();
  336. g.rightDropHandle && g.rightDropHandle.hide();
  337. g.right.hide();
  338. }
  339. },
  340. _addDropHandle: function ()
  341. {
  342. var g = this, p = this.options;
  343. if (g.left && p.allowLeftResize)
  344. {
  345. g.leftDropHandle = $("<div class='l-layout-drophandle-left'></div>");
  346. g.layout.append(g.leftDropHandle);
  347. g.leftDropHandle && g.leftDropHandle.show();
  348. g.leftDropHandle.mousedown(function (e)
  349. {
  350. g._start('leftresize', e);
  351. });
  352. }
  353. if (g.right && p.allowRightResize)
  354. {
  355. g.rightDropHandle = $("<div class='l-layout-drophandle-right'></div>");
  356. g.layout.append(g.rightDropHandle);
  357. g.rightDropHandle && g.rightDropHandle.show();
  358. g.rightDropHandle.mousedown(function (e)
  359. {
  360. g._start('rightresize', e);
  361. });
  362. }
  363. if (g.top && p.allowTopResize)
  364. {
  365. g.topDropHandle = $("<div class='l-layout-drophandle-top'></div>");
  366. g.layout.append(g.topDropHandle);
  367. g.topDropHandle.show();
  368. g.topDropHandle.mousedown(function (e)
  369. {
  370. g._start('topresize', e);
  371. });
  372. }
  373. if (g.bottom && p.allowBottomResize)
  374. {
  375. g.bottomDropHandle = $("<div class='l-layout-drophandle-bottom'></div>");
  376. g.layout.append(g.bottomDropHandle);
  377. g.bottomDropHandle.show();
  378. g.bottomDropHandle.mousedown(function (e)
  379. {
  380. g._start('bottomresize', e);
  381. });
  382. }
  383. g.draggingxline = $("<div class='l-layout-dragging-xline'></div>");
  384. g.draggingyline = $("<div class='l-layout-dragging-yline'></div>");
  385. g.layout.append(g.draggingxline).append(g.draggingyline);
  386. },
  387. _setDropHandlePosition: function ()
  388. {
  389. var g = this, p = this.options;
  390. if (g.leftDropHandle)
  391. {
  392. g.leftDropHandle.css({ left: g.left.width() + parseInt(g.left.css('left')), height: g.middleHeight, top: g.middleTop });
  393. }
  394. if (g.rightDropHandle)
  395. {
  396. g.rightDropHandle.css({ left: parseInt(g.right.css('left')) - p.space, height: g.middleHeight, top: g.middleTop });
  397. }
  398. if (g.topDropHandle)
  399. {
  400. g.topDropHandle.css({ top: g.top.height() + parseInt(g.top.css('top')), width: g.top.width() });
  401. }
  402. if (g.bottomDropHandle)
  403. {
  404. g.bottomDropHandle.css({ top: parseInt(g.bottom.css('top')) - p.space, width: g.bottom.width() });
  405. }
  406. },
  407. _onResize: function ()
  408. {
  409. var g = this, p = this.options;
  410. var oldheight = g.layout.height();
  411. //set layout height
  412. var h = 0;
  413. var windowHeight = $(window).height();
  414. var parentHeight = null;
  415. if (typeof (p.height) == "string" && p.height.indexOf('%') > 0)
  416. {
  417. var layoutparent = g.layout.parent();
  418. if (p.InWindow || layoutparent[0].tagName.toLowerCase() == "body")
  419. {
  420. parentHeight = windowHeight;
  421. parentHeight -= parseInt($('body').css('paddingTop'));
  422. parentHeight -= parseInt($('body').css('paddingBottom'));
  423. }
  424. else
  425. {
  426. parentHeight = layoutparent.height();
  427. }
  428. h = parentHeight * parseFloat(p.height) * 0.01;
  429. if (p.InWindow || layoutparent[0].tagName.toLowerCase() == "body")
  430. h -= (g.layout.offset().top - parseInt($('body').css('paddingTop')));
  431. }
  432. else
  433. {
  434. h = parseInt(p.height);
  435. }
  436. h += p.heightDiff;
  437. g.layout.height(h);
  438. g.layoutHeight = g.layout.height();
  439. g.middleWidth = g.layout.width();
  440. g.middleHeight = g.layout.height();
  441. if (g.top)
  442. {
  443. g.middleHeight -= g.top.height();
  444. g.middleHeight -= parseInt(g.top.css('borderTopWidth'));
  445. g.middleHeight -= parseInt(g.top.css('borderBottomWidth'));
  446. g.middleHeight -= p.space;
  447. }
  448. if (g.bottom)
  449. {
  450. g.middleHeight -= g.bottom.height();
  451. g.middleHeight -= parseInt(g.bottom.css('borderTopWidth'));
  452. g.middleHeight -= parseInt(g.bottom.css('borderBottomWidth'));
  453. g.middleHeight -= p.space;
  454. }
  455. //specific
  456. g.middleHeight -= 2;
  457. if (g.hasBind('heightChanged') && g.layoutHeight != oldheight)
  458. {
  459. g.trigger('heightChanged', [{ layoutHeight: g.layoutHeight, diff: g.layoutHeight - oldheight, middleHeight: g.middleHeight}]);
  460. }
  461. if (g.center)
  462. {
  463. g.centerWidth = g.middleWidth;
  464. if (g.left)
  465. {
  466. if (g.isLeftCollapse)
  467. {
  468. g.centerWidth -= g.leftCollapse.width();
  469. g.centerWidth -= parseInt(g.leftCollapse.css('borderLeftWidth'));
  470. g.centerWidth -= parseInt(g.leftCollapse.css('borderRightWidth'));
  471. g.centerWidth -= parseInt(g.leftCollapse.css('left'));
  472. g.centerWidth -= p.space;
  473. }
  474. else
  475. {
  476. g.centerWidth -= g.leftWidth;
  477. g.centerWidth -= parseInt(g.left.css('borderLeftWidth'));
  478. g.centerWidth -= parseInt(g.left.css('borderRightWidth'));
  479. g.centerWidth -= parseInt(g.left.css('left'));
  480. g.centerWidth -= p.space;
  481. }
  482. }
  483. if (g.right)
  484. {
  485. if (g.isRightCollapse)
  486. {
  487. g.centerWidth -= g.rightCollapse.width();
  488. g.centerWidth -= parseInt(g.rightCollapse.css('borderLeftWidth'));
  489. g.centerWidth -= parseInt(g.rightCollapse.css('borderRightWidth'));
  490. g.centerWidth -= parseInt(g.rightCollapse.css('right'));
  491. g.centerWidth -= p.space;
  492. }
  493. else
  494. {
  495. g.centerWidth -= g.rightWidth;
  496. g.centerWidth -= parseInt(g.right.css('borderLeftWidth'));
  497. g.centerWidth -= parseInt(g.right.css('borderRightWidth'));
  498. g.centerWidth -= p.space;
  499. }
  500. }
  501. g.centerLeft = 0;
  502. if (g.left)
  503. {
  504. if (g.isLeftCollapse)
  505. {
  506. g.centerLeft += g.leftCollapse.width();
  507. g.centerLeft += parseInt(g.leftCollapse.css('borderLeftWidth'));
  508. g.centerLeft += parseInt(g.leftCollapse.css('borderRightWidth'));
  509. g.centerLeft += parseInt(g.leftCollapse.css('left'));
  510. g.centerLeft += p.space;
  511. }
  512. else
  513. {
  514. g.centerLeft += g.left.width();
  515. g.centerLeft += parseInt(g.left.css('borderLeftWidth'));
  516. g.centerLeft += parseInt(g.left.css('borderRightWidth'));
  517. g.centerLeft += p.space;
  518. }
  519. }
  520. g.center.css({ left: g.centerLeft });
  521. g.center.width(g.centerWidth);
  522. g.center.height(g.middleHeight);
  523. var contentHeight = g.middleHeight;
  524. if (g.center.header) contentHeight -= g.center.header.height();
  525. g.center.content.height(contentHeight);
  526. }
  527. if (g.left)
  528. {
  529. g.leftCollapse.height(g.middleHeight);
  530. g.left.height(g.middleHeight);
  531. }
  532. if (g.right)
  533. {
  534. g.rightCollapse.height(g.middleHeight);
  535. g.right.height(g.middleHeight);
  536. //set left
  537. g.rightLeft = 0;
  538. if (g.left)
  539. {
  540. if (g.isLeftCollapse)
  541. {
  542. g.rightLeft += g.leftCollapse.width();
  543. g.rightLeft += parseInt(g.leftCollapse.css('borderLeftWidth'));
  544. g.rightLeft += parseInt(g.leftCollapse.css('borderRightWidth'));
  545. g.rightLeft += p.space;
  546. }
  547. else
  548. {
  549. g.rightLeft += g.left.width();
  550. g.rightLeft += parseInt(g.left.css('borderLeftWidth'));
  551. g.rightLeft += parseInt(g.left.css('borderRightWidth'));
  552. g.rightLeft += parseInt(g.left.css('left'));
  553. g.rightLeft += p.space;
  554. }
  555. }
  556. if (g.center)
  557. {
  558. g.rightLeft += g.center.width();
  559. g.rightLeft += parseInt(g.center.css('borderLeftWidth'));
  560. g.rightLeft += parseInt(g.center.css('borderRightWidth'));
  561. g.rightLeft += p.space;
  562. }
  563. g.right.css({ left: g.rightLeft });
  564. }
  565. if (g.bottom)
  566. {
  567. g.bottomTop = g.layoutHeight - g.bottom.height() - 2;
  568. g.bottom.css({ top: g.bottomTop });
  569. }
  570. g._setDropHandlePosition();
  571. },
  572. _start: function (dragtype, e)
  573. {
  574. var g = this, p = this.options;
  575. g.dragtype = dragtype;
  576. if (dragtype == 'leftresize' || dragtype == 'rightresize')
  577. {
  578. g.xresize = { startX: e.pageX };
  579. g.draggingyline.css({ left: e.pageX - g.layout.offset().left, height: g.middleHeight, top: g.middleTop }).show();
  580. $('body').css('cursor', 'col-resize');
  581. }
  582. else if (dragtype == 'topresize' || dragtype == 'bottomresize')
  583. {
  584. g.yresize = { startY: e.pageY };
  585. g.draggingxline.css({ top: e.pageY - g.layout.offset().top, width: g.layout.width() }).show();
  586. $('body').css('cursor', 'row-resize');
  587. }
  588. else
  589. {
  590. return;
  591. }
  592. g.layout.lock.width(g.layout.width());
  593. g.layout.lock.height(g.layout.height());
  594. g.layout.lock.show();
  595. if ($.browser.msie || $.browser.safari) $('body').bind('selectstart', function () { return false; }); // 不能选择
  596. $(document).bind('mouseup', function ()
  597. {
  598. g._stop.apply(g, arguments);
  599. });
  600. $(document).bind('mousemove', function ()
  601. {
  602. g._drag.apply(g, arguments);
  603. });
  604. },
  605. _drag: function (e)
  606. {
  607. var g = this, p = this.options;
  608. if (g.xresize)
  609. {
  610. g.xresize.diff = e.pageX - g.xresize.startX;
  611. g.draggingyline.css({ left: e.pageX - g.layout.offset().left });
  612. $('body').css('cursor', 'col-resize');
  613. }
  614. else if (g.yresize)
  615. {
  616. g.yresize.diff = e.pageY - g.yresize.startY;
  617. g.draggingxline.css({ top: e.pageY - g.layout.offset().top });
  618. $('body').css('cursor', 'row-resize');
  619. }
  620. },
  621. _stop: function (e)
  622. {
  623. var g = this, p = this.options;
  624. var diff;
  625. if (g.xresize && g.xresize.diff != undefined)
  626. {
  627. diff = g.xresize.diff;
  628. if (g.dragtype == 'leftresize')
  629. {
  630. if (p.minLeftWidth)
  631. {
  632. if (g.leftWidth + g.xresize.diff < p.minLeftWidth)
  633. return;
  634. }
  635. g.leftWidth += g.xresize.diff;
  636. g.left.width(g.leftWidth);
  637. if (g.center)
  638. g.center.width(g.center.width() - g.xresize.diff).css({ left: parseInt(g.center.css('left')) + g.xresize.diff });
  639. else if (g.right)
  640. g.right.width(g.left.width() - g.xresize.diff).css({ left: parseInt(g.right.css('left')) + g.xresize.diff });
  641. }
  642. else if (g.dragtype == 'rightresize')
  643. {
  644. if (p.minRightWidth)
  645. {
  646. if (g.rightWidth - g.xresize.diff < p.minRightWidth)
  647. return;
  648. }
  649. g.rightWidth -= g.xresize.diff;
  650. g.right.width(g.rightWidth).css({ left: parseInt(g.right.css('left')) + g.xresize.diff });
  651. if (g.center)
  652. g.center.width(g.center.width() + g.xresize.diff);
  653. else if (g.left)
  654. g.left.width(g.left.width() + g.xresize.diff);
  655. }
  656. }
  657. else if (g.yresize && g.yresize.diff != undefined)
  658. {
  659. diff = g.yresize.diff;
  660. if (g.dragtype == 'topresize')
  661. {
  662. g.top.height(g.top.height() + g.yresize.diff);
  663. g.middleTop += g.yresize.diff;
  664. g.middleHeight -= g.yresize.diff;
  665. if (g.left)
  666. {
  667. g.left.css({ top: g.middleTop }).height(g.middleHeight);
  668. g.leftCollapse.css({ top: g.middleTop }).height(g.middleHeight);
  669. }
  670. if (g.center) g.center.css({ top: g.middleTop }).height(g.middleHeight);
  671. if (g.right)
  672. {
  673. g.right.css({ top: g.middleTop }).height(g.middleHeight);
  674. g.rightCollapse.css({ top: g.middleTop }).height(g.middleHeight);
  675. }
  676. }
  677. else if (g.dragtype == 'bottomresize')
  678. {
  679. g.bottom.height(g.bottom.height() - g.yresize.diff);
  680. g.middleHeight += g.yresize.diff;
  681. g.bottomTop += g.yresize.diff;
  682. g.bottom.css({ top: g.bottomTop });
  683. if (g.left)
  684. {
  685. g.left.height(g.middleHeight);
  686. g.leftCollapse.height(g.middleHeight);
  687. }
  688. if (g.center) g.center.height(g.middleHeight);
  689. if (g.right)
  690. {
  691. g.right.height(g.middleHeight);
  692. g.rightCollapse.height(g.middleHeight);
  693. }
  694. }
  695. }
  696. g.trigger('endResize', [{
  697. direction: g.dragtype ? g.dragtype.replace(/resize/, '') : '',
  698. diff: diff
  699. }, e]);
  700. g._setDropHandlePosition();
  701. g.draggingxline.hide();
  702. g.draggingyline.hide();
  703. g.xresize = g.yresize = g.dragtype = false;
  704. g.layout.lock.hide();
  705. if ($.browser.msie || $.browser.safari)
  706. $('body').unbind('selectstart');
  707. $(document).unbind('mousemove', g._drag);
  708. $(document).unbind('mouseup', g._stop);
  709. $('body').css('cursor', '');
  710. }
  711. });
  712. })(jQuery);