您的位置:首页 > Web前端 > JQuery

基于jQuery select下拉框美化插件

2015-02-14 00:00 906 查看
分享一款基于jQuery select下拉框美化插件。该插件适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:



在线预览 源码下载
实现的代码。
html代码:

<table>
        <tr>
            <td>
                <h2>
                    演示1</h2>
                <select name="drop1" class="ui-select">
                    <option value="">structure empty</option>
                    <option value="1">structure 1</option>
                    <option value="2">structure 2</option>
                    <option value="3">structure 3</option>
                    <option selected value="4">structure 4</option>
                    <option value="5">structure 5</option>
                    <option value="6">structure 6</option>
                    <option value="7">structure 7</option>
                    <option value="8">structure 8</option>
                    <option value="9">structure 9</option>
                    <option value="10">structure 10</option>
                    <option value="11">structure 11</option>
                </select>
            </td>
            <td>
                <h2>
                    演示2</h2>
                <select name="drop2" class="ui-select">
                    <option value="">structure empty</option>
                    <option value="1">structure 1</option>
                    <option value="2">structure 2</option>
                    <option value="3">structure 3</option>
                </select>
            </td>
            <td>
                <h2>
                    演示3</h2>
                <select name="drop3" class="ui-select" disabled="disabled">
                    <option value="0">structure empty</option>
                    <option value="1">structure 1</option>
                    <option value="2">structure 2</option>
                    <option value="3">structure 3</option>
                </select>
            </td>
            <td>
                <input type="reset" value="Reset" />
                <input type="submit" value="Send" />
            </td>
        </tr>
    </table>
    </form>
    <form action="" method="get">
    <table>
        <tr>
            <td>
                <h2>
                    Select 演示</h2>
                <select name="drop1" class="ui-select">
                    <option value="">structure empty</option>
                    <option value="1">structure 1</option>
                    <option value="2">structure 2</option>
                    <option value="3">structure 3</option>
                    <option selected value="4">structure 4</option>
                    <option value="5">structure 5</option>
                    <option value="6">structure 6</option>
                    <option value="7">structure 7</option>
                    <option value="8">structure 8</option>
                    <option value="9">structure 9</option>
                    <option value="10">structure 10</option>
                    <option value="11">structure 11</option>
                </select>
            </td>
            <td>
                <h2>
                    Select 演示</h2>
                <select name="drop2" class="ui-select">
                    <option value="">structure empty</option>
                    <option value="1">structure 1</option>
                    <option value="2">structure 2</option>
                    <option value="3">structure 3</option>
                </select>
            </td>
            <td>
                <h2>
                    Select 关闭演示</h2>
                <select name="drop3" class="ui-select" disabled="disabled">
                    <option value="0">structure empty</option>
                    <option value="1">structure 1</option>
                    <option value="2">structure 2</option>
                    <option value="3">structure 3</option>
                </select>
            </td>
            <td>
                <input type="reset" value="Reset" />
                <input type="submit" value="Send" />
            </td>
        </tr>
    </table>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: