在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法

easyUI是jquery的一个插件，是民间的插件。easyUI使用起来很方便，里面有网页制作的最重要的三大方块：javascript代码、html代码和Css样式。我们在导入easyUI库后，可以直接复制粘贴里面的代码，从而简单轻便地初步设置网页。

首先导入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 ©拓胜公司 版权所有</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函数库问题的解决办法，希望大家喜欢。

赞 (0)

相关推荐

  • jQuery聚合函数实例

    本文实例讲述了jQuery聚合函数.分享给大家供大家参考.具体如下: (function($) { $.fn.aggregate = function(seed, func) { var _r = seed == null ? "" : seed; this.each(function(index, element) { _r = func(_r, element); }); return _r; }; $.fn.count = function() { return this.agg

  • jquery trim() 功能源代码

    复制代码 代码如下: // Used for trimming whitespace trimLeft = /^\s+/, trimRight = /\s+$/, // Use native String.trim function wherever possible trim: trim ? function( text ) { return text == null ? "" : trim.call( text ); } : // Otherwise use our own tri

  • jQuery 遍历函数详解

    jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函数 描述 .add() 将元素添加到匹配元素的集合中. .andSelf() 把堆栈中之前的元素集添加到当前集合中. .children() 获得匹配元素集合中每个元素的所有子元素. .closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素. .contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点. .each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数. .end(

  • jQuery Trim去除字符串首尾空字符的实现方法说明

    假如您的项目正在使用jQuery框架,要去除字符串首尾的空字符您当然会选择:jQuery.trim(string).如果没有用到jQuery如何简单的实现呢.之前本人曾发过一个代码小片段:Javascript去除字符串左右的空格-trim(),这个写的比较粗糙并要用到递规操作.所以很多人很不满意代码的质量,包括我在内.偶尔看了下jQuery的代码,发现非常值的我们学习. 看看它是怎么实现这个功能的吧,代码只有一句话:使用正则方法. JavaScript Trim实现代码function trim

  • jQuery插件制作之全局函数用法实例

    本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓的全局函数,实际上就是jQuery对象的方法,但从实践的角度上看,他们是位于jQuery命名空间内部的函数 (1)添加一个函数,只需要将新函数指定为jQuery对象的一个属性. jQuery.five =function(){ alert("直接继承方式不一样"); } 调用: 复制代码 代码如下: $.five(); (2)添加多个函数 jQuery.five =func

  • jquery $.trim()方法使用介绍

    $.trim(str) 返回:string: 说明:去掉字符串首尾空格. 示例: 先看个错误代码错误代码: 复制代码 代码如下: <input type="text" name="" id="results" value=""/> var content = $('#content').val(); if(content.trim() == '') alert('空'); 上面的写法在firefox下不会报错,但在

  • jQuery.trim() 函数及trim()用法详解

    jQuery.trim()函数用于去除字符串两端的空白字符.该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止).它会清除包括换行符.空格.制表符等常见的空白字符. 该函数属于全局的jQuery对象. 语法 jQuery 1.0 新增该静态函数. jQuery.trim( str ) 参数 描述 str String类型需要去除两端空白字符的字符串. 如果参数str不是字符串类型,该函数将自动将其转为字符串(一般调用其toString()方法).如果参数str为null

  • 在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法

    在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法

    easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步设置网页. 首先导入easyUI函数库: <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

  • django中使用jquery ajax post数据出现403错误的解决办法(两种方法)

    在django中,使用jquery ajax post数据,会出现403的错误 方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null;

  • 使用jquery.qrcode.min.js实现中文转化二维码

    今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能.后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且只能解析一个字符串! 而我所需要的是将一个对象转化成二维码,然后在扫描的时候取出对象中的数据,显然qrcode.js不能实现,经过查找,找到另一个jquery.qrc

  • 关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法

    最近项目用到了backbone 做前后端的分离方案,遇见了中文乱码问题,解决方案总结如下: 假设需要存一条课程记录到后台 model定义如下: var AddCourse= Backbone.Model.extend({ url:path+"/course/add", parse : function(response){ return response.data; } }); encodeURIComponent 函数 将中文的内容进行编码 $('#addCourseBtn' ).c

  • 在Ajax中使用get和post所遇到的问题及解决办法

    使用get遇到的问题: 1.问题一. 缓存:当每次访问的url相同,客户端直接读取本地缓存里面的内容,即使后台数据变化前台也不会有变化: 解决方法:在?后面链接一个num=[随机数Math.random()]或者num=[时间戳new Date().getTime()],'1.php?username="May"&'+num(这里没有变量名,避免和后台参数冲突) 2.问题二. 乱码,当传递中文或者特殊字符的时候,前台显示出现乱码 解决办法:使用编码encodeURI('蜗牛')

  • Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法

    一.发现问题 在尝试编辑博客站点的Wordpress主题时,突然发现博客站点无法连接:刷新后提示"建立数据库连接错误"之类的错误.自然想到是mysql可能出错了,所以就登陆了VPS主机,尝试启动mysql服务,但是提示failed. 二.解决方法 1.打开/var/log/mysql/error.log文件,查看出错日志.在阅读日志时发现第一条错误提示是:[ERROR] Can't open the mysql.plugin table. Please run mysql_upgrad

  • Eclipse 开发java 出现Failed to create the Java Virtual Machine错误解决办法

    Eclipse 开发java 出现Failed to create the Java Virtual Machine错误解决办法 一直用Eclipse开发Java,突然有这么一天,无法启动了,splash窗口显示"Failed to create the Java Virtual Machine" 修改eclipse.ini配置文件,找到下面的片段: --launcher.XXMaxPermSize 256M -showsplash org.eclipse.platform --lau

  • Android Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    重构了下之前自己的一个新闻客户端,全部使用了Fragment来进行页面切换,只有一个入口Activity作为程序的启动Activity,其中有一个界面需要调用摄像头识别二维码,于是就会用到SurfaceView进行预览,那么问题来了,当切换到对应的Fragment时,屏幕会黑一下,黑了1秒左右就显示出正常的界面,而且这种现象只有第一次进入该Fragment才会出现,之后进入都不会出现,解决方法是无意在github上看到了,试了一下,可以行的通,下面贴出解决方法. 方法一.在Activity的on

  • Android 中读取SD卡文件时抛出NullPointerException错误解决办法

    Android 中读取SD卡文件时抛出NullPointerException错误解决办法 相关源码: package com.example.musicplayer; import java.io.File; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.os.Environment; import

  • Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

    在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法 其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出

随机推荐