TabPanel.js 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790
  1. /*tabPanel主类 */
  2. (function($) {
  3. $.ui = $.ui || {};
  4. $.ui.tabpanel= function(config){
  5. this.init(config);
  6. };
  7. $.ui.tabpanel.prototype = {
  8. //初始化
  9. init : function(config){
  10. //将tabPanel放置的位置
  11. this.renderTo = config.renderTo || $(document.body);
  12. this.render = typeof this.renderTo == 'string' ? $('#'+this.renderTo) : this.renderTo;
  13. //tabPanel的边线宽度
  14. this.border = config.border;
  15. //宽度是否可改变
  16. this.widthResizable = config.widthResizable;
  17. //高度是否可以改变
  18. this.heightResizable = config.heightResizable;
  19. //自动改变宽度和高度
  20. this.autoResizable = config.autoResizable;
  21. //宽度
  22. this.width = config.width;
  23. //高度
  24. this.height = config.height;
  25. //每个tab的宽度
  26. this.tabWidth = config.tabWidth||208;
  27. //tab元素
  28. this.items = config.items;
  29. //活动的索引值
  30. this.active = config.active || 0;
  31. //初始化的tab元素列表
  32. this.tabs = [];
  33. //是否需要滚动,滚动的意思是tab元素过多,导致上面的tab条目放不了
  34. this.scrolled = false;
  35. //调整值
  36. this.fixNum = 2;
  37. //滚动结束标示
  38. this.scrollFinish = true;
  39. //可添加的tab元素的最大个数
  40. this.maxLength = config.maxLength || -1;
  41. //最少添加的tab元素个数
  42. this.minLength=config.minLength || 0;
  43. //this变量
  44. var tabEntity = this;
  45. //如果配置autoResizable为true,则宽度和高度的可变标示都为true
  46. if(this.autoResizable){
  47. this.widthResizable = this.heightResizable = true;
  48. //超过则隐藏
  49. this.render.css('overflow', 'hidden');
  50. //自动调节大小,当设置为不能改变大小时,父节点变大则变大,否则不变
  51. //窗口变化,则tab的容器跟着变化
  52. /*window.onresize=(function(){
  53. var timeout;
  54. return (function(){
  55. window.clearTimeout(timeout);
  56. timeout = window.setTimeout(function(){tabEntity.resize()}, 200);
  57. });
  58. })();
  59. */
  60. //窗口变化,则tab的容器跟着变化
  61. /*$(window).resize(function(){
  62. window.setTimeout(function(){
  63. tabEntity.resize();
  64. }, 200);
  65. });*/
  66. }
  67. //设置tabPanel容器的宽度和高度
  68. if(this.width)
  69. this.render.width("100%");
  70. if(this.height)
  71. this.render.height(this.height);
  72. //调整值
  73. var hwFix = this.border!='none'?2:0;
  74. //整体的tab容器
  75. this.tabpanel = $('<DIV></DIV>');
  76. this.tabpanel.addClass('tabpanel');
  77. this.tabpanel.width("100%");
  78. this.tabpanel.height(this.render.height());
  79. this.render.append(this.tabpanel);
  80. //顶上面的标签容器
  81. this.tabpanel_tab_content = $('<DIV></DIV>');
  82. this.tabpanel_tab_content.addClass('tabpanel_tab_content');
  83. this.tabpanel_tab_content.appendTo(this.tabpanel);
  84. //左箭头div
  85. this.tabpanel_left_scroll = $('<DIV></DIV>');
  86. //点击后左移一个tab宽度
  87. this.tabpanel_left_scroll.bind('click',function(){tabEntity.moveLeft();});
  88. //设置样式
  89. this.tabpanel_left_scroll.addClass('tabpanel_left_scroll');
  90. this.tabpanel_left_scroll.addClass('display_none');
  91. //mouseover事件
  92. this.tabpanel_left_scroll.bind('mouseover', function(){
  93. var l = $(this);
  94. l.addClass('tabpanel_scroll_over');
  95. l.bind('mouseout', function(){
  96. l.unbind('mouseout');
  97. l.removeClass('tabpanel_scroll_over');
  98. });
  99. })
  100. this.tabpanel_left_scroll.appendTo(this.tabpanel_tab_content);
  101. //右箭头div
  102. this.tabpanel_right_scroll = $('<DIV></DIV>');
  103. //点击后右移一个tab宽度
  104. this.tabpanel_right_scroll.bind('click',function(){tabEntity.moveRight();});
  105. //设置样式
  106. this.tabpanel_right_scroll.addClass('tabpanel_right_scroll');
  107. this.tabpanel_right_scroll.addClass('display_none');
  108. //mouseover事件
  109. this.tabpanel_right_scroll.bind('mouseover', function(){
  110. var r = $(this);
  111. r.addClass('tabpanel_scroll_over');
  112. r.bind('mouseout', function(){
  113. r.unbind('mouseout');
  114. r.removeClass('tabpanel_scroll_over');
  115. });
  116. })
  117. this.tabpanel_right_scroll.appendTo(this.tabpanel_tab_content);
  118. //存放顶上tab标签的div
  119. this.tabpanel_move_content = $('<DIV></DIV>');
  120. this.tabpanel_move_content.addClass('tabpanel_move_content');
  121. this.tabpanel_move_content.appendTo(this.tabpanel_tab_content);
  122. //标签放在这个ul中,设置其中的li样式
  123. this.tabpanel_mover = $('<UL></UL>');
  124. this.tabpanel_mover.addClass('tabpanel_mover');
  125. this.tabpanel_mover.appendTo(this.tabpanel_move_content);
  126. //空格
  127. this.tabpanel_tab_spacer = $('<DIV></DIV>');
  128. this.tabpanel_tab_spacer.addClass('tabpanel_tab_spacer');
  129. this.tabpanel_tab_spacer.appendTo(this.tabpanel_tab_content);
  130. //存放tab内容的div
  131. this.tabpanel_content = $('<DIV></DIV>');
  132. this.tabpanel_content.addClass('tabpanel_content');
  133. this.tabpanel_content.appendTo(this.tabpanel);
  134. var t_w = this.tabpanel.width();
  135. var t_h = this.tabpanel.height();
  136. if(this.border=='none'){
  137. this.tabpanel.css('border','0');
  138. }
  139. //存放顶上tab标签的div宽度
  140. this.tabpanel_tab_content.width("100%");
  141. //设置存放tab内容的div宽度
  142. this.tabpanel_content.width("100%");
  143. //设置存放tab内容的div高度
  144. this.tabpanel_content.height(t_h-this.tabpanel_tab_content.get(0).offsetHeight);
  145. //根据配置添加标签
  146. for(var i=0; i<this.items.length; i++){
  147. this.addTab(this.items[i]);
  148. }
  149. //如果有活动tab的顺序号
  150. if(this.active>=0)
  151. this.showItem(this.tabs[this.active], true);
  152. },
  153. //向左移动
  154. moveLeft : function(){
  155. //如果滚动结束了
  156. if(this.scrollFinish){
  157. //设置this
  158. var me=this;
  159. //左右箭头暂时失效
  160. this.disableScroll();
  161. //原来marginLeft
  162. var oldMl=this.tabpanel_mover.css("marginLeft");
  163. //新的marginLeft
  164. var newMl=parseInt(oldMl)+parseInt(this.tabWidth);
  165. //最大值为0
  166. if(newMl>0){
  167. newMl=0;
  168. }
  169. //滚动结束标示置为false
  170. this.scrollFinish = false;
  171. //动画滚动
  172. this.tabpanel_mover.animate(
  173. {"marginLeft": newMl+'px'},
  174. 200,
  175. "linear",
  176. function(){
  177. //左右箭头可用
  178. me.useableScroll();
  179. } );
  180. }
  181. },
  182. //向右移动
  183. moveRight : function(){
  184. //如果滚动结束了
  185. if(this.scrollFinish){
  186. //设置this
  187. var me=this;
  188. //左右箭头暂时失效
  189. this.disableScroll();
  190. //原来marginLeft
  191. var oldMl=this.tabpanel_mover.css("marginLeft");
  192. //新的marginLeft
  193. var newMl=parseInt(oldMl)-(this.tabWidth-35);
  194. //最小值为this.maxMove*(-1)
  195. if(newMl*(-1)>this.maxMove){
  196. newMl=this.maxMove*(-1);
  197. }
  198. //滚动结束标示置为false
  199. this.scrollFinish = false;
  200. //动画滚动
  201. this.tabpanel_mover.animate(
  202. {"marginLeft": newMl+'px'},
  203. 200,
  204. "linear",
  205. function(){
  206. //左右箭头可用
  207. me.useableScroll();
  208. }
  209. );
  210. }
  211. },
  212. //在关闭tab后,tab数量不够,不需要箭头时,移动到最左边
  213. moveToLeft : function(){
  214. //如果滚动结束了
  215. if(this.scrollFinish){
  216. //左右箭头暂时失效
  217. this.disableScroll();
  218. //设置this
  219. var me=this;
  220. //滚动结束标示置为false
  221. this.scrollFinish = false;
  222. //动画滚动
  223. this.tabpanel_mover.animate(
  224. {"marginLeft":'0px'}
  225. , 200, "linear", function(){
  226. //左右箭头可用
  227. me.useableScroll();
  228. });
  229. }
  230. },
  231. //移动到最右边
  232. moveToRight : function(){
  233. //如果滚动结束了
  234. if(this.scrolled && this.scrollFinish){
  235. //左右箭头暂时失效
  236. this.disableScroll();
  237. //原marginLeft
  238. var marginLeft = parseInt(this.tabpanel_mover.css('marginLeft'))*-1;
  239. //所有tab加起来的总宽度
  240. var liWidth = this.tabs.length*(this.tabWidth-35);
  241. //tab标签的容器宽度
  242. var cWidth = this.tabpanel_move_content.width();
  243. //新的marginLeft
  244. var newMarginLeft = (liWidth - cWidth - marginLeft + this.fixNum)*-1;
  245. //设置this
  246. var me=this;
  247. //滚动结束标示置为false
  248. this.scrollFinish = false;
  249. //动画滚动
  250. this.tabpanel_mover.animate(
  251. {"marginLeft":'+='+newMarginLeft+'px'}
  252. , 200, "linear", function(){
  253. //左右箭头可用
  254. me.useableScroll();
  255. } );
  256. }
  257. },
  258. //把该标签移动到可视区域
  259. moveToSee : function(tabitem){
  260. //得到该标签的位置
  261. var position = this.getTabPosition(tabitem);
  262. //如果需要滚动了
  263. if(this.scrolled){
  264. //到该tab标签的左边的距离
  265. var liWhere = (this.tabWidth-35) * position;
  266. //marginLeft值
  267. var ulWhere = parseInt(this.tabpanel_mover.css('marginLeft'));
  268. //需要移动的值
  269. var moveNum= (ulWhere + liWhere)*-1;
  270. //需要移动的距离超过最大数
  271. if(((moveNum+ulWhere)*-1) >= this.maxMove){
  272. //移动到最右边
  273. this.moveToRight();
  274. }else{
  275. //左右箭头暂时失效
  276. this.disableScroll();
  277. //滚动结束标示置为false
  278. this.scrollFinish = false;
  279. // alert(liWhere*(-1));
  280. //设置this
  281. var me=this;
  282. //动画滚动
  283. this.tabpanel_mover.animate(
  284. {"marginLeft":liWhere*(-1)+'px'}
  285. , 200, "linear", function(){
  286. //左右箭头可用
  287. me.useableScroll();
  288. } );
  289. }
  290. }
  291. $(this.tabpanel_mover[0]).eq(0).find('li:first').css('margin-left','0px');
  292. },
  293. //左右箭头失效
  294. disableScroll : function(){
  295. this.tabpanel_left_scroll.addClass('tabpanel_left_scroll_disabled');
  296. this.tabpanel_left_scroll.attr('disabled',true);
  297. this.tabpanel_right_scroll.addClass('tabpanel_right_scroll_disabled');
  298. this.tabpanel_right_scroll.attr('disabled', true);
  299. },
  300. //左右箭头有效
  301. useableScroll : function(){
  302. //设置this
  303. var tabEntity = this;
  304. //可以滚动了
  305. if(this.scrolled){
  306. //最左边
  307. if(parseInt(tabEntity.tabpanel_mover.css('marginLeft')) == 0){
  308. //左箭头失效
  309. tabEntity.tabpanel_left_scroll.addClass('tabpanel_left_scroll_disabled');
  310. tabEntity.tabpanel_left_scroll.attr('disabled',true);
  311. //右箭头有效
  312. tabEntity.tabpanel_right_scroll.removeClass('tabpanel_right_scroll_disabled');
  313. tabEntity.tabpanel_right_scroll.removeAttr('disabled');
  314. }else if(parseInt(tabEntity.tabpanel_mover.css('marginLeft'))*-1 >= tabEntity.maxMove){
  315. //最右边
  316. //左箭头有效
  317. tabEntity.tabpanel_left_scroll.removeClass('tabpanel_left_scroll_disabled');
  318. tabEntity.tabpanel_left_scroll.removeAttr('disabled',true);
  319. //右箭头失效
  320. tabEntity.tabpanel_right_scroll.addClass('tabpanel_right_scroll_disabled');
  321. tabEntity.tabpanel_right_scroll.attr('disabled');
  322. }else{
  323. //既非最左边,也非最右边
  324. //左右箭头都有效
  325. tabEntity.tabpanel_left_scroll.removeClass('tabpanel_left_scroll_disabled');
  326. tabEntity.tabpanel_left_scroll.removeAttr('disabled',true);
  327. tabEntity.tabpanel_right_scroll.removeClass('tabpanel_right_scroll_disabled');
  328. tabEntity.tabpanel_right_scroll.removeAttr('disabled');
  329. }
  330. }
  331. //滚动结束标示为true
  332. tabEntity.scrollFinish = true;
  333. },
  334. //显示滚动
  335. showScroll : function(){
  336. //所有tab标签的总宽度
  337. var liWidth = this.tabs.length*(this.tabWidth-35);
  338. //存放tab标签的div的宽度
  339. var tabContentWidth = this.tabpanel_tab_content.width();
  340. //如果所有tab标签的总宽度大于存放tab标签的div的宽度,而且还没出现左右箭头,则显示左右箭头
  341. if(liWidth > tabContentWidth && !this.scrolled){
  342. //显示左右箭头
  343. this.tabpanel_move_content.addClass('tabpanel_move_content_scroll');
  344. this.tabpanel_left_scroll.removeClass('display_none');
  345. this.tabpanel_right_scroll.removeClass('display_none');
  346. //滚动标示为true
  347. this.scrolled = true;
  348. }else if(liWidth < tabContentWidth && this.scrolled){
  349. //如果所有tab标签的总宽度小于存放tab标签的div的宽度
  350. //移动到最左边
  351. this.moveToLeft();
  352. //不显示左右箭头div
  353. this.tabpanel_move_content.removeClass('tabpanel_move_content_scroll');
  354. this.tabpanel_left_scroll.addClass('display_none');
  355. this.tabpanel_right_scroll.addClass('display_none');
  356. //滚动标示为false
  357. this.scrolled = false;
  358. this.scrollFinish = true;
  359. }
  360. //如果可移动,则存放tab标签的div的宽度要减去左右箭头的div的宽度
  361. if(this.scrolled)
  362. tabContentWidth -= (this.tabpanel_left_scroll.width()+this.tabpanel_right_scroll.width());
  363. //设置宽度
  364. this.tabpanel_move_content.width(tabContentWidth);
  365. //设置最大宽度
  366. this.maxMove = (this.tabs.length*(this.tabWidth-35)) - tabContentWidth + this.fixNum;
  367. },
  368. //添加标签
  369. addTab : function(tabitem){
  370. //判断是否设置了最大可添加的标签数,如果超过了,则返回
  371. if(this.maxLength!=-1 && this.maxLength<=this.tabs.length){
  372. alert('最多只能添加'+this.maxLength+'个标签!');
  373. return false;
  374. }
  375. //设置id
  376. if(!tabitem.id) {
  377. tabitem.id = Math.uuid();
  378. }
  379. //如果已有该标签则显示
  380. if($('#'+tabitem.id).length>0){
  381. this.showItem(this.getTabById(tabitem.id), true);
  382. }else if(this.scrollFinish){
  383. var tabEntity = this;
  384. //tab标签为li元素
  385. var tab = $('<LI></LI>');
  386. //设置id
  387. tab.attr('id', tabitem.id);
  388. //设置宽度
  389. tab.width(this.tabWidth);
  390. tab.appendTo(this.tabpanel_mover);
  391. var img=$('<img style=\"width:15px;height:15px;\" src=\"'+$.app+'/static/image/'+tabitem.menupic+'\" />');
  392. img.appendTo(tab)
  393. //存放标签文字的div
  394. var titleDiv = $('<DIV></DIV>');
  395. titleDiv.attr("title",tabitem.title);
  396. var objLength = tabitem.title.length; //获取当前选项卡名称长度
  397. var num=7; //选项卡名称最大长度
  398. if(objLength > num) {
  399. tabitem.title = tabitem.title.substring(0, num-1) + "..."; //超出部分省略号表示
  400. }
  401. titleDiv.text(tabitem.title);
  402. titleDiv.appendTo(tab);
  403. //调整值
  404. var wFix = !tabitem.closable? 0 : 5;
  405. //如果有背景图片要存放
  406. if(tabitem.icon) {
  407. titleDiv.addClass('icon_title');
  408. titleDiv.addClass(tabitem.icon);
  409. //如果文字太长,则以...结尾
  410. if(titleDiv.width()>(this.tabWidth-35-wFix)) {
  411. titleDiv.width((this.tabWidth-50-wFix));
  412. titleDiv.attr('title', tabitem.title);
  413. tab.append('<DIV>...</DIV>');
  414. }
  415. } else {
  416. //没有背景图片要存放
  417. titleDiv.addClass('title');
  418. //如果文字太长,则以...结尾
  419. if(titleDiv.width()>(this.tabWidth-19-wFix)) {
  420. titleDiv.width(this.tabWidth-30-wFix);
  421. titleDiv.attr('title', tabitem.title);
  422. tab.append('<DIV>...</DIV>');
  423. }
  424. }
  425. //关闭按钮
  426. var closer = $('<DIV></DIV>');
  427. closer.addClass('closer');
  428. closer.attr('title', 'Close tab');
  429. closer.appendTo(tab);
  430. var _th=$(window).height()-145;
  431. //存放标签内容的div
  432. var content = $('<DIV class="col-md-12"><iframe frameborder="0" height="'+_th+'px" id="'+tabitem.id+'frame" name="iframepage" scrolling="auto" width="100%" src="'+tabitem.menuurl+'" ></iframe> </DIV>');
  433. content.addClass('html_content');
  434. content.appendTo(this.tabpanel_content);
  435. content.hide();
  436. //设置单个标签的对象
  437. tabitem.tab = tab;
  438. tabitem.titleDiv = titleDiv;
  439. tabitem.closer = closer;
  440. tabitem.content = content;
  441. //隐藏关闭按钮
  442. if(!tabitem.closable)
  443. closer.addClass('display_none');
  444. //如果不可用
  445. if(tabitem.disabled==true) {
  446. tab.attr('disabled', true);
  447. titleDiv.addClass('disable');
  448. }
  449. this.tabs.push(tabitem);
  450. //tab标签li的click事件
  451. tab.bind('click', function(){
  452. //如果设置标签的disabled为true
  453. if(tabitem.disabled){
  454. return false;
  455. }
  456. tabEntity.showItem(tabitem, true);
  457. });
  458. //关闭按钮的click事件
  459. closer.bind('click', function(){
  460. tabEntity.kill(tabitem);
  461. });
  462. //显示滚动条
  463. this.showScroll();
  464. //如果立即显示内容,将tab移动到可视状态
  465. if(tabitem.loadnow){
  466. this.showItem(tabitem, true);
  467. }else if(tabitem.elementId||tabitem.disabled) {
  468. //elementId或disabled配置,则立即显示内容,但不将tab移动到可视状态
  469. this.showItem(tabitem, false);
  470. }
  471. }
  472. },
  473. //取得tab的位置
  474. getTabPosition:function(tabitem){
  475. var tabIndex = -1;
  476. for(var i=0;i<this.tabs.length;i++){
  477. if(this.tabs[i].id==tabitem.id){
  478. return i;
  479. }
  480. }
  481. return tabIndex;
  482. },
  483. //显示标签,executeMoveSee为是否移动到可视区域
  484. showItem : function(tabitem, executeMoveSee){
  485. //得到标签的位置
  486. var position = this.getTabPosition(tabitem);
  487. //得到活动的标签位置
  488. var activedTabIndex = this.getActiveIndex();
  489. //点击的tab为活动的,则返回
  490. if(position==activedTabIndex){
  491. return;
  492. }
  493. //滚动结束了
  494. if(this.scrollFinish){
  495. //当前点击的tab标签不是活动的
  496. if(!tabitem.tab.hasClass('active')){
  497. //没有加载内容
  498. if(tabitem.content.html()=='') {
  499. //html配置
  500. if(tabitem.html){
  501. tabitem.content.html(tabitem.html);
  502. }else if(tabitem.elementId){
  503. //elementId配置
  504. tabitem.content.html($("#"+tabitem.elementId).show().remove());
  505. }
  506. }
  507. if(tabitem.loader){
  508. if(!tabitem.loader.iframeFlag&&(tabitem.content.html()==''||tabitem.loader.activateFresh)){
  509. //要求刷新页面
  510. this.refresh(tabitem);
  511. }else if(tabitem.loader.iframeFlag){
  512. //iframe设置
  513. //没有加载过页面
  514. if(tabitem.content.html()==''){
  515. var contentwidth=this.render.width()-2;
  516. var contentheight=this.render.height()-this.tabpanel_tab_content.height()-12;
  517. var tempHtml='<iframe id="Frame'+tabitem.id+'" name="'+tabitem.id+'Frame" src="'+tabitem.loader.url+'" width="100%" frameborder="0" height="100%"></iframe>';
  518. tabitem.content.css('overflow','hidden').html(tempHtml);
  519. }else if(tabitem.loader.activateFresh){
  520. //加载过页面,刷新
  521. this.refresh(tabitem);
  522. }
  523. }
  524. }
  525. }
  526. }
  527. //要求移动到活动的tab标签
  528. if(executeMoveSee){
  529. //显示内容
  530. tabitem.content.show();
  531. //隐藏原来的标签的内容
  532. if(activedTabIndex>=0){
  533. this.tabs[activedTabIndex].content.hide();
  534. }
  535. //把原来的活动的tab标签设为非活动状态
  536. this.tabpanel_mover.find('.active').removeClass('active');
  537. //添加新点击的标签风样式为活动状态
  538. tabitem.tab.addClass('active');
  539. //移动到可视状态
  540. this.moveToSee(tabitem);
  541. //有活动状态设置后的事件配置
  542. if(tabitem.activate){
  543. tabitem.activate(tabitem);
  544. }
  545. }
  546. },
  547. //刷新iframe
  548. refresh:function(tabitem){
  549. //iframe参数配置
  550. if(tabitem.loader.iframeFlag){
  551. var iframeName='Frame'+tabitem.id;
  552. eval(iframeName+".window.location.reload();");
  553. }else{
  554. var param={};
  555. if(tabitem.loader.param){
  556. param=tabitem.loader.param;
  557. }
  558. $.ajax({
  559. type: 'post',//ajax提交方式
  560. url: tabitem.loader.url,//提交的url
  561. data: param,//参数
  562. dataType: 'text',//数据返回的形式,默认为text即文本
  563. cache:false,
  564. success: function(msg) {
  565. tabitem.content.empty().html(msg);
  566. },
  567. error: function(XMLHttpRequest, textStatus, errorThrown) {
  568. alert('data error');
  569. }
  570. });
  571. }
  572. },
  573. //删除标签
  574. kill : function(tabitem){
  575. //标签个数小于等于最小个数或者为不可用状态,则返回
  576. if(this.tabs.length<=this.minLength){
  577. alert('最少保留'+this.minLength+'个tab标签!');
  578. return;
  579. }
  580. if(tabitem.disabled){
  581. return;
  582. }
  583. //设置this
  584. var tabEntity = this;
  585. //得到标签位置
  586. var position = this.getTabPosition(tabitem);
  587. //得到活动标签位置
  588. var activedTabIndex = this.getActiveIndex();
  589. //移除相应dom对象
  590. tabitem.closer.remove();
  591. tabitem.titleDiv.remove();
  592. tabitem.tab.remove();
  593. tabitem.content.remove();
  594. //从tabs中移除数据
  595. this.tabs.splice(position,1);
  596. //显示滚动的左右箭头
  597. this.showScroll();
  598. //如果关闭的标签为活动的标签
  599. if(activedTabIndex==position){
  600. //如果位置大于0,则将其前一个标签设为活动状态
  601. if(position>0){
  602. this.showItem(this.tabs[position-1], true);
  603. }else{
  604. //若为第一个,则继续将第一个标签设为活动状态
  605. this.showItem(this.tabs[0], true);
  606. }
  607. }else{
  608. //如果活动的标签的位置大于被关闭的标签的位置,把其前一个标签移动到可视状态
  609. if(activedTabIndex>position){
  610. this.moveToSee(this.tabs[activedTabIndex-1]);
  611. }else{
  612. //如果活动的标签的位置小于被关闭的标签的位置,把该标签移动到可视状态
  613. this.moveToSee(this.tabs[activedTabIndex]);
  614. }
  615. }
  616. },
  617. //得到标签总数
  618. getTabsCount : function(){
  619. return this.tabs.length;
  620. },
  621. //设置标签的标题
  622. setTitle : function(tabitem,title){
  623. tabitem.titleDiv.text(title);
  624. },
  625. //得到标签的标题
  626. getTitle : function(tabitem){
  627. return tabitem.titleDiv.text();
  628. },
  629. //设置标签的内容
  630. setContent : function(tabitem,content){
  631. tabitem.content.html(content);
  632. },
  633. //得到标签的内容
  634. getContent : function(tabitem){
  635. return tabitem.content.html();
  636. },
  637. //将标签设为不可用状态
  638. setDisable : function(tabitem,disable){
  639. tabitem.disable = disable;
  640. if(disable){
  641. tabitem.tab.attr('disabled',true);
  642. tabitem.titleDiv.addClass('.disabled');
  643. }else{
  644. tabitem.tab.removeAttr('disabled');
  645. tabitem.titleDiv.removeClass('.disabled');
  646. }
  647. },
  648. //得到标签的diabled状态
  649. getDisable : function(tabitem){
  650. return tabitem.disable;
  651. },
  652. //设置标签的关闭状态
  653. setClosable : function(tabitem,closable){
  654. tabitem.closable = closable;
  655. if(closable){
  656. tabitem.closer.addClass('display_none');
  657. }else{
  658. tabitem.closer.addClass('closer');
  659. tabitem.closer.removeClass('display_none');
  660. }
  661. },
  662. //得到标签的关闭状态
  663. getClosable : function(tabitem){
  664. return tabitem.closable;
  665. },
  666. //得到活动标签的位置
  667. getActiveIndex : function(){
  668. var activedTabIndex = -1;
  669. var activeTab=this.tabpanel_mover.find('.active')[0];
  670. if(activeTab){
  671. activedTabIndex=this.tabpanel_mover.children().index(activeTab);
  672. }
  673. return activedTabIndex;
  674. },
  675. //根据tab的id得到tab
  676. getTabById:function(Id){
  677. for(var i=0;i<this.tabs.length;i++){
  678. if(this.tabs[i].id==Id){
  679. return this.tabs[i];
  680. }
  681. }
  682. },
  683. //得到活动标签对象
  684. getActiveTab : function(){
  685. var activeTabIndex = this.getActiveIndex();
  686. if(activeTabIndex> 0)
  687. return this.tabs[activeTabIndex];
  688. else
  689. return null;
  690. },
  691. //改变整个tab容器的大小
  692. resize : function(){
  693. var hwFix = this.border == 'none' ? 0 : 2;
  694. //如果可改变宽度
  695. if(this.widthResizable) {
  696. this.width = this.render.width();
  697. this.tabpanel.width(this.width-20);
  698. this.tabpanel_tab_content.width(this.width-20);
  699. this.tabpanel_content.width(this.width-20);
  700. }
  701. //如果可改变高度
  702. if(this.heightResizable) {
  703. this.height = this.render.height();
  704. this.tabpanel.height(this.height-hwFix);
  705. this.tabpanel_content.height(this.height-this.tabpanel_tab_content.get(0).offsetHeight-hwFix);
  706. }
  707. //显示滚动
  708. this.showScroll();
  709. //左右箭头可用
  710. this.useableScroll();
  711. //将活动标签移动到可视状态
  712. var entity = this;
  713. setTimeout(function(){entity.moveToSee(entity.getActiveTab());}, 200);
  714. },
  715. //设置整个tab标签容器的宽度和高度
  716. setRenderWH : function(wh) {
  717. if(wh) {
  718. if(wh.width!=undefined) {
  719. this.render.width(wh.width);
  720. }
  721. if(wh.height!=undefined) {
  722. this.render.height(wh.height);
  723. }
  724. this.resize();
  725. }
  726. },
  727. hide:function(){
  728. this.hideflag=true;
  729. this.tabpanel.hide();
  730. },
  731. show:function(){
  732. this.hideflag=false;
  733. this.tabpanel.show();
  734. }
  735. };
  736. })(jQuery);