背景

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