您的位置：首页 > 产品设计 > UI/UE

加载EasyUi和使用Parser解析器

2016-01-02 17:13 447 查看

一 EasyUi的加载方式：

1 使用class方式加载：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<!-- <script type="text/javascript" src="js/easyuiload.js"></script> -->
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<!-- <div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div> -->
<div id="box" class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div>
<!-- <div id="box" style="width:400px;height:200px" title="提示标题">
提示内容
</div> -->

<!-- <div id="box">
<div  class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div>
</div> -->
</body>
</html>

使用class指定对应的ui组件，class="easyui-组件名称",完成加载对应组件。

2使用js方式加载ui组件

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/easyuiload.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<!-- <div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div> -->
<!-- <div id="box" class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div> -->
<div id="box" style="width:400px;height:200px" title="提示标题">
提示内容
</div>

<!-- <div id="box">
<div  class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div>
</div> -->
</body>
</html>

js/easyuiload.js

$(function(){
$("#box").dialog();
/*	$.parser.parse("#box");*/
});

/*$.parser.auto=false;
$.parser.onComplete=function(){
alert("UI OK");
};*/

引入js/easyuiload.js ，在页面加载完后加载easyui.

二 Parser解析器：

parser解析器，解析easyui组件,用来指定class加载组件的情况下，哪些组件会加载，哪些组件不需要加载。

默认，全部加载。若想全不加载，则在js添加，在页面加载完成前执行$.parser.auto=false;

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/easyuiload.js"></script>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
</head>
<body>
<!-- <div class="easyui-dialog" style="width:400px;height:200px"
data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div> -->
<!-- <div id="box" class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div> -->
<!-- <div id="box" style="width:400px;height:200px" title="提示标题">
提示内容
</div> -->

<div id="box">
<div  class="easyui-dialog" style="width:400px;height:200px" title="提示标题">
提示内容
</div>
</div>
</body>
</html>

$(function(){
/*$("#box").dialog();*/
/*	$.parser.parse("#box");*/
});

$.parser.auto=false;
/*
$.parser.onComplete=function(){
alert("UI OK");
};*/

此时class指定的组件不会被加载。

若想加载id="box"的组件，则需要修改js

$(function(){
/*$("#box").dialog();*/
$.parser.parse("#box");
});

$.parser.auto=false;
/*
$.parser.onComplete=function(){
alert("UI OK");
};*/

注意

$.parser.parse("#box");

选择器必须是组件容器的父级容器，最外层的div id.否则不生效。

此外，当

$.parser.parse();

没有参数的时候，会加载全部ui组件。

对于easyui加载完成想要执行一个回调函数，可以通过下面的方式实现

$(function(){
/*$("#box").dialog();*/
$.parser.parse("#box");
});

$.parser.auto=false;

$.parser.onComplete=function(){
alert("UI OK");
};

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">

</pre><pre name="code" class="html">onComplete

指定的回调函数只有在ui加载成功后才会执行，否则不执行。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航