jquery_jquery를 기반으로 드롭다운 상자 미화 효과 구현-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jquery_jquery를 기반으로 드롭다운 상자 미화 효과 구현

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:16 PM

jquery 드롭다운 상자

우리가 일반적으로 사용하는 기본 선택 드롭다운 상자의 스타일 대부분은 수정할 수 없으므로 다양한 브라우저의 디자인 도면과 스타일이 매우 다릅니다. 그래서 미려하게 하기 위해 JQ를 사용하여 드롭다운 박스를 시뮬레이션하였고, 스타일을 마음대로 정의할 수 있습니다. 기본 드롭다운 상자는 백엔드 개발자가 쉽게 작동할 수 있도록 div에 숨겨져 있습니다.

렌더링은 다음과 같습니다.

HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>下拉框美化</title>
 <link href="css/style.css" rel="stylesheet"/>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/simSelect.js"></script>
 <script>
  $(function(){
  //下面是调用初始化语句，class名可通用，也可以ID单独定义
  $(".select-box").simSelect();    //什么参数都不带，默认样式。建议用这个，参数都写在div上面好了，比较直观。

  $(".slt-box01").simSelect({    //所有参数如下：
   maxNum: 4,           //最大下拉个数(超过则显示滚动条)，默认为5 
   width: 250,           //下拉框盒子宽度，默认为200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
   direction: "down",       //下拉方向，默认down，另一个是up
   disabled: false         //是否禁用，默认不禁，禁的话是true
  });

  $(".slt-box02").simSelect({    //举例：这里写参数，div上面也写参数的情况。结果是：会以div上面的为准
   maxNum: 4,           
   width: 250,           
   direction: "down"
  });

  $(".slt-box03").simSelect({    //禁用下拉框的话，有三种写法，任选。建议第二种：
   disabled: true,         //一：这里的参数写disabled:true 二：给div加class="disabled" 三：给原生select加disabled="true"
   width: 250           
  });

  $("#slt-box04").simSelect();   //ID单独定义。单个option可以禁用
 });
</script>
</head>
<body>
 <!-- wrap和table非必需,用于布局而已 --> 
 <div class="wrap">
  <table width="600">
   <tbody>
    <tr>
     <th>不带参数：</th>
     <td><div class="select-box">
      <select>
       <option>第一个选项</option>
       <option>第二个选项</option>
       <option>第三个选项</option>
       <option>第四个选项</option>
       <option>第五个选项</option>
       <option>第六个选项</option>
      </select>
     </div></td>
    </tr>
    <tr>
     <th>初始化语句写了参数：</th>
     <td><div class="slt-box01">
      <select>
       <option>第一个选项</option>
       <option>第二个选项</option>
       <option>第三个选项</option>
       <option>第四个选项</option>
       <option>第五个选项</option>
       <option>第六个选项</option>
      </select>
     </div></td>
    </tr>
    <tr>
     <th>在div上面写参数：</th>
     <td><div class="slt-box02 up" max-num="6" width="300">
      <select>
       <option>第一个选项</option>
       <option>第二个选项</option>
       <option>第三个选项</option>
       <option>第四个选项</option>
       <option>第五个选项</option>
       <option>第六个选项</option>
      </select>
     </div></td>
    </tr>
    <tr>
     <th>禁用的样式：</th>
     <td><div class="slt-box03">
      <select>
       <option>第一个选项</option>
       <option>第二个选项</option>
       <option>第三个选项</option>
       <option>第四个选项</option>
       <option>第五个选项</option>
       <option>第六个选项</option>
      </select>
     </div></td>
    </tr>
    <tr>
     <th>其中一个选项禁用：</th>
     <td><div id="slt-box04" class="up" max-num="4" width="200">
      <select>
       <option>第一个选项</option>
       <option>第二个选项超长超长超长超长长啊</option>
       <option disabled="true">第三个选项</option>
       <option>第四个选项</option>
       <option>第五个选项</option>
       <option>第六个选项</option>
      </select>
     </div></td>
    </tr>
   </tbody>
  </table>
 </div>
</body>
</html>

로그인 후 복사

CSS 스타일은 다음과 같습니다.

