jquery easyui 之 parser解析器

最新推荐文章于 2023-04-09 16:35:55 发布
最新推荐文章于 2023-04-09 16:35:55 发布
阅读量515 收藏 1
点赞数
分类专栏： easy-ui 文章标签： easyui 库 解析器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fucktester/article/details/70232691
版权
引入必要的文件：

引入 jQuery 核心库，这里采用的是 2.0

<script type="text/javascript" src="easyui/jquery.min.js"></script>

引入 jQuery EasyUI 核心库，这里采用的是 1.3.6

<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

引入 EasyUI 中文提示信息

<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>

引入自己开发的 JS 文件

<script type="text/javascript" src="js/index.js"></script>

引入 EasyUI 核心 UI 文件 CSS

<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

引入 EasyUI 图标文件

<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

加载UI组件的方式：

1、使用class方式加载

使用 class 加载，格式为：easyui-组件名

<div class="easyui-dialog" id="box" title="标题" style="width:400px;height:200px;">

内容部分

</div>

示例：

    <!DOCTYPE html>  
    <html>  
    <head>  
    <title>jQuery Easy UI</title>  
    <meta charset="UTF-8" />  
    <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>  
    <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 id="box">  
        <div class="easyui-dialog" title="标题" style="width:400px;height:200px">  
            内容部分      
        </div>  
    </div>  
    </body>  
    </html>

PS：使用了规定的格式就可以生成一个 UI 组件，这是由于 jQuery EasyUI 的一个解析器（Parser）的起到了作用。解析之后，从 Firebug 里面可以看到 

UI 组件变化后的HTML。

2、使用JS调用加载

$('#box').dialog();

示例：

    <!DOCTYPE html>  
    <html>  
    <head>  
    <title>jQuery Easy UI</title>  
    <meta charset="UTF-8" />  
    <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>  
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />  
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />  
    <script>  
        // 使用js调用加载的方式  
        $(function(){  
            $("#box").dialog();  
        })  
    </script>  
    </head>  
    <body>  
        <div  id="box"  title="标题" style="width:400px;height:200px">  
            内容部分  
        </div>  
    </body>  
    </html>

PS：一般推荐使用第二种 JS 调用加载，因为一个 UI 组件有很多属性和方法，如果使用 class 的用法将极大的不方便。并且根据 JS 和 HTML 分离的原则，

第二种提高了代码的可读性。

3、使用easyload.js智能加载

//删除 jQuery EasyUI 的 JS 核心文件及 CSS，引入 easyloader.js 文件

<script type="text/javascript" src="easyui/easyloader.js"></script>

//JS 代码

easyloader.load('dialog', function () {

$('#box').dialog();

});

示例：

    <!DOCTYPE html>  
    <html>  
    <head>  
    <title>jQuery Easy UI</title>  
    <meta charset="UTF-8" />  
    <script type="text/javascript" src="easyui/jquery.min.js"></script>  
    <script type="text/javascript" src="easyui/easyloader.js"></script>  
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>  
    <script>  
        //使用easyload.js智能加载（按需加载）  
        $(function(){  
            easyloader.load('dialog',function(){  
                $("#box").dialog();  
            })  
        })  
    </script>  
    </head>  
    <body>  
        <div  id="box"  title="标题" style="width:400px;height:200px">  
            内容部分  
        </div>  
    </body>  
    </html>

四、Parser解析器使用场景及注意事项

parser，故名意思，就是解析器的意思，别看他只有那么几行代码，jQuery Easyui 能够根据class就能正常渲染页面全靠它了。一般情况下，我们并用不到解

析器，本文主要讨论一下，什么情况下会用到它，如何使用。

1、自动调用parser：

我们之所以在页面中，只要书写相应的class，Easyui就能成功渲染页面，这是因为解析器在默认情况下，会在文档装载完成的时候($(document).ready)被调用

一次，而且是渲染整个页面。

2、手动调用parper：

当页面DOM已经装载完毕，我们通过JavaScript代码再去创建class属性为easyui相应值的节点的时候，那么该节点不会被渲染，因为parser只是在页面装载完的

时候渲染一下整个页面，而不会一直监视着整个页面。所以需要我们手动调用parser去渲染。

