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.colorpicker 更多 colorpicker 示例

在主题定制的应用场景中,自然离不开颜色的自定义。而你往往需要的是关于它的直观选择,于是 colorpicker 模块姗姗来迟,它支持 hex、rgb、rgba 三类色彩模式,在代码中简单的调用后,便可在你的网页系统中自由拖拽去选择你中意的颜色。
依赖加载模块:colorpicker
注意:colorpicker 不支持 ie10 以下版本,其它高级浏览器均支持。
colorpicker 是一款颜色选择器,如下是一个最基本的用法:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>颜色选择器</title>
  <link rel="stylesheet" href="../src/css/wui.css">
</head>
<body>
<div id="test1"></div>
<script src="../src/wui.js"></script>
<script>
wui.use('colorpicker', function(){
  var colorpicker = wui.colorpicker;
  //渲染
  colorpicker.render({
    elem: '#test1'  //绑定元素
  });
});
</script>
</body>
</html>
colorpicker 组件目前支持以下参数
参数选项 说明 类型 默认值
elem 指向容器选择器 string/object -
color 默认颜色,不管你是使用 hex、rgb 还是 rgba 的格式输入,最终会以指定的格式显示。 string -
format 颜色显示/输入格式,可选值: hexrgb
若在 rgb 格式下开启了透明度,格式会自动变成 rgba。在没有输入颜色的前提下,组件会默认为 #000 也就是黑色。
string hex(即 16 进制色值)
alpha 是否开启透明度,若不开启,则不会显示透明框。开启了透明度选项时,当你的默认颜色为 hex 或 rgb 格式,组件会默认加上值为 1 的透明度。相同的,当你没有开启透明度,却以 rgba 格式设置默认颜色时,组件会默认没有透明度。
注意:该参数必须配合 rgba 颜色值使用
boolean false
predefine 预定义颜色是否开启 boolean false
colors 预定义颜色,此参数需配合 predefine: true 使用。 Array 此处列举一部分:['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
size 下拉框大小,可以选择:lg、sm、xs。 string -
预定义颜色,可以被认为是提供的参考色,因此除了我们默认的预定义颜色之外,你还可以自己定义
wui.use('colorpicker', function(){
  var colorpicker = wui.colorpicker;、
   
  colorpicker.render({
    elem: '#test1'
    ,predefine: true
    ,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
  });
});
回调名:change
当颜色在选择器中发生选择改变时,会进入 change 回调,你可以通过它来进行所需操作,下面的例子就是实时的输出当前选择器的颜色
wui.use('colorpicker', function(){
  var colorpicker = wui.colorpicker;
   
  colorpicker.render({
    elem: '#test1'
    ,change: function(color){
      console.log(color)
    }
  });
});
回调名:done
点击颜色选择器的“确认”和“清除”按钮,均会触发 done 回调,回调返回当前选择的色值。
wui.use('colorpicker', function(){
  var colorpicker = wui.colorpicker;
   
  colorpicker.render({
    elem: '#test1'
    ,done: function(color){
      console.log(color)
      //譬如你可以在回调中把得到的 color 赋值给表单
    }
  });
});
© 2021 Wangren.Net  Layui  tinyMCE  SUI Mobile