easyUI開発におけるjquery.easyui.min.js関数 library_jquery の問題の解決策-jsチュートリアル-php.cn

easyUI開発におけるjquery.easyui.min.js関数 library_jquery の問題の解決策

WBOY

リリース： 2016-05-16 15:39:38

オリジナル

1489 人が閲覧しました

easyUI は jquery のプラグインであり、プライベートプラグインです。 easyUI は非常に使いやすく、Web ページ制作に最も重要な 3 つのブロック、JavaScript コード、HTML コード、CSS スタイルが含まれています。 easyUI ライブラリをインポートした後、内部のコードを直接コピーして貼り付けることで、Web ページを簡単かつ簡単に初期設定できます。

まず 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 関数ライブラリの問題の解決策です。