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=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

         <li data=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

         <li data=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

         <li data=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

         <li data=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

         <li data=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

         <li data=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

         <li data=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

         <li data=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span></span></li>

      </div>

    </div>

    <!-- 前两个用于向后台提交数据     后3个用于页面判断 -->

    <!-- 从标签库里选择的标签ID   -->                      <!--仅从标签库选择，仅ID-->

    <!-- <label>从标签库里选择的标签ID  :</label> -->

    <div style="margin:15px;display:none;"><input name="imagelabels" id="imagelabels" style="width:300px"></input></div>

    <!-- 新增的自定义标签文字     -->                      <!--、、 都是文字，且有对应顺序的数组-->

    <!-- <label>新增的自定义标签文字  :</label> -->

    <div style="margin:15px;display:none"><input name="newtext" style="width:300px"></input></div>

    <!-- 所有已经选择的标签文字   -->

    <!-- <label>所有已经选择的标签文字  :</label> -->

    <div style="margin:15px;display:none"><input name="selectedtext" style="width:300px"></input></div>

    <!-- 所有标签库里的标签文字   -->

    <!-- <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" 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 = ; i < $(".label-selected").children("li").length; i++){

       var data = $(".label-selected").children("li").eq(i).attr("data");

       if(data!=""){              //只存储通过标签库添加的 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 !== -)

    {

        newText.splice(index,);

    }

    for(i=;i<newText.length;i++)

    {

       valtext += newText[i]+',';

    }

    $("input[name='newtext']").val(valtext);

}

function resetSelectedText(){               /******3**根据 最上面 生成单独的数组和文字*****/

    selectedText=[];   //首先要清空

    valtext = '';

    for(i=;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=;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 !== -)     //已经存在于已选择，不添加

                   {

                     tips("标签已存在！");

                     return;

                   }

                   else if(indexOfexisted !== -) //已经存在于标签库，添加，并要把标签库里相应的标签设置为已选择

                   {

                     var li = $(".label-item").children("li").eq(indexOfexisted);

                     var id = li.attr("data");

                     if(addLabel(id,labelName)){

                         li.addClass("selected");

                     }

                     return;

                   }

                   else

                   {

                     if(addLabel(,labelName))   //新添加的标签，添加，并2+

                     {

                        addNewText(labelName);

                     }

                   }

               }

       else{

              tips("请填写标签名！");

           }

     });

//添加标签到最上面

function addLabel(id,text){

    var num=;              //标签最多个数

    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 == ){             //删除的是新增标签  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:  ,

        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

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

[PHP] JQuery+Layer实现添加删除自定义标签代码的更多相关文章

  1. jquery 无刷新添加/删除 input行 实时计算购物车价格

    jquery 无刷新添加/删除 input行 实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...

  2. 文档处理jQuery，实现添加删除复制

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...

  4. [PHP] Layui + jquery 实现 实用的文章自定义标签

    先看实现效果: html 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" ...

  5. 在django中使用自定义标签实现分页功能

    效果演示: github地址:https://github.com/mncu/django_projects/tree/master/django_projects/pagination_test 本 ...

  6. 自己构建一个Spring自定义标签以及原理讲解

    平时不论是在Spring配置文件中引入其他中间件(比如dubbo),还是使用切面时,都会用到自定义标签.那么配置文件中的自定义标签是如何发挥作用的,或者说程序是如何通过你添加的自定义标签实现相应的功能 ...

  7. jquery 学习(四) - 标签 添加/删除/修改

    HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...

  8. jQuery添加删除元素

    $(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...

  9. Inno Setup技巧[界面]添加和自定义左下角标签

    原文 http://blog.sina.com.cn/s/blog_5e3cc2f30100cc49.html 本文介绍添加和自定义“左下角标签”的方法. 界面预览: Setup技巧[界面]添加和自定 ...

随机推荐

  1. MyBatis 通过 BATCH 批量提交

    本文由 简悦 SimpRead 转码, 原文地址 https://www.jb51.net/article/153382.htm 很多人在用 MyBatis 或者 通用 Mapper 时,经常会问有没 ...

  2. 循环节 + 矩阵快速幂 - HDU 4291 A Short problem

    A Short problem Problem's Link Mean: 给定一个n,求:g(g(g(n))) % 1000000007 其中:g(n) = 3g(n - 1) + g(n - 2), ...

  3. windows远程桌面无法拷贝文件的问题与解决方法

    在开发完往windows服务器上部署系统或者给系统打补丁的时候,都会需要远程桌面的双向拷贝文件功能. 但是有些时候却会发现没有办法拷贝文件,原因主要有两个. 01 远程桌面的剪贴板设置 一个是在远程桌 ...

  4. 查看索引在哪些ES集群节点上的命令

    用途:迁移数据到其他节点上的时候需要用这个 GET /_cat/shards GET /_cat/shards?h=n

  5. Python数据分析Pandas的编程经验总结

    Pandas的api 参考手册DataFrame部分:https://pandas.pydata.org/pandas-docs/stable/reference/frame.html 数据处理部分: ...

  6. [世预赛] 中国vs关岛，关岛实力有限 国足或许可以赢其10个球，比分预测 10:0，8:0，13:0

    [世预赛] 中国vs关岛 开赛时间:2019-10-10 20:00 继5比0大胜马尔代夫之后,国足迎来世预赛40强赛的第二场比赛,再次向世界杯发起冲击.10月10日,国足在广州迎战神秘之旅关岛. 1 ...

  7. JS 弹窗“是否删除”

    var r = confirm("是否确认删除!");if (r == true) {location.href = "/Employees/Delete/" ...

  8. 2019 农信互联java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.农信互联等公司offer,岗位是Java后端开发,因为发展原因最终选择去了农信互联,入职一年时间了,也成为了面 ...

  9. logger.info占位符的使用

    {}表示占位符,使用方法如下: package org.pine.controller; import javax.annotation.Resource; import org.pine.servi ...

  10. 关于C++中使用++it还是it++的问题

    我们经常使用for循环来遍历东西,循环变量可以前自增也可以后自增,发现对遍历结果没啥影响,但是该如何选择呢? 我们应该尽量使用前自增运算符而不是后自增运算符,即用 ++ Iter 代替 Iter++ ...