自定义 Select 控件


效果图

代码

<!DOCTYPE html>
<html>
    <head>
        <title>自定义 Select 控件</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <style type="text/css">

            .uSelect{
                list-style:none;
                margin:0px;
            }

            .panel{
                border: 1px solid Gainsboro;
                border-radius: 3px;
                padding: 5px;
            }

            .title{
                background-repeat: no-repeat;
                background-position:right center;
                background-image:url('upp.png');
                height:24px;
                font-size: 20px;
                margin-top: 2px;
                margin-right: 5px;
                cursor:pointer;
                -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
            }

            .uOption {
                background-repeat: no-repeat;
                background-position:3px center;
                height:24px;
                text-indent: 30px;
                line-height:30px;
                font-size: 18px;
                border: 1px solid Gainsboro;
                background-color: Gainsboro;
                border-radius: 6px;
                margin:5px;
                padding:6px;
                color: DeepSkyBlue;
                margin-left: -40px;
                cursor:pointer;
                -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
            }

            .Selected{
                background-image:url('checked.png') ;
            }

            .UnSelected{
                background-image:url('unchecked.png');
            }

        </style>
        <script src="jquery-2.1.1.js"></script>
        <script>
            $(document).ready(function(){
                $('.uOption').addClass('UnSelected');
                $('.uOption').click(function(){
                    if($(this).hasClass('Selected')){
                        $(this).removeClass('Selected').addClass('UnSelected');
                    }else{
                        $(this).removeClass('UnSelected').addClass('Selected');
                    }
                });

                $('.title').click(function(){
                    $('.uSelect').slideToggle();
                });
            });
        </script>
    </head>
    <body >
        <div class="box">
            <div class="panel">
                <div class="title">Product Category</div>
                <ul class="uSelect">
                    <li class="uOption">Product1</li>
                    <li class="uOption">Product2</li>
                </ul>
            </div>
        </div>
    </body>
</html>

知识共享许可协议
《自定义 Select 控件》 常伟华 创作。
本作品采用知识共享署名-相同方式共享 4.0 国际许可协议 | 3.0 中国大陆许可协议进行许可。

站内公告

A PHP Error was encountered

Severity: Core Warning

Message: PHP Startup: zip: Unable to initialize module Module compiled with module API=20060613 PHP compiled with module API=20090626 These options need to match

Filename: Unknown

Line Number: 0

Backtrace: