linkselect ui.linkselect

链接选择

<div class="ui-linkselect" data-name="link_data">
    <div class="link-edit">
        <div class="col-type">
            <div class="select ">
                <div class="selected">
                </div>
                <input type="hidden" name="link_res_type" value="">
                <ul class="options">
                    <li class="" data-val="3">页面</li>
                    <li class="" data-val="2">文章</li>
                    <li class="" data-val="1">URL</li>
                    <li class="" data-val="5">电商</li>
                    <li class="" data-val="6">论坛</li>
                </ul>
            </div>
        </div>
        <div class="col-link">
            <div class="ui-placeholder"></div>
        </div>
    </div>
    <input type="hidden" name="link_data" value="{&quot;link&quot;:&quot;&quot;,&quot;link_res_id&quot;:0,&quot;link_res_type&quot;:0,&quot;link_res_name&quot;:&quot;&quot;}">
</div>

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

呈现样式

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

创建一个linkselect

使用接口 ui.linkselect 可以动态地创建一个链接选择控件

参数（以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: 链接名称
        },
        ...
    ]

示例代码:

var form = $("#js-form-linkselect"),
    placeholder = form.find(".js-put-linkselect"),
    //生成链接选择html
    linkselect = ui.linkselect.create({
        name: "link_data",
        value: {
            link: "",
            link_res_id: 0,
            link_res_type: 0,
            link_res_name: ""
        }
    });

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