[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 进入后台模型管理新建模型里面可以自定义字段了

随机推荐

PHP stdclass转array的方法
PHP stdclass转array的方法 <pre><?php$a = new stdClass();$a->id = '11 ';$a->username = 'me ...
以Integer类型传参值不变来理解Java值传参
最近在写代码的时候出了一个错误,由于对值引用理解的不深,将Integer传入方法中修改,以为传入后直接修改Integer中的值就不用写返回值接收了,虽然很快发现了问题,但还是来总结一下首先是代码: ...
.Net工具类--表达式目录树解析DataReader和DataTable
一.概述在项目中经常会使用SQL去操作数据库,在读取数据的时候返回结果一般是DataReader和DataSet,其中DataaSet里面可以包含多个DataTable. 读取到数据之后,一般情况下 ...
2019-11-29-WPF-使用-Win2d-渲染
原文:2019-11-29-WPF-使用-Win2d-渲染 title author date CreateTime categories WPF 使用 Win2d 渲染 lindexi 2019-1 ...
Blend Brush介绍
原文:Blend Brush介绍这篇文章会介绍 Blend怎么设置Brush 全局画刷 1)blend面板的介绍这5个rectangle分别对应 blend中的 5个设置 1 设置无颜色 2 设置 ...
C# 随笔写txt
public static void WriterFile(string file) { string path = AppDomain.CurrentDomain.BaseDirectory; // ...
易百教程人工智能python补充-NLTK包
自然语言处理(NLP)是指使用诸如英语之类的自然语言与智能系统进行通信的AI方法. 如果您希望智能系统(如机器人)按照您的指示执行操作,希望听取基于对话的临床专家系统的决策时,则需要处理自然语言. N ...
git操作：查看分支、删除本地分支和远程分支
1.查看本地分支:git branch 2.查看远程分支:git branch -r 或 git branch --remote 3.查看本地和远程的所有分支:git branch -a 4.删除本地 ...
iOS开发工具：Alcatraz、SVGKit、Lin以及Transformifier等
转自:http://www.cocoachina.com/applenews/devnews/2013/0606/6352.html Alcatraz:Xcode包管理器 Alcatraz是一个开源的 ...
APS助众生药业突破运营管理瓶颈
众生药业一直致力于为了世界提供世界级的产品及服务,成立以来公司先后实施了ERP系统,CRM系统,WMS系统,OA系统,精益生产,朝着行业信息化水平领先的目标迈进. 但近年随着业务量的不断扩大,仅仅拥有 ...

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

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

随机推荐

热门专题

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

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