[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=""><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实现添加删除自定义标签代码的更多相关文章

jquery 无刷新添加/删除 input行实时计算购物车价格
jquery 无刷新添加/删除 input行实时计算购物车价格 jquery 未来事件插件jq_Live_Extension.js 演示 <script> $(document).rea ...
文档处理jQuery，实现添加删除复制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140 ...
[PHP] Layui + jquery 实现实用的文章自定义标签
先看实现效果: html 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" ...
在django中使用自定义标签实现分页功能
效果演示: github地址:https://github.com/mncu/django_projects/tree/master/django_projects/pagination_test 本 ...
自己构建一个Spring自定义标签以及原理讲解
平时不论是在Spring配置文件中引入其他中间件(比如dubbo),还是使用切面时,都会用到自定义标签.那么配置文件中的自定义标签是如何发挥作用的,或者说程序是如何通过你添加的自定义标签实现相应的功能 ...
jquery 学习(四) - 标签添加/删除/修改
HTML代码 <div class="a1"> <div> <span id="a2">aaa</span> & ...
jQuery添加删除元素
$(document).ready(function () { $('#radioExtranet').on('click', function () { showProjectInformation ...
Inno Setup技巧[界面]添加和自定义左下角标签
原文 http://blog.sina.com.cn/s/blog_5e3cc2f30100cc49.html 本文介绍添加和自定义“左下角标签”的方法. 界面预览: Setup技巧[界面]添加和自定 ...

随机推荐

vertica 中位数函数 MEDIAN 的使用
中位数函数:MEDIAN 使用表达式:MEDIAN ( expression ) OVER ( [ window‑partition‑clause ] ) 准备测试数据: ), name ), sal ...
RabbitMQ实例C#
驱动组件.NET版本官网推荐驱动:RabbitMQ.Client https://www.rabbitmq.com/devtools.html#dotnet-dev Connection和Chann ...
Centos 7.6搭建Skywalking6.5+es6.2.4
软件包版本1.elasticsearch-6.2.4.tar.gz,下载地址:https://artifacts.elastic.co/downloads/elasticsearch/elastics ...
openresty 报错：lua entry thread aborted: runtime error
[1]问题现象 (1)本地openresty系统 (2)报错信息 2019/09/10 08:13:55 [error] 2385#2385: *4 lua entry thread aborted: ...
『快乐链覆盖树形dp』
快乐链覆盖 Description 给定一棵 n 个点的树,你需要找至多 k 条互不相交的路径,使得它们的长度之和最大定义两条路径是相交的:当且仅当存在至少一个点,使得这个点在两条路径中都出现定义 ...
FrameworkCubeMX.gpdsc missing的问题
(1)上图红框内容均不要勾选 (2)工程中自己添加相应的启动文件,形如: startup_stm32f030x6.s system_stm32f0xx.c
EF core的原生SQL查询以及用EF core进行分页查询遇到的问题
在用.net core进行数据库访问,需要处理一些比较复杂的查询,就不得不用原生的SQL查询了,然而EF Core 和EF6 的原生sql查询存在很大的差异. 在EF6中我们用SqlQuery和Exe ...
Android开发之EditText多行文本输入
<EditText android:id="@+id/add_content" android:layout_width="fill_parent" an ...
Myapp
一.github地址:https://github.com/jianghailing/rjgcsecondwork 二.PSP表格: PSP2.1 Personal Software Process ...
设计模式：单例(Sigleton)模式
题目:设计一个类,我们只能生成该类的一个实例. 只能生成一个实例的类是实现了Singleton(单例)模式的类型. 相关知识: 这种模式涉及到一个单一的类,该类负责创建自己的对象,同时确保只有单个对象 ...

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

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

随机推荐

热门专题