jQuery Knob – Tutorial and Example

jQuery 손잡이는 간단한 입력 필드를 멋진 모양의 노브로 바꾸는 다이얼 노브입니다 그것은 매우 쉽고 초 단위로 설정할 수 있습니다! 노브를 사용하려면 페이지에 jQuery와 노브

js 만 있으면됩니다png / jpeg 또는 CSS 필요 없음 노브는 사용자가 취향대로 노브를 사용자 정의 할 수 있도록 다양한 옵션 / 구성을 제공합니다 우리는이 비디오에서 그들 중 일부를 살펴볼 것입니다! 먼저 GitHub 노브로 라이브러리를 가져 오십시오 (아래 설명에서 링크) 필요한

js는 dist 폴더에 있습니다 jqueryknobminjs에 대한 링크를 복사하고 예제에 포함 할 것입니다

(우리는 Github에서 js 파일에 대한 링크를 보낼 수 없기 때문에 RawGit을 사용해야합니다) 이제 js 파일을 준비했습니다 다음으로 입력 필드를 정의하겠습니다 값 필드는 우리 노브의 기본값입니다

나는 지금 10으로 설정하겠습니다 입력 필드에 클래스 "다이얼"을 추가해 보겠습니다 노브를 시작하려면 jQuery 객체에서 knob ()을 호출하면됩니다 (귀하의 페이지에 jQuery를 포함시키는 것을 잊지 마십시오!) 손잡이가 여기 있습니다! 커스텀 노브에는 많은 옵션이 있습니다 예를 들어, 노브의 색상, 크기, 최소 및 최대 값을 설정할 수 있습니다 GitHub 페이지에서 이러한 옵션 사용하기 최소값과 최대 값을 설정해 봅시다 최소값과 최대 값을 전달하면됩니다 다음은 "angleOffset"으로 호의 범위를도 단위로 지정할 수 있습니다

픽셀 단위로 너비와 높이 설정 ( "px"필요 없음) 'displayInput'은 노브 중앙의 값 자리를 숨길 수있게합니다 'fgColor'는 노브 다이얼 막대 색상입니다 마지막으로, 노브를 사용하여 "릴리스"이벤트 핸들러를 지정할 수도 있습니다 사용자가 마우스에서 마우스를 놓을 때 수행 할 작업을 코딩 할 수 있습니다 현재 노브 값은 또한 함수로 전달 될 것입니다 시도 할 수있는 옵션 / 구성이 아직 많이 있다는 것을 잊지 마십시오

예를 들어 두께를 변경하거나 자바 스크립트로 손잡이 스타일을 동적으로 변경할 수 있습니다 시청 해 주셔서 감사합니다 원하시면 구독 해주세요 🙂