利用js实现点击创建添加标签插件Layer



10 37 13



特效描述:利用js实现 点击创建 添加标签 插件Layer,利用js实现点击创建添加标签插件Layer

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/layui.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/index.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/layer.js"></script>

3. HTML代码

<div class="wrap">
	<div id="tagValue"  class="label-selected">
	</div>
	<div style="float:left;width:100%">
	<a class="layui-btn layui-btn-normal labela show-labelitem" style="margin-left:0px; display: block;border-radius: 6px; ">展开标签库 </a>
	<a class="layui-btn layui-btn-normal labela hide-labelitem" style="margin-left:0px; display: none;border-radius: 6px; ">收起标签库 </a>
	</div>	
	<div class="layui-col-md12" id="labelItem"  >
	  <!--标签库-->
	  <div class="label-item"  style="border-radius:6px;">
		 <li data="1"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>1</span></li>
		 <li data="2"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>2</span></li>
		 <li data="3"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>3</span></li>
		 <li data="4"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>4</span></li>
		 <li data="5"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>5</span></li>
		 <li data="6"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>6</span></li>
		 <li data="7"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>7</span></li>
		 <li data="8"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>8</span></li>
		 <li data="9"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>9</span></li>
	  </div>
	</div>
	<!-- 前两个用于向后台提交数据     后3个用于页面判断 -->
	<!-- 从标签库里选择的标签ID   1-->                      <!--仅从标签库选择,仅ID-->
	<!-- <label>从标签库里选择的标签ID  :</label> -->
	<div style="margin:15px;display:none;"><input name="imagelabels" id="imagelabels" style="width:300px"></input></div>
	<!-- 新增的自定义标签文字     2-->                      <!--2、3、4 都是文字,且有对应顺序的数组-->
	<!-- <label>新增的自定义标签文字  :</label> -->
	<div style="margin:15px;display:none"><input name="newtext" style="width:300px"></input></div>
	<!-- 所有已经选择的标签文字   3-->
	<!-- <label>所有已经选择的标签文字  :</label> -->
	<div style="margin:15px;display:none"><input name="selectedtext" style="width:300px"></input></div>
	<!-- 所有标签库里的标签文字   4-->
	<!-- <label>所有标签库里的标签文字  :</label> -->
	<div style="margin:15px;display:none"><input name="existedtext" style="width:300px"></input></div>
	<div class="add-label" style="display:inline-block">
		<label style="font-weight:normal;">添加标签  :</label>
		<input type="text" id="labelName" class="form-control" style="width:200px;display:inline-block;border-radius:6px; " placeholder="请输入标签名">
		<a id="label-self" class="layui-btn layui-btn-normal" style="border-radius:6px;"><span class="glyphicon glyphicon-plus glyphicon glyphicon-plus glyphicon-plus-button" aria-hidden="true"></span>添加标签 </a>
        <a class="layui-btn layui-btn-normal" style="width:200px;margin-top:30px;margin-left:100px;" onClick="submit()">提交</a> 
    </div>
