ziqim/zhiqim_ui/document/tutorial/ui/form/select.htm

<#def title = "选择框样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "选择框样式是参考选择按钮设计出有颜色设定下拉列表的样式。选择框是一种下拉列表样式，目标是和表单选择按钮联动，实现跨浏览器且更美观的样式。"/>
<#def prevUrl = "radio.htm"/>
<#def nextUrl = "editable.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}

<script>
Z.onload(function()
{
    Z(".example").each(function(elem)
    {
        Z(elem).next("td > pre").html(Z(elem).htmlt());
    });
    
    Z(".example-link").each(function(elem)
    {
        var html = Z(elem).htmlt();
        html = html.trim();
        html = html.replace('&lt;span class="z-relative z-show-ib"&gt;', '');
        html = html.replace(' z-hidden', '');
        var ind = html.indexOf("div ");
        if (ind != -1){
            html = html.substring(0, ind-4);
        }
        
        Z(elem).next("td > pre").html(html);
    });
});

function doSelect(value)
{
    var $select = Z.Select.get("z-select-search");
    $select.setValue(value);
}
</script>

<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "form", "select")}

<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "选择框样式")}
<div class="content">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
    <p class="z-text-blue">选择框样式：</p>
    <p class="z-color-333" style="text-indent:38px;">
        选择框样式是参考选择按钮设计出有颜色设定下拉列表的样式。选择框是一种下拉列表样式，目标是和表单选择按钮联动，实现跨浏览器且更美观的样式。
    </p>
</div>

<#-- 一、简单选择按钮转选择框 -->
<div class="tutorial title">一、简单选择按钮转选择框</div>

<table class="z-table z-bordered z-pd10 z-relative-left">
<tr>
    <td colspan="2" class="zi-px18">1、原始选择按钮：</td>
</tr>
<tr>
    <td width="20%" class="zi-px18 example"><select class="z-select z-cyan" style="width:160px;">
        <option value="1">广东省</option>
        <option value="2" selected>湖南省</option>
        <option value="3" onclick="location.href='/index.htm'">江西省</option>
    </select>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td colspan="2" class="zi-px18">2、转化后的选择框（增加角色data-role="z-select"和颜色data-class="z-cyan"）</td>
</tr>
<tr>
    <td class="example-link"><select data-role="z-select" class="z-select z-float-left" data-class="z-select z-cyan" style="width:80px;">
        <option value="1">广东省</option>
        <option value="2">湖南省</option>
        <option value="3" onclick="location.href='/index.htm'">江西省</option>
    </select>
    <button class="z-button zi-bd-rd0 z-float-left z-font z-config"></button>
    <input class="z-input z-w30 z-float-left">
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td class="example-link" onclick="alert('向上冒泡');"><select data-role="z-select" class="z-select" data-class="z-select z-cyan" style="width:160px;">
        <option value="1">广东省</option>
        <option value="2">湖南省</option>
        <option value="3" onclick="location.href='/index.htm'">江西省</option>
    </select>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td class="example-link" onclick="alert('不向上冒泡');"><select data-role="z-select" class="z-select" data-class="z-select z-cyan" data-options="stop:true;" style="width:160px;">
        <option value="1">广东省</option>
        <option value="2">湖南省</option>
        <option value="3" onclick="location.href='/index.htm'">江西省</option>
    </select>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td class="example-link"><select class="z-select z-w160" data-role="z-select" data-class="z-cyan" data-options="itemWidth:159px;width:337px">
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="2">湖南省</option>
        <option value="2">湖南省</option>
        <option value="2">湖南省</option>
        <option value="2">湖南省</option>
        <option value="2">湖南省</option>
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="3" onclick="location.href='/index.htm'">江西省</option>
    </select>
    </td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 二、模糊输入匹配可选选择框 -->
<div class="tutorial title">二、模糊选择框</div>

<table class="z-table z-bordered z-pd10 z-relative-left">
<tr>
    <td>可模糊搜索的选择框：</td>
    <td class="example-link">AAAA
    <select id="z-select-search" data-role="z-select-search" data-options="maxHeight:100" class="z-select z-large z-w300" data-class="z-cyan">
        <option value="1">广东省</option>
        <option value="2">湖南省</option>
        <option value="2">湖南省</option>
        <option value="2">湖南省</option>
        <option value="2">湖南省</option>
        <option value="2">湖南省</option>
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="1">广东省</option>
        <option value="3" onclick="location.href='/index.htm'">江西省</option>
    </select>
    <a href="javascript:doSelect('2')">湖南省</a>
    <a href="javascript:doSelect('3')">江西省</a>
    </td>
    <td class="z-w60p"><pre class="z-text-preline"></pre></td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>

<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>
${zhiqim_com_footer()}