JS表单美化插件Monk UI

简介

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