</div>
<script type="text/javascript">	
/******************************** Part 01 初始化开始**********************************/
//定义全局变量--数组
var newText = new Array();
var selectedText = new Array();
var existedText = new Array();
$(function(){
$(".show-labelitem").on("click",function(){
    $(this).hide();
    $(".hide-labelitem").show();
    $("#labelItem").show();
});
$(".hide-labelitem").on("click",function(){
    $(this).hide();
    $(".show-labelitem").show();
    $("#labelItem").hide();  
});
$("input[name='imagelabels']").val('');      //已经选择的标签ID
$("input[name='newtext']").val('');          //新建的标签文本,要存入数据库的
$("input[name='selectedtext']").val('');  
$("input[name='existedtext']").val(''); 
//给标签库里的标签添加点击事件  
$(".label-item").on("click","li",function(){
 var id = $(this).attr("data");
 var text = $(this).children("span:nth-child(2)").html();
 if($(this).hasClass("selected")){
   return false;
 }
 if(addLabel(id,text)){                  //添加,并要把标签库里相应的标签设置为已选择
   $(this).addClass("selected");
}
});
//初始化4
resetExistedText();
})
/********************************初始化结束**********************************/
/******************************************** Part 02 设置数组和input**********************************************************/
function resetDataValue(){                    /******1*****直接从最上面生成**/
	val = '';
    for(var i = 0; i < $(".label-selected").children("li").length; i++){
       var data = $(".label-selected").children("li").eq(i).attr("data");
       if(data!="0"){              //只存储通过标签库添加的 ID,新增的自定义标签 data 为 0   *********        
          val += data+',';
       }
    }
    $("input[name='imagelabels']").val(val);
}
//2、3、4:数据同时存到 数组 和 input。数组:方便检索;input:方便观察     数组和文字,顺序一致
function addNewText(labelName){              /*****2+***文字,数组 各自增****/
	valtext = $("input[name='newtext']").val();;
	valtext += labelName+',';
	$("input[name='newtext']").val(valtext);
	newText.push(labelName);
}
function removeNewText(labelName){          /******2-***数组————>文字****/
    valtext = '';
    var index = newText.indexOf(labelName);
    if(index !== -1)
    {
        newText.splice(index,1);
    }
    for(i=0;i<newText.length;i++)
    {
       valtext += newText[i]+',';
    }
	$("input[name='newtext']").val(valtext);
}
function resetSelectedText(){               /******3**根据 最上面 生成单独的数组和文字*****/
    selectedText=[];   //首先要清空
	valtext = '';
	for(i=0;i<$(".label-selected").children("li").length;i++)
	{ 
		var text = $(".label-selected").children("li").eq(i).text();
		selectedText[i]=text;
		valtext += selectedText[i]+',';
	}
	$("input[name='selectedtext']").val(valtext);
}
function resetExistedText(){               /******4**根据 标签库列表 生成单独的数组和文字*****/
    existedText=[];   //首先要清空
	valtext = '';
	for(i=0;i<$(".label-item").children("li").length;i++)
	{ 
	var text = $(".label-item").children("li").eq(i).children("span:nth-child(2)").html();
	existedText[i]=text;
	valtext += existedText[i]+',';
	}
	$("input[name='existedtext']").val(valtext);
}
/*********************************************设置数组和input结束*******************************************************/
/******************************************* Part 03 添加****************************************/	
//添加自定义标签
$("#label-self").on("click",function(){      // 3情况:重复、标签库、新增
	   var labelName = $("#labelName").val();
	   if(labelName!=null&&labelName!=""){
	 		  var indexOfselected = selectedText.indexOf(labelName);
	 		  var indexOfexisted = existedText.indexOf(labelName);
	 		      if(indexOfselected !== -1)     //已经存在于已选择,不添加
	 			  {
	 			    tips("标签已存在!");
	 			    return;
	 			  }
	 			  else if(indexOfexisted !== -1) //已经存在于标签库,添加,并要把标签库里相应的标签设置为已选择
	 			  {
	 			    var li = $(".label-item").children("li").eq(indexOfexisted);
	 			    var id = li.attr("data");
	 			    if(addLabel(id,labelName)){
	 		            li.addClass("selected");
	 		        } 
	 		        return;
	 			  }
	 			  else
	 			  {
	 			    if(addLabel(0,labelName))   //新添加的标签,添加,并2+
	 			    {
	 			       addNewText(labelName);
	 			    }
	 			  }
	 		  }
	   else{
	          tips("请填写标签名!");
	       }
	 });
//添加标签到最上面                                    
function addLabel(id,text){
    var num=8;              //标签最多个数
    if($(".label-selected").children("li").length >= num){
      tips("最多可以选择"+num+"个哦");
      return false;
    }
    var labelHTML = getappendHTML(id,text);
    $(".label-selected").append(labelHTML);
    //新增,刷新 1、3
    resetDataValue();
    resetSelectedText();
    return true;
}
/************************************************ Part 04 删除************************************/
//删除已选标签
$(".label-selected").on("click","li .delete",function(){
    var id = $(this).parent().attr("data");
    var text = $(this).parent().text();
	//删除最上面
	$(this).parent().remove();
    //刷新 1、3
	resetDataValue();
	resetSelectedText();
	if(id == 0){             //删除的是新增标签  2-
	   removeNewText(text);
	}
	else{                    //删除的是标签库里的标签  移除class
	   $(".label-item").find("li[data='"+id+"']").removeClass("selected");
	}
});
/***************************************** Part 05 提交*******************************************/
function submit()
{
	var labelID = $("input[name='imagelabels']").val();
	var newtext = $("input[name='newtext']").val();     //保存到数据库
	alert(labelID);
	alert(newtext);
}
/************************************************************************************/
function getappendHTML(id,text){
	return "<li data='"+id+"''>"+text+"<div class='delete'></div></li>";
} 
function tips(content) {  
	layer.open({  			
		type: 1 ,
		offset: 'auto', //具体配置参考:offset参数项
		title : '提示',
		content: '<div style="padding: 20px 80px;">'+content+'</div>',
		btn: '确定',
		btnAlign: 'c', //按钮居中
		yes:layer.closeAll()
   }); 
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 layer 添加标签

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到