In der EasyUI-Entwicklung ist die Lösung des Problems die Funktion „library_jquery' von jquery.easyui.min.js-js-Tutorial-php.cn

In der EasyUI-Entwicklung ist die Lösung des Problems die Funktion „library_jquery' von jquery.easyui.min.js

WBOY

Freigeben： 2016-05-16 15:39:38

Original

1489 Leute haben es durchsucht

easyUI ist ein Plug-in für JQuery und ein privates Plug-in. easyUI ist sehr benutzerfreundlich. Es enthält die drei wichtigsten Blöcke für die Webseitenerstellung: Javascript-Code, HTML-Code und CSS-Stil. Nach dem Import der easyUI-Bibliothek können wir den Code direkt kopieren und einfügen, um die Webseite einfach und unkompliziert zunächst einzurichten.

Importieren Sie zunächst die easyUI-Funktionsbibliothek:

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

Nach dem Login kopieren

Projektcode:

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

Nach dem Login kopieren

Es gibt kein Problem mit dem obigen Code, aber der folgende Fehler tritt auf:

Fehler aufgetreten: Es liegt ein Problem mit der easyUImini.js-Bibliothek vor, aber die Funktionsbibliothek wurde von anderen geschrieben und getestet. Der Theorie zufolge kann es keine Fehler geben.

Durch verschiedene Versuche habe ich festgestellt, dass der Browser nach dem Hinzufügen von Alert(11) keine Fehler mehr meldet und der Javascript-Code auch reibungslos ausgeführt werden kann:

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

Nach dem Login kopieren

Nachdem wir den jQuery-Code in window.onload() geändert haben, läuft der Code immer noch normal:

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

Nach dem Login kopieren

wird zusammengefasst als:

1. Der Unterschied zwischen window.onload() und $(function(){})

A) window.onload() wartet, bis alle Elemente der Seite geladen sind (einschließlich Dom und Javascript) und führt dann den Funktionscode in
aus

B)$(function(){}) wartet, bis das DOM-Element der Seite geladen ist, und führt dann den darin enthaltenen Funktionscode aus

2. Da wir mit easyUI entwickeln, haben wir den Javascript-Code im Voraus importiert, aber nach der Verwendung von $(function(){}) wurde das Javascript noch nicht geladen, also

Die Bibliothek jquery.easyui.min.js meldet einen Fehler. Wenn wir also easyUI zum Entwickeln von Projekten verwenden, denken Sie daran, nicht $(function(){}) zu verwenden, sondern es wird empfohlen, window.onload() zu verwenden.

Das Obige ist die Lösung für das Problem der jquery.easyui.min.js-Funktionsbibliothek in der easyUI-Entwicklung, die in diesem Artikel vorgestellt wurde.