2018/09/12 Tag Input 元件試做

2018/09/12 Tag Input 元件試做

by wllai2001

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  2018/09/12 Tag Input 元件試做
  Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container wapper">


	<div class="taginput">
		<div class="function">
		
		  <input type="text" placeholder="語言名稱(如：英語)"/>
		  
		  <select>
			<option>略懂</option>
			<option selected>中等</option>
			<option>精通</option>
		  </select>
		  
		  <div class="btn btn-primary btn-addtag">新增</div>
		
		</div>
		
		<div class="tagspool">
		
		  
		
		</div>
		
		<div class="TagTemplate">
			<div class="tagcontext"></div>
			<div class="tagremove-btn">
        <span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>x</div>
		</div>

	</div>

  
  
</div>

<input type="text" class="data-tags"/>

CSS

.wapper{
  padding:15px;
}

.taginput{
  padding:5px;
  border:1px solid #ccc;
  border-radius:5px;
}

.tagspool{
  margin-top:5px;
  padding:5px;
  border:1px solid #ccc;
  border-radius:5px;
  height:70px;
}

.taginput select, .taginput input{
  height:32px;
  line-height:16px;
}

.taginput .btn{
  height:30px;
  line-height:14px;
}

.taginput input{  
  margin-top:1px;
}

.taginput select{  
  top:-1px;
  position: relative;
}

.taginput .btn{
  margin-top:-7px;
}

.tagitem{
  background: #009688;
  color: white;
  font-family: 微軟正黑體,sans-serif;
  padding: 5px;
  display: inline-block;
  border-radius: 5px;
}

.tagcontext{
  display: inline-block;
}

.tagremove-btn{
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-left:5px;
}

JavaScript

$(".taginput .btn-addtag").on("click",function(){
	var $this = $(this);
	var $TagsPool = $(".tagspool");
	var $langType = $this.siblings("input");
	var $langLv = $this.siblings("select");
	var context = $langType.val() + " - " + $langLv.val();
	$langType.val("");
	$langLv.val("中等");

	var $tag = $(".TagTemplate").clone().removeClass("TagTemplate").addClass("tagitem");
	$tag.find(".tagcontext").html(context).end().appendTo($TagsPool);
  
  $('.tagitem .tagremove-btn').on('click',function(){removetag($(this));});
	
});
function removetag($this){
  console.log("sss");
    var $tagsdata = $(".data-tags");

    var target = $this.siblings("div").html();

    var data = ($tagsdata.val()+"").split(',');
    $.each(data, function (idx) {
        if (this == target) {
            data.splice(idx, 1);
            return false;
        }
    });

    $tagsdata.val(data.join(","));
    $this.parent().remove();
}