WUI v1.1.0

基础说明

开始使用 Getting Started
底层方法 基础支撑
页面元素 规范 / 公共类
模块规范 使用 / 扩展
常见问题 FAQ
更新日志

页面元素

布局 容器 / 栅格 / 后台布局
颜色 主题色 / 内置背景色
图标 字体图标
动画 内置 CSS3 动画
按钮 button 组
表单 form 元素集合
导航 菜单 / 面包屑
选项卡 Tabs 切换
进度条 progress
面板 折叠 / 手风琴
表格 静态 table
徽章 小圆点 / 小边框
时间线 timeline
区块 引用 / 字段集
文字 颜色 / 链接 / 位置
辅助 边距 / 填充 / 横线等

内置模块

弹出层 layer
日期与时间选择 wdate
分页 wpage
模板引擎 wtpl
数据表格 table
表单 form
文件上传 upload
穿梭框 transfer
树形组件 tree
颜色选择器 colorpicker
常用元素操作 element
滑块 slider
评分 rate
轮播 carousel
流加载 flow
工具集 util
简单编辑器 wedit
富文本编辑器 tinymce
下拉菜单 menu
拖动排序 dragsort
自动完成 autocomplete
代码修饰器 code
通知控件 notice
下拉多选控件 xmSelect
滑块验证 sliderVerify
无限级联选择器 cascader
模板引擎 - wui.wtpl

模块加载名称:wtpl
与一般的字符拼接不同的是,wtpl 的模板可与数据分离,集中把逻辑处理放在 View 层,提升代码可维护性,尤其是针对大量模板渲染的情况。
wui.use('wtpl', function(){
  var wtpl = wui.wtpl;

  //直接解析字符
  wtpl('{{ d.name }}是一位公猿').render({
    name: '小明'
  }, function(string){
    console.log(string); //小明是一位公猿
  });

  //你也可以采用下述同步写法,将 render 方法的回调函数剔除,可直接返回渲染好的字符
  var string =  wtpl('{{ d.name }}是一位公猿').render({
    name: '小明'
  });
  console.log(string);  //小明是一位公猿

  //如果模板较大,你也可以采用数据的写法,这样会比较直观一些
  wtpl([
    '{{ d.name }}是一位公猿'
    ,'其它字符 {{ d.content }}  其它字符'
  ].join(''))
});
你也可以将模板存储在页面或其它任意位置:
//第一步:编写模版。你可以使用一个script标签存放模板,如:
<script id="demo" type="text/html">
  <h3>{{ d.title }}</h3>
  <ul>
  {{#  wui.each(d.list, function(index, item){ }}
    <li>
      <span>{{ item.modname }}</span>
      <span>{{ item.alias }}:</span>
      <span>{{ item.site || '' }}</span>
    </li>
  {{#  }); }}
  {{#  if(d.list.length === 0){ }}
    无数据
  {{#  } }}
  </ul>
</script>

//第二步:建立视图。用于呈现渲染结果。
<div id="view"></div>

//第三步:渲染模版
var data = { //数据
  "title":"wui常用模块"
  ,"list":[{"modname":"弹层","alias":"layer","site":"layer.wui.com"},{"modname":"表单","alias":"form"}]
}
var getTpl = demo.innerHTML
,view = document.getElementById('view');
wtpl(getTpl).render(data, function(html){
  view.innerHTML = html;
});
语法 说明 示例
{{ d.field }} 输出一个普通字段,不转义html
<div>{{ d.content }}</div>
              
{{= d.field }} 输出一个普通字段,并转义html
<h2>{{= d.title }}</h2>
              
{{# JavaScript表达式 }} JS 语句。一般用于逻辑处理。用分隔符加 # 号开头。

注意:如果你是想输出一个函数,正确的写法是:{{ fn() }},而不是:{{# fn() }}
{{#
var fn = function(){
                  return '2017-08-18';
                  };
                  }}

                  {{#  if(true){ }}
                  开始日期:{{ fn() }}
                  {{#  } else { }}
  已截止
                  {{#  } }}           
              
{{! template !}} 对一段指定的模板区域进行过滤,即不解析该区域的模板。
<div> {{! 这里面的模板不会被解析  !}}</div>
              
如果模版默认的 {{ }} 分隔符与你的其它模板(一般是服务端模板)存在冲突,你也可以重新定义分隔符:
wtpl.config({
  open: '<%',
  close: '%>'
});

//分割符将必须采用上述定义的
wtpl([
  '<%# var type = "公"; %>' //JS 表达式
  ,'<% d.name %>是一位<% type %>猿。'
].join('')).render({
  name: '小明'
}, function(string){
  console.log(string); //小明是一位公猿
});
{
  "title": "wui常用模块"
  ,"list": [
    {
      "modname": "弹层"
      ,"alias": "layer"
      ,"site": "www.wangren.net"
    }
    ,{
      "modname": "表单"
      ,"alias": "form"
    }
    ,{
      "modname": "分页"
      ,"alias": "wpage"
    }
    ,{
      "modname": "日期"
      ,"alias": "wdate"
    }
    ,{
      "modname": "上传"
      ,"alias": "upload"
    }
  ]
}
<h3>{{ d.title }}</h3>
<ul>
{{#  wui.each(d.list, function(index, item){ }}
  <li>
    <span>{{ item.modname }}</span>
    <span>{{ item.alias }}:</span>
    <span>{{ item.site || '' }}</span>
  </li>
{{#  }); }}

{{#  if(d.list.length === 0){ }}
  无数据
{{#  } }}
</ul>
wui常用模块
弹层 layer: www.wangren.net
表单 form:
分页 wpage:
日期 wdate:
上传 upload:
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile