Home >Web Front-end >JS Tutorial >In easyUI development, the solution to the problem of jquery.easyui.min.js function library_jquery

In easyUI development, the solution to the problem of jquery.easyui.min.js function library_jquery

WBOYOriginal: 2016-05-16 15:39:381487browse

easyUI is a plug-in for jquery and a private plug-in. easyUI is very convenient to use. It contains the three most important blocks for web page production: javascript code, html code and CSS style. After importing the easyUI library, we can directly copy and paste the code inside to easily and easily initially set up the web page.

First import the easyUI function library:

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

Project code:

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

There is no problem with the above code, but the following error occurs:

Error occurred: There is a problem with the easyUImini.js library, but the function library has been written and tested by others. According to the theory, there can be no errors.

Through various attempts, I found that after adding alert(11), the browser no longer reports errors, and the javascript code can also be executed smoothly:

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

After we changed the jQuery code to window.onload(), the code still runs normally:

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

is summarized as:

1. The difference between window.onload() and $(function(){})

A) window.onload() waits until all elements of the page are loaded (including dom and javascript), and then executes the function code inside

B)$(function(){}) waits until the DOM element of the page is loaded, and then executes the function code inside

2. Because we are developing with easyUI, we have imported the javascript code in advance, but after using $(function(){}), the javascript has not been loaded yet, so

The jquery.easyui.min.js library will report an error. So when we use easyUI to develop projects, remember not to use $(function(){}), but it is recommended to use window.onload().

The above is the solution to the problem of jquery.easyui.min.js function library in easyUI development introduced in this article. I hope you like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript implements vertical and horizontal centering in specified elements_javascript skillsNext article：JavaScript implements vertical and horizontal centering in specified elements_javascript skills

See more

In easyUI development, the solution to the problem of jquery.easyui.min.js function library_jquery

Related articles