jquery实现select的美化

原创 2007年09月18日 23:08:00

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常用函数]

ajax, http://docs.jquery.com/Ajax/jQuery.ajax
filter, 用于在集合中过滤元素
hover, 用于设置元素响应mouseover和mouseleave

[jQuery插件]

Easing,http://jquery.com/plugins/project/easing
版权声明:本文为博主(@胡争辉)原创文章,未经博主允许不得转载。

相关文章推荐

jquery实现仿select列表的即时搜索及拼音搜索

这里提到select,其实不是select,而是用标签去仿造一个select,以实现对已有“option”的快速检索功能。 以标签代替select的选择框,以标签代替option标签。每个li标签附o...

用jquery实现省市select下拉框的替换

省市对应的实现: 更具选择的省份来确定市的内容 jsp代码: 省份 --请选择-- 福建 北京 山东 上海 县、市 ...

jquery实现select多选框的左右移动

无标题文档 /**  *动态的给左边的下拉列表创建选项  *具体情况可以从数据库读取数据动态创建选项  */ $(document).ready(function(){  ...

带省市区信息修改功能,需要先把省市区原数据select下拉显示,JQuery实现

修改之前可获取到省市区等对应的Id,传给修改信息页面,

Jquery实现select中option的增删改

Jquery实现select中option的增删改 $(function () { $("#Button1").click(function () { ...

jquery实现的拖拽效果,解决拖动速度过快时的会卡现象,select的遮挡问题和透明效果

我的html 代码 弹出层 点击这里,弹出层 这是标题 X 关闭 这是内容 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)