mirror of https://github.com/layui/layui
feat(checkbox&radio): 增强模板自定义能力 (#1686)
* feat(checkbox): 增强模板自定义能力 * feat(radio): 支持 lay-skin 属性; 增强模板自定义能力 * feat(form): 新增 lay-skin="none" 无样式风格 * docs: 添加 lay-skin="none" 文档 * docs: update * fix: 单选禁用光标效果 * docs: lay-skin="none" 相关示例迁移至 form 页面 * docs: 新增 checkbox 自定义风格示例文件 * docs(form): 新增 radio 自定义风格示例文件 * docs(form): 新增 checkbox,radio 自定义风格示例的样式文件 * docs(form): 新增 checkbox 自定义风格示例 * docs(form): 新增 radio 自定义风格示例 * docs(form): 转移 checkbox,radio 自定义风格示例到对应的组件页面 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>pull/1734/head
morning-star
GitHub
parent
98a5aac01e
commit
b5cc9d8787
|
|
@ -39,7 +39,7 @@ layui.use(function(){
|
|||
- 属性 `checked` 可设置默认选中
|
||||
- 属性 `disabled` 可设置禁用状态
|
||||
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）
|
||||
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，默认风格可不填
|
||||
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
|
||||
|
||||
特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。
|
||||
|
||||
|
|
@ -85,7 +85,7 @@ layui.use(function(){
|
|||
在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
|
||||
|
||||
|
||||
<h2 id="title" lay-toc="{hot: true}">标题模板 <sup>2.8.3+</sup></h2>
|
||||
<h2 id="title" lay-toc="{}">自定义标题模板 <sup>2.8.3+</sup></h2>
|
||||
|
||||
在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。
|
||||
|
||||
|
|
@ -119,6 +119,19 @@ layui.use(function(){
|
|||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
|
||||
|
||||
通过对 `checkbox` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的多选组件。<br>
|
||||
**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/form/examples/checkbox.skin.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
|
||||
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
|
||||
|
||||
|
|
@ -175,4 +188,4 @@ layui.use(function(){
|
|||
});
|
||||
</script>
|
||||
</textarea>
|
||||
</pre>
|
||||
</pre>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,91 @@
|
|||
<!--
|
||||
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
|
||||
-->
|
||||
|
||||
<div class="layui-form" lay-filter="form-demo-skin">
|
||||
{{- d.include("/form/examples/checkboxAndRadio.style.md") }}
|
||||
<h3 class="ws-bold">自定义“卡片风格”的多选组件</h3>
|
||||
<div class="layui-row layui-col-space8">
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="checkbox" name="browser[0]" value="chrome" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-chrome" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Chrome</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Google 公司开发的网页浏览器，被大多数人所使用。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="checkbox" name="browser[1]" value="edge" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Edge</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="checkbox" name="browser[2]" value="firefox" lay-skin="none" disabled>
|
||||
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Firefox</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Mozilla 开发的开放源代码的网页浏览器。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="checkbox" name="browser[3]" value="ie" lay-skin="none" disabled checked>
|
||||
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Internet Explorer</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="ws-bold">自定义“标签风格”的多选组件</h3>
|
||||
<div>
|
||||
<input type="checkbox" name="hobby[0]" value="唱" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">唱</div>
|
||||
<input type="checkbox" name="hobby[1]" value="跳" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">跳</div>
|
||||
<input type="checkbox" name="hobby[2]" value="rap" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">rap</div>
|
||||
<input type="checkbox" name="hobby[3]" value="篮球" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">篮球</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var form = layui.form;
|
||||
var $ = layui.$;
|
||||
// …
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<style>
|
||||
/*
|
||||
* 基于复选框和单选框的卡片风格多选组件
|
||||
* 需要具备一些基础的 CSS 技能，以下样式均为外部自主实现。
|
||||
*/
|
||||
|
||||
/* 主体 */
|
||||
.layui-form-checkbox>.lay-skin-checkcard,
|
||||
.layui-form-radio>.lay-skin-checkcard {
|
||||
display: table;
|
||||
display: flex;
|
||||
padding: 12px;
|
||||
white-space: normal;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e5e5e5;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.layui-form-checkbox>.lay-skin-checkcard>*,
|
||||
.layui-form-radio>.lay-skin-checkcard>* {
|
||||
/* display: table-cell; */ /* IE */
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 悬停 */
|
||||
.layui-form-checkbox:hover>.lay-skin-checkcard,
|
||||
.layui-form-radio:hover>.lay-skin-checkcard {
|
||||
border-color: #16b777;
|
||||
}
|
||||
|
||||
/* 选中 */
|
||||
.layui-form-checked>.lay-skin-checkcard,
|
||||
.layui-form-radioed[lay-skin="none"]>.lay-skin-checkcard {
|
||||
color: #000;
|
||||
border-color: #16b777;
|
||||
background-color: rgb(22 183 119 / 10%) !important;
|
||||
/* box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08); */
|
||||
}
|
||||
|
||||
|
||||
/* 禁用 */
|
||||
.layui-checkbox-disabled>.lay-skin-checkcard,
|
||||
.layui-radio-disabled>.lay-skin-checkcard {
|
||||
box-shadow: none;
|
||||
border-color: #e5e5e5 !important;
|
||||
background-color: #eee !important;
|
||||
}
|
||||
|
||||
/* card 布局 */
|
||||
.lay-skin-checkcard-avatar {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.lay-skin-checkcard-detail {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lay-skin-checkcard-header {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.lay-skin-checkcard-description {
|
||||
font-size: 13px;
|
||||
color: #5f5f5f;
|
||||
}
|
||||
.layui-disabled .lay-skin-checkcard-description{
|
||||
color: #c2c2c2! important;
|
||||
}
|
||||
|
||||
/* 选中 dot */
|
||||
.layui-form-checked>.lay-check-dot:after,
|
||||
.layui-form-radioed>.lay-check-dot:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-width: 10px;
|
||||
border-style: dashed;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 6px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 6px;
|
||||
border-top-color: #16b777;
|
||||
border-top-style: solid;
|
||||
border-right-color: #16b777;
|
||||
border-right-style: solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-checkbox-disabled>.lay-check-dot:after,
|
||||
.layui-radio-disabled>.lay-check-dot:after {
|
||||
border-top-color: #d2d2d2;
|
||||
border-right-color: #d2d2d2;
|
||||
}
|
||||
|
||||
/* 选中 dot-2 */
|
||||
.layui-form-checked>.lay-check-dot-2:before,
|
||||
.layui-form-radioed>.lay-check-dot-2:before {
|
||||
position: absolute;
|
||||
font-family: "layui-icon";
|
||||
content: "\e605";
|
||||
color: #fff;
|
||||
bottom: 4px;
|
||||
right: 3px;
|
||||
font-size: 9px;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.layui-form-checked>.lay-check-dot-2:after,
|
||||
.layui-form-radioed>.lay-check-dot-2:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-width: 10px;
|
||||
border-style: dashed;
|
||||
border-color: transparent;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 6px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-right-color: #16b777;
|
||||
border-right-style: solid;
|
||||
border-bottom-color: #16b777;
|
||||
border-bottom-style: solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layui-checkbox-disabled>.lay-check-dot-2:before,
|
||||
.layui-radio-disabled>.lay-check-dot-2:before {
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
.layui-checkbox-disabled>.lay-check-dot-2:after,
|
||||
.layui-radio-disabled>.lay-check-dot-2:after {
|
||||
border-bottom-color: #d2d2d2;
|
||||
border-right-color: #d2d2d2;
|
||||
}
|
||||
|
||||
.lay-ellipsis-multi-line {
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
<!-- 标签风格 -->
|
||||
<style>
|
||||
.layui-form-radio>.lay-skin-tag,
|
||||
.layui-form-checkbox>.lay-skin-tag {
|
||||
font-size: 13px;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.layui-form-checked>.lay-skin-tag,
|
||||
.layui-form-radioed>.lay-skin-tag {
|
||||
color: #fff !important;
|
||||
background-color: #16b777 !important;
|
||||
}
|
||||
</style>
|
||||
<!-- 单选框 Color Picker -->
|
||||
<style>
|
||||
/* 主体 */
|
||||
.layui-form-radio>.lay-skin-color-picker {
|
||||
border-radius: 50%;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* 选中 */
|
||||
.layui-form-radioed>.lay-skin-color-picker {
|
||||
box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px currentColor;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!--
|
||||
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
|
||||
-->
|
||||
|
||||
<div class="layui-form" lay-filter="form-demo-skin">
|
||||
{{- d.include("/form/examples/checkboxAndRadio.style.md") }}
|
||||
<h3 class="ws-bold">自定义“卡片风格”的单选组件</h3>
|
||||
<div class="layui-row layui-col-space8">
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="radio" name="radio1" value="chrome" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<span class="layui-icon layui-icon-chrome" style="font-size: 30px"></span>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Chrome</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Google 公司开发的网页浏览器，被大多数人所使用。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="radio" name="radio1" value="edge" lay-skin="none" checked>
|
||||
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Edge</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="radio" name="radio11" value="firefox" lay-skin="none" disabled>
|
||||
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Firefox</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Mozilla 开发的开放源代码的网页浏览器。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
|
||||
<input type="radio" name="radio11" value="ie" lay-skin="none" disabled checked>
|
||||
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
|
||||
<div class="lay-skin-checkcard-avatar">
|
||||
<i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
|
||||
</div>
|
||||
<div class="lay-skin-checkcard-detail">
|
||||
<div class="lay-skin-checkcard-header">Internet Explorer</div>
|
||||
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
|
||||
由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="ws-bold">自定义“标签风格”的单选组件</h3>
|
||||
<div>
|
||||
<input type="checkbox" name="hobby[0]" value="唱" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">唱</div>
|
||||
<input type="checkbox" name="hobby[1]" value="跳" lay-skin="none" checked>
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">跳</div>
|
||||
<input type="checkbox" name="hobby[2]" value="rap" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">rap</div>
|
||||
<input type="checkbox" name="hobby[3]" value="篮球" lay-skin="none">
|
||||
<div lay-checkbox class="lay-skin-tag layui-badge">篮球</div>
|
||||
</div>
|
||||
|
||||
<h3 class="ws-bold">自定义“颜色选择”的单选组件</h3>
|
||||
<div>
|
||||
<input type="radio" name="color" value="red" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-color-picker" style="color: red; background-color: red"></div>
|
||||
<input type="radio" name="color" value="#16b777" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-color-picker" style="color: #16b777; background-color: #16b777"></div>
|
||||
<input type="radio" name="color" value="blueviolet" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-color-picker" style="color: blueviolet; background-color: blueviolet"></div>
|
||||
<input type="radio" name="color" value="#16baaa" lay-skin="none">
|
||||
<div lay-radio class="lay-skin-color-picker" style="color: #16baaa; background-color: #16baaa"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var form = layui.form;
|
||||
var $ = layui.$;
|
||||
// …
|
||||
});
|
||||
</script>
|
||||
|
|
@ -115,7 +115,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
|
|||
| lay-vertype | `tips`吸附层<br>`alert` 对话框<br>`msg` 默认 | 设置验证异常时的提示层模式 |
|
||||
| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 |
|
||||
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，`<input type="text">`元素 **私有属性** |
|
||||
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">` 元素 **私有属性** |
|
||||
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">`，`<input type="radio">` 元素 **私有属性** |
|
||||
| lay-search | 默认不区分大小写;<br>设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
|
||||
| lay-creatable <sup>2.9.7+</sup> | 无需值 | 是否允许创建新条目，需要配合 `lay-search` 使用。`<select>` 元素 **私有属性** |
|
||||
| lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ toc: true
|
|||
- 属性 `checked` 可设置默认选中
|
||||
- 属性 `disabled` 可设置禁用状态
|
||||
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）。同组单选框一般设置相同值。
|
||||
- 属性 `lay-skin` 可设置单选框风格，可选值：`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
|
||||
|
||||
<h2 id="title" lay-toc="{}">自定义标题模板</h2>
|
||||
|
||||
|
|
@ -51,6 +52,19 @@ toc: true
|
|||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
|
||||
|
||||
通过对 `radio` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的单选组件。<br>
|
||||
**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/form/examples/radio.skin.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h2 id="on" lay-toc="{hot: true}">单选框事件</h2>
|
||||
|
||||
`form.on('radio(filter)', callback);`
|
||||
|
|
|
|||
|
|
@ -904,6 +904,18 @@ hr.layui-border-black{border-width: 0 0 1px;}
|
|||
.layui-form-onswitch > i{left: 100%; margin-left: -21px; background-color: #fff;}
|
||||
.layui-form-onswitch > div{margin-left: 0; margin-right: 21px; color: #fff!important;}
|
||||
|
||||
/* 无样式风格-根据模板自定义样式*/
|
||||
.layui-form-checkbox[lay-skin="none"] *,
|
||||
.layui-form-radio[lay-skin="none"] *{box-sizing: border-box;}
|
||||
.layui-form-checkbox[lay-skin="none"],
|
||||
.layui-form-radio[lay-skin="none"] {position: relative; min-height: 20px; margin: 0; padding: 0; height: auto; line-height: normal;}
|
||||
.layui-form-checkbox[lay-skin="none"]>div,
|
||||
.layui-form-radio[lay-skin="none"]>div{position: relative; top: 0; left: 0; cursor: pointer; z-index: 10; color: inherit; background-color: inherit;}
|
||||
.layui-form-checkbox[lay-skin="none"]>i,
|
||||
.layui-form-radio[lay-skin="none"]>i{display: none;}
|
||||
.layui-form-checkbox[lay-skin="none"].layui-checkbox-disabled>div,
|
||||
.layui-form-radio[lay-skin="none"].layui-radio-disabled>div{cursor: not-allowed;}
|
||||
|
||||
.layui-checkbox-disabled{border-color: #eee !important;}
|
||||
.layui-checkbox-disabled > div{color: #c2c2c2!important;}
|
||||
.layui-checkbox-disabled > i{border-color: #eee !important;}
|
||||
|
|
|
|||
|
|
@ -871,9 +871,19 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
hasRender[0] && hasRender.remove(); // 若已经渲染，则 Rerender
|
||||
|
||||
// 若存在标题模板，则优先读取标题模板
|
||||
var titleTplAttrs = [];
|
||||
if(othis.next('[lay-checkbox]')[0]){
|
||||
title = othis.next().html() || '';
|
||||
var titleTplElem = othis.next();
|
||||
title = titleTplElem.html() || '';
|
||||
if(titleTplElem[0].attributes.length > 1){
|
||||
layui.each(titleTplElem[0].attributes, function(i, attr){
|
||||
if(attr.name !== 'lay-checkbox'){
|
||||
titleTplAttrs.push(attr.name + '="' + attr.value + '"')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
titleTplAttrs = titleTplAttrs.join(' ');
|
||||
|
||||
// 若为开关，则对 title 进行分隔解析
|
||||
title = skin === 'switch' ? title.split('|') : [title];
|
||||
|
|
@ -891,7 +901,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
var type = {
|
||||
// 复选框
|
||||
"checkbox": [
|
||||
(title[0] ? ('<div>'+ title[0] +'</div>') : (skin === 'primary' ? '' : '<div></div>')),
|
||||
(title[0] ? ('<div ' + titleTplAttrs +'>'+ title[0] +'</div>') : (skin === 'primary' ? '' : '<div></div>')),
|
||||
'<i class="layui-icon '+(skin === 'primary' && !check.checked && othis.get(0).indeterminate ? CLASS.SUBTRA : 'layui-icon-ok')+'"></i>'
|
||||
].join(''),
|
||||
// 开关
|
||||
|
|
@ -947,22 +957,34 @@ layui.define(['lay', 'layer', 'util'], function(exports){
|
|||
radios.each(function(index, radio){
|
||||
var othis = $(this), hasRender = othis.next('.' + CLASS);
|
||||
var disabled = this.disabled;
|
||||
var skin = othis.attr('lay-skin');
|
||||
|
||||
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
|
||||
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
|
||||
|
||||
var title = util.escape(radio.title || '');
|
||||
var titleTplAttrs = [];
|
||||
if(othis.next('[lay-radio]')[0]){
|
||||
var titleTplElem = othis.next();
|
||||
title = titleTplElem.html() || '';
|
||||
if(titleTplElem[0].attributes.length > 1){
|
||||
layui.each(titleTplElem[0].attributes, function(i, attr){
|
||||
if(attr.name !== 'lay-radio'){
|
||||
titleTplAttrs.push(attr.name + '="' + attr.value + '"')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
titleTplAttrs = titleTplAttrs.join(' ');
|
||||
|
||||
// 替代元素
|
||||
var reElem = $(['<div class="layui-unselect '+ CLASS,
|
||||
(radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
|
||||
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">', // 禁用状态
|
||||
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'"', // 禁用状态
|
||||
(skin ? ' lay-skin="'+ skin +'"' : ''),
|
||||
'>',
|
||||
'<i class="layui-anim layui-icon '+ ICON[radio.checked ? 0 : 1] +'"></i>',
|
||||
'<div>'+ function(){
|
||||
var title = util.escape(radio.title || '');
|
||||
if(othis.next('[lay-radio]')[0]){
|
||||
title = othis.next().html();
|
||||
}
|
||||
return title;
|
||||
}() +'</div>',
|
||||
'<div ' + titleTplAttrs +'>'+ title +'</div>',
|
||||
'</div>'].join(''));
|
||||
|
||||
othis.after(reElem);
|
||||
|
|
|
|||
Loading…
Reference in New Issue