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. unity资源机制（转）

    原文地址:https://www.jianshu.com/p/ca5cb9d910c0作者:重装机霸 2.资源概述 Unity必须通过导入将所支持的资源序列化,生成AssetComponents后,才 ...

  2. RecyclerView预览数据

    我们在布局文件里定义RecyclerView时,可以使用tools属性预览数据,如下: <android.support.v7.widget.RecyclerView android:layou ...

  3. Java学习：File类中的过滤器接口

    javaIO类的File类应用:过滤器接口 FilenameFilter和FileFilter都是用来过滤文件的 例如: 过滤以.jpg或者.java结尾的文件. 通过看他们的源码: 通过使用File ...

  4. Redis-2-五种基本类型及相关命令

    目录 1.字符串类型:string 1.1 命令 1.2 实践 2.散列类型:hash 2.1命令 2.2 实践 3.列表类型:list 3.1 命令 3.2 实践 4.集合类型:set 4.1 命令 ...

  5. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  6. netcore添加api帮助文档页-Swagger

    1. 添加NuGet包 1)最基本的包:Swashbuckle.AspNetCore.Swagger 2)扩展包:Swashbuckle.AspNetCore.SwaggerGen和Swashbuck ...

  7. PIE SDK剔除栅格块算法

    1.算法功能简介 剔除栅格块即剔除栅格小斑块功能.一幅影像图层某一区域存在碎小斑块,需要对其按照一定的条件进行剔除. PIE支持剔除栅格快算法功能的执行,下面对该算法功能进行介绍. 2.算法功能实现说 ...

  8. 初探Tomcat的架构设计

    Tomcat 作为 servlet 容器实现,它是基于 Java 语言开发的轻量级应用服务器.因为 Tomcat 作为应用服务器,它有着完全开源,轻量,性能稳定,部署成本低等优点,所以它成为目前 Ja ...

  9. linux 忘记mysql用户root密码 解决方案

    1.vim /etc/my.cnf[mysqld]skip-grant-tables ##追加此行,跳过权限表, 2.重启mysqlsystemctl restart mysqld 3.mysql 登 ...

  10. 很全的vue插件汇总，赶紧收藏下(转)

    Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...