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. 使用Django创建RESTful API

    Agenda 1.What is an api Api refers to application programming interface It is a set of subroutine de ...

  2. C# SqlServer Ado.net参数化查询插入null数据

    DateTime? dt=null; if (dt.HasValue) { cmd.Parameters.AddWithValue("@CreateDateTime", dt); ...

  3. Web应急：网站首页被篡改

    网站首页被非法篡改,是的,就是你一打开网站就知道自己的网站出现了安全问题,网站程序存在严重的安全漏洞,攻击者通过上传脚本木马,从而对网站内容进行篡改.而这种篡改事件在某些场景下,会被无限放大. 现象描 ...

  4. TensorFlow的数据读取机制

    一.tensorflow读取机制图解 首先需要思考的一个问题是,什么是数据读取?以图像数据为例,读取的过程可以用下图来表示 假设我们的硬盘中有一个图片数据集0001.jpg,0002.jpg,0003 ...

  5. 【LeetCode】145. Binary Tree Postorder Traversal

    Difficulty: Hard  More:[目录]LeetCode Java实现 Description https://leetcode.com/problems/binary-tree-pos ...

  6. 我是如何一步步编码完成万仓网ERP系统的（十一）产品库设计 7.发布商品

    https://www.cnblogs.com/smh188/p/11533668.html(我是如何一步步编码完成万仓网ERP系统的(一)系统架构) https://www.cnblogs.com/ ...

  7. Golang程序调试工具介绍(gdb vs dlv)

    原文:http://lday.me/2017/02/27/0005_gdb-vs-dlv/ 通过log库输出日志,我们可以对程序进行异常分析和问题追踪.但有时候,我也希望能有更直接的程序跟踪及定位工具 ...

  8. 4种引用与垃圾回收 ：StrongReference, SoftReference, WeakReference , PhantomReference

  9. 1.Shell特殊位置变量

    $0    文件名及路径 $1,$2    参数1,参数2 , 也可以用${1}  和 ${2} 来表示 $#    传递给脚本或函数的参数个数 $$    当前Shell进程ID $?    判断上 ...

  10. 浅谈Nginx以及特性

    Nginx以及特性 1.Nginx是什么? Nginx是一个高性能的HTTP和反向代理轻量级web服务器,特点:占用内存少,处理并发能力强.Nginx专为性能优化而开发,性能是其最重要的考量 ,能经受 ...