parser示例：

    <!DOCTYPE html>  
    <html>  
    <head>  
    <title>parserDemo</title>  
    <meta charset="UTF-8" />  
    <script type="text/javascript" src="easyui/jquery.min.js"></script>  
    <script type="text/javascript" src="easyui/easyloader.js"></script>  
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>  
    <script>  
        $(function(){  
            //为什么我们只用class属性的时候就能加载UI组件，因为页面在DOM装载完成后会自动执行一次$.parser.parse();  
            $.parser.onComplete=function (){  
                alert('DOM装载完毕,自动解析,完成');  
            }  
        })  
      
        function f (){  
            /**  
            在DOM加载之后手动指定class属性是不能够完成渲染的，因为parser只是在DOM装载完成  
            后解析一次，不会一直监视着DOM页面的变化的,所以下面还要显式调用$.parser.parse();  
            */  
            $("#box").attr("class","easyui-dialog");  
      
            //$.parser.parse("#box"); 注意：这个是不好使的，因为parse()带参数的时候渲染的是JQ选择器指定元素的父类  
            $.parser.parse(("#p_box"));  
      
            //它还有个回调函数  
            $.parser.onComplete=function (){  
                alert('手动渲染解析完成');  
            }  
        }  
    </script>  
    </head>  
    <body>  
        <div id="p_box">  
            <div id="box"  title="标题" style="width:400px;height:200px">  
                内容部分  
            </div>  
        </div>  
      
        <input type="button" value="手动渲染" οnclick="f()">  
    </body>  
    </html>


parser 是jquery easyui中的解析器，页面中class就是用它来渲染。

自动渲染

页面加载过程：

  1. 先装载HTML页面文档元素

  2. 然后调用$().ready(function(){})

  3. 最后调用parser渲染页面


手动渲染

通过DOM操作输出HTML（easyui）元素信息，那easyui页面不会初始化，只显示原有的HTML代码

<script type="text/javascript">
 
$().ready(function(){
    document.getElementById("info").innerHTML='<div class="easyui-accordion" id="tt"><div title="title1">1</div><div title="title2">2</div></div>';
});
</script>
</head>
<body>
<div  id="info">
</div>
</body>
效果只是1 2，不会有格式

需要手动渲染：在DOM操作后添加

<script type="text/javascript">
$().ready(function(){
    document.getElementById("info").innerHTML='<div class="easyui-accordion" id="tt"><div title="title1">1</div><div title="title2">2</div></div>';
    $.parser.parse('#info'); // 解析某个具体节点
    //$.parser.parse(); // 解析整个页面
});
</script>
</head>
<body>
<div  id="info">
</div>
</body>
效果


fucktester
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
EasyUI之Parser(解析器)
a3060858469的博客
08-30 837
$.parser.parse() parser能够有两种用法: 1、$.parser.parse();不带參数,默认解析该页面中全部被定义为easyui组件的节点。 2、$.parser.parse('#cc');带一个jquery选择器，使用这样的方式我们能够单独解析局部的easyui组件节点。 parser属性: $.parser.auto 类型:boolean 描述:定义...
jQuery Easy UI的使用
曹海成的专栏
08-26 6517
一、初步认识 1、什么是jQuery Easy UI  jQuery Easy UI是一组基于jQuery的UI插件集合，而jQuery Easy UI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面。
$.parser.parse()是什么意思
热门推荐
NAUD
03-07 2万+
        在JavaScript中一些dom元素是动态拼接上的easy的样式，由于页面已经渲染过了，所以需要手动执行渲染某个部件或者整个页面。    Parser(解析器)            解析器是easy ui很重要的基础组件，在easy ui中我们可以简单的通过class定义一个组件，从而渲染出很好的交互效果。就是通过parser进行解析的。            parser会获...
使用easyui的$.parser.parse()解决页面初始化样式丑的问题
张小洛的BOLG
03-07 1094
问题： 进入主界面的时候，页面的并不是马上就展现，而是会有一个混乱的过程，之后一闪就又好了。 原因：就是因为easyui是在dom载入完毕之后才会对整个页面进行解析，当布局和组件比较多的时候，完整的解析组件就需要一个过程，就会出现短暂的界面混乱现象。 解决办法： 利用onComplete事件+载入遮罩。相当于把那段easyUI渲染时的不友好页面给隐藏掉了 1、使用easyui加遮罩层，...
jQuery EasyUI API 中文文档 - Parser 解析器
10-28
jQuery EasyUI API 中文文档 - Parser 解析器，使用jQuery EasyUI的朋友可以参考下。
Jquery EasyUI $.Parser
10-19
主要介绍了JqueryEasyUI $.Parser,需要的朋友可以参考下
jQuery EasyUI API 中文文档 – Parser 解析器
12-10
用法 代码如下: $.parser.parse(); // 解析整个页面 $.parser.parse(‘#cc’); // 解析某个具体节点 ...当解析器完成解析动作的时候触发。 方法 名称 参数 说明 $.parser.parse context 解析easyui组件。
jQuery EasyUI之DataGrid使用实例详解
10-23
主要介绍了jQuery EasyUI之DataGrid使用实例
jqueryEasyUI
07-16
jqueryEasyUI 下载，及api下载 jqueryEasyUI 下载，及api下载
JqueryEasyUI $.Parser
mk363255751的专栏
06-02 105
JqueryEasyUI $.Parser Parser（解析器） 对象的属性和方法： 使用： <link href="~/jquery-easyui-1.5.2/themes/bootstrap/easyui.css" rel="stylesheet" /> <script src="~/jquer...
easyui $.parser.parse 页面重新渲染
weixin_30383279的博客
10-15 226
一些dom元素是动态拼接上的easui的样式，由于页面已经渲染过了，所以需要手动执行渲染某个部件或者整个页面 $.parser.parse(); // parse all the page $.parser.parse('#cc'); // parse the specified node$.parser.parse($("#grid").parent()); 转载于...
追加easyui元素，完成后调用$.parser.parse()方法渲染
qq_40997700的博客
07-18 939
$("#reportType").combobox({ data:[{id:"1",name:"技术评分最低投标价法"},{id:"2",name:"综合评分法"},{id:"3",name:"最低投标价法单信封"}], onSelect:function(val){ if(val.id==1){ $("#specialContent").empty().append($(...
easyui的初始化$.parser.parse()注意点
chenhq_的博客
10-24 6815
如果对一个控件进行初始化，需要用到$.parser.parse("#pid")，此时的pid是该控件的祖先元素的id
EasyUI学习笔记(五)——学习读源码--parser源码阅读分析1
u012369153的专栏
12-07 2348
Parser
JS 实现简单 Parser
1bite 的专栏
04-09 651
通过本文读者将学到如何实现一门领域特定语言（DSL），并使用这种 DSL 完成文本解析任务，例如 JSON 解析、表达式求值等。
easyui解析器parser
fengxing_2的专栏
11-27 2340
在写代码的时候发现如果不是一次在页面写好html代码，而是通过页面加载完成后执行某个方法时添加相应的组件时，添加上去后easyui是不会给你初始化这个组件的，这个时候就必须手动的去初始化这个组件， 如我下面写的聊天窗口，点击聊天的时候初始化窗口，这个时候就需要用到 $.parser.parse('#cc');  // 解析指定节点 才能初始化窗口，否则追加上去是没有效果的，但是发现用是时候这
Parser 解析器
hankaibo
10-28 911
用法 $.parser.parse();       // 解析所有的页  $.parser.parse('#cc');  // 解析指点的节点   属性 Name Type Description Default $.parser.auto boolean 定义是否自动解析easyui组件。 true
jquery easyui
最新发布
09-22
jQuery EasyUI是一个基于jQuery的框架，它集成了各种用户界面插件，提供了构建现代化、具有交互性的JavaScript应用程序所需的功能。使用EasyUI可以极大地减少编写JavaScript代码的工作量，一般情况下只需要使用一些HTML标记来定义用户界面。EasyUI是一个功能强大但简单易用的框架，可以节省开发时间和规模。 除了通过在HTML标记中指定class="easyui-xxx"的方式来使用EasyUI组件，还可以使用JavaScript的方式动态生成和配置EasyUI组件。以下是一个使用JavaScript动态生成Panel组件的示例代码： ```html <div id="p2" style="padding:10px;"> <p>panel content.</p> </div> <script type="text/javascript"> $('#p2').panel({ width: 500, height: 150, title: 'My Panel', border: true, collapsible: true }); </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值