Rumah >hujung hadapan web >tutorial js >Dalam pembangunan easyUI, penyelesaian kepada masalah fungsi jquery.easyui.min.js library_jquery

Dalam pembangunan easyUI, penyelesaian kepada masalah fungsi jquery.easyui.min.js library_jquery

WBOYasal: 2016-05-16 15:39:381491semak imbas

easyUI ialah pemalam untuk jquery dan pemalam peribadi. easyUI sangat mudah digunakan. Ia mengandungi tiga blok paling penting untuk penghasilan halaman web: kod javascript, kod html dan gaya CSS. Selepas mengimport pustaka easyUI, kami boleh terus menyalin dan menampal kod di dalam untuk menyediakan halaman web dengan mudah dan mudah pada mulanya.

Mula-mula import pustaka fungsi 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>

Kod projek:

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

Tiada masalah dengan kod di atas, tetapi ralat berikut berlaku:

Ralat berlaku: Terdapat masalah dengan pustaka easyUImini.js, tetapi pustaka fungsi telah ditulis dan diuji oleh orang lain Menurut teori, tidak boleh ada ralat.

Melalui pelbagai percubaan, saya mendapati bahawa selepas menambah amaran(11), penyemak imbas tidak lagi melaporkan ralat, dan kod javascript juga boleh dilaksanakan dengan lancar:

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

Selepas kami menukar kod jQuery kepada window.onload(), kod itu masih berjalan seperti biasa:

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

diringkaskan sebagai:

1. Perbezaan antara window.onload() dan $(function(){})

A) window.onload() menunggu sehingga semua elemen halaman dimuatkan (termasuk dom dan javascript), dan kemudian melaksanakan kod fungsi di dalam

B)$(function(){}) menunggu sehingga elemen DOM halaman dimuatkan, dan kemudian melaksanakan kod fungsi di dalam

2. Kerana kami sedang membangun dengan easyUI, kami telah mengimport kod javascript terlebih dahulu, tetapi selepas menggunakan $(function(){}), javascript belum dimuatkan lagi, jadi

Pustaka jquery.easyui.min.js akan melaporkan ralat. Jadi apabila kita menggunakan easyUI untuk membangunkan projek, ingat untuk tidak menggunakan $(function(){}), tetapi disyorkan untuk menggunakan window.onload().

Perkara di atas adalah penyelesaian kepada masalah perpustakaan fungsi jquery.easyui.min.js dalam pembangunan easyUI yang diperkenalkan dalam artikel ini.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript melaksanakan pemusatan menegak dan mendatar dalam kemahiran elemen_javascript tertentuArtikel seterusnya：JavaScript melaksanakan pemusatan menegak dan mendatar dalam kemahiran elemen_javascript tertentu

Artikel berkaitan

Lihat lagi