html事件 · SCM文檔

# data-load 標準異常網絡請求（其中菜單不會發生改變） * data-load 指定get網絡請求地址 * data-tips 指定異步網絡請求tips提示 * data-confirm 是否啟用提示確認框 ~~~ // 只加載內容到內容區 <a data-load="__URL__">加載html到內容區</a> // 加載內容到內容區，同時顯示提示 <a data-load="__URL__" data-tips='正在加載，請稍候...'>加載html到內容區</a> // 加載內容到內容區，在加載前提示用戶是否要繼續操作 <a data-load="__URL__" data-confirm='確定要刪除數據嗎?' >刪除數據<a> ~~~ 如果返回的數據是`html`(也就是`string`類型) 則會將數據插入到內容區域；如果返回的數據是`JSON`格式，則會使用消息自動處理機制，調用`$.msg.auto`方法來處理。 # data-open 內容區打開新頁（其中菜單會發生改變） * data-open 指定get網絡請求地址 ~~~ // 只加載內容到內容區 <a data-open="__URL__">加載html到內容區</a> ~~~ 如果返回的數據是`html`(也就是`string`類型) 則會將數據插入到內容區域；如果返回的數據是`JSON`格式，則會使用消息自動處理機制，調用`$.msg.auto`方法來處理。 # data-modal Modal彈出層 * data-modal 指定get網絡請求地址 ~~~ // 只加載內容到內容區 <a data-modal="__URL__">加載html到modal</a> ~~~ 如果返回的數據是`html`(也就是`string`類型) 則會將數據插入到內容區域；如果返回的數據是`JSON`格式，則會使用消息自動處理機制，調用`$.msg.auto`方法來處理。 # data-reload 強制刷新內容區強制刷新內容區 ~~~ <a data-reload='true'>刷新</a> ~~~ # data-update 更新數據 * data-update 指定需要操作的數據記錄ID，多個以英文逗號分割 * data-field 設置需要更新的字段名稱 * data-value 設置將需要更新的字段更新的值 * data-action 設置服務端處理的URL地址 ~~~ <a data-update="1,3,4" data-field='status' data-value='0' data-action='http://demo.thinkadmin.top/forbid.html'>禁用</a> ~~~ 針對`ThinkAdmin`刪除記錄的處理 * 服務端對`data-field=deleted`有特殊處理過，如果對應表有`is_deleted`字段則為軟刪除，否為硬刪除。 ~~~ <a data-update="1,3,4" data-field='delete' data-action='http://demo.thinkadmin.top/del.html'>刪除</a> ~~~ # data-href 打開新的網頁 \*　打開新的網頁，與`a`標簽的`href`類似 ~~~ <a data-href='__URL__'>打開新頁</a> ~~~ # data-file 文件上傳插件 \-- 以 HTML 屬性的方式實現文件上傳 * data-type 限定允許上傳的文件類型 * data-field 綁定對應表單字段的name屬性 * data-file 設置文件上傳模式（one: 單文件上傳, mut: 多文件上傳） ~~~ <input name='file-field'> <button type='button' data-file='one' data-field='file-field' data-type='jpg,png,gif'>上傳文件</button> ~~~ 以`JavaScript`實現圖片上傳，`input`上可以加`data-type`來設置上傳文件的后綴。 ~~~ <input name='file_field'> <script> $(function(){ $('[name="file_field"]').uploadOneImage(); }); </script> ~~~ 以`JavaScript`實現多圖片上傳，`input`上可以加`data-type`來設置上傳文件的后綴。 ~~~ <input name='fiel_field'> <script> $(function(){ $('[name="file_field"]').uploadMultipleImage(); }); </script> ~~~ # data-iframe Iframe打開網頁 \*　以`iframe`方式打開網頁 ~~~ <a data-iframe='__URL__'>打開新頁</a> ~~~ # data-icon 打開圖標選擇器 * 打開系統圖標選擇器, data-icon 的值用來指定表單對應字段名稱 ~~~ <input name='icon'> <button data-icon='icon'>選擇圖標</button> ~~~ # data-tips-image 點擊圖片展示圖片 * 點擊圖片展示圖片 ~~~ // 展示 img 的 src 對應圖片 <img data-tips-image src='https://demo.thinkadmin.top/static/upload/f47b8fe06e38ae99/08e8398da45583b9.png'> // 展示指定 src 的圖片 <img data-tips-image="指定的圖片SRC地址" src='https://demo.thinkadmin.top/static/upload/f47b8fe06e38ae99/08e8398da45583b9.png'> ~~~ # data-tips-text 鼠標懸停文字提示 * 鼠標懸停文字提示 ~~~ <img data-tips-text='tips文字' src='https://demo.thinkadmin.top/static/upload/f47b8fe06e38ae99/08e8398da45583b9.png'> ~~~ # data-phone-view 以手機模式顯示 * 以`iframe`方式打開手機新頁 ~~~ <a data-phone-view='__URL__'>打開手機新頁</a> ~~~