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使用案例

    先上 less文件 @charset "utf-8"; @import "reset.css"; @import "classes.less"; @import "buttons.css"; ht...

    浅谈 SQL 中的锁(二)余额问题的处理

    上次模拟了 SQL 中并发执行更新余额的语句,出现余额负数的问题: http://blog.csdn.net/closurer/article/details/54288628 现在说说它的解决方...

    KindEditor 的 html 标签自动解码问题

    我的博客是使用 KindEditor 编辑的。我经常会使用代码模式在标签里面写一些 html 标记,我是在输入的时候,已经使用编辑器进行了编码的,比如,我输入的是<p> 如果文章只编辑一...

    HTML In 10 Simple Steps Or Less (2004)

    • 2008年09月02日 23:53
    • 15.27MB
    • 下载

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

    let gulp = require('gulp'); //引入gulp模块 let $ = require('gulp-load-plugins')(); //引入gulp加载的所有插件(需要本地安...

    Serving less HTML code starting from .NET 4.0 with ClientIDMode property

    原帖地址:http://devnet.kentico.com/Knowledge-Base/Web-parts-Controls/Serving-less-HTML-code-starting-fro...
    • broze
    • broze
    • 2013年06月24日 14:49
    • 666

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

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

    less中文示例教程

    1.变量 1.1.value变量 示例1 input: // Variables @link-color: #428bca; // sea blue @link-color-hover:...

    html5-2d游戏引擎phaser-示例-第二部分

    • 2014年11月05日 10:52
    • 23.88MB
    • 下载
    内容举报
    返回顶部
    收藏助手
    不良信息举报
    您举报文章:Less.Html 示例二:以 Less.Html 做视图引擎
    举报原因:
    原因补充:

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