20HUI - 标签组件（hui-tags）

效果图

dom结构

    
运营
    
设计
    
前端
    
平面

使用 hui.tags(domId, callback)将标签可选化

功能：将指定元素下的标签转换为可选择标签； 参数：1、ID选择器（.hui-tags 所在dom元素的id） 2、点击标签后回调函数 返回：无

使用 hui.getTagsData(domId) 获取选中的标签

功能：获取指定标签组内的选中标签的文本和值； 参数：ID选择器（.hui-tags 所在dom元素的id） 返回：数组形式的选中值【没有选中的标签返回 false】

代码

HUI




    

    HUI 标签组件


    

        

        
普通标签
        

    
    

        
运营
        
设计
        
前端
        
平面
    
    

        

        
圆角标签
        

    
    
    /* 标签颜色改变 */
    .greenTags > div{border-color:#31A990; color:#31A990;}
    
    

        
php
        
HTML
        
css
        
Node.js
    
    

        

        
可选择标签
        

    
    

        
点击选择
        
橄榄球
        
篮球
        
足球
        
网球
        
乒乓球
        
羽毛球
    
    

        获取选中标签的内容和值
    



/*
 * hui.tags()
 * 函数第2个参数为可选参数【标签状态切换的回调函数】，可以根据实际情况决定是否完善
 */
hui.tags('#tags1', function(){
    var tagData = hui.getTagsData('#tags1'); 
    console.log(JSON.stringify(tagData));
});
//按钮点击事件
hui('#btn').click(function(){
    var tagData = hui.getTagsData('#tags1'); 
    console.log(JSON.stringify(tagData));
    hui.alert('请观察控制台');
});