我爲何還要造輪子？欠踹？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" onkeyup="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" onkeyup="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" onkeyup="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">
        百籤軟件，源於百籤。
    </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>

　

 

按鈕

 

 

提交按鈕

<input type="submit" class="monk-input-button turquoise monk-form-submit" value="保存提交" />

 

普通按鈕

<button class="monk-input-button emerland">普通按鈕</button>

普通按鈕2

<input type="button" class="monk-input-button peterRiver" value="普通按鈕" />

重置按鈕

<input type="reset" class="monk-input-button amethyst" value="重置按鈕" />

灰色按鈕

<input type="button" class="monk-input-button clouds" value="灰色按鈕" />

連接按鈕

<a class="monk-input-button turquoise">連接按鈕</a>

圖標按鈕

<a class="monk-input-button turquoise"><span class="monk-iconfont icon-monk-time"></span>圖標按鈕</a>

禁用按鈕

<button class="monk-input-button emerland" disabled="disabled">禁用按鈕</button>

　　

 

開源地址

 

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

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

 

好了，輪子就造到這裏，造輪子只是爲了可以更好的開發，也可以學習到新東西！