jQuery笔记[0]——tabs中第二个tab里面jqGrid宽度的问题
问题描述：
<div id="achievement_content"> <ul> <li><a href="#paper">tab0</a></li> <li><a href="#student">tab1</a></li> </ul> <div id="paper"> <table id="paper_list"></table> <div id="paper_pager"></div> </div> <div id="student"> <table id="student_list"></table> <div id="student_pager"></div> </div> </div>
上面实现了两个tab，需要在js中 $("#achievement_content").tabs(); 初始化。下面的两个table分别用两个jqGrid实现。
但是具体实现的时候就发现，当两个jqGrid都是autowidth的时候，只有第一个tab里面的jqgrid可以自动expand，之后的就不可以。
参考资料：
http://forestkqq.iteye.com/blog/671380
问题原因：（参考）
“The default for tabs is that hidden tabs get "display:none". The result of that is that the container size is reported as zero.
So when the grid in the hidden container initializes, /its/ container has zero size, and it sizes itself accordingly.”
解决方法：
1. 代码如下，但是没反应
$(document).ready(function() { var initialized = [false,false]; $(‘#tabs‘).tabs ( { show: function(event, ui) { if(ui.index == 0 && !initialized[0]) { creationGrid0(); initialized[0] = true; } else if(ui.index == 1 && !initialized[1]) { creationGrid1(); initialized[1] = true; } } } ); });
2. 找到了一个修改过的方法，改为.bind，依然没反应
$(document).ready(function() { var initialized = [false,false]; $(‘#tabs‘).bind(‘tabsshow‘, function(event, ui) { { if(ui.index == 0 && !initialized[0]) { creationGrid0(); initialized[0] = true; } else if(ui.index == 1 && !initialized[1]) { creationGrid1(); initialized[1] = true; } } });
3. 以上两种都是经过验证的方法，但是不知道什么原因在我这不能实现。后来我决定放弃对tabs的设置，转而寻求一个更简单的方法
var tab_width = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)").width();来自上面stackflow的一个answer。然后在第二个jqGrid里面设置
width : tab_width,
问题解决。
P.S. tab_width是tab的宽度，赋值给jqGrid的时候会导致它稍宽（比第一个宽了两个像素）。加上一个
tab_width -= 2;
完美解决。修改分辨率之后依然可以实现。
问题总结：
坚持
另辟蹊径
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
