jquery实现select的美化

3449人阅读 评论(0) 收藏 举报

jquery实现select的美化

[示例代码]

<html>
    <head>
        <script src="jquery-1.2.js"></script>
        <script>
            $(document).ready(
                function () {
                    $("#select").click (
                        function () {
                            var original =this;
                            $(original).blur();
                            $(original).css("visibility", "hidden");
                            var value = $(this).attr("value");
                            var topOffset = 0;
                            var alternate = document.createElement("div");
                            $(document.body).append(alternate);
                            {
                                var alternate_select = document.createElement("div");
                                $(alternate).append(alternate_select);
                                $(alternate_select).css("position", "absolute");
                                $(alternate_select).css("width", original.offsetWidth + "px");
                                $(alternate_select).css("height", original.offsetHeight + "px");
                                $(alternate_select).css("top", "0px");
                                $(alternate_select).css("left", "0px");
                                $(alternate_select).css("cursor", "pointer");
                                $(alternate_select).text(
                                    $($(original).children("option").filter(
                                            function (index) {
                                                return $(original).attr("value") === value;
                                            }
                                        )[0]
                                    ).text()
                                );
                                $(alternate_select).click(
                                    function () {
                                        $(original).css("visibility", "inherit");
                                        document.body.removeChild(alternate);
                                    }
                                );
                                $(alternate_select).hover(
                                    function (event) {
                                        $(this).css("background-color", "blue");
                                        $(this).css("color", "white");
                                    },
                                    function (event) {
                                        $(this).css("background-color", "inherit");
                                        $(this).css("color", "inherit");
                                    }
                                );
                            }
                            topOffset += alternate_select.offsetHeight;
                            {
                                $(original).children("option").each(
                                    function (index, element) {
                                        var alternate_option = document.createElement("div");
                                        $(alternate).append(alternate_option);
                                        $(alternate_option).css("position", "absolute");
                                        $(alternate_option).css("width", element.offsetWidth + "px");
                                        $(alternate_option).css("height", element.offsetHeight + "px");
                                        $(alternate_option).css("top", topOffset + "px");
                                        $(alternate_option).css("left", "0px");
                                        $(alternate_option).css("cursor", "pointer");
                                        $(alternate_option).text($(element).text());
                                        var option_value = $(element).attr("value");
                                        if (value === option_value) {
                                            $(alternate_option).css("font-weight", "bold");
                                        }
                                        $(alternate_option).click(
                                            function () {
                                                $(original).attr("value", option_value);
                                                $(original).css("visibility", "inherit");
                                                document.body.removeChild(alternate);
                                            }
                                        );
                                        $(alternate_option).hover(
                                            function () {
                                                $(this).css("background-color", "blue");
                                                $(this).css("color", "white");
                                            },
                                            function () {
                                                $(this).css("background-color", "inherit");
                                                $(this).css("color", "inherit");
                                            }
                                        );
                                        topOffset += alternate_option.offsetHeight;
                                    }
                                );
                            }
                            $(alternate).css("position", "absolute");
                            $(alternate).css("top", original.offsetTop + "px");
                            $(alternate).css("left", original.offsetLeft + "px");
                            $(alternate).css("width", alternate_select.offsetWidth + "px");
                            $(alternate).css("height", topOffset + "px");
                            $(alternate).css("background-image", "url(http://s.goumin.com/imgs/logo.gif)");
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <select id="select">
            <option value="1">option 1</option>
            <option value="2">option 2</option>
            <option value="3">option 3</option>
            <option value="4">option 4</option>
        </select>
    </body>
</html>

[jQuery官方网站]

http://jquery.com/

[jQuery下载地址]

http://docs.jquery.com/Downloading_jQuery

[jQuery当前版本]

http://docs.jquery.com/Release:jQuery_1.2

[jQuery相关论坛]

http://groups.google.com/group/jquery-en

[jQuery关键词]

jQuery

[jQuery特效]

jQuery淡入特效,http://docs.jquery.com/Effects/fadeIn

[jQuery选择器]

表单元素选择器, http://docs.jquery.com/DOM/Traversing/Selectors#Form_Selectors

[jQuery常用函数]

filter, 用于在集合中过滤元素
hover, 用于设置元素响应mouseover和mouseleave

[jQuery插件]

Easing,http://jquery.com/plugins/project/easing
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2845597次
    • 积分:41228
    • 等级:
    • 排名:第88名
    • 原创:1009篇
    • 转载:947篇
    • 译文:79篇
    • 评论:407条
    最新评论