Latest web development tutorials

jQuery를 모바일 슬라이더 양식

jQuery를 모바일 슬라이더 컨트롤

슬라이더는 숫자 범위에서 값을 선택할 수 있습니다 :


슬라이더를 만들려면 <입력 유형 = "범위"> 사용

예

<form method="post" action="demoform.php">
  <label for="points">进度:</label>
  < input type="range" name="points" id="points" value="50" min="0" max="100">
</form>

»시도

제한을 지정하려면 다음 속성을 사용하여

  • 최대 - 규정에서 허용하는 최대
  • 최소 - 규정 최소 허용
  • 단계는 -에 대한 법적 번호 간격을 지정합니다
  • 값 - 지정된 기본 값

팁 : 데이터 표시 값 = "true로의 진행의 값을 추가 할 수있는 버튼에 표시 할 경우 " 속성 :

예

<input type="range" data-show-value="true" >

»시도

팁 : 당신은 데이터 팝업 사용 = "true로 사용할 수 있습니다 (작은 창을 연주 유사) 슬라이드 버튼에 진행 표시 할 경우 " 속성 :

예

<input type="range" data-popup-enabled="true" >

»시도

팁 : 강조 표시된 슬라이더의 값을 강조 데이터 하이라이트를 추가하려면 = "true"로 :

예

<input type="range" data-hightlight="true" >

»시도

토글 스위치

변동이 정상적으로 사용되는 스위치 온 / 오프 또는 참 / 거짓 버튼 :


"flipswitch는"우리는 <= "체크 상자를"입력 유형>은을 사용하여 요소 및 스위치를 생성하기 위해 데이터 역할을 지정할 수 있습니다 :

예

<form method="post" action="demoform.php">
  <label for="switch">切换开关：</label>
    <input type="checkbox" data-role="flipswitch" name="switch" id="switch">
</form>

»시도

기본적으로,이 "On"과 "Off"에서 텍스트 스위치. 당신은 그것을 수정하는 데이터에 텍스트 및 데이터 오프 텍스트 속성을 사용할 수 있습니다 :

예

<입력 유형 = "체크 박스"데이터 = "flipswitch"이름 = "스위치"ID = "스위치"데이터에 텍스트가 = "참"데이터 오프 텍스트 = "거짓"-role>

»시도

팁 : "확인"스위치 상자를 사용하여 기본 옵션을 설정하는 속성 :

예

<input type="checkbox" data-role="flipswitch" name="switch" id="switch" checked >

»시도
예

더 많은 예제

간격 슬라이더
슬라이드 간격 값을 확인합니다.

슬라이더 스타일
슬라이더 스위치에 스타일을 설정합니다.