小东Freeman + 关注

签名:我们爱我们的倒霉工作,也爱这千疮百孔的世界。

分享两个添加标签的Jquery插件

发表于 10个月前   1832次查看    0评论  20 赞

QQ截图20180804131240.png 

因为前段时间开发了标签功能,然后感觉以前那个写标签的文本框不舒服,用户体验不好,所以花钱下了几个添加标签的插件,现在分享给大家。

第一个插件下载地址:http://www.funyan.cn/fman/g/174.html

使用方法:

一、导入css和js文件


1
2
3
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<script src="js/tagsinput.js" type="text/javascript" charset="utf-8"></script>


二、添加html代码

1
2
3
4
5
6
7
<div class="box">
    <h1 style="text-align: center;margin: 20px 0;margin-top: 200px;">提取faltUI中的标签input</h1>
    <div class="tagsinput-primary form-group">
        <input name="tagsinput" id="tagsinputval" class="tagsinput" data-role="tagsinput" value="faltui,这是一个标签" placeholder="输入后回车"/>
        <button class="btn" onclick="getinput()">获取输入的值</button>
    </div>
</div>


QQ截图20180804132757.png

第二个插件下载地址:http://www.funyan.cn/fman/g/175.html

使用方法

1、导入相关的js和样式

1
2
3
<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="js/tag.js"></script>
<link rel="stylesheet" type="text/css" href="css/tag.css" />


2、创建一个存放值的input

1
<input type="text" id="tagValue">


3、创建对象和基本初始化

1
2
var tag = new Tag("tagValue");
tag.initView();



关于Tag的两个参数

1、tagValue:设置初始值或者说已经设定的值

2、isDisable:是否禁用标签的修改

关于tag的两个方法:

1、disableFun():禁用标签的修改添加等操作

2、unDisableFun():启用标签的编辑,添加修改删除等



20人已赞


本文由Fun言网 – 小东Freeman创作,转载请务必附上本文链接和出处,欢迎参与我们的付费投稿计划


你还没有登录,请先 登录注册!
文章评论0