阅读目录

背景

目前市场上有很多表单美化的UI，做的都挺不错，但是他们都有一个共同点，那就是90%以上都是前端工程师开发的，导致我们引入这些UI的时候，很难和程序绑定

所以，我边自己操刀写了一个，花了半天的时间终于写好了！目前包涵基础所有表单和第三方插件。

预览效果

预览地址：http://www.baisoft.org/public/monkui/

表单组件

普通文本框

小号

1
2
3
4
5
6
7
8
9
<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>

中号

1
2
3
4
5
6
7
8
9
<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>

正常

1
2
3
4
5
6
7
8
9
<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>

大号

1
2
3
4
5
6
7
8
9
<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>

超大号

1
2
3
4
5
6
7
8
9
<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>

必填

1
2
3
4
5
6
7
8
9
10
<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>

只读

1
2
3
4
5
6
7
8
<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>

禁用

1
2
3
4
5
6
7
8
<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>

多行文本框

小号

1
2
3
4
5
6
7
8
9
<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>

中号

1
2
3
4
5
6
7
8
9
<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>

正常

1
2
3
4
5
6
7
8
9
<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>

大号

1
2
3
4
5
6
7
8
9
<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>

超大号

1
2
3
4
5
6
7
8
9
<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>

必填

1
2
3
4
5
6
7
8
9
10
<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>

只读

1
2
3
4
5
6
7
8
<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>

禁用

1
2
3
4
5
6
7
8
<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>

复选框

正常

1
2
3
4
5
6
7
8
9
<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>

只读

1
2
3
4
5
6
7
8
<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>

禁用

1
2
3
4
5
6
7
8
<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>

切换滑块

正常

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--未选中-->
<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>

只读

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--未选中-->
<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>

禁用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--未选中-->
<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>

单选框

正常

1
2
3
4
5
6
7
8
9
<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>

只读

1
2
3
4
5
6
7
8
9
<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>

禁用

1
2
3
4
5
6
7
8
9
10
<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>

下拉选择框

正常

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

树形下拉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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>

只读

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

禁用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

数字输入框

正常

1
2
3
4
5
6
7
8
9
10
<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>

只读

1
2
3
4
5
6
7
8
<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>

禁用

1
2
3
4
5
6
7
8
<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>

时间选择

正常

1
2
3
4
5
6
7
8
9
<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>

禁用

1
2
3
4
5
6
7
8
9
<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>

文件选择

正常

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

显示文本

单行

1
2
3
4
5
6
<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>

多行

1
2
3
4
5
6
<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>

　

按钮

提交按钮

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

普通按钮

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

普通按钮2

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

重置按钮

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

灰色按钮

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

链接按钮

1
<a class="monk-input-button turquoise">链接按钮</a>

图标按钮

1
<a class="monk-input-button turquoise"><span class="monk-iconfont icon-monk-time"></span>图标按钮</a>

禁用按钮

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

　　

开源地址

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

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

好了，轮子就造到这里，造轮子只是为了能够更好的开发，也能够学习到新东西！

前端福利：一套UI框架的更多相关文章

  1. 前端基于jquery的UI框架

    正在做的一个项目选择jquery作为前端js核心库.然后就想选一个基于jquery的ui库,然后悲催的事情发生了. 至于为什么使用jquery,一是因为不想为授权费用,而又不想引起可能法律纠纷:另一方 ...

  2. 常见的前端UI框架

    Bootstrap 首先说 Bootstrap,估计你也猜到会先说或者一定会有这个( 呵呵了 ),这是说明它的强大之处,拥有框架一壁江山的势气.自己刚入道的时候本着代码任何一个字母都得自己敲出来挡我者 ...

  3. 目前流行前端几大UI框架排行榜

    在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 流行指数:★★★★ Mint UI是 ...

  4. 基础知识漫谈（2）：从设计UI框架开始

    说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工 ...

  5. SpringCloud微服务实战——搭建企业级开发框架（四十八）：【移动开发】整合uni-app搭建移动端快速开发框架-使用第三方UI框架

      uni-app默认使用uni-ui全端兼容的.高性能UI框架,在我们开发过程中可以满足大部分的需求了,并且如果是为了兼容性,还是强烈建议使用uni-ui作为UI框架使用.   如果作为初创公司,自 ...

  6. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  7. 不懂前端的程序员不是好美工——UI框架metronic使用教程——程序员视角

    本着不懂前端的程序员不是好美工的观点,所以作为一个仅懂一点前端的程序员,为了成为一个好美工,所以只能用些取巧的方法伪装一下. metronic一个基于bootstrap的响应式的后台管理平台的UI框架 ...

  8. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  9. 如何选择适合的前端UI框架

    根据近几年前端框架的热门,在前端开发框架不断更新与交换的时代,每一年都有黑马出现,是否适合自己开发的项目就不得而知了,只有认真的了解之后才能知道,这里主要给大家说一下如何选择适合旅游的前端UI框架?相 ...

随机推荐

  1. 华东交通大学2017年ACM双基程序设计大赛题解

    简单题 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submissio ...

  2. 移动平台自动化测试：appium（一）

    Appium 是一个开源的,跨平台的自动化测试工具.它支持模拟器(iOS,FirefoxOS,Android)和真机(iOS, Android, FirefoxOS)上的原生应用,混合应用和移动 we ...

  3. jQuery中Ajax的属性设置

    1.全局设置为同步 $.ajaxSetup({ async: false });

  4. 【bzoj4870】[Shoi2017]组合数问题 dp+快速幂/矩阵乘法

    题目描述 输入 第一行有四个整数 n, p, k, r,所有整数含义见问题描述. 1 ≤ n ≤ 10^9, 0 ≤ r < k ≤ 50, 2 ≤ p ≤ 2^30 − 1 输出 一行一个整数 ...

  5. input输入限制（持续更新）

    1.只读文本框内容 <!-- 在input里添加属性值 readonly --> <input type="text" value="" re ...

  6. [解决方案]未能找到路径“~\bin\roslyn\csc.exe”的一部分

    我的WebApi项目使用Nuget加载了一些包以后出现了这样的问题,本地可以访问,但发布到线上后,出现这样的报错 这个问题出现的原因是Nuget的时候,多加载了一些项目可能不需要的依赖库所导致的. 解 ...

  7. POJ2175：Evacuation Plan（消负圈）

    Evacuation Plan Time Limit: 1000MSMemory Limit: 65536KTotal Submissions: 5665Accepted: 1481Special J ...

  8. Agile已死， Agility长存

    注:本文系作者独立翻译,可以随意转载.如有雷同,纯属巧合.原文地址:http://pragdave.me/blog/2014/03/04/time-to-kill-agile/ P.s. 第一次自己翻 ...

  9. 网络嗅探器Wireshark

    http://www.wireshark.org/   About Wireshark Wireshark is the world's foremost network protocol analy ...

  10. jQuery UI-Draggable 参数集合

    ·概述    在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动.    官方示例地址:http://jqueryui.com/demos/draggable/      所有 ...