picedit ui.picedit

图片选择

<div class="ui-picedit st-sortable" data-option="{&quot;desc&quot;:true,&quot;link&quot;:true,&quot;sort&quot;:true,&quot;mode&quot;:3}" data-name="items">
    <div class="head"></div>
    <div class="content ui-sortable"></div>
    <div class="ctr">
        <a href="javascript:;" class="add js-add">
            <i class="ico">+</i>
        添加图片</a>
    </div>
    <input type="hidden" name="items" value="[]">
</div>

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

呈现样式

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

创建一个picedit

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

参数（以JS Object形式给出）：
    name: input hidden标签的name
    value: input hidden标签的value
    [
        {
            link: 当link_res_type为1表示链接url;当link_res_type为2、3时为空;当link_res_type为5、6时为相对地址
            link_res_id: 如果为文章或者页面时，表示文章或者页面id,
            link_res_type: 链接类型1表示URL,2表示文章,3表示页面,5表示电商,6表示论坛
            link_res_name: 链接名称
            image_id: 图片id
            image: 图片url地址
            text: 图片描述信息
        },
        ...
    ]   
    sortable: true或者false 是否启用排序编辑,默认启动
    edit_desc: true或者false 是否启用描述编辑,默认启动
    edit_link: true或者false 是否启用链接编辑,默认启动
    mode: 1到6,表示支持同时多选几张图片

示例代码:

//picedit
var form = $("#js-form-picedit"),
    placeholder = form.find(".js-put-picedit"),
    //生成对应的html
    linkselect = ui.picedit.create({
        name: "items",
        value: [],
        sortable: true,
        edit_desc: true,
        edit_link: true,
        mode: 3
    });

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