jQuery 플랫 스타일 드롭다운 상자 미화 플러그인 FancySelect 사용 가이드_jquery

FancySelect는 작고 실용적인 jQuery 드롭다운 상자 미화 플러그인입니다. 이 드롭다운 상자 미화 플러그인은 플랫 디자인 스타일을 채택하고 패션을 추구하는 개발자가 가장 먼저 선택하는 드롭다운 상자 미화 플러그인 중 하나입니다.

사용방법

HTML 구조

FancySelect는 사용이 매우 간단하며 jQuery 또는 Zepto와 함께 사용할 수 있습니다. 페이지에 일부 드롭다운 상자 구성 요소를 배치한 다음 .fancySelect() 메서드를 통해 드롭다운 상자 플러그인을 호출합니다. 드롭다운 상자의 옵션에 값이 없으면 플러그인은 일종의 자리 표시자 텍스트를 사용하여 이를 대체합니다.

기본적으로 FancySelect는 iOS 기기의 기본 드롭다운 상자와 스타일만 사용합니다. 이를 재정의하려면 드롭다운 상자 플러그인이 초기화될 때 forceiOS를 true로 설정하세요.

FancySelect는

요소의 data-class 속성을 통해 스타일을 지정할 수도 있습니다. 이 방법을 사용하여 선택 드롭다운 상자의 다양한 스타일을 지정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

<옵션 값="">항목 선택…
<옵션>로렘
<옵션>입섬
슬픔
앉아
<옵션>아메트

자바스크립트

코드 복사 코드는 다음과 같습니다.

$('.basic').fancySelect();

업데이트 옵션

플러그인이 초기화된 후 드롭다운 상자의 옵션이 수정된 경우, 드롭다운 상자에서 update.fs 메소드를 트리거하여 옵션 목록을 업데이트하도록 플러그인에 지시할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('');
mySelect.trigger('update.fs');

드롭다운 상자 활성화/비활성화

FancySelect 드롭다운 상자 플러그인은 초기화 후 자동으로 드롭다운 상자를 비활성화된 상태로 설정합니다. 드롭다운 상자의 상태를 재설정해야 하는 경우 선택 요소에서 활성화.fs 또는 비활성화.fs 메서드를 사용하여 수정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

첫 번째 옵션
두 번째 옵션

var mySelect = $('.my-select');
mySelect.fancySelect(); // 현재 html 속성으로 인해 비활성화되어 있습니다
//나중에…
mySelect.trigger('enable.fs'); // 이제 활성화되었습니다
//나중에…
mySelect.trigger('disable.fs'); // 이제 다시 비활성화되었습니다

개인화된 효과를 생성해야 하는 경우 옵션 옵션을 통해 HTML 문자열을 반환하는 TriggerTemplate 및 TriggerTemplate 메소드를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

백열등
CFL
할로겐

$('.bulbs').fancySelect({
optionTemplate: 함수(optionEl) {
          return optionEl.text() '
'; } })

드롭다운 상자 옵션이 변경되면change.fs 이벤트를 들을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

    첫 번째 옵션
    두 번째 옵션

var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
    $(this).trigger('change.$');
}); // FancySelect를 변경할 때 DOM의 변경 이벤트를 트리거합니다

관련 라벨：

jquery 下拉框

원천：php.cn

이전 기사：Node.js_node.js의 버퍼링 및 스트리밍 모듈에 대한 자세한 소개 다음 기사：JavaScript_기본 지식에서 Var의 중요성 분석

본 웹사이트의 성명

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

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...

에서 2024-04-05 09:26:49

0

1

1418

최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...

에서 2024-04-04 18:40:04

0

1

3528

북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...

에서 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...

에서 2024-04-04 12:53:48

0

1

303

관련 주제

더>

• jquery 플러그인이란 무엇입니까?
• jquery로 json을 조작하는 방법
• Jquery에서 요소를 삭제하는 방법
• jQuery hover() 메소드 사용
• jquery는 페이징 방법을 구현합니다.
• Jquery의 숨겨진 요소는 무엇입니까?
• jquery에서 강조표시되는 내용
• HTML을 TXT로

인기 추천

• js는 무슨 뜻인가요?
• js에서 문자열을 배열로 변환하는 방법은 무엇입니까?
• 자바스크립트를 사용하여 페이지를 새로 고치는 방법
• js 배열에서 항목을 삭제하는 방법
• sqrt 함수를 사용하는 방법

인기 튜토리얼

더>

관련 튜토리얼

인기 추천

최신 강좌

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1417567
• 
  PHP 입문 튜토리얼 1: 일주일 안에 PHP 배우기

  4258696
• 
  JAVA 초보자용 비디오 튜토리얼

  2484486
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  504168
• 
  PHP 제로 기반 입문 튜토리얼

  858805

• 
  최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)

  1417567 학습 시간
