# ID命名規范
## 1.7.ID命名規范
ID命名規范是SPA單頁面版強烈建議的,非SPA單頁版也建議ID參考此規范來命名。
**總體命名規則xxxXxxXxx**
* 第一個xxx ? 模塊名,比如用戶模塊`user`
* 第二個Xxx ? 功能描述,比如添加`Add`
* 第三個Xxx ? 元素類型,比如按鈕`Btn`
例如頁面是user.html,它的各個元素命名如下:
**按鈕的命名**
~~~
<!-- 命名規則:xxxXxxBtn -->
<button id="userAddBtn" class="layui-btn">添加</button>
<button id="userEditBtn" class="layui-btn">修改</button>
<button id="userDelBtn" class="layui-btn">刪除</button>
~~~
**表格的命名**
~~~
<!-- 命名規則:xxxTable -->
<table id="userTable" lay-filter=""userTable"></table>
<!-- 表格上方搜索表單,命名規則:xxxTbSearchForm,id和lay-filter是非必須的 -->
<form class="layui-form" id="userTbSearchForm" lay-filter="userTbSearchForm">
<!-- 輸入框部分省略... -->
<!-- 搜索提交按鈕命名規則:xxxTbSearch -->
<button class="layui-btn" lay-filter="userTbSearch" lay-submit>搜索</button>
</form>
<!-- 表格操作列,命名規則:xxxTbBar -->
<script type="text/html" id="userTbBar">
<a class="layui-btn" lay-event="edit">修改</a>
<a class="layui-btn" lay-event="del">刪除</a>
</script>
<!-- 表格其他復雜列,例如switch狀態開關等,命名規則:xxxTbXxx -->
<script type="text/html" id="userTbState">
<input type="checkbox" lay-filter="userTbStateCk" value="{{d.userId}}" lay-skin="switch"
lay-text="正常|鎖定" {{d.state==0?'checked':''}}/>
</script>
~~~
**一個頁面有多個表格的命名**
~~~
<!-- 命名規則:xxxXxxTable -->
<!-- 例如這是一個用戶訂單記錄表 -->
<table id="userOrderTable" lay-filter=""userOrderTable"></table>
<!-- 表格操作列,命名規則:xxxXxxTbBar -->
<script type="text/html" id="userOrderTbBar">
<a class="layui-btn" lay-event="edit">修改</a>
<a class="layui-btn" lay-event="del">刪除</a>
</script>
~~~
**表單彈窗的命名**
~~~
<!-- 頁面層彈窗命名規則:xxxEditDialog,非頁面層可以忽略script -->
<script type="text/html" id="userEditDialog">
<!-- 表單命名規則:xxxEditForm -->
<form id="userEditForm" lay-filter="userEditForm" class="layui-form model-form">
<!-- 輸入框部分省略... -->
<!-- 提交按鈕命名規則:xxxEditSubmit -->
<button class="layui-btn" lay-filter="userEditSubmit" lay-submit>保存</button>
</form>
</script>
~~~
**頁面其他彈窗的命名**
~~~
<!-- 例如這是一個查看詳情彈窗 -->
<!-- 頁面層彈窗命名規則:xxxXxxDialog,非頁面層可以忽略script -->
<script type="text/html" id="userInfoDialog">
<!-- 表單命名規則:xxxXxxForm -->
<form id="userInfoForm" lay-filter="userInfoForm" class="layui-form model-form">
<!-- 輸入框部分省略... -->
<!-- 提交按鈕命名規則:xxxXxxSubmit -->
<button class="layui-btn" lay-filter="userInfoSubmit" lay-submit>保存</button>
</form>
</script>
~~~
表單里面的input建議少用id,只用name,取input的值通過監聽表單提交來取,用input通過`$('#xxxForm [name="xxx"]')`來寫。
**其他元素ID命名**
~~~
<!-- 命名規則:xxxXxxXxx,第一個xxx是模塊名,第二個Xxx是功能描述,第三個Xxx是元素類型 -->
<!-- 例如角色選擇的下拉框 -->
<select id="userRoleSel"></select>
<!-- 例如備注的輸入框 -->
<input id="userCommentsEdt" />
~~~
**元素類型簡寫**
| 元素 | 簡寫 | 描述 |
| --- | --- | --- |
| 按鈕類 | `Btn` | `<button>`、`.layui-btn`等 |
| 輸入類的 | `Edt` | EditText的簡寫,`input`、`textarea`等 |
| 選擇類的 | `Sel` | 下拉框、多選下拉框等 |
| 表格 | `Table` | `id="userTable"`、`id="userOrderTable"`等 |
| 表格附加組件 | `Tb` | `id="userTbBar"`、`id="userOrderTbBar"`等 |
| 彈窗 | `Dialog` | `id="userEditDialog`、`id="userInfoDialog"`等 |
| 表單 | `Form` | `id="userEditForm`、`id="userInfoForm"`等 |
| 表單提交按鈕 | `Submit` | `id="userEditSubmit"`、`id="userInfoSubmit"`等 |
**頁面的命名**
~~~
<!-- 命名格式:xxxApp -->
<body id="userApp"></body>
~~~
> 以上規則只是規范,非必須要求
- 更新日志
- 開始使用
- 導入項目
- 項目結構
- index.html結構說明
- 添加一個菜單
- common.js說明
- 修改默認配置
- ID命名規范
- index模塊
- 加載默認主頁
- 打開一個選項卡
- 關閉指定選項卡
- 清除Tab記憶
- 修改Tab標題
- 切換Tab自動刷新
- 側邊欄手風琴折疊
- admin模塊(基礎)
- 全部方法
- 彈窗相關方法
- 加載層loading
- ajax封裝
- 緩存操作putTempData
- 鎖屏功能
- ew-event事件綁定
- open彈窗事件
- logout事件
- admin模塊(進階)
- 文字提示
- 地圖選擇位置
- 裁剪圖片
- 動畫數字
- 經緯度轉換
- 深度克隆對象
- 判斷富文本是否為空
- 移除指定style
- 模板引擎
- 滾動到頂部
- 事件監聽
- 動態模板
- 公共樣式
- 公共類
- 組件樣式
- 表單彈窗
- 表格工具欄
- 垂直選項卡
- 徽章擴展
- 下拉樹單選
- fixed方式select
- 擴展組件(常用)
- 1.下拉菜單
- 快速使用
- 更多樣式
- 對任意元素使用
- 帶遮罩層
- 自定義下拉內容
- 控制顯示方向
- 在數據表格中使用
- 氣泡確認框
- 2.消息通知
- 快速使用
- 全部方法
- 參數列表
- 解決彈窗遮擋
- 3.級聯選擇器
- 快速使用
- 異步加載
- 自定義分隔符
- 搜索功能
- 省市區選擇
- 全部方法
- 全部參數
- 4.標簽輸入框
- 快速使用
- 全部參數
- 5.分割面板
- 快速使用
- 垂直分割
- 嵌套使用
- 6.環形進度條
- 快速使用
- 全部參數
- 自定義樣式
- 7.步驟條
- 快速使用
- 風格選擇
- 上一步下一步
- 禁止標題點擊
- 擴展組件(進階)
- 1.表單擴展tableX
- 全部方法
- 合并單元格
- 行綁定鼠標右鍵
- 后端排序
- 前端分頁排序
- 導出數據
- 導出全部、搜索
- 后端導出
- 2.表單擴展formX
- 驗證規則
- 擴展方法
- 渲染select封裝
- 驗證碼倒計時
- 獲取修改字段
- 3.打印插件
- 打印當前頁面
- 設置不打印元素
- 打印自定義內容
- 分頁打印
- 拼接html
- 4.鼠標右鍵
- 快速使用
- 自定義使用
- 動態元素綁定
- 5.數據列表dataGrid
- 快速使用
- 全部參數
- 分頁功能
- 加載更多功能
- 實例方法
- 自動渲染
- 6.文件選擇器
- 快速使用
- 全部參數
- 第三方插件
- 鼠標滾輪監聽
- 二維碼模塊
- 引導插件
- 剪貼板
- 視頻播放器
- 富文本編輯器
- 更多功能
- 主題功能
- 自定義擴展模塊
- 增加按鈕權限控制
- table統一設置headers
- 彈窗專題
- 第一種 頁面層彈窗
- 第二種 iframe彈窗
- 第三種 url方式彈窗
- 第四種 捕獲層彈窗
- 四種方式選擇指南
- admin.modelForm方法
- 參數傳遞方法詳解
- 刷新url方式彈窗
- 彈窗使用模板引擎
- 彈窗內組件不渲染
- 常見問題
- 后端生成側邊欄
- ajax加載側邊欄
- 多系統模式
- logo文字換行顯示
- 側邊欄全部展開
- 側邊欄折疊圖標放大
- 彈窗下拉框出現滾動條
- 彈窗寬度不能超出屏幕
- 表單文字出現換行
- select、radio不顯示
- 日期laydate不能顯示
- 彈窗打開后按enter無限打開
- 表單提交post變成了get
- 修改表格背景和邊框顏色
- 修改placeholder顏色
- IE數據表格緩存嚴重
- 使用parent.layer問題
- 表格打印太長列未換行
- 彈窗layer.js報錯404
- 表格請求去掉page和limit
- 側邊欄折疊卡頓
- 圖片表格點擊查看
- 常用實例
- 表格內switch獲取行數據
- 表格回顯復選框
- 表格工具列動態顯示
- 表單提交數組
- 重載表格重置排序
- laydte動態控制日期限制
- 下拉樹一些數據不可選
- 修改彈窗禁用輸入框
- 表格中下拉框數據動態
- 實現點擊后轉一圈
- 頁面下拉框數據動態
- 表格動態tool事件處理
- 表格復選框和序號列合并
- 表單提交帶文件上傳
- 單標簽模式加居中文字