简介

Monk.UI是一款JS表单美化插件，原生Javascript开发，不依赖任何第三方框架，让你的表单亮起来吧。

使用

1.  引入文件

<link href="monk.ui.min.css" rel="stylesheet" />

<script src="monk.ui.min.js"></script>

2.  Html

min 文本框

<div class="monk-form-item">
    <label for="" class="monk-form-label monk-color-peterriver">表单标题</label>
    <div class="monk-form-wrap">
        <span class="monk-iconfont border-right icon-monk-input"></span>
        <input type="text" class="monk-form-input min" placeholder="请输入..." />
        <span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span>
    </div>
    <div class="monk-form-tip">表单描述一</div>
</div>

3.  调用

定义模板

<!--定义模板，<% %> 包裹Javascript代码，<%= %> 输出变量 -->
<script type="text/html" id="tppl">
    <% for(var i=0; i < list.length;i++){ %>
    <li>名称：<%=list[i].name %></li>
    <%} %>
</script>

渲染模板

<script type="text/javascript">
    // 定义数据集合，必须是json类型
    var data = {
        list: [
            {
                name: "软件",
                autor: "autor",
                age: 20
            }
        ]
    };
    // 调用monk.tppl(tpl,data); 返回渲染之后的HTML，不能重复渲染多个数据集合
    var html = monk.tppl(document.getElementById("tppl").innerHTML, data);

    // 同时也可以这样调用
    var render = monk.tppl(document.getElementById("tppl").innerHTML);
    var html = render(data); // 可以载入不同的数据渲染同一套模板
    var html2 = render({ list: [{ name: "Monk 2.x", autor: "autor" }] });
</script>

相关链接

GitHub 地址 ：https://github.com/MonkSoul/Monk.UI/

Gitee 地址：https://gitee.com/mirrors/monk-ui