前端福利：一套UI框架

最新推荐文章于 2024-09-21 23:25:42 发布
最新推荐文章于 2024-09-21 23:25:42 发布
阅读量85 收藏 1
点赞数
文章标签： ui 前端 移动开发 ViewUI

阅读目录

背景

目前市场上有很多表单美化的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

 

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

weixin_34077371
关注
[最新版带注册码]刷百度关联拉下拉词软件
08-10
[最新版带注册码]刷百度关联拉下拉词软件，能帮助你轻松解决关键字的出现频率。
Amazon 关键词下拉框联想采集
06-11
Amazon 关键词下拉框联想采集 可批量添加关键词，然后进行下拉框联想采集。 如果你是亚马逊卖家，就必须使用关键词联想采集，可以帮助商品的关键词做排名，有利于优化。
[MSSQL]采用pivot函数实现动态行转列
tlammon的专栏
05-31 1万+
环境要求：2005+ 在日常需求中经常会有行转列的事情需求处理，如果不是动态的行，那么我们可以采取case when 罗列处理。 在sql 2005以前处理动态行或列的时候，通常采用拼接字符串的方法处理，在2005以后新增了pivot函数之后，我可以利用这样函数来处理。 1. 环境要求：2005+ 在日常需求中经常会有行转列的事情需求处理，如果不是动态的行，那么我们可以采取case when 罗列处理。 在sql 2005以前处理动态行或列的时候，通常采用拼接字符串的方法处理，在2005以后新增.
写给新人的数据库分页查询
lsf5921的专栏
03-05 5390
<br />select top 分页大小 字段 from 表名 <br />where 分页字段><br />(select max(分页字段) from （select top （当前页数-1） * 分页大小 分页字段 from 表名))
2019.1.16
热门推荐
chongculong2772的博客
01-06 1万+
今天下雨了 转载于:https://my.oschina.net/u/4062012/blog/2997487
semantic-ui 官方文档最新版 前端开发福利
02-17
Semantic-UI 是一个流行的开源前端框架，它致力于使用户界面设计更加语义化，便于开发者理解和构建美观的网页应用。这个框架通过提供一套直观的类名，使得HTML元素更具描述性和可读性，从而降低了开发复杂度，提升了...
福利院儿童慈善响应式网页模板_html5 bootstrap 响应式模板UI前端源码.rar
08-01
标题中的“福利院儿童慈善响应式网页模板_html5 bootstrap 响应式模板UI前端源码.rar”表明这是一个基于HTML5和Bootstrap技术的响应式网页模板，主要用于慈善机构，特别是那些关注福利院儿童的非营利组织。...
.net中国福利彩票3D源码
06-23
1. .NET框架：.NET框架是微软推出的一种开发平台，它包含了运行应用程序所需的各种服务，如类库、编译器和运行时环境。.NET源码通常使用C#、VB.NET或F#等语言编写，具有跨平台能力（通过.NET Core）和强大的类型安全...
基于ssh框架+bootstrap的企业级员工信息管理系统（源码）
09-14
总结来说，"基于ssh框架+bootstrap的企业级员工信息管理系统"是一个综合运用了Java后端开发技术和前端UI框架的项目，旨在提供一套完整的、功能丰富的员工管理解决方案。开发者可以通过学习和实践这个项目，深入了解...
电影院会员管理系统前端
12-28
【电影院会员管理系统前端】是一个基于现代Web技术构建的系统，主要目标是为电影院提供一套高效、易用的会员管理解决方案。该系统运用了SpringBoot、MyBatis以及Vue.js这三大核心框架和技术，构建出一个集会员管理、...
1. Ruby基础知识
weixin_30664051的博客
09-27 9932
1. Ruby执行选项 符号作用 -c 检查代码正确性 -w 警告模式运行 -e 字面脚本 -l 行模式运行 单独 ruby -c Hello.rb 组合 ruby -le 'print "Hello";print "Ruby"' 2. 常量，变量 2.1 常量 通常以首字母大写或全部大写为常量。 CON...
利用select实现年月日三级联动的日期选择效果
weixin_34221773的博客
09-16 255
前面的话 　　关于select控件，可能年月日三级联动的日期选择效果是最常见的应用了。本文是选择框脚本的实践，下面将对日期选择效果进行详细介绍   演示 规划 　　默认情况下，年、月、日分别由3个select控件组成，id分别为sel1，sel2，sel3。它们且所包含的option[0]的值，分别为'年'、'月'、'日' 　　年份范围为1900-2100，月份范围为1-12，天的...
『功能项目』QFrameWorkBug关联Slot(插槽)【67】
weixin_69360830的博客
09-21 228
关联Slot
在Android中fragment的生命周期
LLZjiayou的博客
09-18 763
Fragment的生命周期非常类似于Activity，但是它有自己特有的生命周期方法（如），因为Fragment的视图可能会被销毁和重建。
基于stm32使用ucgui+GUIBuilder开发ui实例
梦想启航
09-16 1174
基于stm32使用ucgui+GUIBuilder开发ui实例，实现了3个自锁按键功能，当按键按下绿色显示，取消恢复默认颜色，将按下按键存储到stm32内部flash，掉电后能恢复选择的状态
鸿蒙开发入门day19-使用NDK接口构建UI（一）
来自计科萌新的编程记录本
09-16 1382
ArkUI开发框架提供了一系列NDK接口，能够在应用中使用C和C++代码构建UI界面，这些接口包括UI组件创建、UI树操作、属性设置和事件监听等。面向通用UI界面开发场景，建议使用ArkTS代码和ArkUI声明式开发框架。然而，如果需要实现以下一个或多个目标，那么ArkUI NDK接口就能派上用场：需要使用UI组件树控制接口来动态创建和挂载UI组件，方便实现自身UI开发框架的系统桥接。进一步提升UI界面性能，细粒度控制组件的创建和属性设置，以降低延迟、处理极高UI负载。
计算机网络17——IM聊天系统——客户端核心处理类框架搭建
weixin_74681777的博客
09-17 383
拆开客户端和服务端，使用Qt实现客户端，VS实现服务端。
『功能项目』QFrameWorkBug拖拽功能【66】
weixin_69360830的博客
09-21 163
物品拖拽功能
如何提高UI自动化的稳定性
最新发布
m0_64318128的博客
09-21 76
1. 对于失败的用例，将失败的原因进行记录，判断失败的类型：用例不稳定、环境问题、产品问题等。6. 添加失败重试，可以过滤掉很多因网络不稳定或环境不稳定导致的用例失败。2. 对于一些可能会变化的参数，将其设计成全局变量，减少维护用例的成本。7. 加入api自动化，对于数据的构建可以通过调用api接口的方式完成。4. 将不同的页面设计成一个类，在类中将页面中的功能封装成方法。1. 将用例设计成参数化，将测试数据通过参数进行传递。5. 对用例进行隔离，确保用例之间不会互相影响。
前端UI框架大盘点：从Bootstrap到jQueryUI
Bootstrap是由Twitter开发并广泛使用的前端框架，它包含了HTML、CSS和JS组件，特别适合构建响应式布局和移动优先的Web项目。Bootstrap以其易于上手和丰富的预设样式而闻名，支持多种网格系统、导航栏、模态框、按钮...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值