doncare-ui
/
select.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Select美化</title>
<link href="assets/css/doncare.css" type="text/css" rel="stylesheet" />
<link href="assets/css/doncare.frame.css" type="text/css" rel="stylesheet" />
<link href="assets/font/icon200.css" type="text/css" rel="stylesheet">
<!--[if lt IE 8]>
<link href="assets/font/icon200ie7.css" type="text/css" rel="stylesheet">
<![endif]-->
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/doncare.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.page.js" type="text/javascript" defer></script>
<script src="assets/js/doncare.frame.js" type="text/javascript" defer></script>


<!-- load plugin: vselect -->
<link href="assets/plugin/vselect/jquery.vselect.css" type="text/css" rel="stylesheet" />
<script src="assets/plugin/vselect/jquery.vselect.min.js" type="text/javascript" defer></script>


<script type="text/javascript">
$(function(){
    $("#select1").vselect();
    $("#select-top").vselect({
        direction: "top"
    });
    $("#select-center").vselect({
        direction: "center"
    });
    $("#select-bottom").vselect({
        direction: "bottom"
    });
    $("#select-more").vselect();
    $("#select-multiple").vselect({
        selectedValue: 0
    });
    $("#select-group").vselect();
});
</script>
</head>
<body>
<div id="header" class="header">
    <div class="header-left">

    </div>
    <div class="header-option">
        <a href="javascript:;" onclick="DC.page.open('dropdown.html');" ><i class="icon-sign-left"></i>下拉菜单</a>
        <a href="javascript:;" onclick="DC.page.open('modal.html');" ><i class="icon-sign-right"></i>对话框</a>
    </div>
</div>
<div id="main" class="main">
    <div class="block transparent">
        <div class="block-main">
            <h3>一般的select是这样的</h3>
            <hr />
            <p>
                <select>
                    <option value="">请选择</option>
                    <option value="">按时都分给回家看了去玩儿体育i哦朋</option>
                    <option value="">自行车v不能马上都分给回家看了</option>
                </select>
            </p>

            <div class="gap20"></div>

            <h3>初步美化过的select是这样的</h3>
            <hr />
            <form action="" class="form-inline">
                <p>
                    <select class="select">
                        <option value="">请选择</option>
                        <option value="">按时都分给回家看了去玩儿体育i哦朋</option>
                        <option value="">自行车v不能马上都分给回家看了</option>
                    </select>
                </p>
            </form>

            <div class="gap10"></div>

            <h3>深度美化的select登场！</h3>
            <hr />
            <p>
                <select id="select1">
                    <option value="0">请选择</option>
                    <option value="1">按时都分给回家看了去</option>
                    <option value="2">自行车v不能马上都分</option>
                </select>
                &lt;- 快来点我
            </p>

            <div class="gap10"></div>

            <div class="code-block">
                <pre>
&lt;select id="select1"&gt;
    &lt;option value="0"&gt;请选择&lt;/option&gt;
    &lt;option value="1"&gt;按时都分给回家看了去&lt;/option&gt;
    &lt;option value="2"&gt;自行车v不能马上都分&lt;/option&gt;
&lt;/select&gt;

