Tag 标签
实用方式
Tags标签常用在兴趣、分类、条件等多选情况中。使用ax-tag表示内容标签，如果需要以容器形式放置标签，请使用ax-tags包裹。
单个Tag标签
<span class="ax-tag">单个Tag标签</span>
<div class="ax-break"></div>
<div class="ax-tags">
<span class="ax-tag">多个Tag标签</span>
<span class="ax-tag">以ax-tags包裹</span>
<span class="ax-tag">风格统一</span>
<span class="ax-tag">参数统一</span>
</div>
主题颜色
使用ax-tag表示内容标签。本框架一共定义了7种颜色标签，分别是primary、success、danger、warning、info、question、text、brief和ignore，使用theme属性即可定义该Tag标签主题颜色，例如theme="primary"。标签可以用span也可以使用其他标签，加上默认白色一共可用8种主题颜色。详细说明和举例如下：
<span class="ax-tag">默认</span>
<span class="ax-tag" theme="primary">中国</span>
<span class="ax-tag" theme="success">操作成功！</span>
<span class="ax-tag" theme="error">很危险！</span>
<a href="###" class="ax-tag" theme="warning">提示注意！</a>
<a href="###" class="ax-tag" theme="question">这是一个疑问！</a>
<a href="###" class="ax-tag" theme="info">名词解释</a>
<a href="###" class="ax-tag" theme="text">正文标签</a>
<a href="###" class="ax-tag" theme="brief">灰色标签</a>
<a href="###" class="ax-tag" theme="ignore">浅灰色文字提示</a>
如果使用ax-tags标签包裹，那么可通过theme属性统一设定风格，例如theme="prmary"，同单个Tag一样一共可以使用8种主题风格。
<div class="ax-tags" theme="primary">
<span class="ax-tag">中国</span>
<span class="ax-tag">新加坡</span>
<span class="ax-tag">澳大利亚</span>
<span class="ax-tag">俄罗斯</span>
</div>
无边标签
对ax-tag追加borderless属性可以实现无边Tag；对ax-tags追加borderless属性可统一设定无边Tag。
唐朝
宋朝
<span class="ax-tag" theme="primary" borderless>唐朝</span>
<a href="###" class="ax-tag" theme="light" borderless>宋朝</a>
<div class="ax-break"></div>
<div class="ax-tags" borderless theme="warning">
<span class="ax-tag">元朝</span>
<span class="ax-tag">明朝</span>
<span class="ax-tag">清朝</span>
</div>
圆角标签
对ax-tag追加corner="round"属性可以实现圆角Tag；对ax-tags追加corner="round"属性可统一设定圆角Tag。
唐朝
宋朝
<span class="ax-tag" theme="primary" corner="round">唐朝</span>
<a href="###" class="ax-tag" theme="light" corner="round">宋朝</a>
<div class="ax-break"></div>
<div class="ax-tags" corner="round">
<span class="ax-tag">元朝</span>
<span class="ax-tag">明朝</span>
<span class="ax-tag">清朝</span>
</div>
方角标签
对ax-tag追加corner="square"属性可以实现直角Tag；对ax-tags追加corner="square"属性可统一设定圆角Tag。
唐朝
宋朝
<span class="ax-tag" theme="primary" corner="square">唐朝</span>
<a href="###" class="ax-tag" theme="light" corner="square">宋朝</a>
<div class="ax-break"></div>
<div class="ax-tags" corner="square">
<span class="ax-tag">元朝</span>
<span class="ax-tag">明朝</span>
<span class="ax-tag">清朝</span>
</div>
关闭按钮
如果需要使用关闭按钮，在ax-tag标签尾部加入<i remove></i>即可
<span class="ax-tag">中国<i remove></i></span>
<span class="ax-tag" theme="primary">新加坡<i remove></i></span>
<a href="###" class="ax-tag" theme="error">澳大利亚<i remove></i></a>
在ax-tag尾部加入<s remove></s>表示另外一种关闭方式。
<span class="ax-tag">中国<s remove></s></span>
<span class="ax-gutter"></span>
<span class="ax-tag" theme="primary">新加坡<s remove></s></span>
<span class="ax-gutter"></span>
<a href="###" class="ax-tag" theme="light">澳大利亚<s remove></s></a>
紧凑尺寸
为了能与input或textarea配合使用，设计了紧凑尺寸Tag，给ax-tag标签追加compact属性即可；如果是ax-tags浮层包裹则对浮层追加compact属性。
由于紧凑型标签大大缩小了间隙，所以已经不适合使用s标签做关闭按钮，只可使用i做标签按钮。
<span class="ax-tag" compact>中国<i remove></i></span>
<span class="ax-tag ax-primary" compact>新加坡<i remove></i></span>
<a href="###" class="ax-tag" theme="error" compact>澳大利亚<i remove></i></a>
<div class="ax-break"></div>
<div class="ax-tags" compact>
<span class="ax-tag">印度<i remove></i></span>
<span class="ax-tag">土耳其<i remove></i></span>
<span class="ax-tag">南非<i remove></i></span>
</div>
纯文本风格
为了能与用户自定义的布局合理搭配，可使用无边框和无边距的纯文本风格。使用对插件使用text:true参数或对ax-tags节点追加text属性即可。
<div class="ax-tags" text>
<span class="ax-tag">澳大利亚<i remove></i></span>
<span class="ax-tag">巴西<i remove></i></span>
<span class="ax-tag">新加坡<i remove></i></span>
</div>
<div class="ax-break"></div>
<div class="ax-tags" text>
<span class="ax-tag">土耳其<s remove></s></span>
<span class="ax-tag">俄罗斯<s remove></s></span>
<span class="ax-tag">英国<s remove></s></span>
</div>
<div class="ax-break"></div>
<div class="ax-tags" compact text>
<span class="ax-tag">印度<i remove></i></span>
<span class="ax-tag">沙特阿拉伯<i remove></i></span>
<span class="ax-tag">南非<i remove></i></span>
</div>
插件使用方法
如果需要对批量创建Tags，并对Tags进行添加和删除操作，此时则需要以插件的形式创建实例。插件运行方式有两种：
- ax*属性：对ax-tags标签使用
axTags属性并填写content参数即可按默认参数运行插件。 - js实例：通过
new axTags('#ID',{content:''})方式创建实例运行。
-
<div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚'"></div> <div class="ax-break"></div> <div id="jsTags"></div> -
new axTags('#jsTags',{ content:'菲律宾,丹麦,波兰' });
数据源
参数content接收数据源，支持四种数据格式，这些数据格式通过内置函数转换后会成为标准的数组数据格式，通过内部变量this.content可查看。
- 一个字符串，也就是Tag的内容，如果用英文逗号隔开则会创建多个Tag（参数separator定义了分隔符）
- 一个对象，格式是{value:'',theme:''}，其中value也就是Tag的内容是必填的，theme选填
- 字符串数组，格式是['','','']，每一项字符串都是Tag的内容
- 对象数组，格式是[{value:'',theme:''},{}]，每一项都包含value和theme属性，当然theme是选填
<div class="ax-tags" axTags="content:'中国'"></div>
<div class="ax-break"></div>
<div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚'"></div>
<div class="ax-break"></div>
<div class="ax-tags" axTags="content:{value:'南非',theme:'warning'}"></div>
<div class="ax-break"></div>
<div class="ax-tags" axTags="content:['英国','瑞士','俄罗斯']"></div>
<div class="ax-break"></div>
<div class="ax-tags" axTags="content:[{value:'印度',theme:''},{value:'巴基斯坦',theme:'info'}]"></div>
主题颜色
使用主题颜色的方式有两种：
- 1、使用
theme参数，支持以上8中主题颜色 - 2、对
content参数填入对象数组，单独对每个Tag进行主题颜色定义
<div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',theme:'primary"></div>
<div class="ax-break"></div>
<div class="ax-tags" axTags="content:[{value:'德国',theme:'danger'},{value:'意大利',theme:'warning'}]"></div>
风格定制
除了使用theme改变颜色之外，还可以通过以下参数改变风格：
borderless：设定标签是否为无边框状态，默认false，可设为true去掉边框compact：设定标签是否为紧凑状态，默认false，可设为true让标签之间紧凑排列以便于与input和textarea配合使用corner：设定标签边缘形态，默认为空即3px的小圆角；设为round则为大圆角；设为square则为方角
<div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',theme:'primary',borderless:true"></div>
<div class="ax-break"></div>
<div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',compact:true"></div>
<div class="ax-break"></div>
<div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',corner:'round'"></div>
<div class="ax-break"></div>
<div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',corner:'square'"></div>
变量和操作方法
本插件有系列内部成员变量和内部操作方法，用户根据这些变量和方法可以自由操作实例，据此可方便与其他组件进行交互。请按下F12按键打开浏览器控制台来观摩以下实例。
内部成员变量如下：
this.destroyed：是否销毁状态，true或falsethis.targetDom：Tag父节点，也即ax-tags节点this.content：Tags对象数组，包含了id、value、theme、dom等属性this.maxIndex：最大索引值，新增Tag的id属性值将以此为基数this.contentProxy：this.content的代理，返回{proxy:'',instance:''}- proxy：this.content的代理对象，需要联动监听则操作该属性，否则直接操作this.content即可
- instance：axObserve的代理实例，可使用on方法进行监听，详细用法请点击这里。
内部操作方法如下：
this.update(setting, callback)：更新所有参数，支持两个参数：- setting：必填项，对象类型，用户自定义的参数
- callback：选填项，回调函数，无参数：
this.add(obj, callback)：增加Tags，支持两个参数：- obj：必填项，支持4种格式，格式与插件参数content一致
- callback：选填项，回调函数，支持一个参数即新增项：
this.remove(obj, callback)：删除Tags，支持两个参数：- obj：必填项，支持多种格式，详细说明如下：
- 一个字符串：即查找Tag的内容
- 一个数字：即查找Tag的id索引
- 一个DOM节点：即查找Tag的DOM节点
- 一个对象，对象中有id或value或dom属性：即通过这些属性依次查找，直到找到第一个为止
- 数组，每一项可以是以上四种类型，以进行批量删除
- callback：选填项，回调函数，支持一个参数即删除项：
this.clear(callback)：清除所有Tags，支持一个参数即callback回调，回调函数无参数。this.destroy(callback)：销毁实例，支持回调函数，回调无参数：
全局操作方法如下：
axInstance：每个new实例都会自动加入到全局实例合集当中，通过该方法可获取实例，继而使用实例的内部变量和内部操作方法。关于axInstance使用方法请点击这里。
在回调函数中this均指向实例本身，所以在回调函数中通常可使用如下变量：
- this：实例本身
- this.targetDom：实例的Dom
- this.options：实例的参数
删除Tag
删除标签的方法有三种：
- 1、使用
removable:true，即显示标签删除按钮，点击删除按钮可删除该标签。 - 2、使用
this.remove()方法删除指定的Tag，可批量删除；参数说明如上。 - 3、使用
this.clear()方法删除所有Tags；参数说明如上。
-
<div class="ax-tags" axTags="content:'中国,新加坡,澳大利亚',removable:true"></div> <div class="ax-break"></div> <div class="ax-tags" id="removeIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="removeOneBtn">删除“丹麦”</a> <a href="###" class="ax-btn ax-primary" id="removeMoreBtn">删除“意大利,巴西,俄罗斯”</a> <a href="###" class="ax-btn ax-primary" id="clearBtn">删除全部</a> <a href="###" class="ax-btn ax-primary" id="removeViewBtn">查看剩余Tags</a> -
let removeOneBtn = document.querySelector('#removeOneBtn'), removeMoreBtn = document.querySelector('#removeMoreBtn'), clearBtn = document.querySelector('#clearBtn'), removeViewBtn = document.querySelector('#removeViewBtn'), removeIns = new axTags('#removeIns', { content: '菲律宾,丹麦,波兰,荷兰,意大利,巴西,俄罗斯,印度', removable: true, }); removeOneBtn.onclick = () => { removeIns.remove('丹麦', () => { console.log('删除了“丹麦”') }); } removeMoreBtn.onclick = () => { removeIns.remove('意大利,巴西,俄罗斯', () => { console.log('删除了“意大利,巴西,俄罗斯”') }); } clearBtn.onclick = () => { removeIns.clear(() => { console.log('全部删除了') }); } removeViewBtn.onclick = () => { console.log(removeIns.content); }
新增Tag
通过this.add()方法新增Tags节点，可添加单个和多个Tags；参数说明如上。
-
<div class="ax-tags" id="addIns"></div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="addOneBtn">增加“丹麦”</a> <a href="###" class="ax-btn ax-primary" id="addMoreBtn">增加“意大利,巴西,俄罗斯”</a> <a href="###" class="ax-btn ax-primary" id="addViewBtn">查看所有Tags</a> -
let addOneBtn = document.querySelector('#addOneBtn'), addMoreBtn = document.querySelector('#addMoreBtn'), clearBtn = document.querySelector('#clearBtn'), addViewBtn = document.querySelector('#addViewBtn'), addIns = new axTags('#addIns', { content: '菲律宾,丹麦,波兰,荷兰,意大利,巴西,俄罗斯,印度', removable: true, }); addOneBtn.onclick = () => { addIns.add('丹麦', () => { console.log('删除了“丹麦”') }); } addMoreBtn.onclick = () => { addIns.add('意大利,巴西,俄罗斯', () => { console.log('删除了“意大利,巴西,俄罗斯”') }); } clearBtn.onclick = () => { addIns.clear(() => { console.log('全部删除了') }); } addViewBtn.onclick = () => { console.log(addIns.content); }
行内编辑
插件默认只能通过add和remove方法进行添加和删除操作，将设置参数eidt.enable:true开启行内编辑，使用表现如下：
- 1、输入内容后，按下回车键可新增Tag；如果输入的字符带有分隔符比如英文逗号则会创建多个Tag，如果不带分隔符则会创建一个Tag
- 2、当表单域内容为空，按下删除键则会选中最后一个Tag，此时最后一个Tag会高亮显示
- 3、当表单域内容为空，当Tag已经处于选中状态，此时如果再按一下删除键则会删除最后一个Tag，按下其他任意按键会取消选中状态
-
<div class="ax-tags" id="editIns"></div> -
new axTags('#editIns', { content: '菲律宾,波兰,荷兰,印度', removable: true, edit:{enable:true} });
使用表单域
如果不需要行内编辑方式，而需要通过外部的input进行编辑，那么需要设置两个参数：
edit，设为true开启可编辑功能input，input或textarea表单域节点，可填#id、.className或节点。表现效果如行内编辑一致
-
<div class="ax-tags" id="inputIns"></div> <div class="ax-break"></div> <input type="text" placeholder="输入字符串..." id="inputBtn" /> -
new axTags('#inputIns', { content: '菲律宾,波兰,荷兰,印度', removable: true, edit:{enable:true,input: '#inputBtn'} });
禁止添加相同的
插件默认可以添加任何文本的tag，但是有些情况需要禁止添加相同label/value的tag，可设置参数unique为true禁止添加相同的tag。
-
<div class="ax-tags" id="uniqueIns"></div> -
new axTags('#uniqueIns', { content: '菲律宾,波兰,荷兰,印度', edit: { enable: true }, removable: true, unique:true, });
销毁实例
通过使用this.destroy(callback)方法销毁实例，支持回调函数，回调无参数；销毁后可通过init初始化重新启用。
销毁后将不能再使用删除功能以及add、remove、clear和update方法。
-
<div id="insDestroy"></div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="btnDestroy">销毁</a> <a href="###" class="ax-btn ax-primary" id="btnInit">初始化</a> -
let insDestroy = new axTags('#insDestroy', { content: '菲律宾,波兰,荷兰,印度', removable: true, }), btnDestroy = document.querySelector('#btnDestroy'), btnInit = document.querySelector('#btnInit'); btnDestroy.onclick = function () { insDestroy.destroy(function () { alert('销毁了实例！') }); } btnInit.onclick = function () { insDestroy.init(); }
在创建实例的时候会自动添加到全局实例合集当中；如果填写了实例名insName，那么可通过axInstance方法进行销毁实例。关于axInstance使用方法请点击这里。
-
<div axTags='insName:"big",content:"中国,新加坡,澳大利亚",removable:true'></div> <div class="ax-break"></div> <div axTags='insName:"small",content:"俄罗斯,印度,美国",removable:true'></div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="destroyBig">销毁big实例</a> <a href="###" class="ax-btn ax-primary" id="destroySmall">销毁small实例</a> <a href="###" class="ax-btn ax-primary" id="viewAll">查看实例合集</a> <a href="###" class="ax-btn ax-primary" id="initAll">重新启用</a> -
let destroyBig = document.querySelector('#destroyBig'), destroySmall = document.querySelector('#destroySmall'), viewAll = document.querySelector('#viewAll'), initAll = document.querySelector('#initAll'); destroyBig.onclick = function () { axInstance.destroy('big'); } destroySmall.onclick = function () { axInstance.destroy('small'); } viewAll.onclick = function () { //只查看有name的实例合集 console.log(axInstance.data.filter(i => i.name && i.type === 'tags')); } initAll.onclick = function () { //重新初始化以启用 let items = axInstance.data.filter(i => (i.name === 'big' || i.name === 'small') && i.type === 'tags'); items.forEach(i => { i.instance.init(); }); }
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit初始化后执行，无参数onAdd/add打开窗口前执行，支持一个参数，即新增项onRemove/remove窗口隐藏前执行，支持两个参数，即删除项（数组）和删除项对应的索引（数组）onUpdate/update参数更新前执行，无参数onClear/clear全部清除前执行，无参数onDestroy/destroy销毁后执行，无参数
演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。
-
<div id="insOn"></div> <div class="ax-break"></div> <a href="###" class="ax-btn ax-primary" id="addOn">增加</a> <a href="###" class="ax-btn ax-primary" id="removeOn">删除</a> <a href="###" class="ax-btn ax-primary" id="settingOn">更新参数</a> <a href="###" class="ax-btn ax-primary" id="clearOn">全部删除</a> <a href="###" class="ax-btn ax-primary" id="destroyOn">销毁</a> <a href="###" class="ax-btn ax-primary" id="initOn">初始化</a> -
let insOn = new axTags('#insOn', { content: '菲律宾,波兰,荷兰,印度', removable: true, onInit: () => { console.log('初始化了！') } }), addOn = document.querySelector('#addOn'), removeOn = document.querySelector('#removeOn'), settingOn = document.querySelector('#settingOn'), clearOn = document.querySelector('#clearOn'), destroyOn = document.querySelector('#destroyOn'), initOn = document.querySelector('#initOn'); addOn.onclick = () => { insOn.add('中国,马来西亚'); } removeOn.onclick = () => { insOn.remove('波兰,印度'); } clearOn.onclick = () => { insOn.clear(); } settingOn.onclick = () => { insOn.update({ content: '意大利,巴西,俄罗斯,印度', theme: 'danger', }); } destroyOn.onclick = () => { insOn.destroy(); } initOn.onclick = () => { insOn.init(); } insOn.on('add', () => { console.log('增加了！'); }).on('remove', () => { console.log('删除了！'); }).on('clear', () => { console.log('全部清空了！'); }).on('update', () => { console.log('参数更新了！'); }).on('destroy', () => { console.log('销毁了！') });
添加和删除劫持
参数onBeforeAdd是添加前监听函数，支持一个参数即当前添加的label文本；通过onBeforeAdd参数可劫持input的add事件，使用该参数需要使用add方法手动添加tag。
参数onBeforeRemove是删除前监听函数，支持一个参数即当前要删除的项；通过onBeforeRemove参数可劫持input的remove事件，使用该参数需要使用remove方法手动删除tag。
-
<div id="insStop"></div> -
new axTags('#insStop', { content: '菲律宾,波兰,荷兰,印度', removable: true, edit: { enable: true }, onBeforeAdd: function (data) { console.log('当前数据：', data); new axDialog({ content: '确定新增tag么？', confirm: { callback: () => { this.add(data); } } }).show(); }, onBeforeRemove: function (data) { console.log('当前数据：', data); new axDialog({ content: '确定删除tag么？', confirm: { callback: () => { this.remove(data); } } }).show(); } });
参数选项
insName: '',//实例名称，对axInstance有用
content: '',//数据源，支持四种格式，包括：一个字符串/对象，一个字符串数组/一个对象数组
theme: '',//主题风格，可填primary、error、success、danger、warning、question、info、text、brief和ignore，默认为空
borderless: false,//是否显示边框，默认false显示，可选择true不显示
compact: false,//是否使用紧凑风格，默认false不使用，可选择true使用
text: false,//是否使用纯文本风格，默认false不使用，可选择true使用
corner: '',//设置单个Tag的圆角，可填round则是圆角，square则是方角，默认为空即是radiu:3px的小圆角
className: '',//其他样式类，多个用空格分开
removeNode: 'i',//关闭按钮的节点名，默认是i，可选择s
removable: false,//是否出现关闭按钮并可关闭，默认false不可关闭，可选择true可关闭
separator: ',',//字符串数据分隔符，默认为英文逗号
unique: false,//是否要求添加同唯一值的tag，默认fase不要求，可选择true要求
emptyShow: true,//是否显示空状态，默认true显示，可选择false不显示
emptyTip: '还没有创建标签！',//空提示
edit: {
enable: false,//是否显示行内input，默认false不显示，可选择true显示
addable: true,//是否可通过回车新增tag，默认true允许，可选择false不允许
deletable: true,//是否可通过del键删除tag，默认true允许，可选择false不允许
input: '',//默认行内编辑，如果需要外部编辑则需要设置该参数，可以是#id、.className、[name]或输入表单节点，通常是input或textarea
placeholder: '输入关键字...',//input的提示文字
},
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
onInit: '',//回调函数，初始化后执行，无参数
onBeforeAdd: '',//使用input添加之前执行，支持一个参数即添加label文本值
onAdd: '',//回调函数，添加后执行，支持一个参数即增加的对象
onBeforeRemove: '',//使用input删除之前执行，支持一个参数即删除的项
onRemove: '',//回调函数，删除后执行，支持一个参数即删除的对象
onUpdate: '',//回调函数，参数更新后执行，无参数
onUClear: '',//回调函数，清零新后执行，无参数
onDestroy: '',//回调函数，销毁后执行，无参数
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"