easyui就能得逞的渲染页面,2、jQuery EasyUI有啥特色澳门永利备用网址

Parser(解析器)应用场景

jQuery Easy UI的使用

一、早先认识

1、什么是jQuery Easy UI

jQuery Easy UI是一组根据jQuery的UI插件集合,而jQuery Easy UI
的目的就是协助Web 开发者更自在的打造出作用丰裕并且美观的 UI 界面。

官方网站http://www.jeasyui.com

2、jQuery EasyUI有如何特征

(1)、基于 jquery 用户界面插件的成团;

(2)、源代码加密、商业版付费

(3)、使用 EasyUI 你不需求写过多的 javascript 代码,平常只要求写 HTML
标记来定义用户界面即可;

(4)、支持 HTML5

(5)、容易,但很强劲,开发产品时可节省时间和资源;

(6)、接济开展,可依据自己的须求开展控件

3、是不是合作低版本IE ,本人使用的是1.3.6版本,不辅助IE8及以下版本。

二、引入必要的文件:

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

引入 EasyUI 图标文件

三、加载UI组件的格局:

1、使用class格局加载

使用 class 加载,格式为:easyui-组件名

情节部分

示例:

jQuery Easy UI

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






  内容部分 

PS:使用了规定的格式就可以生成一个 UI 组件,那是出于 jQuery EasyUI
的一个解析器(Parser)的起到了效率。解析之后,从 Firebug 里面可以看看

UI 组件变化后的HTML。

2、使用JS调用加载

$(‘#box’).dialog();

示例:

jQuery Easy UI

<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>
 // 使用js调用加载的方式
 $(function(){
  $("#box").dialog();
 })
</script>



  内容部分

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();

});

示例:

jQuery Easy UI

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



  内容部分

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

parser,故名意思,就是解析器的意思,别看她唯有那么几行代码,jQuery
Easyui 可以基于class就能健康渲染页面全靠它了。一般景观下,我们并用不到解

析器,本文主要啄磨一下,什么动静下会用到它,怎么样使用。

1、自动调用parser:

大家所以在页面中,只要书写相应的class,Easyui就能打响渲染页面,那是因为解析器在默许情形下,会在文档装载已毕的时候($(document).ready)被调用

一回,而且是渲染整个页面。

2、手动调用parper:

当页面DOM已经装载完成,大家因而JavaScript代码再去创制class属性为easyui相应值的节点的时候,那么该节点不会被渲染,因为parser只是在页面装载完的

时候渲染一下百分之百页面,而不会一贯监视着全套页面。所以须要大家手动调用parser去渲染。

parser示例:

parserDemo

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




   内容部分

点击下载源代码

http://www.bkjia.com/Javascript/869811.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/869811.htmlTechArticlejQuery Easy UI的拔取 一、开首认识 1、什么是jQuery
Easy UI jQuery Easy UI是一组根据jQuery的UI插件集合,而jQuery Easy UI
的目的就是扶持Web 开发者更轻…

1,自动调用parser

       
只要我们书写相应的class,easyui就能得逞的渲染页面,那是因为解析器在默许景况下,会在dom加载成功的时候($(docunment).ready)被调用,而且是渲染整个页面。

2,手动调用parser

       
 必要手动调用的情状是:当页面已经加载成功,不过此时大家应用js动态变化的DOM中蕴藏了easyui帮衬的class,并且我们也有将其渲染成easyui组件的须要。在那种场馆下就要手动调用parser了.

         以如下代码为例:

 

<div class="easyui-accordion" id="tt">
        <div title="title1">1</div>
<div title="title2">2</div>
</div>

 

       
当上述代码的变动在easyui渲染界面之后,由于easyui不会一贯监听页面,所以该段代码并不会并渲染成“手风琴AccordionDIV”的体制,那时候就要求大家手动去结下了。可是这里需注意如下方面,下面也有提及。

  • 剖析目的位指定DOM的所有子孙元素,不包好该DOM本身:由此正确的写法为:$parser.parser($(‘tt’).parent()),并非

    $.parser.parse($('#tt'));    
    
  • 尽心尽力不要频仍解析同一个DOM元素(ID):页面开首化就已经主动渲染过dom节点了,你再一次手动解析该dom节点时该dom已经被parser重构,得到的DOM就毫无是你料想的结果,该方法应该尽量防止。