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

先看实现效果：

html 代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>mark</title>

    <link rel="stylesheet" type="text/css" href="../layui/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">

</head>

<body>

<div id="markValue" class="mark-selected label-selected"></div>

<input type="hidden" name="mark_label" id="mark_label"/>

<div class="layui-col-md12" id="labelItem">

    <div class="label-item" style="border-radius:6px;">

        <li value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>策划设计</span></li>

        <li value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>视频拍摄</span></li>

        <li value=""><span class="glyphicon glyphicon-plus" aria-hidden="true"></span><span>设计执行</span></li>

    </div>

</div>

<div id="companyValue" class="company-selected label-selected" style="margin-top: 130px;"></div>

<input type="hidden" name="company_label" id="company_label"/>

<input type="hidden" name="existedtext"/>

<div class="add-label" style="display:inline-block">

    <label style="font-weight:normal;">添加 :</label>

    <input type="text" id="companyName" class="form-control"

           style="width:200px;display:inline-block;border-radius:6px; "

           placeholder="请输入合作单位">

    <a id="add-company" class="layui-btn layui-btn-normal" style="border-radius:6px;">

        <span class="glyphicon glyphicon-plus glyphicon glyphicon-plus glyphicon-plus-button" aria-hidden="true"/>添加

    </a>

</div>

<div class="add-label" style="display:inline-block">

    <a class="layui-btn layui-btn-normal" style="width:200px;margin-top:30px;margin-left:100px;"

       onclick="submit()">提交</a>

</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="../layui/lay/modules/layer.js"></script>

<script type="text/javascript">

    var selectedText = [];

    $(function () {

        var initMarkVal = "";

        initMarkValue(initMarkVal);

        var initCompanyVal = "初始值1,初始值2";

        initCompanyValue(initCompanyVal);

        $(".label-item").on("click", "li", function () {

            var id = $(this).attr("value");

            var text = $(this).children("span:nth-child(2)").html();

            if ($(this).hasClass("selected")) {

                return false;

            }

            if (addMark(id, text)) {

                $(this).addClass("selected");

            }

        });

        $(".mark-selected").on("click", "li .delete", function () {

            var id = $(this).parent().attr("value");

            $(this).parent().remove();

            resetMarkValue();

            $(".label-item").find("li[value='" + id + "']").removeClass("selected");

        });

        $("#add-company").on("click", function () {

            var companyName = $("#companyName").val();

            if (companyName != null && companyName != "") {

                var index = selectedText.indexOf(companyName);

                if (index !== -)     //已经存在于已选择，不添加

                {

                    alert("合作单位已存在！");

                    return;

                } else {

                    addCompany(, companyName);

                    $("#companyName").val('');

                }

            } else {

                alert("请填写合作单位！");

            }

        });

        $(".company-selected").on("click", "li .delete", function () {

            $(this).parent().remove();

            resetCompanyText();

        });

    });

    function initMarkValue(val) {

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

        if (val) {

            var valArr = val.split(',');

            var len = $(".label-item").children("li").length;

            for (var i = ; i < len; i++) {

                $this = $(".label-item").children("li").eq(i);

                var id = $this.attr("value");

                var text = $this.children("span:nth-child(2)").html();

                if ($.inArray(id, valArr) >= ) {

                    var labelHTML = getAppendHTML(id, text);

                    $(".mark-selected").append(labelHTML);

                    $this.addClass("selected");

                }

            }

        }

    }

    function initCompanyValue(val) {

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

        if (val) {

            var valArr = val.split(',');

            var len = valArr.length;

            for (var i = ; i < len; i++) {

                var labelHTML = getAppendHTML(i, valArr[i]);

                $(".company-selected").append(labelHTML);

            }

        }

    }

    function resetMarkValue() {

        var val = '';

        var len = $(".mark-selected").children("li").length;

        for (var i = ; i < len; i++) {

            var value = $(".mark-selected").children("li").eq(i).attr("value");

            val += value + ',';

        }

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

    }

    function addMark(id, text) {

        var labelHTML = getAppendHTML(id, text);

        $(".mark-selected").append(labelHTML);

        resetMarkValue();

        return true;

    }

    function addCompany(id, text) {

        var labelHTML = getAppendHTML(id, text);

        $(".company-selected").append(labelHTML);

        resetCompanyText();

        return true;

    }

    function resetCompanyText() {

        selectedText = [];

        var valtext = '';

        var text;

        var len = $(".company-selected").children("li").length;

        for (var i = ; i < len; i++) {

            text = $(".company-selected").children("li").eq(i).text();

            selectedText[i] = text;

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

        }

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

    }

    function submit() {

        var markVal = $("input[name='mark_label']").val();

        var companyVal = $("input[name='company_label']").val();

        alert(markVal);

        alert(companyVal);

    }

    function getAppendHTML(id, text) {

        return "<li value='" + id + "''>" + $.trim(text) + "<div class='delete'></div></li>";

    }

