#site & doc & usage & live demo mint-ui #blog makerblog

mint-ui

a suite of jquery web plugin.include imgcut,dialog, form validator, markdowneditor, rich text editor. ##dialog ###screenshot ###usage

<meta charset="utf-8">
<title>dialog demo</title>
<button onclick="dia1.show();">模态弹窗</button>
<button onclick="dia2.show();">非模态弹窗</button>
<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="MintDialog.js"></script>
<script>
	var dia1 = new MintDialog({
		title : "modal",
		body : "hello friends"
	});
	
	var dia2 = new MintDialog({
		title : "moveable",
		body : "hello friends",
		modal:false,
		moveable:true
	});
</script>

##imgcut ###screenshot ###usage

<title>图片剪切</title>
<meta charset="UTF-8"/>
<style>
	html,body{padding:0;margin:0;}
	#img{max-height:400px;max-width:400px;margin:10px;margin-right:0;}
	.previews{text-align:center;}
	.preview{display:inline-block;border:2px solid #ccc;margin-bottom:10px;}
	.preview1{width:50px;height:50px;}
	.preview2{width:80px;height:80px;}
	.preview3{width:120px;height:120px;}
</style>
<table>
	<tr>
		<td><img id="img" src="45.jpg"/></td>
		<td>
			<div class="previews">
				<div class="preview1 preview"></div>
				<div class="preview2 preview"></div>
				<div class="preview3 preview"></div>
			</div>
		</td>
	</tr>
</table>
<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="imageSelect.min.js"></script>
<script>
	var setting = {
		scope : {
			top : 100,
			left : 100,
			width : 300,
			height : 300
		},
		ratio:1,
		preview:".preview",
		onSelect : function(pane, img){},
		onEnd : function(a,b){console.log(JSON.stringify(b));}
	}
	
	$("#img").MintImgSelect(setting);

	$("#change").click(function(){
		$("#img").attr("src", "demo.jpg");
	});
</script>

##form validator ###screenshot ###usage

<title>表单验证插件</title>
<meta charset=UTF-8>
<style>
	html{background:#8B817D;}
	form{position:absolute;	top:50%;left:50%;margin-left:-225px;margin-top:-206px;width:480px;background:#fff;
		box-shadow: 0 0 80px rgba(214, 214, 214, 0.6);}
	*{outline:none;font-family: "微软雅黑";color:#7777777;}
	form dt{width:80px;float:left;line-height:30px;text-align:right;}
	form dt,form dd{padding:5px 3px;}
	input{border:1px solid #9EC3FF;padding:4px 6px;font-size:16px;width:200px;}
	input:focus{border-color:#4D90FE!important;box-shadow: 0 0 10px rgba(74, 168, 255, 0.5);}
	input:hover{border-color:#4D90FE;}
	button{width:200px;padding:4px 6px;font-size:18px;box-sizing:content-box;color:#fff;border:none;background:#93BEFF;}
</style>
<form id="registerForm">
	<dl>
		<dt>昵称：</dt><dd><input type="text" name="nickname"/></dd>
		<dt>邮件：</dt><dd><input type="text" name="email"/></dd>
		<dt>密码：</dt><dd><input type="password" name="pwd"/></dd>
		<dt>确认：</dt><dd><input type="password" name="pwd1"/></dd>
		<dt></dt><dd><button type="button" id="register">注&emsp;册</button></dd>
	</dl>
</form>
<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="MintValidator.min.js"></script>
<script>
	/*先定义验证规则*/
	var rules = {
		"email"    	: {
			"rule" : /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
			"tip" : "邮箱格式不对"
		},
		"eq"		: {
			"rule" : function(val, formData){ return val == formData.pwd; },
			"tip" : "密码不匹配"
		},
		"notnull" : {
			"rule" : function(val, formData){return !(val == "")},
			"tip" : "不要为空"
		}
	};
	
	/*配置所有需要验证的表单域的验证参数*/
	var inputs = [{ 
			name 		: "nickname", 	//表单域的name属性值
			rules 		: ['notnull'], 	//采用什么规则验证此输入框，可配置多个规则
			focusMsg 	: '不能为空',	//当表单域获得焦点时的提示信息
			rightMsg	: '昵称可用(^_^)', //当表单域验证成功时的提示信息
			errorMsg	: "请输入昵称",	//当表单验证不成功时的提示信息
			
			/*定义ajax验证参数，结合后台验证昵称*/
			ajax 		: {
				url 	: "account/confirm_nickname",
				dataType:"json",
				filter 	: function(data){
					if(data.result){
						data.msg = "昵称可以注册(^_^)";
					} else if(d.data > 0){
						data.msg = "此昵称已被占用(^_^)||";
					}
					return data;
				}
			}
		},{ 
			name 		: "pwd",	
			rules 		: ['notnull'],
			focusMsg 	: '登陆密码',
			rightMsg 	: "密码有效(^_^)"
		},{ 
			name 		: "pwd1",	
			rules 		: ['eq'],		
			focusMsg 	: '确认密码',	
			rightMsg 	: "密码匹配(^_^)",
		},{ 
			name 		: "email",
			rules 		: ["email"],	
			focusMsg 	: '常用邮箱',
			rightMsg 	: "邮箱有效(^_^)"
		}
	];
	
	var setting = {
			inputs				: inputs,
			submitButton 		: "#register",
			rules 				: rules,
			showTipsAfterInit 	: true,
			onSubmit 			: function(result, button, form){
				if(result){
					//如果表单的验证结果为true,则可以手动通过ajax提交表单
				}
			}
		}
	
	/*最终验证表单*/
	$("#registerForm").validateForm(setting);
</script>

##rich text editor ###screenshot ###usage

<meta charset="utf-8">
<title></title>
<style>
	body{position:absolute;	left:20px;right:20px;bottom:20px;top:70px;}
	#toolbar{border:1px solid #ccc;position:absolute;bottom:100%;left:0;right:0;}
	#editorBody{position:absolute;z-index:1;top:4px;bottom:0;left:0;right:0;border:1px solid #ccc;}
</style>
<div id="toolbar"></div>
<div id="editorBody">
<h2>特点</h2>
<p>MintEditor是一款轻巧的富文本编辑器。工具栏和编辑区域可分开，方便与多种布局融合。开发者友好，易于扩展</p>
<h2>为什么要开发这个插件</h2>
<p>原因主要是因为作者在用其他编辑器编写博客时，每插入一张图片就要上传一次，而且图片不小心被删除了就找不回来了，得重新上传。所以我希望能有个能管理当前博客所有图片的编辑器，我可以在博客中随时插入和删除图片，但是我找了很久都没找着。偶然间，发现开发个简单的编辑器也并不难，所以就自己开发了一个。</p>
</div>
<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../MintDialog/MintDialog.min.js"></script>
<script src="MintEditor.js"></script>
<script>
	/*tools can be null*/
	var tools = [
			"undo", "redo", "removeFormat", "|", 
			"bold", "italic", "underline", "strikeThrough", "|",
			"justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "|", 
			"indent", "outdent", "|",
			"insertUnorderedList", "insertOrderedList", "quote", "cancelQuote", "lang", "superscript", "subscript", "createLink", "unlink", "|", 
			"head", "fontSize", "fontName", "foreColor", "|",
			"insertImg"
		];
	
	var toolSetting = {
			insertImg : {
				uploadUrl : "docadmin/imgs", //上传文件的url
				loadUrl : "docadmin/imgs",	//获取图片的url
				deleteUrl : "docadmin/imgs/delete",//删除图片的url
				
				/*
				 * 根据loadUrl获取到数据后交给此回调函数处理，
				 * 请返回包含文件的路径和文件名对象数组
				 * 如：[{
				 * 		name : "img.jpg",
				 * 		src : "http://localhost/imgs/img.jpg"
				 * }]
				 */
				imgDataFilter : function(data){
					var d = [];
					$.each(data.data, function(i, t){
						d.push({
							name : t.name,
							src : "static/doc/"+t.fileName,
							id : t.id
						});
					});
					return d;
				}
			}
		}
	var editor = new MintEditor("#toolbar", "#editorBody", tools, toolSetting);
	console.log(editor.html());
	console.log(editor.getCatalogue());
</script>

##markdown editor ###screenshot ###usage

<title>mint</title>
<meta charset="utf-8"/>
<style>
	body{position:absolute;top:50px;left:50px;right:50px;bottom:20px;}
	.toolbar{position:absolute;z-index:1;bottom:100%;width:100%;}
	.editor{width:100%;position:absolute;bottom:0;top:-2px;}
</style>
<div class="toolbar"></div>
<div class="editor">##特点
MintMarkdown是一款轻巧的富文本编辑器。工具栏和编辑区域可分开，方便与多种布局融合。采用<a href="https://github.com/chjj/marked">marked</a>将markdown语法转换成html。预览效果采用<a href="https://highlightjs.org/">highlight</a>代码块语法高亮。
MintMarkdown非常简单，开发者友好，易于扩展 

##为什么要开发这个插件
原因主要是因为作者在用其他编辑器编写博客时，每插入一张图片就要上传一次，而且图片不小心被删除了就找不回来了，得重新上传。所以我希望能有个能管理当前博客所有图片的编辑器，我可以在博客中随时插入和删除图片，但是我找了很久都没找着。所以就自己开发了一个</div>
<script src="../lib/jquery-1.8.3.min.js"></script>
<script src="../MintDialog/MintDialog.min.js"></script>
<script src="MintMarkdown.js"></script>
<script>
	/*tools can be null*/
	var tools = ["undo", "redo", "|", "insertImg", "preview", "leftRight", "rightLeft"];
	var buttonSetting = {
			insertImg : {
				uploadUrl : "docadmin/imgs", //上传文件的url
				loadUrl : "docadmin/imgs",	//获取图片的url
				deleteUrl : "docadmin/imgs/delete",
				/*
				 * 根据loadUrl获取到数据后交给此函数处理，请返回文件的路径和文件名对象数组
				 * 如：[{
				 * 		name : "img.jpg",
				 * 		src : "http://localhost/imgs/img.jpg"
				 * }]
				 */
				imgDataFilter : function(data){
					var d = [];
					$.each(data.data, function(i, t){
						d.push({
							name : t.name,
							src : "static/doc/"+t.fileName,
							id : t.id
						});
					});
					return d;
				}
			}
		};
	
	var previewOn = true;
	var editor = new MintMarkdown(".toolbar", ".editor", tools, buttonSetting, previewOn);
	
	editor.text("new content");
	var html = editor.html();
	var text = editor.text();
	var catalogue = editor.getCatalogue();
</script>

1inus / mint-ui Goto Github PK

mint-ui's Introduction

mint-ui

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent