{"id":564,"date":"2026-09-21T18:27:11","date_gmt":"2026-09-21T10:27:11","guid":{"rendered":"https:\/\/www.kirasu.cn\/index.php\/2026\/09\/21\/2-layui-%e5%b8%b8%e7%94%a8%e8%af%ad%e6%b3%95%e4%b8%8e%e7%a4%ba%e4%be%8b-2\/"},"modified":"2026-09-21T18:27:11","modified_gmt":"2026-09-21T10:27:11","slug":"2-layui-%e5%b8%b8%e7%94%a8%e8%af%ad%e6%b3%95%e4%b8%8e%e7%a4%ba%e4%be%8b-2","status":"publish","type":"post","link":"https:\/\/www.kirasu.cn\/index.php\/2026\/09\/21\/2-layui-%e5%b8%b8%e7%94%a8%e8%af%ad%e6%b3%95%e4%b8%8e%e7%a4%ba%e4%be%8b-2\/","title":{"rendered":"Layui \u5e38\u7528\u8bed\u6cd5\u4e0e\u793a\u4f8b"},"content":{"rendered":"

Layui \u5e38\u7528\u8bed\u6cd5\u4e0e\u793a\u4f8b<\/h1>\n
\n

\u57fa\u7840\uff1a\u6837\u5f0f\u9760class\uff0c\u4ea4\u4e92js\u5728layui.use()\u4e2d\u7f16\u5199<\/p>\n<\/blockquote>\n

1. \u6805\u683c\u5e03\u5c40\uff0812\u7b49\u5206\uff09<\/h2>\n

layui-row \u4ee3\u8868\u4e00\u884c\uff1blayui-col-mdN \u4ee3\u8868\u5360N\u4efd\uff0cmd\u4ee3\u8868PC\u5927\u5c4f\u3002<\/p>\n

<div class=\"layui-row\">\n    <div class=\"layui-col-md4\">\u53601\/3\u5bbd\u5ea6<\/div>\n    <div class=\"layui-col-md8\">\u53602\/3\u5bbd\u5ea6<\/div>\n<\/div><\/code><\/pre>\n
2. \u6309\u94ae<\/h2>\n
class \u63a7\u5236\u6837\u5f0f<\/p>\n
<button class=\"layui-btn\">\u9ed8\u8ba4\u6309\u94ae<\/button>\n<button class=\"layui-btn layui-btn-primary\">\u539f\u59cb\u6309\u94ae<\/button>\n<button class=\"layui-btn layui-btn-danger\">\u5220\u9664\u6309\u94ae<\/button>\n<button class=\"layui-btn layui-btn-sm\">\u5c0f\u578b\u6309\u94ae<\/button><\/code><\/pre>\n
3. layer\u5f39\u7a97\u6a21\u5757\uff08\u6700\u5e38\u7528\uff09<\/h2>\n
layui.use(function(){\n  var layer = layui.layer;\n  \/\/ \u6d88\u606f\u63d0\u793a\n  layer.msg('\u63d0\u793a\u6587\u5b57');\n  \/\/ \u786e\u8ba4\u5f39\u7a97\n  layer.confirm('\u786e\u5b9a\u5220\u9664\u5417\uff1f', function(index){\n    layer.msg('\u786e\u8ba4\u6210\u529f');\n    layer.close(index); \/\/\u5173\u95ed\u5f39\u7a97\n  });\n  \/\/ \u666e\u901a\u5f39\u7a97\n  layer.open({\n    title:'\u5f39\u7a97\u6807\u9898',\n    content:'\u5f39\u7a97\u5185\u5bb9'\n  });\n})<\/code><\/pre>\n
4. form\u8868\u5355\u7ec4\u4ef6<\/h2>\n
\u5fc5\u987b\u7ed9form\u52a0\u4e0a class=\"layui-form\"<\/code>\uff0c\u5185\u90e8\u8868\u5355\u5143\u7d20\u81ea\u52a8\u7f8e\u5316<\/p>\n
<form class=\"layui-form\">\n  <div class=\"layui-form-item\">\n    <label class=\"layui-form-label\">\u7528\u6237\u540d<\/label>\n    <div class=\"layui-input-block\">\n      <input type=\"text\" name=\"username\" class=\"layui-input\">\n    <\/div>\n  <\/div>\n  <div class=\"layui-form-item\">\n    <div class=\"layui-input-block\">\n      <button class=\"layui-btn\" lay-submit lay-filter=\"formDemo\">\u63d0\u4ea4<\/button>\n    <\/div>\n  <\/div>\n<\/form><\/code><\/pre>\n
JS\u76d1\u542c\u8868\u5355\u63d0\u4ea4\u4e8b\u4ef6<\/p>\n
layui.use(function(){\n  var form = layui.form;\n  \/\/\u76d1\u542c\u63d0\u4ea4\n  form.on('submit(formDemo)', function(data){\n    console.log(data.field); \/\/\u83b7\u53d6\u8868\u5355\u6240\u6709\u63d0\u4ea4\u6570\u636e\n    return false; \/\/\u963b\u6b62\u8868\u5355\u9ed8\u8ba4\u63d0\u4ea4\n  });\n})<\/code><\/pre>\n
5. laydate \u65e5\u671f\u9009\u62e9\u5668<\/h2>\n
<input type=\"text\" id=\"date\" class=\"layui-input\">\n<script>\nlayui.use(function(){\n  var laydate = layui.laydate;\n  laydate.render({\n    elem: '#date' \/\/\u7ed1\u5b9a\u5143\u7d20id\n  });\n})\n<\/script><\/code><\/pre>\n
6. table \u6570\u636e\u8868\u683c\uff08\u540e\u7aef\u5217\u8868\u5e38\u7528\uff09<\/h2>\n
\u9759\u6001\u8868\u683c\uff08\u524d\u7aef\u76f4\u63a5\u5199\u6b7b\u6570\u636e\uff09<\/h3>\n
<table class=\"layui-table\">\n  <thead>\n    <tr>\n      <th>ID<\/th>\n      <th>\u59d3\u540d<\/th>\n    <\/tr>\n  <\/thead>\n  <tbody>\n    <tr>\n      <td>1<\/td>\n      <td>\u5f20\u4e09<\/td>\n    <\/tr>\n  <\/tbody>\n<\/table><\/code><\/pre>\n
JS\u6e32\u67d3\u52a8\u6001\u8868\u683c\uff08\u91cd\u70b9\uff0c\u5bf9\u63a5\u540e\u7aef\u63a5\u53e3\uff09<\/h3>\n
<table id=\"userTable\"><\/table>\n<script>\nlayui.use(function(){\n  var table = layui.table;\n  table.render({\n    elem:'#userTable',\n    cols:[[\n      {field:'id',title:'ID'},\n      {field:'name',title:'\u59d3\u540d'}\n    ]],\n    data:[{id:1,name:\"\u5f20\u4e09\"},{id:2,name:\"\u674e\u56db\"}]\n  })\n})\n<\/script><\/code><\/pre>\n
7. \u5361\u7247\u9762\u677f<\/h2>\n
<div class=\"layui-card\">\n  <div class=\"layui-card-header\">\u5361\u7247\u6807\u9898<\/div>\n  <div class=\"layui-card-body\">\u5361\u7247\u5185\u5bb9<\/div>\n<\/div><\/code><\/pre>\n
8. \u63d0\u793a\u6807\u7b7e<\/h2>\n
<span class=\"layui-badge\">\u6570\u5b57<\/span>\n<span class=\"layui-badge layui-bg-red\">\u7ea2\u8272\u6807\u8bb0<\/span><\/code><\/pre>\n
9. \u5206\u9875\u7ec4\u4ef6<\/h2>\n
<div id=\"page\"><\/div>\n<script>\nlayui.use(function(){\n  var laypage = layui.laypage;\n  laypage.render({\n    elem:'page',\n    count:100, \/\/\u603b\u6570\u636e\u6761\u6570\n    limit:10,  \/\/\u6bcf\u9875\u6761\u6570\n    curr:1\n  })\n})\n<\/script><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Layui \u5e38\u7528\u8bed\u6cd5\u4e0e\u793a\u4f8b \u57fa\u7840\uff1a\u6837\u5f0f\u9760class\uff0c\u4ea4\u4e92js\u5728layui.use()\u4e2d\u7f16\u5199 1. \u6805\u683c\u5e03\u5c40\uff081 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[27],"class_list":["post-564","post","type-post","status-publish","format-standard","hentry","category-layui","tag-layui"],"_links":{"self":[{"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/posts\/564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/comments?post=564"}],"version-history":[{"count":0,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/posts\/564\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/media?parent=564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/categories?post=564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kirasu.cn\/index.php\/wp-json\/wp\/v2\/tags?post=564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}