當前位置：首頁 >

我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！

發布時間：2025/4/5 30 豆豆

生活随笔收集整理的這篇文章主要介紹了我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

背景

目前市場上有很多表單美化的UI，做的都挺不錯，但是他們都有一個共同點，那就是90%以上都是前端工程師開發的，導致我們引入這些UI的時候，很難和程序綁定。所以作為程序員的我，下了一個決定！我要自己寫UI！

所以，我便自己操刀，花了半天的時間終于寫了Monk.UI！剛好在Monk.Soul項目中用上（Monk.Soul是一基于ASP.NET MVC 5+SqlSugar 3.0開發的無碼系統，包涵顆粒化權限控制，工作流，社區，項目管理等功能，目前完成了70%，也即將開源，敬請期待！該項目也完全由本人開發！）之前也開源了AppSoft2.0.IO（http://git.oschina.net/baisoft_org/AppSoft2.0.IO）不過該項目目前已經停止更新！這個月底將開源全新的Monk.Soul超級管理系統！

以上項目和Monk.UI無關，但也是一個開源系統，預計月底開源！本項目也由我本人開發，和AppSoft2.0.IO一樣！免費開源，不同的是Monk.Soul是一個完善的開源系統。敬請期待

預覽效果

預覽地址：http://www.baisoft.org/public/monkui/

?

表單組件

普通文本框

小號

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input min" placeholder="請輸入..." /><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

中號

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input middle" placeholder="請輸入..." /><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input normal" placeholder="請輸入..." /><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

大號

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input large" placeholder="請輸入..." /><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

超大號

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input xlarge" placeholder="請輸入..." /><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

必填

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-lock"></span><input type="text" class="monk-form-input normal" placeholder="請輸入..." /><span class="monk-iconfont icon-monk-required"></span><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

只讀

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-lock"></span><input type="text" class="monk-form-input normal" readonly="readonly" placeholder="請輸入..." /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

禁用

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-lock"></span><input type="text" class="monk-form-input normal" disabled="disabled" placeholder="請輸入..." /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

多行文本框

小號

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input textarea-icon"></span><textarea class="monk-form-textarea min" placeholder="請輸入..."></textarea><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

中號

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input textarea-icon"></span><textarea class="monk-form-textarea middle" placeholder="請輸入..."></textarea><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input textarea-icon"></span><textarea class="monk-form-textarea normal" placeholder="請輸入..."></textarea><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

大號

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input textarea-icon"></span><textarea class="monk-form-textarea large" placeholder="請輸入..."></textarea><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

超大號

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input textarea-icon"></span><textarea class="monk-form-textarea xlarge" placeholder="請輸入..."></textarea><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

必填

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input textarea-icon"></span><textarea class="monk-form-textarea normal" placeholder="請輸入..."></textarea><span class="monk-iconfont icon-monk-required textarea-icon"></span><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input textarea-icon"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

只讀

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input textarea-icon"></span><textarea class="monk-form-textarea normal" placeholder="請輸入..." readonly="readonly"></textarea></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

禁用

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input textarea-icon"></span><textarea class="monk-form-textarea normal" placeholder="請輸入..." disabled="disabled"></textarea></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

復選框

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-checkbox-list"><input type="checkbox" name="like" class="monk-checkbox" value="0" text="籃球" /><input type="checkbox" name="like" class="monk-checkbox" value="1" text="足球" /><input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

只讀

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-checkbox-list"><input type="checkbox" name="like" class="monk-checkbox" value="0" text="籃球" readonly="readonly" /><input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" readonly="readonly" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

禁用

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-checkbox-list"><input type="checkbox" name="like" class="monk-checkbox" value="0" text="籃球" disabled="disabled" /><input type="checkbox" name="like" class="monk-checkbox" value="2" text="百小僧" checked="checked" disabled="disabled" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

切換滑塊

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-switch-list"><input type="checkbox" name="like" class="monk-switch" value="0" text="啟用" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>  <div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-switch-list"><input type="checkbox" name="like" class="monk-switch" value="0" checked="checked" text="啟用" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

只讀

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-switch-list"><input type="checkbox" name="like" class="monk-switch" value="0" readonly="readonly" text="啟用" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>  <div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-switch-list"><input type="checkbox" name="like" class="monk-switch" value="0" readonly="readonly" checked="checked" text="啟用" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

禁用

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-switch-list"><input type="checkbox" name="like" class="monk-switch" value="0" disabled="disabled" text="啟用" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>  <div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-switch-list"><input type="checkbox" name="like" class="monk-switch" value="0" disabled="disabled" checked="checked" text="啟用" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

單選框

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-radio-list"><input type="radio" class="monk-radio" name="sex" value="0" text="男性" /><input type="radio" class="monk-radio" name="sex" value="1" text="女性" checked="checked" /><input type="radio" class="monk-radio" name="sex" value="2" text="人妖" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

只讀

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-radio-list"><input type="radio" class="monk-radio" name="sex1" value="0" text="男性" readonly="readonly" /><input type="radio" class="monk-radio" name="sex1" value="1" text="女性" checked="checked" /><input type="radio" class="monk-radio" name="sex1" value="2" text="人妖" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

禁用

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-radio-list"><input type="radio" class="monk-radio" name="sex2" value="0" text="男性" disabled="disabled" /><input type="radio" class="monk-radio" name="sex2" value="1" text="女性" checked="checked" disabled="disabled" /><input type="radio" class="monk-radio" name="sex2" value="2" text="人妖" /><input type="radio" class="monk-radio" name="sex2" value="3" text="保密" /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

下拉選擇框

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap monk-form-select-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input middle" placeholder="請輸入或選擇..." /><span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span></div><div class="monk-form-select monk-none"><select class="monk-select"><option value="">請選擇...</option><option value="0">列表項目一</option><option value="1" selected="selected">列表項目二</option><option value="2">列表項目三</option><option value="3">列表項目四</option><option value="4">列表項目五</option><option value="5">列表項目六</option><optgroup label="這里是分類欄目"></optgroup><option value="6">列表項目七</option><option value="7">列表項目八</option><option value="8">列表項目九</option><option value="9">列表項目十</option></select></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

樹形下拉

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap monk-form-select-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input middle" placeholder="請輸入或選擇..." /><span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span></div><div class="monk-form-select monk-none"><select class="monk-select"><option value="">請選擇上級模塊</option><option value="0">系統模塊</option><option value='1'>├ 站點管理</option><option value='2'>　├ 站點設置</option><option value='3'>　├ 內容管理</option><option value='4'>　　├ 類別管理</option><option value='5'>　　├ 單頁管理</option><option value='6'>　├ 頻道管理</option><option value='7'>　├ 廣告管理</option><option value='8'>　├ 留言板管理</option><option value='9'>　　├ 留言類別</option><option value='10'>　├ 碎片管理</option><option value='11'>　├ 友情鏈接管理</option><option value='12'>　　├ 類別管理</option><option value='13'>├ 微信管理</option><option value='14'>　├ 基本設置</option><option value='15'>├ 移動管理</option><option value='16'>　├ 基本設置</option></select></div><div class="monk-form-tip">寫點什么描述一下</div></div>

只讀

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap monk-form-select-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input middle" placeholder="請輸入或選擇..." readonly="readonly" /><span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span></div><div class="monk-form-select monk-none"><select class="monk-select"><option value="">請選擇...</option><option value="0">列表項目一</option><option value="1">列表項目二</option><option value="2">列表項目三</option><option value="3" selected="selected">列表項目四</option><option value="4">列表項目五</option><option value="5">列表項目六</option><optgroup label="這里是分類欄目"></optgroup><option value="6">列表項目七</option><option value="7">列表項目八</option><option value="8">列表項目九</option><option value="9">列表項目十</option></select></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

禁用

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap monk-form-select-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input middle" placeholder="請輸入或選擇..." disabled="disabled" /><span class="monk-iconfont monk-select-arrow icon-monk-arrowdown border-left"></span></div><div class="monk-form-select monk-none"><select class="monk-select"><option value="">請選擇...</option><option value="0">列表項目一</option><option value="1">列表項目二</option><option value="2">列表項目三</option><option value="3">列表項目四</option><option value="4">列表項目五</option><option value="5">列表項目六</option><optgroup label="這里是分類欄目"></optgroup><option value="6" selected="selected">列表項目七</option><option value="7">列表項目八</option><option value="8">列表項目九</option><option value="9">列表項目十</option></select></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

數字輸入框

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-number"></span><input type="number" class="monk-form-input middle" οnkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" placeholder="請輸入..." /><span class="monk-iconfont icon-monk-required"></span><span class="monk-iconfont border-left icon-monk-dacha monk-clear-input"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

只讀

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-number"></span><input type="number" class="monk-form-input middle" οnkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" readonly="readonly" placeholder="請輸入..." /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

禁用

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-number"></span><input type="number" class="monk-form-input middle" οnkeyup="this.value=this.value.replace(/!^[0-9]*$/g,'')" onafterpaste="this.value=this.value.replace(/!^[0-9]*$/g,'')" disabled="disabled" placeholder="請輸入..." /></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

時間選擇?

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap monk-form-time-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input middle" placeholder="請選擇..." value="01:02:03" readonly="readonly" /><span class="monk-iconfont border-left icon-monk-time"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

禁用

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap monk-form-time-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input middle" placeholder="請選擇..." value="01:02:03" disabled="disabled" /><span class="monk-iconfont border-left icon-monk-time"></span></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

文件選擇

正常

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap"><span class="monk-iconfont border-right icon-monk-input"></span><input type="text" class="monk-form-input normal" placeholder="請選擇..." /><span class="monk-iconfont border-left icon-monk-file"></span></div><div class="monk-form-wrap monk-form-image-wrap"><input type="file" class="monk-file" /><button class="monk-input-button turquoise">選擇文件</button></div><div class="monk-form-tip">寫點什么描述一下</div> </div>

顯示文本

單行

多行

<div class="monk-form-item"><label for="" class="monk-form-label monk-color-peterriver">表單標題</label><div class="monk-form-wrap monk-form-detail-wrap monk-full">百簽軟件（中山）有限公司是中國一家高科技軟件公司，總部位于廣東省中山市西區。百簽軟件（中山）有限公司主要提供全平臺應用程序開發，其中包括移動應用程序（Android，IOS，Windows Phone），桌面應用程序（Windows，Linux，Mac），以及瀏覽器端應用程序（桌面端，移動端）等開發。</div> </div>

按鈕

提交按鈕

普通按鈕

普通按鈕2

重置按鈕

灰色按鈕

鏈接按鈕

圖標按鈕

禁用按鈕

開源地址

Github地址：https://github.com/MonkSoul/Monk.UI/

碼云地址：http://git.oschina.net/baisoft_org/Monk.UI

好了，輪子就造到這里，造輪子只是為了能夠更好的開發，也能夠學習到新東西！

轉載于:https://www.cnblogs.com/baiqian/p/5961337.html

總結

以上是生活随笔為你收集整理的我为什么还要造轮子？欠踹？Monk.UI表单美化插件诞生记！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。