背景

目前市场上有很多表单美化的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. 游标的使用——mysql

    CREATE DEFINER=`root`@`%` PROCEDURE `split_category_all`()BEGIN declare categ varchar(10); ##套餐列 dec ...

  2. SQLiteOpenHelper类

    SQLiteOpenHelper是管理数据库的工具类. 下面提供一个模板: package com.example.intelligencecontrol.utils; import android. ...

  3. iOS 学习 - 20 UICollectionView 移动 Item ，类似背包

    有100个 item,数据源只有20个,只能在 20 个之间移动,防止 item 复用,出现 bug 方法一:苹果自带 //UICollectionViewDataSource- (BOOL)coll ...

  4. 使用 Async 和 Await 的异步编程（C# 和 Visual Basic）[msdn.microsoft.com]

    看到Microsoft官方一篇关于异步编程的文章,感觉挺好,不敢独享,分享给大家. 原文地址:https://msdn.microsoft.com/zh-cn/library/hh191443.asp ...

  5. SSRS Reports 2008性能优化案例二

    前几天一同事反映海外工厂A的SSRS报表比较慢,让我检查优化一下.于是我检查了下2015-07-13到2015-07-15 12:00这段时间报表的耗时记录 USE [ReportServer];   ...

  6. .NET项目开发—浅谈面向对象的纵横向关系、多态入口，单元测试（项目小结）

    阅读目录: 1.开篇介绍 2.使用委托消除函数串联调用 2.1.使用委托工厂转换两个独立层面的对象 3.多态入口(面向对象继承体系是可被扩展的) 4.多态的受保护方法的单元测试(Protected成员 ...

  7. windows系统快捷操作の基础篇

    从网上汇总了一些windows系统上常用的快捷键,结合自己的使用经验,将平时使用电脑时最常用的快捷键记录在此.注意这里罗列的是平时最常用到的,其他的一般来说不怎么用到的并不在此列,如果想要完整列表,请 ...

  8. x01.os.20: compile linux-0.11 on the ubuntu

    为什么学习 linux 正如不能依靠美国的 GPS 为我们的导弹指示目标一样,很难想像用运行 windows 的电脑去同美国进行信息战.而朝鲜的网络崩溃,再次警示国人,信息战.网络战离我们并不遥远.l ...

  9. Linux indent

    一.简介 indent可辨识C的原始代码文件,并加以格式化,以方便程序设计师阅读. 二.选项 http://www.runoob.com/linux/linux-comm-indent.html 三. ...

  10. TCP通信丢包原因总结

    今天在公司问老大,公司的项目底层,是使用的TCP,因为可靠,自动断线重连,在底层都实现了,但是我记得TCP也会有掉包的问题,所以这文章就诞生了——关于TCP掉包的问题,TCP是基于不可靠的网络实现可靠 ...