easyui----1

最新推荐文章于 2024-07-16 22:31:12 发布

bluss-yang

最新推荐文章于 2024-07-16 22:31:12 发布

阅读量291

点赞数

文章标签： easyui

转自http://www.jeasyuicn.com/easyui-parser.html

Easyui第一课之Parser（解析器）

分类： easyui 发表于 2011-11-17 15:16 , 已有 35543次阅读

嗯，前面说了从这个礼拜开始要每个礼拜讲解一个easyui的组件。不食言，今天开讲。

easyui的所有插件主要分为六大部分：Base基础、Layout布局、Menu&Button菜单按钮、Form表单、Window窗口、Datagrid&Tree表格&树。我将会从Base讲起，Base包含了八个基础插件分别是：

parser(解析器)

progressbar(进度条)

parser(解析器)

解析器可是easyui一个重要基础插件，你之所以可以通过简单class定义，在浏览器里面就能展现出一个布局或是面板

全是通过这个插件作为入口，他会获取所有在指定范围内所有定义为easyui组件的class定义，然后在根据后缀定义辨别需要

把当前节点解析成为何种组件。

解析器有两种用法：

$.parser.parse();不带任何参数。这种情况下默认是解析页面中所有定义为easyui组件的节点。
$.parser.parse('#cc'); 带一个jquery选择器。通过这种方式我们可以只解析我们局部定义的easyui组件，
需要说明的这个jquery选择器必须是你解析组件的父级以上的节点。也就是说这个查找出来的节点相当于一个容器，它只会解析容器里面的内容。

全局属性：$.parser.auto 定义是否自动解析easyui组件。默认是为true，自动解析。

事件：$.parser.onComplete 看名称就知道，这个是在所有组件解析完成后执行的事件。其实这个事件很有用的。很多同学在布局用到easyui的时候总会出现一个问题。就是在一进入主界面的时候，页面的并不是马上就展现，而是会有一个混乱的过程，之后一闪就又好了。其实这个就是因为easyui是在dom载入完毕之后才会对整个页面进行解析，当你你们布局和组件使用的比较多的时候，完整的解析组件就需要一个过程，而在这个过程中就会出现短暂的界面混乱现象。要解决这个问题其实只要好好利用这个onComplete 事件在结合一个载入遮罩就解决问题了。

首先你在body下面第一行加入一个载入提示遮罩div

 
     1 <div id='Loading' style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB url('style/images/bodybg.jpg');text-align:center;padding-top: 20%;"><h1><image src='style/images/loading.gif'/><font color="#15428B">加载中···</font></h1></div>

再在head里面就加入一段js：

 
<script>
 
function closes(){
 
    $("#Loading").fadeOut("normal",function(){
 
        $(this).remove();
 
    });
 
}
 
var pc;
 
$.parser.onComplete = function(){
 
    if(pc) clearTimeout(pc);
 
    pc = setTimeout(closes, 1000);
 
}
 
</script>

最后这段没懂。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">

<title>Basic Panel - jQuery EasyUI Demo</title>
<script type="text/javascript" src="js/easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/easyui/easyloader.js"></script>

<script type="text/javascript" charset="UTF-8">

</script>
<style type="text/css">
.easyui-accordion ul {
list-style-type: none;
margin: 0px;
padding: 10px;
}

.easyui-accordion ul li {
padding: 0px;
}

.easyui-accordion ul li a {
line-height: 24px;
}

.easyui-accordion ul li div {
margin: 2px 0px;
padding-left: 10px;
padding-top: 2px;
}

.easyui-accordion ul li div.hover {
border: 1px dashed #99BBE8;
background: #E0ECFF;
cursor: pointer;
}

.easyui-accordion ul li div.hover a {
color: #416AA3;
}

.easyui-accordion ul li div.selected {
border: 1px solid #99BBE8;
background: #E0ECFF;
cursor: default;
}

.easyui-accordion ul li div.selected a {
color: #416AA3;
font-weight: bold;
}
</style>
<script type="text/javascript">
$(function(){
easyloader.load('dialog',function(){
$('#c2').dialog({
modal:true
});
});

});
function closes(){
$("#loading").fadeOut("normal",function(){
$(this).remove();
});
}
var pc;
$.parser.onComplete=function(){
if(pc) clearTimeout(pc);
pc=setTimeout(closes,13000);
}

</script>
</head>
<body>
<div id='Loading' style="position:absolute;z-index:1000;top:0px;left:0px;width:100%;height:100%;background:#DDDDDB url('style/images/bodybg.jpg');text-align:center;padding-top: 20%;"><h1><image src='style/images/loading.gif'/><font color="#15428B">加载中···</font></h1></div>

<div id="c2" title="dsds" style="width:400px;height:200px">dsdsdsd</div>
</body>

</html>

渲染完之前会有加载中提示，由于这个div很快就渲染完了，所以加载中只是一闪

bluss-yang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui----1

转自http://www.jeasyuicn.com/easyui-parser.htmlEasyui第一课之Parser（解析器）分类：easyui 发表于 2011-11-17 15:16 , 已有35543次阅读嗯，前面说了从这个礼拜开始要每个礼拜讲解一个easyui的组件。不食言，今天开讲。 easyui的所有插件主要分为六大部分：Base
复制链接

扫一扫