JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<div class="j-container w100">
		<div class="mb-meta mb-meta-cls">
			<div class="mb-btn mb-add-button">Add</div>
		</div>
		<ul class="mb-list mb-list-cls">
			
		</ul>
	</div>

CSS

.w100{width:100%;overflow:hidden;height:200px;}
.mb-meta-cls{
		padding-left:5px;
		overflow:hidden;
	 }
	 .mb-input {
		float:left;
		margin:2px 0 0;
		padding:6px;
		font-size:1em;
		border-radius:4px;
		border:1px solid #C0C0C0;
	 }
	 i {font-style:normal;}
	 .mb-btn {
		float:left;
		display:inline;
		margin-left:5px;
		background-color: #006DCC;
		background-image: linear-gradient(to bottom, #0088CC, #0044CC);
		background-repeat: repeat-x;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		border-radius: 4px;
		color: #FFFFFF;
		font-size: 14px;
		cursor:pointer;
		width:70px;
		height:30px;
		line-height:30px;
		text-align:center;
		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	}
	.mb-list-cls li.mb-tag {
		background: none repeat scroll 0 0 #F0F0F0;
		border: 1px solid #C0C0C0;
		border-radius: 4px;
		float: left;
		font-family: arial,serif;
		font-size: 1em;
		list-style-type: none;
		margin-right: 4px;
		overflow: hidden;
		padding: 4px;
	}
	.mb-tag-content {
		overflow: hidden;
		white-space: nowrap;
	}
	.mb-help-text {
		font-family: sans-serif;
		margin-left: 5px;
	}
	.mb-list-cls a.mb-tag-remove {
		background-image: url("http://m2.img.srcdd.com/farm4/d/2014/0411/00/2AF6FD8196BF020A7C84B97A55A9B34E_B500_900_10_11.png");
		background-position: center 2px;
		background-repeat: no-repeat;
		cursor: pointer;
		display: inline-block;
		height: 12px;
		margin-left: 5px;
		text-decoration: none;
		width: 10px;
	}
	.hidden{display:none;}

JavaScript

/**
 * JS文本标签
 * @time 2014-4-10
 * @author longen
 */
	function AddTag(options) {

		this.config = {
			containerCls  :  '.j-container',           // 最外层容器
			buttonCls     :  '.mb-add-button',         // add按钮
			btnContainer  :  '.mb-meta',               // add按钮最近的父容器
			listItemCls   :  '.mb-list',               // 添加标签到当前的容器里
			isInput       :  true                      // add按钮前是否需要input输入框
		};

		this.cache = {
			arrs :  []
		}

		this.init(options);
	}
	AddTag.prototype = {

		constructor: AddTag,
		init: function(options){
			this.config = $.extend(this.config,options || {});
			var self = this,
				_config = self.config,
				_cache = self.cache;

			if(_config.isInput) {
				$(_config.btnContainer).each(function(){
					$(this).prepend('<input placeholder="Enter tags here" class="mb-input">');
				});
			}
			self._bindEnv();
		},
		/*
		 * 绑定事件
		 * @method _bindEnv
		 * keycode 13->enter键
		 */
		_bindEnv: function(){
			var self = this,
				_config = self.config,
				_cache = self.cache;
			// input enter键 事件
			if($('.mb-input').length > 0) {
				$('.mb-input').each(function(){
					$(this).unbind('keyup').bind('keyup',function(e){
						var keyCode = e.keyCode,
							curValue = $.trim($(this).val()),
							tparent = $(this).closest(_config.containerCls);
						if(keyCode == 13) {
							self._renderHTML(curValue,tparent);
						}
					});
				});
			}

			// 点击add按钮 触发事件
			$(_config.buttonCls).each(function(){
				$(this).unbind('click').bind('click',function(){
					var container = $(this).closest(_config.containerCls);
					if($('.mb-input',container).length > 0) {
						var inputVal = $.trim($('.mb-input',container).val());
						self._renderHTML(inputVal,container);
					}else {
						var $thisParent = $(this).closest(_config.btnContainer),
							$container = $(this).closest(_config.containerCls);
						// 否则的话  直接把按钮变成input输入框
						$($thisParent).prepend('<input placeholder="Enter tags here"...