mirror of
https://gitee.com/layui/layui.git
synced 2026-01-28 19:11:26 +08:00
Add docs
This commit is contained in:
贤心
240
docs/colorpicker/detail/demo.md
Normal file
240
docs/colorpicker/detail/demo.md
Normal file
@@ -0,0 +1,240 @@
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '常规使用'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-1"></div>
|
||||
<div id="ID-colorpicker-demo-2" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
var layer = layui.layer;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({ // eg1
|
||||
elem: '#ID-colorpicker-demo-1', // 绑定元素
|
||||
change: function(color){ // 颜色改变的回调
|
||||
layer.tips('选择了：'+ color, this.elem, {
|
||||
tips: 1
|
||||
});
|
||||
}
|
||||
});
|
||||
colorpicker.render({ // eg2
|
||||
elem: '#ID-colorpicker-demo-2',
|
||||
color: '#2ec770', // 设置默认色
|
||||
done: function(color){ // 选择完毕的回调
|
||||
layer.tips('选择了：'+ color, this.elem);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-form" class="ws-anchor ws-bold">将颜色值赋给表单</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline" style="width: 120px;">
|
||||
<input type="text" name="color" value="" placeholder="请选择颜色" class="layui-input" id="ID-colorpicker-demo-form-color">
|
||||
</div>
|
||||
<div class="layui-inline" style="left: -11px;">
|
||||
<div id="ID-colorpicker-demo-form"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
var $ = layui.$;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-form',
|
||||
color: '#1c97f5',
|
||||
done: function(color){
|
||||
$('#ID-colorpicker-demo-form-color').val(color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-rgba" class="ws-anchor ws-bold">设置 RGB / RGBA</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-rgb"></div>
|
||||
<div id="ID-colorpicker-demo-rgba" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({ // eg1
|
||||
elem: '#ID-colorpicker-demo-rgb',
|
||||
color: 'rgb(68,66,66)',
|
||||
format: 'rgb' // 默认为 hex
|
||||
});
|
||||
colorpicker.render({ // eg2
|
||||
elem: '#ID-colorpicker-demo-rgba',
|
||||
color: 'rgba(68,66,66,0.5)',
|
||||
format: 'rgb',
|
||||
alpha: true // 开启透明度滑块
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-alpha" class="ws-anchor ws-bold">开启透明度</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-alpha-1"></div>
|
||||
<div id="ID-colorpicker-demo-alpha-2" style="margin-left: 16px;"></div>
|
||||
<div id="ID-colorpicker-demo-alpha-3" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({ // eg1
|
||||
elem: '#ID-colorpicker-demo-alpha-1',
|
||||
color: '#16baaa', // hex
|
||||
alpha: true, // 开启透明度
|
||||
format: 'rgb'
|
||||
});
|
||||
colorpicker.render({ // eg2
|
||||
elem: '#ID-colorpicker-demo-alpha-2',
|
||||
color: 'rgb(0,150,136,0.6)', // rgba
|
||||
alpha: true,
|
||||
format: 'rgb'
|
||||
});
|
||||
colorpicker.render({ // eg3
|
||||
elem: '#ID-colorpicker-demo-alpha-3',
|
||||
alpha: true,
|
||||
format: 'rgb'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-predefine" class="ws-anchor ws-bold">预定义颜色项</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-predefine-1"></div>
|
||||
<div id="ID-colorpicker-demo-predefine-2" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({ // eg1
|
||||
elem: '#ID-colorpicker-demo-predefine-1',
|
||||
color: '#c71585',
|
||||
predefine: true // 开启预定义颜色
|
||||
});
|
||||
colorpicker.render({ // eg2
|
||||
elem: '#ID-colorpicker-demo-predefine-2',
|
||||
color: '#9d8a0e',
|
||||
predefine: true, // 开启预定义颜色
|
||||
colors: ['#ff8c00','#00ced1','#9d8a0e'] //自定义预定义颜色项
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-all" class="ws-anchor ws-bold">全功能和回调的使用</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<button class="layui-btn" id="ID-colorpicker-demo-all-btn">主题按钮</button>
|
||||
<hr>
|
||||
<div id="ID-colorpicker-demo-all"></div>
|
||||
<span style="padding-left: 6px;">演示：选择颜色并确定，改变上方按钮背景色</span>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
var layer = layui.layer;
|
||||
var $ = layui.$;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-all',
|
||||
color: '#16baaa',
|
||||
predefine: true,
|
||||
alpha: true,
|
||||
done: function(color){
|
||||
layer.msg('选择的值：'+ color); // 选择完毕的颜色值
|
||||
|
||||
// 清空或取消选择时也执行 change
|
||||
color || this.change(color);
|
||||
},
|
||||
change: function(color){
|
||||
// 给当前页面头部和左侧设置主题色
|
||||
$('#ID-colorpicker-demo-all-btn').css('background-color', color);
|
||||
},
|
||||
cancel: function(color){ // 取消颜色选择的回调 --- 2.8+
|
||||
this.change(color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-size" class="ws-anchor ws-bold">颜色框尺寸</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-colorpicker-demo-size-lg"></div>
|
||||
<div id="ID-colorpicker-demo-size-sm" style="margin-left: 16px;"></div>
|
||||
<div id="ID-colorpicker-demo-size-xs" style="margin-left: 16px;"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-size-lg',
|
||||
size: 'lg' // 大号下拉框
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-size-sm'
|
||||
//,size: 'sm' // 默认 sm
|
||||
});
|
||||
colorpicker.render({
|
||||
elem: '#ID-colorpicker-demo-size-xs',
|
||||
size: 'xs' // mini 下拉框
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-class" class="ws-anchor ws-bold">同时绑定多个元素</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="demo-class-colorpicker" lay-options="{color: '#FF0000'}"></div>
|
||||
<div class="demo-class-colorpicker" lay-options="{color: '#008000'}"></div>
|
||||
<div class="demo-class-colorpicker" lay-options="{color: '#0000FF'}"></div>
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
|
||||
// 渲染
|
||||
colorpicker.render({
|
||||
elem: '.demo-class-colorpicker',
|
||||
done: function(color){
|
||||
console.log(this.elem, color);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
177
docs/colorpicker/detail/options.md
Normal file
177
docs/colorpicker/detail/options.md
Normal file
@@ -0,0 +1,177 @@
|
||||
<table class="layui-table">
|
||||
<colgroup>
|
||||
<col width="150">
|
||||
<col>
|
||||
<col width="100">
|
||||
<col width="100">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>属性名</th>
|
||||
<th>描述</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>elem</td>
|
||||
<td>
|
||||
|
||||
绑定元素选择器或 DOM 对象
|
||||
|
||||
</td>
|
||||
<td>string/DOM</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>color</td>
|
||||
<td>
|
||||
|
||||
默认颜色值，值的格式跟随 `format` 属性的设定。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>format</td>
|
||||
<td>
|
||||
|
||||
颜色显示/输入格式，支持 `hex` `rgb` 。 若同时开启 `alpha` 属性，则颜色值自动变为 `rgba`。
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`hex`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>alpha</td>
|
||||
<td>
|
||||
|
||||
是否开启透明度。当同时开启 `format: 'rga'` 时，`color` 值将采用 `rgba` 格式。
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>predefine</td>
|
||||
<td>
|
||||
|
||||
是否开启预定义颜色栏
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>colors</td>
|
||||
<td>
|
||||
|
||||
设置可选的颜色列表，需开启 `predefine: true` 有效。
|
||||
<br>用法详见：[#预定义颜色项](#demo-predefine)
|
||||
|
||||
</td>
|
||||
<td>array</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>size</td>
|
||||
<td>
|
||||
|
||||
颜色框的尺寸，可选值： `lg` `sm` `xs`
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`sm`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" style="text-align: center">
|
||||
|
||||
|
||||
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
|
||||
|
||||
[回调函数](#options.callback)
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>change</td>
|
||||
<td colspan="3">
|
||||
|
||||
颜色被改变的回调函数。用法详见：[#示例](#demo-all)
|
||||
|
||||
```
|
||||
change: function(value){
|
||||
console.log(value); // 当前颜色值
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>done</td>
|
||||
<td colspan="3">
|
||||
|
||||
颜色选择完毕的回调函数。点击“确认”和“清除”按钮均会触发
|
||||
|
||||
```
|
||||
done: function(value){
|
||||
console.log(value); // 当前选中的颜色值
|
||||
}
|
||||
```
|
||||
|
||||
用法详见：[#示例](#demo-all)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>cancel <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
取消颜色选择的回调函数，一般点击非颜色选择面板区域触发。
|
||||
|
||||
```
|
||||
cancel: function(value){
|
||||
console.log(value); // 当前颜色值
|
||||
}
|
||||
```
|
||||
|
||||
用法详见：[#示例](#demo-all)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>close <sup>2.8+</sup></td>
|
||||
<td colspan="3">
|
||||
|
||||
颜色选择面板被关闭后即触发。
|
||||
|
||||
```
|
||||
close: function(value){
|
||||
console.log(value); // 当前颜色值
|
||||
}
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
61
docs/colorpicker/index.md
Normal file
61
docs/colorpicker/index.md
Normal file
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: 颜色选择器 colorpicker
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 颜色选择器
|
||||
|
||||
> 颜色选择器 `colorpicker` 用于对颜色的快捷选择，支持 `hex,rgb,rgba` 三种颜色类型。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/colorpicker/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var colorpicker = layui.colorpicker | 获得 `colorpicker` 模块。 |
|
||||
| [colorpicker.render(options)](#render) | colorpicker 组件渲染，核心方法。 |
|
||||
|
||||
|
||||
<h2 id="render" lay-toc="{level: 2}">渲染</h2>
|
||||
|
||||
`colorpicker.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
<br>注 <sup>2.7+</sup> : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。
|
||||
|
||||
```
|
||||
<div id="ID-test-colorpicker"></div>
|
||||
<div class="class-test-colorpicker" lay-options="{color: '#333'}"></div>
|
||||
<div class="class-test-colorpicker" lay-options="{color: '#777'}"></div>
|
||||
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var colorpicker = layui.colorpicker;
|
||||
// 单个渲染
|
||||
colorpicker.render({
|
||||
elem: '#ID-test-colorpicker'
|
||||
});
|
||||
// 批量渲染
|
||||
colorpicker.render({
|
||||
elem: '.class-test-colorpicker'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("docs/colorpicker/detail/options.md") }}
|
||||
</div>
|
||||
|
||||
## 兼容性
|
||||
|
||||
> colorpicker 组件支持 `Chrome,Edge,Firefox` 等所有高级浏览器，不支持 IE10 低版本浏览器。
|
||||
Reference in New Issue
Block a user