背景

目前市场上有很多表单美化的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. Sass-也许你想和CSS玩耍起来（下篇）

    问心无愧,共勉! sass-也许你想和CSS玩耍起来(上篇) 上篇中主要介绍了一些sass的基本特性.下篇中,主要是写一些我们常用的sass控制命令,函数和规则. sass进阶 控制命令 可能看过上篇 ...

  2. mysql NOW,CURRENT_TIMESTAMP,SYSDATE 之间的区别

    这些函数都可以返回当前的系统时间,但它们之间有什么区别呢??大家先看一下以下这个例子. select NOW(), CURRENT_TIMESTAMP(),SYSDATE(); 从上面的例子可以看出返 ...

  3. IOS RunLoop面试题

    一 什么是RunLoop? 从字面意思看就是运行循环,其实内部就是do-while循环,这个循环内部不断地处理各种任务(比 如Source,Timer,Observer) 一个线程对应一个RunLoo ...

  4. 【转】2016/2017 Web 开发者路线图

    链接:知乎 [点击查看大图] 原图来自LearnCodeAcademy最火的视频,learncode是YouTube上最火的Web开发教学频道,介绍包括HTML/CSS/JavaScript/Subl ...

  5. 用户故事驱动的敏捷开发 – 2. 创建backlog

    本系列的第一篇[用户故事驱动的敏捷开发 – 1. 规划篇]跟大家分享了如何使用用户故事来帮助团队创建需求的过程,在这一篇中,我们来看看如何使用这些用户故事和功能点形成产品backlog.产品backl ...

  6. 显示转换explicit和隐式转换implicit

    用户自定义的显示转换和隐式转换 显式转换implicit关键字告诉编译器,在源代码中不必做显示的转型就可以产生调用转换操作符方法的代码. 隐式转换implicit关键字告诉编译器只有当源代码中指定了显 ...

  7. Flume组件source，channel，sink源码分析

    LifeCycleState: IDLE, START, STOP, ERROR [Source]: org.apache.flume.Source 继承LifeCycleAware{stop() + ...

  8. win7+ubuntu双系统 重装win7后grub修复

    问题:之前安装的是win7+ubuntu双系统,重装win7后启动选项没有了,直接进入的是win7系统,无法进入ubuntu系统了. 解决办法:我们需要修复grub,将ubuntu系统重新挂载一下,具 ...

  9. 关于css的一些事情（1）

    什么情况下hidden不起作用? position设置成fixed,overflow的hidden不起作用. visibility和display 1.visibility: 规定了元素是否可见,即使 ...

  10. 计算机网络－IP类型判断

    第一个类别为A类,最后一个类别为E类,前边三个类别(A类.B类和C类)被用来标识工作站.路由器.交换机以及其他设备,而最后两个类别(D类和E类)被保留做特殊用途. 一个IP地址由32个比特位构成,这就 ...