</script>

</body>

</html>

打包下载地址：

https://files.cnblogs.com/files/wukong1688/check.zip

实现代码也可参考之前文章：

https://www.cnblogs.com/wukong1688/p/11117864.html

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/11130073.html

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

[PHP] Layui + jquery 实现实用的文章自定义标签的更多相关文章

[PHP] JQuery+Layer实现添加删除自定义标签代码
JQuery+Layer实现添加删除自定义标签代码实现效果如下: 实现代码如下: <!doctype html> <html> <head> <meta c ...
浅析MyBatis（三）：聊一聊MyBatis的实用插件与自定义插件
在前面的文章中,笔者详细介绍了 MyBatis 框架的底层框架与运行流程,并且在理解运行流程的基础上手写了一个自己的 MyBatis 框架.看完前两篇文章后,相信读者对 MyBatis 的偏底层原理和 ...
JQuery常用实用的事件[较容易忽略的方法]
JQuery常用实用的事件注:由于JQuery片段较多就没有用插入代码文本插入,请见谅!JQuery 事件处理ready(fn)代码: $(document).ready(function(){ ...
DTCMS自定义标签，获取所有栏目文章列表TOP，以及文章通用URL
网站最近更新等地方,发现DTCMS没有获取所有栏目文章列表的标签,只能自己写思路:获取所有栏目文章列表不难,难点在于linkurl的写法 1.制作获取所有文章列表标签 DTcms.Web.UI\La ...
基于Jquery 简单实用的弹出提示框
基于Jquery 简单实用的弹出提示框引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...
雷林鹏分享：jQuery EasyUI 数据网格 - 创建自定义视图
jQuery EasyUI 数据网格 - 创建自定义视图在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...
1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.
1)jquery validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...
【jQuery】实用 js
[jQuery] 实用 js 1. int 处理 parseInt(") // int 转换 isNaN(page) // 判断是否是int类型 2. string 处理 // C# str ...
phpcms发布文章自定义字段
phpcms发布文章自定义字段1 进入后台模型管理新建模型里面可以自定义字段了

随机推荐

基于opencv+python的二维码识别
花了2天时间终于把二维码识别做出来了,不过效果一般,后面会应用在ROS辅助定位上,废话少说先上图: 具体过程参考了这位大神的博客:http://blog.csdn.net/qq_25491201/ar ...
社招C++后台面试-拿到offer
社招C++后台面试-拿到offer 之前在一家小公司上班,主要是做C语言的嵌入式软件开发,涉及过一点点C++.工作大概三年,然后去试试大公司,这个面试题是我拿到offer后4个月才拖拖拉拉的开始写,题 ...
Using MS Soap toolkit to generate web services .md
Different SOAP encoding styles - RPC, RPC-literal, and document-literal SOAP Remote Procedure Call(R ...
Jenkins打包编码GBK的不可映射字符
1.错误信息如下: 2.在Maven的POM中加入如下代码,然后重新打包即可. <properties>  <project.bui ...
CycleBarrier与CountDownLatch原理
CountDownLatch 众所周知,它能解决一个任务必须在其他任务完成的情况下才能执行的问题,代码层面来说就是只有计数countDown到0的时候,await处的代码才能继续向下运行,例如: im ...
[转帖]tcpdump详细教程
tcpdump详细教程 https://www.jianshu.com/p/d9162722f189 tcpdump tcpdump - dump traffic on a network tcpdu ...
Prometheus 监控Docker服务器及Granfanna可视化
Prometheus 监控Docker服务器及Granfanna可视化 cAdvisor(Container Advisor)用于收集正在运行的容器资源使用和性能信息. 使用Prometheus监控c ...
《STL源码剖析》——Array
array array本身内容较少,日常使用也不是很多,里面也没有很高深的技巧 1 array的基本架构了解array的架构需要一个额外的语法知识: int a[100]; int [100]b; ...
Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx)
Linux 集群概念 , wsgi , Nginx负载均衡实验 , 部署CRM(Django+uwsgi+nginx), 部署学城项目(vue+uwsgi+nginx) 一丶集群和Nginx反向代理 ...
Ivanti的垃圾软件landesk
landesk是Ivanti公司推出的终端管理工具,这个工具垃圾就垃圾在无法卸载,进程杀不死.文件删不掉,奉劝大家千万不要安装这个软件.前些天公司的IT部门一直在催促员工安装这个软件,我一时糊涂安装了 ...

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

[PHP] Layui + jquery 实现 实用的文章自定义标签的更多相关文章

随机推荐

热门专题

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

[PHP] Layui + jquery 实现实用的文章自定义标签的更多相关文章