Dans le développement easyUI, la solution au problème de la fonction jquery.easyui.min.js library

Dans le développement easyUI, la solution au problème de la fonction jquery.easyui.min.js library_jquery

WBOY

Libérer： 2016-05-16 15:39:38

original

1486 Les gens l'ont consulté

easyUI est un plug-in pour jquery et un plug-in privé. easyUI est très pratique à utiliser. Il contient les trois blocs les plus importants pour la production de pages Web : le code javascript, le code html et le style CSS. Après avoir importé la bibliothèque easyUI, nous pouvons directement copier et coller le code à l'intérieur pour configurer initialement la page Web facilement et facilement.

Importez d'abord la bibliothèque de fonctions 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>

Copier après la connexion

Code du projet :

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

Copier après la connexion

Il n'y a aucun problème avec le code ci-dessus, mais l'erreur suivante se produit :

Une erreur s'est produite : il y a un problème avec la bibliothèque easyUImini.js, mais la bibliothèque de fonctions a été écrite et testée par d'autres. Selon la théorie, il ne peut y avoir aucune erreur.

Grâce à diverses tentatives, j'ai constaté qu'après l'ajout d'alert(11), le navigateur ne signale plus les erreurs et que le code javascript peut également être exécuté en douceur :

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

Copier après la connexion

Après avoir modifié le code jQuery en window.onload(), le code s'exécute toujours normalement :

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

Copier après la connexion

se résume ainsi :

1. La différence entre window.onload() et $(function(){})

A) window.onload() attend que tous les éléments de la page soient chargés (y compris dom et javascript), puis exécute le code de fonction à l'intérieur de

B)$(function(){}) attend que l'élément DOM de la page soit chargé, puis exécute le code de fonction à l'intérieur

2. Parce que nous développons avec easyUI, nous avons importé le code javascript à l'avance, mais après avoir utilisé $(function(){}), le javascript n'a pas encore été chargé, donc

La bibliothèque jquery.easyui.min.js signalera une erreur. Ainsi, lorsque nous utilisons easyUI pour développer des projets, n'oubliez pas de ne pas utiliser $(function(){}), mais il est recommandé d'utiliser window.onload().

Ce qui précède est la solution au problème de la bibliothèque de fonctions jquery.easyui.min.js dans le développement easyUI présenté dans cet article. J'espère que vous l'aimerez.