在easyUI開發(fā)中，出現(xiàn)jquery.easyui.min.js函數(shù)庫問題的解決辦法

更新時間：2015年09月11日 10:58:39 作者：RolleanTony

easyUI是jquery的一個插件，是民間的插件，easyUI使用起來很方便，里面有網(wǎng)頁制作的最重要的三大方塊：javascript代碼、html代碼和Css樣式，但是很容易出現(xiàn)jquery.easyui.min.js函數(shù)庫問題，小編教大家如何解決問題，需要的朋友可以參考下

easyUI是jquery的一個插件，是民間的插件。easyUI使用起來很方便，里面有網(wǎng)頁制作的最重要的三大方塊：javascript代碼、html代碼和Css樣式。我們在導入easyUI庫后，可以直接復制粘貼里面的代碼，從而簡單輕便地初步設置網(wǎng)頁。

首先導入easyUI函數(shù)庫：

<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>拓勝公司后臺管理系統(tǒng)</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;拓勝公司 版權(quán)所有</div>
    </div>
    <div data-options="region:'west',title:'系統(tǒng)管理',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:'編輯區(qū) '" 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>

上面代碼沒有任何的問題，但是卻出現(xiàn)如下錯誤：

發(fā)生的錯誤：easyUImini.js庫出現(xiàn)了問題，但是函數(shù)庫是別人寫好了，測試過的，里面理論下是不可能會有錯誤的。

通過種種的嘗試，發(fā)現(xiàn)加入alert(11)后，瀏覽器就不報錯了，javascript代碼也能順利的執(zhí)行：

<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>

總結(jié)為：

　　1、window.onload()和$(function(){})的區(qū)別

　　　　A)window.onload()是等到頁面所有元素加載完畢后（包括dom和javascript），再執(zhí)行里面的函數(shù)代碼

　　　　B)$(function(){})是等到頁面的dom元素加載完畢后，再執(zhí)行里面的函數(shù)代碼

　　2、因為我們是用easyUI來開發(fā)，事先導入了javascript代碼，但是利用$(function(){})后，javascript還沒加載完畢，所以

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

以上就是本文給大家介紹的在easyUI開發(fā)中，出現(xiàn)jquery.easyui.min.js函數(shù)庫問題的解決辦法，希望大家喜歡。

您可能感興趣的文章:

jQuery中prepend（）方法使用詳解
prepend（）方法可以將指定元素插入匹配元素內(nèi)部開頭，主要用到content和selector參數(shù)，這篇文章主要給大家介紹jQuery中prepend（）方法使用，需要的朋友可以參考下
2015-08-08
jQuery實現(xiàn)列表自動滾動循環(huán)滾動展示新聞
jQuery實現(xiàn)列表自動滾動循環(huán)滾動展示新聞，鼠標懸停時停止?jié)L動并提示，離開后，繼續(xù)滾動，實現(xiàn)的代碼如下，需要的朋友可以看看
2014-08-08
jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面的代碼
jquery+ajax每秒向后臺發(fā)送請求數(shù)據(jù)然后返回頁面（包括jquery頁面加載完畢才執(zhí)行方法）
2011-01-01
AJAX和jQuery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法
本文給大家介紹使用ajax和jquery動態(tài)加載數(shù)據(jù)的實現(xiàn)方法，使用jQuery可以簡化這個過程。下面通過實例代碼給大家介紹下，需要的的朋友參考下吧
2016-12-12
jQuery Ajax調(diào)用WCF服務詳細教程
這篇文章主要介紹了jQuery Ajax調(diào)用WCF服務詳細教程,本文講解了從WFC編程到JQUERY調(diào)用的詳細步驟,并總結(jié)了使用中遇到的問題和解決方法,需要的朋友可以參考下
2015-03-03
擴展easyui.datagrid，添加數(shù)據(jù)loading遮罩效果代碼
easyui可以說是輕量級的前端UI框架，更新到1.2.1支持更多的事件，方法和屬性
2010-11-11
Jquery調(diào)用webService遠程訪問出錯的解決方法
原來web.config里面默認Post設置是不允許遠程調(diào)用webservice，需要配置一下就可以了
2010-05-05
jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果,通過jQuery+html5的canvas利用時間函數(shù)進行實時數(shù)學運算動態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下
2016-01-01
Jquery數(shù)字上下滾動動態(tài)切換插件
有時我們需要動態(tài)的展示訪問次數(shù)、下載次數(shù)等效果，我們可以借助jQuery結(jié)合后臺php實現(xiàn)一個滾動的數(shù)字展示效果。
2015-08-08
Bookmarklet實現(xiàn)啟動jQuery(模仿云輸入法)
最近流行的 sogo云輸入法， QQ云輸入法，都用到了bookmarklet技術(shù)。
2010-09-09