iconselect ui.iconselect

图标选择

<div class="ui-iconselect" data-name="icon">
    <ul>
        <li class="cur">
            <a data-icon="" href="javascript:;">
                <i class="font-ico">无</i>
                <i class="ico-selected"></i>
            </a>
        </li>
        <li>
            <a data-icon="" href="javascript:;">
                <i class="font-ico"></i>
                <i class="ico-selected"></i>
            </a>
        </li>
        <li>
            <a data-icon="" href="javascript:;">
                <i class="font-ico"></i>
                <i class="ico-selected"></i>
            </a>
        </li>
        <li>
            <a data-icon="" href="javascript:;">
                <i class="font-ico"></i>
                <i class="ico-selected"></i>
            </a>
        </li>
        <li>
            <a data-icon="" href="javascript:;">
                <i class="font-ico"></i>
                <i class="ico-selected"></i>
            </a>
        </li>
        <li>
            <a data-icon="" href="javascript:;">
                <i class="font-ico"></i>
                <i class="ico-selected"></i>
            </a>
        </li>
    </ul>
    <a href="javascript:;" class="add js-add">
        <i class="ico">+</i>
        <br>更多
    </a>
    <input type="hidden" name="icon" value="">
</div>

• 使用iconselect控件时会自动生成样式
• 所有iconselect控件需遵循这样的一个结构

呈现样式

具体效果可参见 http://www.kuaizhan.com/ui/ui-create

创建一个iconselect

使用接口 ui.iconselect 可以动态地创建一个图标选择控件

参数（以JS Object形式给出）：
    name: input hidden标签的name
    value: 当前选中的字体图片编码

示例代码:

//icon select
var form = $("#js-form-iconselect"),
    placeholder = form.find(".js-put-iconselect"),
    //生成html
    iconsel = ui.iconselect.create({
        name: "icon",
        value: ""
    });

placeholder.replaceWith(iconsel);
//绑定事件
ui.iconselect.init(form);
//数据处理
form.on("change", "input[name='icon']", function(e, value) {
    console.log(value);
});