EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼
更新時(shí)間：2010年10月26日 13:06:49 作者：
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼,需要的朋友可以參考下。
tabs代碼如下：
<div id="tabs" class="easyui-tabs">
<div title="tabs1">
tabs1
</div>
<div title="tabs2">
tabs2
</div>
</div>
如果id="tabs"的div未設(shè)置寬度和高度，easyUI默認(rèn)的寬度和高度是auto，這樣在google瀏覽器下顯示正常，但是在IE下默認(rèn)不顯示任何內(nèi)容，并且和dialog還有沖突（dialog無(wú)法彈出窗口）。
無(wú)奈去google搜索，找到一個(gè)解決方法如下：
1. 去掉div里的class="easyui-tabs"
2. 加上一段JS
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
width:$("#tabs").parent().width(),
height:$("#tabs").parent().height()
});
});
</script>
加上這段代碼后，發(fā)現(xiàn)容器會(huì)很高，因?yàn)樗@得是父容器的height
解決方法：
JS修改為
$('#tabs').tabs({
width: $("#tabs").parent().width(),
height: "auto"
});
Ok，搞定
復(fù)制代碼 代碼如下:
<div id="tabs" class="easyui-tabs">
<div title="tabs1">
tabs1
</div>
<div title="tabs2">
tabs2
</div>
</div>
如果id="tabs"的div未設(shè)置寬度和高度，easyUI默認(rèn)的寬度和高度是auto，這樣在google瀏覽器下顯示正常，但是在IE下默認(rèn)不顯示任何內(nèi)容，并且和dialog還有沖突（dialog無(wú)法彈出窗口）。
無(wú)奈去google搜索，找到一個(gè)解決方法如下：
1. 去掉div里的class="easyui-tabs"
2. 加上一段JS
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(function(){
$("#tabs").tabs({
width:$("#tabs").parent().width(),
height:$("#tabs").parent().height()
});
});
</script>
加上這段代碼后，發(fā)現(xiàn)容器會(huì)很高，因?yàn)樗@得是父容器的height
解決方法：
JS修改為
復(fù)制代碼 代碼如下:
$('#tabs').tabs({
width: $("#tabs").parent().width(),
height: "auto"
});
Ok，搞定
您可能感興趣的文章:
- jQuery EasyUI Tab 選項(xiàng)卡問(wèn)題小結(jié)
- jQuery EasyUI 布局之動(dòng)態(tài)添加tabs標(biāo)簽頁(yè)
- 基于Jquery easyui 選中特定的tab
- jquery easyui 結(jié)合jsp簡(jiǎn)單展現(xiàn)table數(shù)據(jù)示例
- easyui的tabs update正確用法分享
- jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁(yè)/選項(xiàng)卡
- jQuery EasyUI 中文API Layout(Tabs)
- 如何解決jQuery EasyUI 已打開(kāi)Tab重新加載問(wèn)題
相關(guān)文章
基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框 (數(shù)據(jù)、步驟、代碼)
基于jquery實(shí)現(xiàn)的一個(gè)選擇中國(guó)大學(xué)的彈框，需要的朋友可以參考下2012-07-07
為jquery.ui.dialog 增加“在當(dāng)前鼠標(biāo)位置打開(kāi)”的功能
在使用jquery.ui.dialog的過(guò)程中，發(fā)現(xiàn)position參數(shù)有些問(wèn)題，無(wú)法通過(guò)position: [PosX, PosY]動(dòng)態(tài)傳遞位置參數(shù)。下面是官方demo 代碼2009-11-11
在網(wǎng)上看到許多的jquery插件實(shí)現(xiàn)滾動(dòng)新聞，特別是新聞顯示在div里面的，比較了一番發(fā)現(xiàn)這款jquery.vticker-min.js還是挺不錯(cuò)的，于是就將它集成到我的畢業(yè)設(shè)計(jì)里面。2010-06-06
jquery中關(guān)于inArray()函數(shù)的詳細(xì)使用說(shuō)明2011-10-10
本文給大家分享的是一則使用jQuery實(shí)現(xiàn)圖片切換的插件，效果非常不錯(cuò)，兼容性也很好，推薦給大家，有需要的小伙伴快來(lái)參考下吧。2015-03-03
jQuery 驗(yàn)證插件 Web前端設(shè)計(jì)模式(asp.net)
asp.net下用戶注冊(cè)頁(yè)面的驗(yàn)證代碼，花了點(diǎn)時(shí)間將驗(yàn)證做成一個(gè)jQuery插件，希望對(duì)需要的朋友有所幫助。2010-10-10
jQuery插件Slider Revolution實(shí)現(xiàn)響應(yīng)動(dòng)畫滑動(dòng)圖片切換效果
Slider Revolution插件是一款非常強(qiáng)大的插件了，我們可以利用它來(lái)制作出各種效果并且還支持移動(dòng)設(shè)備，支持手機(jī)觸摸，鍵盤翻頁(yè)；它內(nèi)置幻燈、視頻播放計(jì)時(shí)器等等效果，具體我們來(lái)看看。2015-06-06
JQuery SELECT單選模擬jQuery.select.js
本文件是跟據(jù) zhangjingwei 的Jquery Select(單選) 模擬插件 V1.3.4 修改而來(lái)的，需要的朋友可以參考下。2009-11-11
jquery基礎(chǔ)教程之?dāng)?shù)組使用詳解
jQuery的數(shù)組處理、便捷、功能齊全。一步到位的封裝了很多原生JavaScript數(shù)組不能企及的功能。下面是jquery數(shù)組的使用詳解,需要的朋友可以參考下2014-03-03
jquery validate 實(shí)現(xiàn)動(dòng)態(tài)增加/刪除驗(yàn)證規(guī)則操作示例
這篇文章主要介紹了jquery validate 實(shí)現(xiàn)動(dòng)態(tài)增加/刪除驗(yàn)證規(guī)則操作,結(jié)合實(shí)例形式分析了jQuery validate表單驗(yàn)證相關(guān)操作技巧,需要的朋友可以參考下2019-10-10