비디오: HTML - 개발도구 2025
모든 jQuery UI 위젯은 CSS3 사용자 정의에 적합합니다. 변경 사항의 대부분은 내장 기능을 올바르게 사용하여 처리합니다. jQuery UI가 특수 효과를 생성하기 위해 위젯을 포맷하는 데 사용하는 CSS로 작업 할 수도 있습니다.
물론, 다른 것이 없다면 JavaScript를 사용하여 필요에 따라 실제 위젯 동작을 수정할 수 있습니다. 요점은 바퀴를 재발견하지 않고도 특정 필요 사항을 충족 시키도록 위젯 (예: 스피너)을 변경할 수 있다는 것입니다. 수정 작업은 일반적으로 짧고 쉽기 때문에 손으로 코딩해야하는 아이디어로 처음부터 다시 시작할 필요가 없습니다.
스피너는 여러 가지 방법으로 사용자 입력을 제어 할 수 있기 때문에 인기가 있습니다. 아이디어는 일반적으로 가변적 인 데이터를 제어하기위한 것이므로 드롭 다운 목록 상자와 같은 것을 사용할 수 없습니다. 스피너의 가장 흥미로운 용도 중 하나는 Ben Knows Code 사이트에 나와 있습니다.
이 경우 저자는 화살표의 위치를 이동하고 알파벳의 스피너를 만드는 등의 작업을 수행하는 방법을 보여줍니다. 여기에 사용 된 예제는이 사이트의 예제를 실행하지만 좀 더 직관적이고 이해하기 쉽습니다. 이 예제를 이해하면 Ben Knows Code 사이트로 이동하여 바로 예제를 이해할 수 있습니다.
스피너는 일반적으로 숫자 입력을 처리합니다. 그러나 대신 알파벳 입력이 필요할 수 있습니다. 영문자 입력을 만들려면, 실제로는 문자를 사용하지 않고 문자를 표시해야합니다. Spinner 위젯은 숫자로만 작동하기 때문입니다. 다음 예제는 표준 jQuery UI Spinner 위젯을 사용하고 숫자 대신 문자를 사용하도록 변환합니다. spinner ({// //에 대한 코드를 //로 설정하고 최대 값을 Z.에 대한 코드로 설정합니다. (min) { $ (function () {var CurrentValue = 65; var ThisSpinner = $ ("# Spinner": 65, max: 90, // 사용자가 회 전자를 회전하기 시작하면 값을 숫자로 변환하고 // 텍스트를보기에서 숨김 start: function (ui, event) {ThisSpinner, spinner ("value ", CurrentValue); $ ("# Spinner ") css ("color ","transparent ");} // 사용자가 회 전자의 회전을 멈 추면 // 숫자 값을 저장하고 // 문자로 변환합니다 화면에 텍스트를 표시 stop: function (ui, event) {CurrentValue = ThisSpinner, spinner ("value"); ThisSpinner.Spinner ("value", 문자열.CharCode (CurrentValue)); $ ("# Spinner"). css ("color", "green");}});});
코드는 스피너의 숫자 값을 추적하는 변수 CurrentValue를 작성하는 것으로 시작됩니다.값 65는 문자
A에 해당하는 숫자입니다. 따라서 스피너는 값 A로 시작하지만이 값을 숫자 65로 저장합니다.
A 및 Z의 숫자 값을 반영하는 최소값 및 최대 값을 설정해야합니다. 이 기술은 모든 문자 시리즈에서 작동 할 수 있습니다. 원하는 경우 소문자를 쉽게 사용할 수 있습니다. 그 문제에 대해서는 특수 문자를 포함한 모든 시리즈가 작동합니다. 열거 된 값에이 방법을 사용할 수도 있습니다. 가장 간단한 접근법은 시작 및 중지 이벤트에 대한 처리기를 제공합니다. 사용자가 두 개의 화살표 중 하나를 클릭하면 스핀 이벤트가 시작됩니다. 변경이 발생하고 스핀이 중지됩니다. 회 전자가 제대로 작동하려면 value 속성에 숫자 값이 있어야합니다.
코드는 value를 CurrentValue로 설정합니다. CurrentValue는 현재 선택된 문자와 동일한 코드입니다. 그러나이 시점에서 스피너에 숫자 값이 텍스트로 표시되어 산만 해집니다. 이러한 일이 발생하지 않도록 이벤트 핸들러는 텍스트 색상을 투명하게 설정하기 때문에 사용자는 실제로 화면상의 텍스트를 볼 수 없습니다.
숨겨진 항목의 색상을 설정하는 방법에 대해 생각하십시오. 일부 개발자는 숨겨진 항목의 색상을 배경색으로 설정하는 경향이 있지만 배경색은 변경 될 수 있습니다. 많은 참조가 실제로 언급하지는 않지만 인식 된 색상 중 하나는 투명하므로 전혀 색상이 없음을 의미합니다. 뭔가를 숨기려면 항상 투명한 개체를 사용하십시오.
Stop 이벤트 핸들러는 CurrentValue에 새로운 회 전자 값을 저장합니다. 그런 다음 숫자와 같은 숫자 (예: 65)를
A와 같은 문자로 변환합니다. 코드는 텍스트 색상을 녹색으로 변경하여 사용자가 화면상의 문자를 볼 수 있도록합니다. 이 예제는 또한 위젯 스타일 중 몇 가지를 변경합니다. 이러한 스타일은 jQuery UI CSS 파일의 일부로 나열됩니다. 이 경우 사용자가 둘 이상의 문자를 입력 할 수 없기 때문에 위젯의 너비가 문자 하나만 허용하도록 변경됩니다. 또한 텍스트 색상은 다음과 같이 녹색으로 변경됩니다:
. ui-spinner {너비: 45px;} ui-spinner-input {color: green;}
이벤트와 CSS의 조합을 사용하면 모든 jQuery UI 위젯을 사용하여 모든 종류의 사용자 정의 효과를 만들 수 있습니다. 당신이해야 할 일은 정말로 흥미로운 결과물을 만들기 위해 조금 실험 해 보는 것뿐입니다.
