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.code 代码转义工具

code模块通常针对于程序员,它是wui中一个极其轻量的组成。通俗而言,该模块就是对你的pre元素进行一个修饰,从而保证你展现的代码更具可读性。目前它没有对不同的语言进行颜色高亮(因为目前感觉没有太大必要,后面wui全面稳定后,可能会完善该功能),但这丝毫不会影响它对你带来的便捷。
模块加载名称:code

code模块的使用非常简单,请直接看代码,假设你在页面有这样一段pre标签:

<pre class="wui-code">
//代码区域
var a = 'hello wui';
</pre>

那么你只需要经过下面的方式:

wui.use('code', function(){ //加载code模块
  wui.code(); //引用code方法
});

就可以将那段pre区块显示成你现在看到的这个样子:

//代码区域
var a = 'hello wui';

方法:wui.code(options)
它接受一个对象参数options,支持以下key的设定

参数 类型 描述
elem string 指定元素的选择器,自行指定元素时,不能存在 wui-code 的 Class 类,如:
<pre id="pre">code</pre>
<pre class="wui-code">code</pre>
title string 设定标题
height string 设置最大高度
encode boolean 是否转义html标签,默认false
skin string 可选(不填为默认皮肤)
notepad:NotePad++风格
gracecyan:优雅青风格
cyan:淡雅青风格
emerald:翡翠绿风格
type string 可选(不填为默认风格)
simple:简洁风格
mini:极简风格
shrink boolean 是否折叠代码区域,默认 false
about boolean 是否剔除右上关于

特别提示:除了上述方式的设置,我们还允许你直接在pre标签上设置属性来替代,如:

<pre class="wui-code" w-title="" w-height="" w-encode="" w-shrink="" skin="" type="">
这样有木有觉得更方便些
</pre>

下面将针对每一个参数做进一步讲解。

code模块会去自动查找class为wui-code的类,如果你初始给的不是该类,仅仅只是一个pre标签,那么需要通过elem设置选择器来指向元素:

code
//指定元素时 class 不能等于 wui-code wui.code({ elem: '#pre' });

即左上角显示的文本,默认值为code

wui.code({
  title: 'JavaScript'
});

或者直接在pre标签上设置属性<pre w-title="JavaScript"></pre>

你可以设置以下key来控制修饰器的最大高度。如果内容低于该高度,则会自适应内容高度;如果内容超过了该高度,则会自动出现滚动条。

wui.code({
  height: '100px' //请注意必须加px。如果该key不设定,则会自适应高度,且不会出现滚动条。
});

或者直接在pre标签上设置属性<pre w-height="100px"></pre>

事实上很多时候你都需要在pre标签中展现html标签,而不希望它被浏览器解析。那么code模块允许你这么做,只需要开启encode即可,如:

wui.code({
  encode: true //是否转义html标签。默认不开启
});

开启了encode后的效果如下:

<ul>
  <li>HTML将不会被解析</li>
  <li>有木有感觉非常方便</li>
</ul>
<script>
!function(){
  var a = 123;
}();
</script>

或者直接在pre标签上设置属性<pre w-encode="true"></pre>

注意:HTML、hand、body 等静态标签及 php、java 等动态语言不能自动转义,需要您手工转义后放在 pre 标签中。手工转义代码请点击这里。

你肯定不会满足于code的某一种显示皮肤,而skin参数则允许你设定许多种显示皮肤,我们目前内置了6种,具体如下:

wui.code({
  title: 'NotePad++的皮肤'
  ,skin: 'notepad' //如果要默认皮肤,不用设定该key。
});

上述的设定后(默认皮肤不用设置),你会看到下面的样子


skin 属性不用设置


skin="yellow"


skin="notepad"


skin="gracecyan"


skin="cyan"


skin="emerald"

或者直接在pre标签上设置属性<pre skin="notepad"></pre>

除了多款内置皮肤,我们还内置了三种显示风格,默认风格、简洁风格、极简风格:

wui.code({
  type: 'mini' //如果要默认风格,不用设定该key。
});

上述的设定后,你会看到下面的样子


type 默认风格不用设置


type="simple"

type="mini"

skin="cyan"


skin="cyan"
type="simple"

skin="cyan"
type="mini"

你也可以直接在pre标签上设置属性<pre type="mini"></pre>

有时你可能会需要默认将代码区域进行隐藏,shrink 参数将能满足你的要求。

//你需要点开才能看到!

wui.code({
  shrink: true  //设置为 true 即默认隐藏,默认为 false。
});

或者直接在pre标签上设置属性<pre w-shrink="true"></pre>

注意:只有支持默认风格折叠代码区域,如极简风格,简洁风格均不支持。

如果你不喜欢出现右上角的wui.code字眼,你是可以剔除的。设置about: false即可。

© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile