码迷,mamicode.com
首页 > 其他好文 > 详细

让你抓耳挠腮的PARSER解析器

时间:2015-04-23 13:22:26      阅读:594      评论:0      收藏:0      [点我收藏+]

标签:

  • js中拼了如下代码:

html.push("<a href='javascript:additem();' class='easyui-linkbutton' plain='true' iconCls='icon-add'>Add Item</a>       ");
html.push("<a href='javascript:save();' class='easyui-linkbutton' plain='true' iconCls='icon-save'>Save</a>");

  • 显示样式如下:

技术分享

  • 希望显示如下:

技术分享

 

这样一个小功能,改了快一上午,将上面的两句话改了又改,想了又想,可是始终无效果。最终请了高手,不到一分钟解决了,他添加了如下代码:

$.parser.parse($('#content-block-template'));

  • 带着好奇的心查阅了资料:

当页面已经加载完成,但是此时我们使用js生成的DOM中包含了easyui支持的class,并且我们也有将其渲染成easyui组件的需求,就需要手动条用parser解析器了。

 

  • 扩展:

easyui的体系结构看,它所有的插件主要分为六大部分:Base基础、Layout布局、Menu&ButtonForm表单、Window窗口等。其中Base 包含八个基础插件:

  1. Parser——解析器
  2. easyloader——加载器
  3. draggable——拖动
  4. Droppable——放置
  5. Resizable——大小调整
  6. Pagination——分页
  7. Progressbar——进度条
  8. searchbox——搜索框

Parser(解析器):

easyui中我们能够简单的通过class定义一个组件,从而渲染出非常好的交互效果。就是通过parser进行解析的。parser会获取所有在指定范围内定义为easyui组件的class定义,并且根据后缀定义把当前节点解析渲染成特定的组件。

方法:

1$.parser.parse():默认解析该页面中所有被定义为easyui组件的节点。 
2、$.parser.parse(‘#cc‘)
单独解析局部的easyui组件节点。

PS这个jquery选择器必须是你解析组件的父级以上的节点。因为查找出来的节点相当于一个容器,它只会解析容器里面的内容。

属性:

$.parser.auto:定义是否自动解析easyui组件,默认值为true

$.parser.onComplete:当语法解析完成之后出发event,可使用该属性载入遮罩层

效果图:

技术分享


应用:

自动调用:

最主要的运用场景,只要我们书写相应的classeasyui就能成功的渲染页面,这是因为解析器在默认情况下,会在dom加载完成的时候($(docunment).ready)调用,渲染整个页面

手动调用:

当页面已经加载完成,但是此时我们使用js生成的DOM中包含了easyui支持的class,并且我们也有将其渲染成easyui组件的需求,就需要手动调用


让你抓耳挠腮的PARSER解析器

标签:

原文地址:http://blog.csdn.net/wang13667539325/article/details/45219665

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!