@charset "utf-8";
/* 简单reset */
body, ul, li {
  margin: 0;
  padding: 0;
}
body {
  font: 14px/24px Microsoft YaHei;
  color: #333;
}
ul { list-style: none; }
a {
  color: #333;
  outline: none;
  text-decoration: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}
/* 布局样式，非必须 */
.wrap {
  width: 600px;
  margin: 100px auto 0;
  padding: 20px;
  background-color: #d3f3dd;
}
.wrap table th, .wrap table td { padding: 8px 2px; }
.wrap table th {
  font-weight: normal;
  text-align: right;
}
/* 下拉框样式 必须 */
.select-style ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.select-style select { display: none; }
.select-style {
  position: relative;
  display: inline-block;
  font-family: Microsoft YaHei;
  color: #666;
  font-size: 14px;
  text-align: left;
  vertical-align: middle;
  z-index: 50;
}
.select-style.focus { z-index: 51; }
.select-style .slt-wrap {
  display: inline-block;
  width: 200px;
  border: solid 1px #d6d6d6;
  vertical-align: middle;
}
.select-style.focus .slt-wrap { border: solid 1px #53a8df; }
.select-style .slt-title {
  position: relative;
  display: block;
  padding: 0 36px 0 5px;
  line-height: 30px;
  height: 30px;
  text-decoration: none;
  background-color: #fff;
  word-break: break-all;
  color: #666;
  overflow: hidden;
}
.select-style .slt-title .slt-text {
  display: inline-block;
  height: 30px;
 *cursor: pointer;
}
.select-style .slt-title i {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../images/ico-select.png) 0 0 no-repeat;
  *cursor: pointer;
}
.select-style.focus .slt-title i { background-position: 0 -30px; }
.select-style.disabled .slt-title i { 
  background-position: 0 -60px;
  *cursor: default; 
}
.select-style .opn-box {
  display: none;
  position: absolute;
  left: 0;
  top: 31px;
  width: 100%;
}
.select-style.up .opn-box {
  top: auto;
  bottom: 31px;
}
.select-style .opn-box .opn-list {
  position: relative;
  _width: 100%;
  max-height: 130px;
  border: 1px solid #d6d6d6;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}
.select-style.focus .opn-box .opn-list { border-color: #53a8df; }
.select-style .opn-box .opn-list li {
  display: block;
  _width: 100%;
  padding-left: 5px;
  line-height: 26px;
  height: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.select-style .opn-box .opn-list .selected { background: #d4edfe; }
.select-style .opn-box .opn-list li:hover {
  color: #fff;
  background: #65abda;
}
.select-style .opn-box .opn-list li.disabled {
  color: #cacaca;
  background: #f0f0f0;
  cursor: default;
}
.select-style.disabled .slt-wrap { border: 1px solid #d6d6d6; }
.select-style.disabled .slt-title {
  color: #cacaca;
  background-color: #f0f0f0;
  cursor: default;
}
.select-style.disabled .slt-title .slt-text { *cursor: default; }
/* 下拉框样式 结束 */

로그인 후 복사

Jquery 코드는 다음과 같습니다.

/** 
 *  Name  : 美化下拉框 
 **/
 (function(jQuery){
   $.fn.simSelect = function (o) {
    o = $.extend({                  //设置默认参数 
      maxNum: 5,                  //最大显示5个
      width: 200,                  //默认宽200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
      direction: "down",              //向下拉，另一个是up  
      disabled: false                //不可用时为true
    },o || {});
    return this.each(function(){          //构造开始
      if($(this).children(".slt-wrap")){      //去重复  
        $(this).children(".slt-wrap").remove();
      };
      var $ts = $(this),
        $select = $ts.find("select").eq(0),
        wid = parseFloat($ts.attr("width")),
        num = parseFloat($ts.attr("max-num")),
        $sltWrap = $("<div class='slt-wrap'></div>").prependTo($ts),
        $sltTit = $("<a class='slt-title' hidefocus='true' href='javascript:void(0);'><span class='slt-text'></span><i></i></a>").prependTo($sltWrap),
        $sltText = $(".slt-text", $sltTit),
        $opnBox = $("<div class='opn-box'><ul class='opn-list'></ul></div>").appendTo($sltWrap),
        $opnList = $(".opn-list", $opnBox);
      $ts.addClass("select-style");                //增加一个class专门作为写css样式用
      $select.find("option").each(function(i){          //循环生成li标签  
        var text = $(this).text(),
          $li = $("<li title='"+text+"'>"+text+"</li>").appendTo($opnList);
        if(this.selected){
          $li.addClass("selected");
          $sltText.text(text).attr("title",text);  
        };
        if(this.disabled){
          $li.addClass("disabled");
          return;
        };
      });
      var $li = $("li",$opnList),
        hei = $li.height();
      if(wid){                          //设置宽度
        $ts.css("width",wid+"px");              //兼容IE6、7
        $sltWrap.css("width",wid-2+"px");                
      }else{
        $ts.css("width",o.width+"px");            //兼容IE6、7
        $sltWrap.css("width",o.width-2+"px");
      };  
      if(num){                          //设置高度
        $opnList.css("max-height", hei*num+"px");
      }
      else{
        $opnList.css("max-height", hei*o.maxNum+"px");
      };
      if(o.direction == "up"){                  //设置上、下拉方向
        $ts.addClass("up");
      };
      $li.on("click",function(){                  //li标签的点击事件，传给原生select
        var index = $opnList.find("li").index(this),
          text = $(this).text();
        if($(this).hasClass("disabled")){
          return false;
        };
        $(this).addClass("selected").siblings().removeClass("selected");
        $select.find("option").prop("selected",false).eq(index).prop("selected",true);
        $sltText.text(text).attr("title",text);
        $opnBox.hide();
        $ts.removeClass("focus");
      });
      $sltTit.on("click",function(e){               //a标签的点击下拉事件
        e.stopPropagation();                  //阻止a标签的点击冒泡    
        if($opnBox.is(":hidden")){
          $(".select-style .opn-box").hide();         
          $(".select-style").removeClass("focus");
          $opnBox.show();
          $ts.addClass("focus");
        }
        else{
          $opnBox.hide();
          $ts.removeClass("focus");
        }
      });
      $select.on("change",function(){                //原生select的点击事件，传给ul
        var index = $(this).find("option:selected").index(),
          text = $li.eq(index).text();
        $li.eq(index).addClass("selected").siblings().removeClass("selected");
        $sltText.text(text).attr("title",text);
      });
      $(document).on("click",function(e){              //点击其他地方收起下拉框
        if($opnBox.is(":visible")){
          $opnBox.hide();
          $ts.removeClass("focus");
        }  
      });
      if($select.prop("disabled") == true || o.disabled == true || $ts.hasClass("disabled")){
        $sltTit.off("click");                  //设置禁用状态
        $select.prop("disabled",true);
        $ts.addClass("disabled");
      };
    });
  };
})(jQuery);

로그인 후 복사

IE7과 호환됩니다(IE6도 실제로 작동하지만 옵션이 5개 이상인 경우 스크롤 막대가 없습니다).

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7672

Cakephp 튜토리얼

1393

C# 튜토리얼

1207

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 Feb 27, 2024 pm 06:45 PM

jQuery 참조 방법에 대한 자세한 설명: 빠른 시작 가이드 jQuery는 웹 사이트 개발에 널리 사용되는 JavaScript 라이브러리로, JavaScript 프로그래밍을 단순화하고 개발자에게 풍부한 기능을 제공합니다. 이 기사에서는 jQuery의 참조 방법을 자세히 소개하고 독자가 빠르게 시작할 수 있도록 구체적인 코드 예제를 제공합니다. jQuery 소개 먼저 HTML 파일에 jQuery 라이브러리를 도입해야 합니다. CDN 링크를 통해 소개하거나 다운로드할 수 있습니다.

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? Feb 28, 2024 pm 03:12 PM

jQuery에서 PUT 요청 방법을 사용하는 방법은 무엇입니까? jQuery에서 PUT 요청을 보내는 방법은 다른 유형의 요청을 보내는 것과 유사하지만 몇 가지 세부 사항과 매개 변수 설정에 주의해야 합니다. PUT 요청은 일반적으로 데이터베이스의 데이터 업데이트 또는 서버의 파일 업데이트와 같은 리소스를 업데이트하는 데 사용됩니다. 다음은 jQuery에서 PUT 요청 메소드를 사용하는 구체적인 코드 예제입니다. 먼저 jQuery 라이브러리 파일을 포함했는지 확인한 다음 $.ajax({u를 통해 PUT 요청을 보낼 수 있습니다.

심층 분석: jQuery의 장점과 단점 Feb 27, 2024 pm 05:18 PM

jQuery는 프런트엔드 개발에 널리 사용되는 빠르고, 작고, 기능이 풍부한 JavaScript 라이브러리입니다. 2006년 출시 이후 jQuery는 많은 개발자가 선택하는 도구 중 하나가 되었지만 실제 애플리케이션에서는 몇 가지 장점과 단점도 있습니다. 이 기사에서는 jQuery의 장점과 단점을 심층적으로 분석하고 구체적인 코드 예제를 통해 설명합니다. 장점: 1. 간결한 구문 jQuery의 구문 디자인은 간결하고 명확하여 코드의 가독성과 쓰기 효율성을 크게 향상시킬 수 있습니다. 예를 들어,

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? Feb 28, 2024 am 08:39 AM

jQuery를 사용하여 요소의 높이 속성을 제거하는 방법은 무엇입니까? 프런트엔드 개발에서는 요소의 높이 속성을 조작해야 하는 경우가 종종 있습니다. 때로는 요소의 높이를 동적으로 변경해야 할 수도 있고 요소의 높이 속성을 제거해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 요소의 높이 속성을 제거하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. jQuery를 사용하여 높이 속성을 연산하기 전에 먼저 CSS의 높이 속성을 이해해야 합니다. height 속성은 요소의 높이를 설정하는 데 사용됩니다.

jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. Feb 28, 2024 pm 09:06 PM

제목: jQuery 팁: 페이지에 있는 모든 태그의 텍스트를 빠르게 수정하세요. 웹 개발에서는 페이지의 요소를 수정하고 조작해야 하는 경우가 많습니다. jQuery를 사용할 때 페이지에 있는 모든 태그의 텍스트 내용을 한 번에 수정해야 하는 경우가 있는데, 이는 시간과 에너지를 절약할 수 있습니다. 다음은 jQuery를 사용하여 페이지의 모든 태그 텍스트를 빠르게 수정하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 먼저 jQuery 라이브러리 파일을 도입하고 다음 코드가 페이지에 도입되었는지 확인해야 합니다. &lt

jQuery를 사용하여 모든 태그의 텍스트 내용 수정 Feb 28, 2024 pm 05:42 PM

제목: jQuery를 사용하여 모든 태그의 텍스트 내용을 수정합니다. jQuery는 DOM 작업을 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발을 하다 보면 페이지에 있는 링크 태그(태그)의 텍스트 내용을 수정해야 하는 경우가 종종 있습니다. 이 기사에서는 jQuery를 사용하여 이 목표를 달성하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. 먼저 페이지에 jQuery 라이브러리를 도입해야 합니다. HTML 파일에 다음 코드를 추가합니다.

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? Feb 29, 2024 am 09:03 AM

jQuery 요소에 특정 속성이 있는지 어떻게 알 수 있나요? jQuery를 사용하여 DOM 요소를 조작할 때 요소에 특정 속성이 있는지 확인해야 하는 상황이 자주 발생합니다. 이 경우 jQuery에서 제공하는 메소드를 사용하여 이 기능을 쉽게 구현할 수 있습니다. 다음은 jQuery 요소에 특정 속성이 있는지 확인하기 위해 일반적으로 사용되는 두 가지 방법을 특정 코드 예제와 함께 소개합니다. 방법 1: attr() 메서드와 typeof 연산자를 // 사용하여 요소에 특정 속성이 있는지 확인

jQuery에서 eq의 역할 및 적용 시나리오 이해 Feb 28, 2024 pm 01:15 PM

jQuery는 웹 페이지에서 DOM 조작 및 이벤트 처리를 처리하는 데 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에서 요소를 선택하는 데 사용됩니다. 구체적인 사용 및 적용 시나리오는 다음과 같습니다. jQuery에서 eq() 메서드는 지정된 인덱스 위치에 있는 요소를 선택합니다. 인덱스 위치는 0부터 계산되기 시작합니다. 즉, 첫 번째 요소의 인덱스는 0이고 두 번째 요소의 인덱스는 1입니다. eq() 메소드의 구문은 다음과 같습니다: $("s

See all articles

jquery_jquery를 기반으로 드롭다운 상자 미화 효과 구현

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제