打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
只需多加一个属性就能实现 WordPress 后台表单折叠展开效果

最近做了一个邮件模板功能,就是可以在后台定义各种情况下的发送邮件验证码的模板,如下图所示:

可以定义「注册账号」,「重置密码」,「验证邮箱」等各种情况下的邮件模板的标题和内容。使用 WPJAM Basic 的生成表单功能,实现是非常简单,具体的代码就是生成三个 fieldset 字段组,使用 foreach 简单就能处理:








但是感觉这样重复的界面非常占用空间,有没有什么好的优化方式,比如折叠起来,点击展开之后再设置?

我查了一下,其实无需 Javascript,只需用 HTML 的 summary / details 这两个标签就能实现。

所以我增强了一下 WPJAM Basic fieldset 组件的能力,fieldset 组件只需要设定 summary 属性,就能使用 summary / details 实现折叠展开效果,具体代码如下:








相比第一段代码,这段代码就是增加了 summary 属性设置,最后的效果如下:

默认情况都只显示摘要,点击摘要时候,就会展开字段组设置,如上图,我点击了第一个 fieldset 字段组的摘要,「注册账号」这个邮件模板就展开了,其他两个则还是没有折叠的状态。

该功能已经整合到 WPJAM Basic 插件中,并已免费提供下载,简单勾选或者设置下即可开启!


点击

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
embed和fieldset
HTML标记符
WEB前端第五课——HTML表单
好程序员web前端培训分享HTMLCSS之HTML表单标签
ECShop
动态表单数据库设计
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服