Less.Html 示例二:以 Less.Html 做视图引擎

原创 2017年06月21日 12:25:33

这个示例来源于帖子 http://bbs.csdn.net/topics/392182238。楼主要生成一个树形结构的 html 视图:

这个 html 的要求比较简单,Less.Html 的解析优势并不是很明显,但总比拼接要好的。我在这个示例中使用了三个修改 html 节点的方法,分别是 html、after 和 append,还有修改节点属性的方法 attr:

//绘制本节点
q("span").html("用户" + item.name);

//绘制子节点
q("div").after("<ul></ul>");

//左边节点
dynamic left = data.Where(
    i =>
    i.pid == id &&
    i._float == "left").FirstOrDefault();

q("ul:first").append(
    q(
        "
" + this.RenderNode( data, left != null ? left.id : -1, template) + " ").attr("style", "float:left")); //右边节点 dynamic right = data.Where( i => i.pid == id && i._float == "right").FirstOrDefault(); q("ul:first").append( q( " " + this.RenderNode( data, right != null ? right.id : -1, template) + " ").attr("style", "float:right"));

这些方法的使用方式也是和 jQuery 一样的。

本示例代码:GitHub    码云

运行结果:

less文件如何引入页面

1, 把js文件放在后面,就ok了: 2, 可以本地build一下,sublime自己写个build规则或者下个LESS-BUILD的package,保存了ctrl+b buil...
  • pcyph
  • pcyph
  • 2015-04-14 11:23:25
  • 23987

HTML-Less和CSS

LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单。 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过...
  • werctzzz
  • werctzzz
  • 2016-11-11 13:29:07
  • 700

一个犀利的 HTML 解析器 —— Less.Html

我写了这个解析器之后才知道,原来 C# 写的 html 解析器有很多。但是因为我没有参照别人的做法,Less.Html 有一个特点,就是它的用法是最接近 jQuery 的。我刻意模仿了 jQuery。...
  • closurer
  • closurer
  • 2017-06-19 13:51:50
  • 1700

Less.Html 示例一:获取嵌套元素中的正确内容

这个示例来源于这个帖子 http://bbs.csdn.net/topics/392175840,需要获取内容的 html 如下:...
  • closurer
  • closurer
  • 2017-06-19 13:53:29
  • 375

<em>html</em>后台模板[MeAdmin]

漂亮Bootstrap3响应式后台模板MeAdmin,基于Bootstrap3版本,加上一些<em>HTML</em>5和CSS3功能特效, CSS是基于<em>LESS</em>编译,响应式设计兼容桌面,手机,平板,当然是兼容较现代的浏览...
  • 2018年04月13日 00:00

webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)

这篇文章简单的说一下前端构建工具——webpack; 在用过的前端构建工具Yeoman,grunt,gulp,webpack中,个人觉得从配置上、使用上,功能上讲,还是webpack略胜一筹; 下...
  • tongshuo_11
  • tongshuo_11
  • 2017-03-27 18:22:08
  • 345

ASP.NET的另一个视图引擎——Razor

一、什么是Razor?     要是你知道什么是ASPX,那我就告诉你:Razor是和ASPX 一样的另一种视图引擎。说到视图就明白了很多吧。既然都为视图引擎,都是MS的东西,两个视图引擎,一前一后...
  • wangyongxia921
  • wangyongxia921
  • 2014-08-22 22:26:22
  • 1553

html less使用demo

less文件编译使用的koala less文件/*reset*/ body { margin: 0; } /*框架搭建*/ html { width: 100%; heigh...
  • danfengw
  • danfengw
  • 2017-01-06 17:48:52
  • 1394

快速开发CSS的利器-LESS

天下功夫,唯快不破!效率,在项目开发上,这是极其重要的。要做到快、精、准,在人任何时候都不是一件轻松容易的事。但是如果借助一些相应的工具,那就另当别论了!那么要想快速开发CSS,是否有相应的工具可使用...
  • h5course
  • h5course
  • 2016-01-18 10:02:28
  • 388

gulp对ES6、Less、image、html、监听、实时刷新的基本代码

let gulp = require('gulp'); //引入gulp模块 let $ = require('gulp-load-plugins')(); //引入gulp加载的所有插件(需要本地安...
  • pipi_zhang
  • pipi_zhang
  • 2017-01-20 02:10:51
  • 2031
收藏助手
不良信息举报
您举报文章:Less.Html 示例二:以 Less.Html 做视图引擎
举报原因:
原因补充:

(最多只允许输入30个字)