WEB开发网
开发学院网页设计JavaScript jquery实现select的美化 阅读

jquery实现select的美化

 2010-09-14 13:08:48 来源:WEB开发网   
核心提示:[示例代码] <html> <head> <script src="jquery-1.2.js"></script> <script> $(document).ready( function () { $("#select&quo

[示例代码]

<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>

Tags:jquery 实现 select

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接