利用js實現點擊創建添加標簽插件Layer



20 79 27



特效描述:利用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

加群請備注:從官網了解到

老夫子电子 山西快乐10分钟开奖结果 上海时时乐幵奖结果走是 中销平台是怎么赚钱的 福州全民麻将下载 306彩票最新版下载 老虎机压王打法 北京时时彩一天多少期 吉林11选5投注 重庆时时彩开奖直播 河北快3开奖 博到爱赢娱乐城 六合图库2018官网 安顺捉鸡麻将在线玩 麻将万条筒怎么理解 象棋下载安装 地下城勇士官方下载