jQuery缁勪欢easyui鍩烘湰甯冨眬鎬庝箞瀹炵幇
瑕佷娇鐢╦Query缁勪欢easyui瀹炵幇鍩烘湰甯冨眬锛屼綘闇€瑕佸紩鍏asyui鐨凜SS鍜孞avaScript鏂囦欢銆傜劧鍚庯紝鍙互浣跨敤layout缁勪欢鏉ュ垱寤?/span>鍩烘湰鐨勫竷灞€銆?/span>
涓嬮潰鏄竴涓畝鍗曠殑绀轰緥锛屽睍绀轰簡濡備綍浣跨敤easyui鐨刲ayout缁勪欢鍒涘缓涓€涓寘鍚《閮ㄣ€佸乏渚у鑸爮鍜屼富鍐呭鍖哄煙鐨勫熀鏈竷灞€锛?/span>
<!DOCTYPE html><html>
<head>
<title>EasyUI鍩烘湰甯冨眬绀轰緥</title>
<!-- 寮曞叆easyui鐨凜SS鍜孞avaScript -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.26/themes/default
/easyui.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-easyui@1.9.26/jquery.easyui.min.js">
</script>
<style>
/* 璁剧疆甯冨眬瀹瑰櫒鐨勯珮搴?nbsp;*/
#layout {
height: 500px;
}
/* 璁剧疆涓诲唴瀹瑰尯鍩熺殑鏍峰紡 */
#mainContent {
padding: 10px;
}
</style>
<script>
$(function(){
// 鍒涘缓甯冨眬
$('#layout').layout();
// 璁剧疆瀵艰埅鏍忕殑瀹藉害
$('#nav').panel({
width: 200
});
});
</script>
</head>
<body>
<div id="layout" class="easyui-layout">
<!-- 椤堕儴鍖哄煙 -->
<div data-options="region:'north'" style="height:50px">
<!-- 椤堕儴鍐呭 -->
</div>
<!-- 宸︿晶瀵艰埅鏍忓尯鍩?nbsp;-->
<div id="nav" data-options="region:'west', split:true">
<!-- 瀵艰埅鏍忓唴瀹?nbsp;-->
</div>
<!-- 涓诲唴瀹瑰尯鍩?nbsp;-->
<div id="mainContent" data-options="region:'center'">
<!-- 涓诲唴瀹?nbsp;-->
</div>
</div>
</body>
</html>
鍦ㄤ笂闈㈢殑绀轰緥涓紝鎴戜滑棣栧厛寮曞叆浜唀asyui鐨凜SS鍜孞avaScript鏂囦欢銆傜劧鍚庯紝鍦ㄩ〉闈腑鍒涘缓涓€涓?div 鍏冪礌锛屽苟涓哄叾璁剧疆 id="layout" 鍜?class="easyui-layout"锛屼互渚夸娇鐢╡asyui鐨勫竷灞€缁勪欢銆?/span>
鍦ㄥ竷灞€瀹瑰櫒鍐咃紝鎴戜滑瀹氫箟浜嗕笁涓瓙鍖哄煙锛氶《閮ㄥ尯鍩熴€佸乏渚у鑸爮鍖哄煙鍜屼富鍐呭鍖哄煙銆傚彲浠ユ牴鎹渶瑕佽嚜瀹氫箟杩欎簺鍖哄煙鐨勬牱寮忓拰鍐呭銆?/span>
鏈€鍚庯紝鍦↗avaScript浠ｇ爜涓紝鎴戜滑璋冪敤浜?$('#layout').layout() 鏉ュ垵濮嬪寲甯冨眬缁勪欢銆傝繕浣跨敤浜?$('#nav').panel() 鏉ヨ缃鑸爮鐨勫搴︺€?/span>
璇锋敞鎰忥紝涓婅堪绀轰緥鍙槸涓€涓畝鍗曠殑婕旂ず锛屼綘鍙互鏍规嵁鑷繁鐨勯渶姹傚拰鏍峰紡鏉ヤ慨鏀瑰竷灞€鐨勭粨鏋勫拰鏍峰紡銆?/span>
