init
This commit is contained in:
187
public/frontend/layui-main/docs/rate/detail/demo.md
Executable file
187
public/frontend/layui-main/docs/rate/detail/demo.md
Executable file
@@ -0,0 +1,187 @@
|
||||
<pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-rate-demo"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var rate = layui.rate;
|
||||
|
||||
// 渲染
|
||||
rate.render({
|
||||
elem: '#ID-rate-demo'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-text" class="ws-anchor ws-bold">显示文字</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-rate-demo-text"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var rate = layui.rate;
|
||||
|
||||
// 渲染
|
||||
rate.render({
|
||||
elem: '#ID-rate-demo-text',
|
||||
value: 2, // 初始值
|
||||
text: true // 开启文本
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-half" class="ws-anchor ws-bold">半星效果</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-rate-demo-half-1"></div>
|
||||
<hr>
|
||||
<div id="ID-rate-demo-half-2"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var rate = layui.rate;
|
||||
|
||||
// 渲染
|
||||
rate.render({ // eg1
|
||||
elem: '#ID-rate-demo-half-1',
|
||||
value: 2.5, // 初始值
|
||||
half: true // 开启半星
|
||||
});
|
||||
rate.render({ // eg2
|
||||
elem: '#ID-rate-demo-half-2',
|
||||
value: 3.5,
|
||||
half: true,
|
||||
text: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-setText" class="ws-anchor ws-bold">自定义文本</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-rate-demo-setText-1"></div>
|
||||
<hr>
|
||||
<div id="ID-rate-demo-setText-2"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var rate = layui.rate;
|
||||
|
||||
// 渲染
|
||||
rate.render({ // eg1
|
||||
elem: '#ID-rate-demo-setText-1',
|
||||
value: 3,
|
||||
text: true,
|
||||
setText: function(value){ // 自定义文本的初始回调
|
||||
var arrs = {
|
||||
'1': '非常不满意',
|
||||
'2': '不满意',
|
||||
'3': '一般',
|
||||
'4': '满意',
|
||||
'5': '非常满意',
|
||||
};
|
||||
this.span.text(arrs[value] || ( value + "星"));
|
||||
}
|
||||
});
|
||||
rate.render({ // eg2
|
||||
elem: '#ID-rate-demo-setText-2',
|
||||
value: 1.5,
|
||||
half: true,
|
||||
text: true,
|
||||
setText: function(value){
|
||||
this.span.text(value);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-length" class="ws-anchor ws-bold">自定义长度</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-rate-demo-length-1"></div>
|
||||
<hr>
|
||||
<div id="ID-rate-demo-length-2"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var rate = layui.rate;
|
||||
|
||||
// 渲染
|
||||
rate.render({
|
||||
elem: '#ID-rate-demo-length-1',
|
||||
length: 3
|
||||
});
|
||||
rate.render({
|
||||
elem: '#ID-rate-demo-length-2',
|
||||
length: 10,
|
||||
value: 8 // 初始值
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-readonly" class="ws-anchor ws-bold">只读</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div id="ID-rate-demo-readonly"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var rate = layui.rate;
|
||||
|
||||
// 渲染
|
||||
rate.render({
|
||||
elem: '#ID-rate-demo-readonly',
|
||||
value: 4,
|
||||
readonly: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-theme" class="ws-anchor ws-bold">自定义主题色</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
||||
<textarea>
|
||||
<div class="class-rate-demo-theme" lay-options="{value: 3, theme: '#FF8000'}"></div>
|
||||
<hr>
|
||||
<div class="class-rate-demo-theme" lay-options="{value: 3, theme: '#FE0000'}"></div>
|
||||
<hr>
|
||||
<div class="class-rate-demo-theme" lay-options="{value: 2.5, theme: '#1E9FFF', half: true}"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var rate = layui.rate;
|
||||
|
||||
// 批量渲染
|
||||
rate.render({
|
||||
elem: '.class-rate-demo-theme',
|
||||
// theme: '#FF8000' // 自定义主题色
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
141
public/frontend/layui-main/docs/rate/detail/options.md
Executable file
141
public/frontend/layui-main/docs/rate/detail/options.md
Executable file
@@ -0,0 +1,141 @@
|
||||
<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>length</td>
|
||||
<td>
|
||||
|
||||
评分的最大长度值，即星星的数量。
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`5`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>
|
||||
|
||||
评分的初始值
|
||||
|
||||
</td>
|
||||
<td>number</td>
|
||||
<td>
|
||||
|
||||
`0`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>half</td>
|
||||
<td>
|
||||
|
||||
是否可以选择半星。若开启，则 `value` 支持小数点，如：
|
||||
|
||||
```
|
||||
value: '3.5'
|
||||
```
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>theme</td>
|
||||
<td>
|
||||
|
||||
主题色
|
||||
|
||||
</td>
|
||||
<td>string</td>
|
||||
<td>
|
||||
|
||||
`#FFB800`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>text</td>
|
||||
<td>
|
||||
|
||||
是否显示评分对应的文本
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>readonly</td>
|
||||
<td>
|
||||
|
||||
是否只读，即只用于展示，而不可点击
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>setText</td>
|
||||
<td colspan="3">
|
||||
|
||||
初始设置自定义文本的回调函数。 并返回当前 `value` 参数。用法详见：[#自定义文本](#demo-setText)
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>choose</td>
|
||||
<td colspan="3">
|
||||
|
||||
选择评分后的回调函数。并返回当前 `value` 参数
|
||||
|
||||
```
|
||||
rate.render({
|
||||
elem: '#id',
|
||||
choose: function(value){
|
||||
console.log(value); // 获得选中的评分值
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
57
public/frontend/layui-main/docs/rate/index.md
Executable file
57
public/frontend/layui-main/docs/rate/index.md
Executable file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: 评分组件 rate
|
||||
toc: true
|
||||
---
|
||||
|
||||
# 评分组件
|
||||
|
||||
> 评分组件 `rate` 一般用于等级展示或评价类操作。
|
||||
|
||||
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("/rate/detail/demo.md") }}
|
||||
</div>
|
||||
|
||||
<p></p>
|
||||
|
||||
<h2 id="api" lay-toc="{}">API</h2>
|
||||
|
||||
| API | 描述 |
|
||||
| --- | --- |
|
||||
| var rate = layui.rate | 获得 `rate` 模块。 |
|
||||
| [rate.render(options)](#render) | rate 组件渲染，核心方法。 |
|
||||
|
||||
<h2 id="render" lay-toc="{level: 2}">渲染</h2>
|
||||
|
||||
`rate.render(options);`
|
||||
|
||||
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
|
||||
<br>注 <sup>2.8+</sup> : 除 `elem` 属性外，其他基础属性也可以直接写在元素的 `lay-options="{}"` 属性中。
|
||||
|
||||
```
|
||||
<div id="ID-test-rate"></div>
|
||||
<div class="class-test-rate" lay-options="{value: 3}"></div>
|
||||
<div class="class-test-rate" lay-options="{value: 5}"></div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var rate = layui.rate;
|
||||
// 单个渲染
|
||||
rate.render({
|
||||
elem: '#ID-test-rate'
|
||||
});
|
||||
// 批量渲染
|
||||
rate.render({
|
||||
elem: '.class-test-rate'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
|
||||
|
||||
<div>
|
||||
{{- d.include("/rate/detail/options.md") }}
|
||||
</div>
|
||||
Reference in New Issue
Block a user