typeselect ui.typeselect

类型选择

<div class="ui-type-select">
    <ul class="type-ul ">
        <li class="type-li cur" data-val="1">
            <div class="option">your html here<i class="ico"></i></div>
        </li>
        <li class="type-li" data-val="2">
            <div class="option">your html here<i class="ico"></i></div>
        </li>
        <li class="type-li" data-val="3">
            <div class="option"> your html here<i class="ico"></i></div>
        </li>
    </ul>
    <input type="hidden" name="type" value="">
</div>

• 使用typeselect控件时不需要考虑样式问题
• 所有typeselect控件需遵循这样的一个结构

呈现样式

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

创建一个typeselect

使用接口 ui.typeselect 可以动态地创建一个类型选择控件

参数（以JS Object形式给出）：
    theme: 定义类型选择的样式
    name: input hidden标签name
    options: 类型选择列表
    [
        {
            cur: 是否当前选中 true或者false,只能有一个选项为true
            value: 选项对应的值
            content: 选项对应的html内容，可以是自定义的html，也可以是通过ui控件库新建的html
        },
        ...
    ]

示例代码:

//type select
var
    form = $("#js-form-typeselect"),
    ts1 = $("#js-put-select1"),
    ts2 = $("#js-put-select2"),
    ts3 = $("#js-put-select3");
//新建类型选择控件html(默认控件类型,一个选项占一行)
var typeselect1 = ui.typeselect.create({
    "theme": "",
    "name": "type",
    "options": [
        {
            "cur": true,
            "value": "1",
            "content": "your html here"
        },
        {
            "value": "2",
            "content": "your html here"
        },
        {
            "value": "3",
            "content": "your html here"
        }

    ]

});

ts1.replaceWith(typeselect1);
//新建类型选择控件html(双列类型,两个选项占一行)
var typeselect2 = ui.typeselect.create({
    "theme": "two-col",
    "name": "type",
    "options": [
        {
            "cur": true,
            "value": "1",
            "content": "your html here"
        },
        {
            "value": "2",
            "content": "your html here"
        },
        {
            "value": "3",
            "content": "your html here"
        }

    ]

});

ts2.replaceWith(typeselect2);

//新建类型选择控件html(三列类型,三个选项占一行)
var typeselect3 = ui.typeselect.create({
    "theme": "three-col",
    "name": "type",
    "options": [
        {
            "cur": true,
            "value": "1",
            "content": "your html here"
        },
        {
            "value": "2",
            "content": "your html here"
        },
        {
            "value": "3",
            "content": "your html here"
        }

    ]

});

ts3.replaceWith(typeselect3);

//绑定事件
ui.typeselect.init(form);