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. Oracle 自定义函数实现列转行效果

    在 Oracle 领域,我相信一说到列转行大部分人都会立马想到 WM_CONCAT 函数,我觉得主要是因为该函数比较实用.但事实上 WM_CONCAT 并非官方公开函数,使用会存在一定的风险:函数返回 ...

  2. 高通msm8909打开debug串口

    1.修改板级文件 $ cd AOSP $ vim device/qcom/msm8909/BoardConfig.mk 如下所示: 2.修改defconfig文件 $ cd kernel/arch/a ...

  3. win10 配置IIS

    互联网信息服务(英語:Internet Information Services),在台湾被称为网际网路资讯服务,是由微软公司提供的基于运行Microsoft Windows的互联网基本服务.最初是W ...

  4. [转帖]Linux监测某一时刻对外的IP连接情况

    Linux监测某一时刻对外的IP连接情况 https://blog.csdn.net/twt326/article/details/81454171 公司机器有病毒 需要分析一下. 之前有需要,在CS ...

  5. Java匹马行天下之JavaSE核心技术——工具类

    Java匹马行天之JavaSE核心技术——工具类 一.Object类 java.lang.ObjectObject类是所有类直接或间接的父类 常用的方法: toString():以字符串形式返回对象的 ...

  6. 如何在git中上传图片

    首先在git仓库上创建一个文件夹,之后点击 Upload files 上传本地的图片 上传完之后复制存放图片的git网址 之后在新建一个.md的子文件 新建完成之后在该md文件中写入如下代码: ![任 ...

  7. Windows git和cmd代理设置

    linux的比较简单,直接修改配置文件即可,这里就不再赘述 设置Git代理 http代理: 临时代理: export http_proxy=http://127.0.0.1:7777 export h ...

  8. 简述Linux开机启动流程

    计算机开机是一个神秘的过程.我们只是按了开机键,就看到屏幕上的进度条或者一行行的输出,直到我们到达登录界面.然而,计算机开机又是个异常脆弱的过程,我们满心期望的登录界面可能并不会出现,而是一个命令行或 ...

  9. 编译OpenCV提示opencv_contrib缺少boostdesc_bgm.i等文件

    错误提示: ~/opencv_contrib/modules/xfeatures2d/src/boostdesc.:: fatal error: boostdesc_bgm.i: No such fi ...

  10. qt 操作串口

    第三方类下载 https://sourceforge.net/projects/qextserialport/files/ 目录介绍 搭建工程 拷贝qextserialbase.cpp.qextser ...