建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JS表单美化插件Monk UI

来源:易助科技网浏览量:14收藏

简介

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