背景

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

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

我为什么还要造轮子?欠踹?Monk.UI表单美化插件诞生记!的更多相关文章

  1. 避免重复造轮子的UI自动化测试框架开发

    一懒起来就好久没更新文章了,其实懒也还是因为忙,今年上半年的加班赶上了去年一年的加班,加班不息啊,好了吐槽完就写写一直打算继续的自动化开发 目前各种UI测试框架层出不穷,但是万变不离其宗,驱动PC浏览 ...

  2. 【疯狂造轮子-iOS】JSON转Model系列之二

    [疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...

  3. 重复造轮子,编写一个轻量级的异步写日志的实用工具类(LogAsyncWriter)

    一说到写日志,大家可能推荐一堆的开源日志框架,如:Log4Net.NLog,这些日志框架确实也不错,比较强大也比较灵活,但也正因为又强大又灵活,导致我们使用他们时需要引用一些DLL,同时还要学习各种用 ...

  4. 除非你是BAT,前端开发中最好少造轮子

    站在前人的肩膀上 HTML.CSS.JavaScript是前端的根基,这是无可否认的事实.正如一辆车当然都是由一堆钢板和螺钉组成的,但是现在还有人拎着个锤子敲敲打打的造车吗?李书福说过,“汽车不过是四 ...

  5. React造轮子:拖拽排序组件「Dragact」

    先来一张图看看: 项目地址:Github地址 (无耻求星!) 在线观看(第一次加载需要等几秒):预览地址 说起来不容易,人在国外没有过年一说,但是毕竟也是中国年,虽然不放假,但是家里总会主内一顿丰盛的 ...

  6. 造轮子-AgileConfig基于.NetCore的一个轻量级配置中心

    微服务确实是行业的一个趋势,我自己也在把一些项目往微服务架构迁移.玩微服务架构配置中心是一个绕不过去的东西,有很多大牌的可以选,比如spring-cloud-config,apoll,disconf等 ...

  7. 【疯狂造轮子-iOS】JSON转Model系列之一

    [疯狂造轮子-iOS]JSON转Model系列之一 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 之前一直看别人的源码,虽然对自己提升比较大,但毕竟不是自己写的,很容易遗 ...

  8. h5engine造轮子

    基于学习的造轮子,这是一个最简单,最基础的一个canvas渲染引擎,通过这个引擎架构,可以很快的学习canvas渲染模式! 地址:https://github.com/RichLiu1023/h5en ...

  9. 「iOS造轮子」之UIButton 用Block响应事件

    俗语说 一个不懒的程序员不是好程序员 造轮子,也只是为了以后更好的coding. coding,简易明了的代码更是所有程序员都希望看到的 无论是看自己的代码,还是接手别人的代码 都希望一看都知道这代码 ...

随机推荐

  1. 前端框架bootstrap 表单和导航菜单的 Demo(第二篇)

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  2. AFNetworking的理解

    AFNetworking的理解 使用方法 1. 新建的工程中导入AFNetworking3.0中的(AFNetworking 和UIKit+AFNetworking两个文件夹) 2. 在用到AFNet ...

  3. Android项目实战(二十五):Android studio 混淆+打包+验证是否成功

    前言: 单挑Android项目,最近即时通讯用到环信,集成sdk的时候 官方有一句 在 ProGuard 文件中加入以下 keep. -keep class com.hyphenate.** {*;} ...

  4. iOS可执行文件瘦身方法

    缩减iOS安装包大小是很多中大型APP都要做的事,一般首先会对资源文件下手,压缩图片/音频,去除不必要的资源.这些资源优化做完后,我们还可以尝试对可执行文件进行瘦身,项目越大,可执行文件占用的体积越大 ...

  5. Windows平台下利用APM来做负载均衡方案 - 负载均衡(下)

    概述 我们在上一篇Windows平台分布式架构实践 - 负载均衡中讨论了Windows平台下通过NLB(Network Load Balancer) 来实现网站的负载均衡,并且通过压力测试演示了它的效 ...

  6. [css]我要用css画幅画(八) - Hello Kitty

    接着之前的[css]我要用css画幅画(七) - 哆啦A梦,这次画的是Hello Kitty. /* 开始前先说点废话, 一转眼就2016年了,过完年后一直没更新博客,无他,就是懒得动. 这一转眼,一 ...

  7. 此实现不是 Windows 平台 FIPS 验证的加密算法的一部分的解决办法方案

    最近操作系统不断地报异常或错误,可能是用得太久了,而刚好工作比较多又不想重新安装系统,但用一段时间后(一天大概有两次)系统就出现各种问题导致无法继续使用真是痛苦万分啊,今天又来了这样的错误: 此实现不 ...

  8. Ignite安装配置——上篇

    Ignite介绍 Ignite 是SolarWinds公司开发的一款数据库性能监控.性能分析并提供优化解决方案的性能检测分析工具,Ignite配置简单.方便:它会收集实时会话数据.服务器资源使用情况, ...

  9. MongoDB学习笔记~官方驱动嵌套数组对象的更新

    回到目录 对于数组对象mongodb本身是支持的,不过对于数组的更新,mongodb的Csharp驱动目前只支持一级,即你的对象里包含数组,而数组又包括数组,这表示两层,这在更新子数组时,Csharp ...

  10. linux top 源码分析

    /* * Copyright (c) 2008, The Android Open Source Project * All rights reserved. * * Redistribution a ...