&lt;script type="text/javascript"&gt;
$(function(){
    $("#select1").vselect();
});
&lt;/script&gt;</pre>
            </div>
        </div>
    </div>

    <div class="block transparent">
        <div class="block-main">
            <h3>上面的Select叫做vselect</h3>
            <hr />
            <a href="http://visvoy.github.io/vselect/" class="btn" target="_blank"><span><i class="icon-global"></i>访问vselect的主页 http://visvoy.github.io/vselect/</span></a>
        </div>
    </div>

    <div class="block">
        <div class="block-main">
            <h3>Vselect的各种特性</h3>
            <hr />
            <div class="gap20"></div>
            <select id="select-top">
                <option value="0">向上弹出</option>
                <option value="1">我是路人的马甲</option>
                <option value="2">我是一个围观的路人</option>
            </select>
            &nbsp;
            <select id="select-center">
                <option value="0">中心弹出</option>
                <option value="1">我是路人的马甲</option>
                <option value="2">我是一个围观的路人</option>
            </select>
            &nbsp;
            <select id="select-bottom">
                <option value="0">向下弹出[默认]</option>
                <option value="1">我是路人的马甲</option>
                <option value="2">我是一个围观的路人</option>
            </select>
            <div class="gap30"></div>
            <select id="select-more">
                <option value="0">自动扩展select面板尺寸</option>
                <option value="1">我是路人的马甲</option>
                <option value="2">我是一个围观的路人</option>
                <option value="3">我是一个围观的路人3</option>
                <option value="4">我是一个围观的路人4</option>
                <option value="5">我是一个围观的路人5</option>
                <option value="6">我是一个围观的路人6</option>
                <option value="7">我是一个围观的路人7</option>
                <option value="8">我是一个围观的路人8</option>
                <option value="9">我是一个围观的路人9</option>
                <option value="10">我是一个围观的路人10</option>
                <option value="11">我是一个围观的路人11</option>
                <option value="12">我是一个围观的路人12</option>
            </select>
            &nbsp;
            <select id="select-multiple" multiple>
                <option value="0" selected>多选支持</option>
                <option value="3">服务器接收的格式1|^|2|^|3...</option>
                <option value="1">我是路人的马甲</option>
                <option value="2">我是一个围观的路人</option>
            </select>
            <div class="gap30"></div>
            <select id="select-group">
                <optgroup label="男性">
                    <option value="0">多标签支持</option>
                    <option value="1">Jacky</option>
                    <option value="2">Chan</option>
                    <option value="3">Andy</option>
                </optgroup>
                <optgroup label="女性">
                    <option value="10">哈利</option>
                    <option value="11">波特</option>
                    <option value="12">火焰女神</option>
                    <option value="4">Bruce</option>
                </optgroup>
                <optgroup label="中性">
                    <option value="20">哈利斯</option>
                    <option value="21">波特曼</option>
                    <option value="22">火焰斗神</option>
                </optgroup>
            </select>
        </div>
    </div>

    <div class="block">
        <div class="block-main">
            <h3>Vselect的调用公式</h3>
            <hr />

            <div class="gap20"></div>

            <div class="code-block">
                <pre>
$(function(){
    $("#xxx").vselect({
        // 在这里设置xxx的属性
    });
});</pre>
            </div>
        </div>
    </div>

    <div class="block">
        <div class="block-main">
            <h3>Vselect的属性大全</h3>
            <table class="table with-border effect-hover">
                <tr><th align="left">属性名</th><th nowrap>值类型</th><th>说明</th></tr>
                <tr>
                    <td>width</td>
                    <td>数字或百分比</td>
                    <td>控制vselect宽度，如果不设置，就使用vselect.css的预设宽度(200px)</td>
                </tr>
                <tr>
                    <td>默认选中</td>
                    <td>特性</td>
                    <td>支持原生的&lt;option selected></td>
                </tr>
                <tr>
                    <td>自动分列</td>
                    <td>特性</td>
                    <td>下拉框默认最大高度320px，当option太多，高度超过该值，将自动分成多列</td>
                </tr>
                <tr>
                    <td>maxHeight</td>
                    <td>数字</td>
                    <td>控制下拉框最大高度，默认320  (px)</td>
                </tr>
                <tr>
                    <td>maxColumn</td>
                    <td>数字</td>
                    <td>自动分列的最多列数，默认5  (列)，当达到最多列数, 仍然还有option没显示完, <br />vselect会增加下拉框的高度 (即无视maxHeight)</td>
                </tr>
                <tr>
                    <td>direction</td>
                    <td>top<br />bottom<br />center<br /></td>
                    <td>控制下拉框弹出方向，默认是center (水平不变，垂直扩大显示)</td>
                </tr>
                <tr>
                    <td>styleString</td>
                    <td>css</td>
                    <td>为这个vselect指定css，例如: "border-color:red;"</td>
                </tr>
                <tr>
                    <td>分标签</td>
                    <td>特性</td>
                    <td>支持原生的 &lt;optgroup label="xx"></td>
                </tr>
            </table>
            <a href="http://visvoy.github.io/vselect/" class="btn" target="_blank"><span><i class="icon-global"></i>详情请咨询 http://visvoy.github.io/vselect/</span></a>
        </div>
    </div>

</div>
</body>
</html>