在easyUI開發中，出現jquery.easyui.min.js函數庫問題的解決方案

在easyUI開發中，出現jquery.easyui.min.js函數庫問題的解決方案_jquery

WBOY

發布： 2016-05-16 15:39:38

原創

1516 人瀏覽過

easyUI是jquery的插件，是民間的插件。 easyUI使用起來很方便，裡面有網頁製作的最重要的三大方塊：javascript程式碼、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 &copy;拓胜公司 版权所有</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)後，瀏覽器就不報錯了，javascript程式碼也能順利的執行：

<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來開發，事先導入了javascript程式碼，但利用$(function(){})後，javascript還沒載入完畢，所以

jquery.easyui.min.js函式庫就會報錯了。所以在我們利用 easyUI開發專案的時候記得不要使用$(function(){})，而建議去使用window.onload()。

以上就是本文跟大家介紹的在easyUI開發中，出現jquery.easyui.min.js函數庫問題的解決方法，希望大家喜歡。