• 
  JAVA 초보자용 비디오 튜토리얼

  2484486 학습 시간
• 
  Little Turtle의 Python 학습에 대한 제로 기반 소개 비디오 튜토리얼

  504168 학습 시간
• 
  웹 프론트 엔드 개발에 대한 빠른 소개

  215346 학습 시간
• 
  PS 비디오 튜토리얼을 처음부터 마스터하세요

  878952 학습 시간

• 
  [웹 프런트엔드] Node.js 빠른 시작

  6559 학습 시간
• 
  해외 웹 개발 풀스택 강좌 총집합

  5110 학습 시간
• 
  Go 언어 실습 GraphQL

  4282 학습 시간
• 
  550W 팬 마스터가 JavaScript를 처음부터 차근차근 학습합니다

  635 학습 시간
• 
  기초 지식이 전혀 없는 초보자도 6시간 만에 시작할 수 있는 파이썬 마스터 모쉬

  21817 학습 시간

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

• [양식 버튼] jQuery 기업 메시지 양식 연락처 코드
• [플레이어 특수 효과] HTML5 MP3 뮤직 박스 재생 효과
• [메뉴 탐색] HTML5 멋진 입자 애니메이션 탐색 메뉴 특수 효과
• [양식 버튼] jQuery 시각적 양식 드래그 앤 드롭 편집 코드
• [플레이어 특수 효과] VUE.JS 모방 Kugou 음악 플레이어 코드
• [HTML5 특수 효과] 클래식 HTML5 푸시 박스 게임
• [그림 특수 효과] 이미지 효과를 추가하거나 줄이기 위해 jQuery 스크롤
• [사진 앨범 효과] CSS3 개인 앨범 커버 호버 확대/축소 효과

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

• [PNG 소재] 귀여운 여름 요소 벡터 자료(EPS+PNG)
• [PNG 소재] 4개의 빨간색 2023 졸업 배지 벡터 자료(AI+EPS+PNG)
• [배너 그림] 노래하는 새와 꽃 디자인 봄 배너 벡터 자료로 가득 찬 카트(AI+EPS)
• [PNG 소재] 황금 졸업 모자 벡터 자료(EPS+PNG)
• [PNG 소재] 흑백 스타일 산 아이콘 벡터 자료(EPS+PNG)
• [PNG 소재] 다양한 색상의 망토와 포즈를 갖춘 슈퍼히어로 실루엣 벡터 자료(EPS+PNG)
• [배너 그림] 플랫 스타일 식목일 배너 벡터 자료(AI+EPS)
• [PNG 소재] 9개의 만화 스타일의 폭발적인 채팅 거품 벡터 자료(EPS+PNG)

• [프런트엔드 템플릿] 가정 장식 청소 및 수리 서비스 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 신선한 색상의 개인 이력서 가이드 페이지 템플릿
• [프런트엔드 템플릿] 디자이너 크리에이티브 작업 이력서 웹 템플릿
• [프런트엔드 템플릿] 현대 엔지니어링 건설 회사 웹사이트 템플릿
• [프런트엔드 템플릿] 교육 서비스 기관을 위한 반응형 HTML5 템플릿
• [프런트엔드 템플릿] 온라인 전자책 쇼핑몰 웹사이트 템플릿
• [프런트엔드 템플릿] IT 기술로 인터넷 회사 웹 사이트 템플릿을 해결합니다.
• [프런트엔드 템플릿] 보라색 스타일 외환 거래 서비스 웹 사이트 템플릿

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개 부인 성명 Sitemap

© php.cn All rights reserved