手残党自己做个icon列表优化客户体验

想想如果用户想要自定义给图标，首先想到的是找个插件，找到个内部东西很多的外国的插件，嗯。。想想bootstrap里面有自己200多个图标，我可以直接利用的上。
大概思路是，bootstrap每个图标都有自己的class，我先存储了他所有的class，然后foreach给我的span，200个就两百个嘛，然后用户点了图标就利用jq自动将该图标的值赋给上面的input他的name就是icon然后提交我的表就记录了用户选择的icon。
说干就干，我这个手残后端党自己来先做个点击input出来图标，再点击隐藏图标，很简单，就是把图标放在一个div然后jq代码
html代码

<div class="row cl" >
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>图标：</label>
            <div class="formControls col-xs-6 col-sm-8">
                <input type="text" class="input-text" id="iconhold" onclick="layicon()" value="{$info.icon}" placeholder="" name="icon">
                <div class="formControls col-sm-12 icon" style="max-width:500px;display: none">
                    <volist name="icon" id="vo">
                        <button type="button" class="btn btn-default btn-lg" onclick="getinto('{$vo.code}')">
                            <span class="{$vo.code}"></span>
                        </button>
                    </volist>
                </div>
            </div>
        </div>

// 点击出现或者隐藏
function layicon(){
        var display =$('.icon').css('display');
        if(display == 'none'){
            $('.icon').css('display','block');
        }else{
            $('.icon').css('display','none');
        }
    }

然后图标出来了就是用户来点击图标触发方法，将该图标带的参数放到input里面去

    function getinto(id){
        $('#iconhold').val(id);
    }

然后重要来了200来个icon的class我要一个一个复制到我的表里面太烦了呀，要偷懒就得会偷懒，拾起了以前的采集，下面上代码

public function collect(){
        $url = "http://www.runoob.com/bootstrap/bootstrap-glyphicons.html";
        $html = file_get_contents($url);
        $patter = "/<td><span class=\"(.*)\"><\/span><\/td>/i";
        preg_match_all($patter,$html,$match);
        foreach($match[1] as $k=>$v){
            $data['code'] = $v;
            M('Icon')->add($data);
        }
    }

页面数据量不大没有用分页，浏览器转个两秒钟就OK了，嗯，这个功能就算是实现了，前端有待优化~~最后来张图
这里写图片描述

手残党自己做个icon列表优化客户体验

猜你喜欢