# Monk.UI **Repository Path**: rdiframework/Monk.UI ## Basic Information - **Project Name**: Monk.UI - **Description**: 基于Jquery开发，让你的表单亮起来！ - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: http://www.baisoft.org/public/monkui/ - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2016-10-15 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Monk.UI 基于Jquery开发，让你的表单亮起来！ ## 作者信息 - 原创作者：`百小僧` - 开源协议：`MIT License` - 开发时间：`2016年10月13日` - 项目版本：`0.1.3` - 项目名称：`Monk.UI` - 版权所有：[百签软件（中山）有限公司](http://www.baisoft.org) - 联系方式：QQ群：`123049073`，作者QQ：`8020292` - 开发理念：`一切从简，只为了更懒` - Github地址：[https://github.com/MonkSoul/Monk.UI/](https://github.com/MonkSoul/Monk.UI/) - 码云地址：[http://git.oschina.net/baisoft_org/Monk.UI](http://git.oschina.net/baisoft_org/Monk.UI) ## 效果图 - 预览地址：[http://www.baisoft.org/public/monkui/](http://www.baisoft.org/public/monkui/) - MarkDown编辑器预览地址：[http://www.baisoft.org/public/monkui/markdown.html](http://www.baisoft.org/public/monkui/markdown.html) ## 更新日志 - [https://github.com/MonkSoul/Monk.UI/releases](https://github.com/MonkSoul/Monk.UI/releases) ## 兼容信息 兼容IE9+（包涵IE9），Edge，Chrome，Firefox，Opera，Safari，和其他主流Webkit内核浏览器。 ## 开始使用 ```html ``` 就怎么简单，无需调用。 ## 基础组件 ### 普通文本框 - `min` 文本框 ```html
写点什么描述一下
``` - `middle` 文本框 ```html
写点什么描述一下
``` - `normal` 文本框 ```html
写点什么描述一下
``` - `large` 文本框 ```html
写点什么描述一下
``` - `xlarge` 文本框 ```html
写点什么描述一下
``` - `必填` 文本框 ```html
写点什么描述一下
``` - `只读` 文本框 ```html
写点什么描述一下
``` - `禁用` 文本框 ```html
写点什么描述一下
``` ### 多行文本框 - `min` 多行文本框 ```html
写点什么描述一下
``` - `middle` 多行文本框 ```html
写点什么描述一下
``` - `normal` 多行文本框 ```html
写点什么描述一下
``` - `large` 多行文本框 ```html
写点什么描述一下
``` - `xlarge` 多行文本框 ```html
写点什么描述一下
``` - `必填` 多行文本框 ```html
写点什么描述一下
``` - `只读` 多行文本框 ```html
写点什么描述一下
``` - `禁用` 多行文本框 ```html
写点什么描述一下
``` ### 复选框 - `正常` 复选框 ```html
写点什么描述一下
``` - `只读` 复选框 ```html
写点什么描述一下
``` - `禁用` 复选框 ```html
写点什么描述一下
``` ### 滑块 - `正常` 滑块 ```html
写点什么描述一下
写点什么描述一下
``` - `只读` 滑块 ```html
写点什么描述一下
写点什么描述一下
``` - `禁用` 滑块 ```html
写点什么描述一下
写点什么描述一下
``` ### 单选框 - `正常` 单选框 ```html
写点什么描述一下
``` - `只读` 单选框 ```html
写点什么描述一下
``` - `禁用` 单选框 ```html
写点什么描述一下
``` ### 下拉选择 - `正常` 下拉选择 ```html
写点什么描述一下
``` - `树形` 下拉选择 ```html
写点什么描述一下
``` - `只读` 下拉选择 ```html
写点什么描述一下
``` - `禁用` 下拉选择 ```html
写点什么描述一下
``` ### 数字输入框 - `正常` 数字输入框 ```html
写点什么描述一下
``` - `只读` 数字输入框 ```html
写点什么描述一下
``` - `禁用` 数字输入框 ```html
写点什么描述一下
``` ### 时间选择 - `正常` 时间选择 ```html
写点什么描述一下
``` - `禁用` 时间选择 ```html
写点什么描述一下
``` ### 文件选择 - `正常` 文件选择 ```html
写点什么描述一下
``` ### 显示文本 - `单行` 显示文本 ```html
百签软件，源于百签。
``` - `多行` 显示文本 ```html
百签软件（中山）有限公司 是中国一家高科技软件公司，总部位于广东省中山市西区。百签软件（中山）有限公司 主要提供全平台应用程序开发，其中包括移动应用程序（Android，IOS，Windows Phone），桌面应用程序（Windows，Linux，Mac），以及浏览器端应用程序（桌面端，移动端）等开发。
``` ### 按钮 - 提交按钮 ```html ``` - 普通按钮 ```html ``` - 普通按钮2 ```html ``` - 重置按钮 ```html ``` - 灰色按钮 ```html ``` - 链接按钮 ```html 链接按钮 ``` - 图标按钮 ```html 图标按钮 ``` - 禁用按钮 ```html ``` ### 第三方插件 #### rainbow.js 代码高亮 - 依赖库 ```html ``` - html高亮 ```html 
百签软件，源于百签。
``` - css高亮 ```html 
* { box-sizing: border-box; -moz-box-sizing: border-box; }
``` - javascript高亮 ```html 
exports.fileInit = function () {
    $(".monk-file").on({
        change: function () {
            var value = $(this).val();
            var input = $(this).parent(".monk-form-image-wrap").prev(".monk-form-wrap").children(".monk-form-input");
            input.val(value);
        }
    });
};
``` - php高亮 ```html 
namespace app\index\controller;
class Index
{
    public function index()
    {
        return 'index';
    }
}
``` - c#高亮 ```html 
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(Monk.App_Start.Startup))]
namespace Monk.App_Start
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}
``` - java高亮 ```html 
public static void insertionSort(int[] data) {
    for (int index = 1; index < data.length; index++) {
        int key = data[index];
        int position = index;
        // shift larger values to the right
        while (position > 0 && data[position - 1] > key) {
            data[position] = data[position - 1];
            position--;
        }
        data[position] = key;
    }
}
``` - sql高亮 ```html 
select * from web where site='http://www.baisoft.org/'
``` #### Editor.md 编辑器 - 依赖库 ```html ``` - 变身代码编辑器 ```html
写点什么描述一下
``` ```javascript var htmlcode; $(function () { // html代码编辑器 htmlcode = editormd("monk-form-html-code", { autoFocus: false, name: "HtmlCode", width: "100%", height: 300, watch: false, toolbar: false, codeFold: true, searchReplace: true, placeholder: "试试写写HTML代码吧！", value: "", mode: "text/html", // 修改这里即可变更为该语言的编辑器，目前支持（"text/html", "javascript", "php", "text/xml", "text/json", "clike", "javascript", "perl", "go", "python", "clike", "css", "ruby"）参数 path: 'libs/editor.md-v1.5.0/lib/' }); }); ``` - 非常强大的 Markdown 编辑器 ```html
写点什么描述一下
``` ```javascript var testEditor; $(function () { // markdown编辑器 testEditor = editormd("monk-form-markdown", { placeholder: "亲，写点什么吧，比如：百签软件（中山）有限公司", width: "100%", height: 740, path: 'libs/editor.md-v1.5.0/lib/', //theme: "default", //previewTheme: "default", //editorTheme: "default", markdown: "", codeFold: true, //syncScrolling : false, saveHTMLToTextarea: true, // 保存 HTML 到 Textarea searchReplace: true, //watch : false, // 关闭实时预览 htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启 //toolbar : false, //关闭工具栏 //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启 emoji: true, taskList: true, tocm: true, // Using [TOCM] tex: true, // 开启科学公式TeX语言支持，默认关闭 flowChart: true, // 开启流程图支持，默认关闭 sequenceDiagram: true, // 开启时序/序列图支持，默认关闭, //dialogLockScreen : false, // 设置弹出层对话框不锁屏，全局通用，默认为true //dialogShowMask : false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true //dialogDraggable : false, // 设置弹出层对话框不可拖动，全局通用，默认为true //dialogMaskOpacity : 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1 //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "./php/upload.php", onload: function () { console.log('onload', this); //this.fullscreen(); //this.unwatch(); //this.watch().fullscreen(); //this.setMarkdown("#PHP"); //this.width("100%"); //this.height(480); //this.resize("100%", 640); } }); // 设置图标 editormd.emoji.path = "libs/editor.md-v1.5.0/emojis/"; editormd.twemoji.path = "libs/editor.md-v1.5.0/twemoji/36x36/"; }); ``` ### 更多功能，整理开发中。。。。 ## 友情捐赠 如果你觉得 Monk.UI 对你有价值，并且愿意让她继续成长下去，你可以资助这个项目的开发，为作者加油打气。 ![微信捐赠](http://images.cnblogs.com/cnblogs_com/baisoft/865458/o_%e6%8d%90%e8%b5%a0.png) 如果你喜欢Monk.UI，可以点击右上角的 `star`，想实时关注进度，可以点击右上角的 `watch`。 最后，感谢每一个提建议和使用或者捐赠的朋友！因为你们，我们才能坚持！也是因为你们，未来才会更美好！