jquery标记编辑器插件Tag Editor使用

基本使用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>tag</title>
		<link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="css/public.css" media="all">
		<link rel="stylesheet" href="lib/jQuery-tagEditor-master/jquery.tag-editor.css">

	</head>
	<body>
		<div id="mytag"></div>
		<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script src="lib/jQuery-tagEditor-master/jquery.caret.min.js"></script>
		<script src="lib/jQuery-tagEditor-master/jquery.tag-editor.js"></script>
		<script>

			$('#mytag').tagEditor({
				delimiter: ',',
				placeholder: 'Enter tags ...'
			});

			console.log($('#mytag').tagEditor('getTags')[0].tags.toString());//获取值
</script> </body> </html>

　　先引入jQuery的包，然后引入相关的Tag Editor的css和js

改变颜色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>tag</title>
		<link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="css/public.css" media="all">
		<link rel="stylesheet" href="lib/jQuery-tagEditor-master/jquery.tag-editor.css">

		<style>
			.tag-editor .red-tag .tag-editor-tag {
				color: #c65353;
				background: #ffd7d7;
			}

			.tag-editor .red-tag .tag-editor-delete {
				background-color: #ffd7d7;
			}

			.tag-editor .green-tag .tag-editor-tag {
				color: #45872c;
				background: #e1f3da;
			}

			.tag-editor .green-tag .tag-editor-delete {
				background-color: #e1f3da;
			}
		</style>
	</head>
	<body>
		<div id="mytag"></div>

		<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script src="lib/jQuery-tagEditor-master/jquery.caret.min.js"></script>
		<script src="lib/jQuery-tagEditor-master/jquery.tag-editor.js"></script>
		<script>
			$('#mytag').tagEditor({
				initialTags: ['custom', 'class', 'red', 'green', 'demo'],

				delimiter: ',',
				placeholder: 'Enter tags ...',
				onChange: tag_classes
			});

			function tag_classes(field, editor, tags) {

				$('li', editor).each(function() {

					var li = $(this);

					if (li.find('.tag-editor-tag').html() == 'red') li.addClass('red-tag');

					else if (li.find('.tag-editor-tag').html() == 'green') li.addClass('green-tag')

					else li.removeClass('red-tag green-tag');

				});

			}
			tag_classes(null, $('#mytag').tagEditor('getTags')[0].editor);
			console.log($('#mytag').tagEditor('getTags')[0].tags.toString());
		</script>
	</body>
</html>

　　重写tag的css

posted @ 2022-04-11 08:54  durtime  阅读(427)  评论(0)    收藏  举报