diff --git a/docs/dropdown/index.md b/docs/dropdown/index.md index 5021eb6f..a91dcc3b 100644 --- a/docs/dropdown/index.md +++ b/docs/dropdown/index.md @@ -24,6 +24,7 @@ toc: true | [dropdown.reload(id, options)](#reload) | 完整重载 | | [dropdown.reloadData(id, options)](#reload) 2.8+ | 仅重载数据或内容 | | [dropdown.close(id)](#close) | 关闭对应的组件面板 | +| [dropdown.open(id)](#open) 2.9.8+ | 打开对应的组件面板 |

渲染

@@ -154,4 +155,26 @@ dropdown.render({ }); // 关闭对应的组件面板 dropdown.close('test'); +``` + + +

打开面板 2.9.8+

+ +`dropdown.open(id);` + +- 参数 `id` : 组件渲染时定义的 `id` 属性值 + +该方法用于打开对应的 `dropdown` 组件面板。 + +``` +var dropdown = layui.dropdown; + +// 渲染 +dropdown.render({ + elem: '', // 绑定元素选择器 + id: 'test', // 自定义 id + // 其他属性 … +}); +// 打开对应的组件面板 +dropdown.open('test'); ``` \ No newline at end of file diff --git a/docs/form/checkbox.md b/docs/form/checkbox.md index 169ed5aa..59704876 100644 --- a/docs/form/checkbox.md +++ b/docs/form/checkbox.md @@ -39,7 +39,7 @@ layui.use(function(){ - 属性 `checked` 可设置默认选中 - 属性 `disabled` 可设置禁用状态 - 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制） -- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`2.8+,`switch`，默认风格可不填 +- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`2.8+,`switch`，`none`(无样式)2.9.8+ 默认风格可不填 特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。 @@ -85,7 +85,7 @@ layui.use(function(){ 在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题 -

标题模板 2.8.3+

+

自定义标题模板 2.8.3+

在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。 @@ -119,6 +119,19 @@ layui.use(function(){ +

自定义任意风格 2.9.8+

+ +通过对 `checkbox` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的多选组件。
+**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。 + +
+  
+
+

复选框事件

@@ -175,4 +188,4 @@ layui.use(function(){ }); - \ No newline at end of file + diff --git a/docs/form/examples/checkbox.skin.md b/docs/form/examples/checkbox.skin.md new file mode 100644 index 00000000..3ad57ca5 --- /dev/null +++ b/docs/form/examples/checkbox.skin.md @@ -0,0 +1,91 @@ + + +
+ {{- d.include("/form/examples/checkboxAndRadio.style.md") }} +

自定义“卡片风格”的多选组件

+
+
+ +
+
+ +
+
+
Chrome
+
+ 由 Google 公司开发的网页浏览器，被大多数人所使用。 +
+
+
+
+
+ +
+
+ +
+
+
Edge
+
+ 由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。 +
+
+
+
+
+ +
+
+ +
+
+
Firefox
+
+ 由 Mozilla 开发的开放源代码的网页浏览器。 +
+
+
+
+
+ +
+
+ +
+
+
Internet Explorer
+
+ 由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。 +
+
+
+
+
+ +

自定义“标签风格”的多选组件

+
+ +
唱
+ +
跳
+ +
rap
+ +
篮球
+
+ +
+

更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。

+ +
+ + + diff --git a/docs/form/examples/checkboxAndRadio.style.md b/docs/form/examples/checkboxAndRadio.style.md new file mode 100644 index 00000000..258430bc --- /dev/null +++ b/docs/form/examples/checkboxAndRadio.style.md @@ -0,0 +1,191 @@ + + + + + diff --git a/docs/form/examples/radio.skin.md b/docs/form/examples/radio.skin.md new file mode 100644 index 00000000..98b08649 --- /dev/null +++ b/docs/form/examples/radio.skin.md @@ -0,0 +1,103 @@ + + +
+ {{- d.include("/form/examples/checkboxAndRadio.style.md") }} +

自定义“卡片风格”的单选组件

+
+
+ +
+
+ +
+
+
Chrome
+
+ 由 Google 公司开发的网页浏览器，被大多数人所使用。 +
+
+
+
+
+ +
+
+ +
+
+
Edge
+
+ 由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。 +
+
+
+
+
+ +
+
+ +
+
+
Firefox
+
+ 由 Mozilla 开发的开放源代码的网页浏览器。 +
+
+
+
+
+ +
+
+ +
+
+
Internet Explorer
+
+ 由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。 +
+
+
+
+
+ +

自定义“标签风格”的单选组件

+
+ +
唱
+ +
跳
+ +
rap
+ +
篮球
+
+ +

自定义“颜色选择”的单选组件

+
+ +
+ +
+ +
+ +
+
+ +
+

更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。

+ +
+ + + diff --git a/docs/form/index.md b/docs/form/index.md index a3b05df1..108145c3 100644 --- a/docs/form/index.md +++ b/docs/form/index.md @@ -115,7 +115,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。 | lay-vertype | `tips`吸附层
`alert` 对话框
`msg` 默认 | 设置验证异常时的提示层模式 | | lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 | | lay-affix | [#详见](input.html#affix) | 输入框动态点缀，``元素 **私有属性** | -| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `` 元素 **私有属性** | +| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 ``，`` 元素 **私有属性** | | lay-search | 默认不区分大小写;
设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`` 元素 **私有属性** | | lay-submit | 无需值 | 设置元素（一般为` + + +
鼠标右键菜单
@@ -39,6 +45,7 @@