easyUI 개발에서 jquery.easyui.min.js 함수 library_jquery 문제에 대한 해결책
- WBOY원래의
- 2016-05-16 15:39:381486검색
easyUI는 jquery용 플러그인이자 전용 플러그인입니다. easyUI는 사용하기 매우 편리합니다. 여기에는 웹 페이지 제작에 가장 중요한 세 가지 블록인 자바스크립트 코드, HTML 코드 및 CSS 스타일이 포함되어 있습니다. easyUI 라이브러리를 가져온 후 내부에 코드를 직접 복사하여 붙여넣으면 쉽고 쉽게 초기 웹 페이지를 설정할 수 있습니다.
먼저 easyUI 함수 라이브러리를 가져옵니다:
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"> <script type="text/javascript" src="easyui/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
프로젝트 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>欢迎来到后台管理界面</title>
<link rel="stylesheet" type="text/css" href="plugin/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="plugin/themes/default/easyui.css" />
</head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="plugin/easyloader.js"></script>
<script type="text/javascript" src="plugin/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#tt').tabs('add', {
title: '查看',
content: 'Tab Body',
closable: true,
tools: [{
iconCls: 'icon - mini - refresh',
handler: function() {
alert('refresh');
}
}]
});
});
</script>
<body class="easyui-layout">
<div data-options="region:'north',split:true" style="height:100px;">
<div>
<h1>拓胜公司后台管理系统</h1></div>
</div>
<div data-options="region:'south',split:true" style="height:60px;">
<div style="margin: auto; width: 400px ; padding: 20px; font-size: 20px;">Copyright ©拓胜公司 版权所有</div>
</div>
<div data-options="region:'west',title:'系统管理',split:true" style="width:240px;">
<div id="aa" class="easyui-accordion">
<div title="管理员管理" style="padding: 10px;">
<ul>
<li><a href="#">添加</a></li>
<li><a href="#">查看</a></li>
<li><a href="#">修改</a></li>
<li><a href="#">删除</a></li>
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'编辑区 '" style="padding:5px;background:#eee;">
<div id="tt" class="easyui-tabs" ">
<div title="添加 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; ">
tab1
</div>
<div title="删除 " data-options="closable:true " style="overflow:auto;padding:20px;display:none; ">
tab2
</div>
</div>
</div>
</body>
</html>
위 코드에는 문제가 없으나 다음과 같은 오류가 발생합니다.
오류 발생: easyUImini.js 라이브러리에 문제가 있지만 함수 라이브러리는 다른 사람이 작성하고 테스트한 결과 이론에 따르면 오류가 있을 수 없습니다.
다양한 시도를 통해, Alert(11)을 추가한 후 브라우저가 더 이상 오류를 보고하지 않으며, 자바스크립트 코드도 원활하게 실행될 수 있음을 발견했습니다.
<script type="text/javascript">
$(function() {
alert(11);
$('#tt').tabs('add', {
title: '查看',
content: 'Tab Body',
closable: true,
tools: [{
iconCls: 'icon - mini - refresh',
handler: function() {
alert('refresh');
}
}]
});
});
</script>
jQuery 코드를 window.onload()로 변경한 후에도 코드는 여전히 정상적으로 실행됩니다.
<script type="text/javascript">
window.onload=function(){
$('#tt').tabs('add', {
title: '查看',
content: 'Tab Body',
closable: true,
tools: [{
iconCls: 'icon - mini - refresh',
handler: function() {
alert('refresh');
}
}]
});
}
</script>
은 다음과 같이 요약됩니다.
1. window.onload()와 $(function(){})의 차이점
A) window.onload()는 페이지의 모든 요소(dom 및 javascript 포함)가 로드될 때까지 기다린 후 내부의 함수 코드를 실행합니다.
B)$(function(){})은 페이지의 DOM 요소가 로드될 때까지 기다린 후 내부의 함수 코드를 실행합니다
2. easyUI로 개발중이기 때문에 자바스크립트 코드를 미리 import해 두었는데, $(function(){})을 사용한 후 아직 자바스크립트가 로딩되지 않아서
jquery.easyui.min.js 라이브러리에서 오류를 보고합니다. 따라서 easyUI를 사용하여 프로젝트를 개발할 때 $(function(){})을 사용하지 말고 window.onload()를 사용하는 것이 좋습니다.
위 내용은 이번 글에서 소개한 easyUI 개발 중 jquery.easyui.min.js 함수 라이브러리 문제에 대한 해결 방법입니다.