[PHP] JQuery+Layer实现添加删除自定义标签代码

JQuery+Layer实现添加删除自定义标签代码

实现效果如下：

实现代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实用的文章自定义标签</title>
<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">
<style type="text/css"></style></head>
<body><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;" οnclick="submit()">提交</a> </div></div><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><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></body>
</html>

参考：

http://www.17sucai.com/pins/30788.html

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/11117864.html

转载请著名出处！谢谢~~

转载于:https://www.cnblogs.com/wukong1688/p/11117864.html

[PHP] JQuery+Layer实现添加删除自定义标签代码相关推荐

jQuery点击添加删除class
原文链接:http://dt2008.cn/327/ 替换class这个功能对于点击事件是比较常用的. 举个例子,想小编那样的菜单按钮就是用到这个功能的,点击按钮后添加个class,然后再加css动态 ...
我的YUV播放器MFC小笔记：添加删除自定义分辨率
在最初设计YUV播放参数时,就考虑参数的保存,即使用注册表方式,前文已述.但直到后来才解决几个技术问题,方得以写此文章. 分辨率使用下拉框形式,在程序启动时初始化,不在资源中写死.注册表使用一个str ...
使用jquery 动态操作添加/删除tr td
2019独角兽企业重金招聘Python工程师标准>>> $("#add_5").click(function(){ var str_1="<tr& ...
添加删除按钮html代码怎么写,JavaScript添加一个文本框并带有删除按钮
JavaScript添加一个文本框并带有删除按钮属于前端实例代码,有关更多实例代码大家可以查看. 实际操作中可能需要动态的创建和删除一个元素,比较常见是添加一个文本框和一个删除按钮,点击删除按钮可以删 ...
织梦底部添加版权信息标签代码
今天魅力网络在搭建一个网站,用的织梦的数据还原模版的方法,发现搭建完后,在系统设置中改的版权信息在底部不显示,于是看了看foot模版配置,发现没有版权信息这个标签,这时候我们需要手动加上,标签是啥系 ...
php之去掉html标签,PHP删除HTMl标签
/** * 取出html标签 * * @access public * @param string str * @return string * */ function deletehtml($str ...
vue+element 使用el-tag实现单选多选，动态添加删除标签
以下是完整代码,仅供参考: <template><div class="tagDialog crmDialog"><el-dialogtitle=&q ...
从零开始学前端：中括号代替点操作，获取对象，自定义标签属性 --- 今天你学习了吗？（JS：Day3）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:初识函数,合法属性与自定义属性 - 今天你学习了吗?(JS:Day2) 文章目录从零开始学前端:程序猿小白 ...
JavaScript 添加一个元素标签
JavaScript 添加一个元素标签文章目录 JavaScript 添加一个元素标签代码效果代码 <!DOCTYPE html> <html><head> ...

[PHP] JQuery+Layer实现添加删除自定义标签代码

[PHP] JQuery+Layer实现添加删除自定义标签代码相关推荐

最新文章

热门文章